SVG

地図を動かす動画の作り方を説明します。 パソコンやスマホの無料アプリで作れます。いらすとやを動かす方法はこちら。ダンス動画の作り方はこちら。音声合成はこちら。 ほかの解説動画はこちら。 内容： １．9VAeきゅうべえのダウンロード ２．OpenClipart から日本地図を読み込む ３．ウィキペディアから大阪府の地図を読み込む ４．大阪府の外枠を消す ５．埋立て地を拡大 ６．夢洲の形を追加 ７．夢洲の色を変える。ふちを強調する ８．図形、矢印、文字をいれる ９．時間をひとコマにする 10．動画をMP４出力 解説動画の作り方 9VAeきゅうべえのダウンロード 画面キャプチャ方法 キャプチャ画像を…

経緯 やり方 Canvaでアイコンを作成してPNGファイルを保存する Inkscapeを使用してPNGファイルからSVGファイルを保存する 補足: InkscapeのDL方法 補足: SVGファイルのサイズ指定 サイト起動例 補足: Python、Node.jsでの作成方法 補足: favicon.icoの作成方法 まとめ 経緯 Docusaurusを使用して静的サイト(SSG)を作成する際にロゴをSVGで作成する必要がありました。 アイコン自体はCanvaで作成することができますが、SVGファイルでダウンロードする場合は有料版を使用する必要があります。 有料版は便利な機能がありますが、とりあ…

React / Next で SVG をコンポーネントとして使うことが多かったのだけれど、SEO が必要なメディアの制作で SVG に image のような alt が設定できないか気になって調べてみたメモ img タグを使う <img src="/path/to/logo.svg" alt="ロゴ" /> font-size で大きさを変えたり、color で色を変えたりする必要のない画像であれば通常の img タグを使えば、従来どおり画像として認識され alt 属性が SEO にも効く。ロゴなど動的な変化が必要ない SVG 画像ならこのパターンがシンプルで良さそう Inline SVG f…

概要：SVGの文書構造 プレゼンテーション スタイルをつける SVGがマイブーム？ SVGのスタイル どれを使うか 概要：SVGの文書構造 プレゼンテーション スタイルをつける いまさらのSVG。まずは便利なライブラリは使わず、できる限り生SVGで試していくつもり。スタイルの設定方法について書いた。 SVGがマイブーム？ なぜか今、SVGが自分の旬だったりしてるので備忘録？としてまとめています。 SVGのスタイル SVGはXML言語のひとつなので、構造とプレゼンテーションは分けるのが正解。 プレゼンテーションとは視覚的な提示方法、修飾のこと。 SVGにスタイルをつける方法にはいくつかあります。…

概要：SVGの本 ２回め入手する 紹介本を自分で買う 本を活用してよりSVGを理解しよう 概要：SVGの本 ２回め入手する SVGの解説本を時を経て２冊めを買った、おまぬけなお話 紹介本を自分で買う 前回にリンクを設置していたSVGエッセンシャルズ、自分も入手しました。 最近の本ではないので、あまり本の状態は期待していませんでしたが、 帯も付いていて透明シュリンクもされていて、たいへんきれいな本が届きました。 どのみちカバーをはずして読みますが、気持ちうれしいです。 www.w3.org developer.mozilla.org 本を活用してよりSVGを理解しよう SVGについては、以上のリ…

概要：SVGアニメーションを求めたらCSS？ まずはネットで検索？ 生SVG？ ライブラリもあることはある 概要：SVGアニメーションを求めたらCSS？ SVGに興味がわいて、今どきだとやはりアニメーション。SVGでアニメーションをする方法を探します。 まずはネットで検索？ SVGアニメーションを求めて、検索していますが、これがなかなか見つからないのです。 SVGアニメーションで検索にヒットしてくる大半が、実のところ、CSSアニメーションだったりするのです。 いや別に間違っていないのです。 SVG画像をCSSのanimationプロパティでアニメーションさせるので、SVGアニメーション、それで…

body { font-family: 'Arial', sans-serif; line-height: 1.6; margin: 20px; background-color: #000; color: #fff; } h1 { color: #fff; font-weight: bold; border-bottom: 2px solid #fff; padding-bottom: 5px; } h2 { color: #fff; } p { color: #fff; } ul { color: #fff; list-style-type: square; padding-left: 2…

フロントエンドエンジニアの嶌田です。 アイコンは、UIデザインにおいて欠かせないパーツです。弊社が提供する不動産情報サイトであるLIFULL HOME'Sでも、多数のアイコンが使われています。 ウェブページにアイコンを埋め込む手段は無数にあります。あなたはいくつ言えますか？ それぞれのメリットとデメリットについて説明できるでしょうか？ この記事では、LIFULL HOME'Sのフロントエンドで選ばれているアイコン表示方法およびその理由を説明します。その後、アイコンの管理や実装にまつわる不便な点をサービス横断的に解消するために作られた社内ツールと配信システムである、LIFULL Icon CDN…

どうも、株式会社YOUTRUSTのアプリ開発のリードエンジニアをやっているashdikこと朝日(YOUTRUST / X)です。 最近は、任天堂Switchで有名な「Slay the Spire」のボードゲーム版にどハマりしております。 Slay the Spire アセンション4クリア時 原作は一人用なのですが、ボードゲームでは4人までの協力が出来る様になっています。 僕は一人で、協力しています。 ...あれ、目から汗が。 ⚓️ 概要 気を取り直して、今回と次の記事では弊アプリで使っているパッケージとその用途を一挙にご紹介します。 中規模以上のアプリでどんなパッケージがどんな風に使われている…

9月16日にSafari 18.0がリリースされました。 リリースノートより注目の新機能を中心にご紹介します。 Safari 18.0は、iOS 18、iPadOS 18、visionOS 2、macOS 15、macOS Sonoma、およびmacOS Venturaで利用可能です。 アクセシビリティ 新機能 解決された問題 アニメーション 解決された問題 キャンバス 新機能 解決された問題 廃止 CSS 新機能 解決された問題 廃止 フォーム 新機能 解決された問題 HTML 解決された問題 画像 廃止 JavaScript 新機能 解決された問題 廃止 読み込み 解決された問題 メディア…

無料アプリ9VAeきゅうべえは、なめらかに動くアニメを作るために、他のアプリにないすごい点選択、変形機能をもっています。それを解説します。 パソコンやスマホでできます。いらすとやを動かす方法はこちら。音声合成はこちら。 ほかの解説動画はこちら。 内容： １．9VAeきゅうべえのダウンロード ２．9VAeの選択 ３．選択枠のハンドル ハンドルのドラッグ ハンドルのタッチ ハンドルメニューの操作 ４．角のメニュー（拡大/縮小・回転・回転中心） ５．辺のメニュー（のばす・曲げる・・） ６．中心のメニュー（移動・複製・消去） 図形を選んだ場合 共通項目（つながった図形選択・複製・・） 文字を１つ選んだ…

MICS-OPCAB-3 (LITA-LAD, -SVG-OM-PD) ボス執刀 久しぶりのボスの執刀。今日は肥満もあってかSVGに少し難渋。ただ終わってみたらいつもと同じくらいの時間で採れた。ここの人たちはSVG採取も早いので、どうやってる採るのか見てるんだけど、かなり乱暴。周りの組織を剥離するというより、引きちぎる感じ。こんなんで良いのだろうか？枝抜けがないとかinjuryしてないとかなら早いほうが良いのかな。長期的に見てどうなのか分からないけど。ということで自分も日本にいたときよりかなり乱暴にとってるんだけど、今のところ特に問題なし。でも日本に帰ったらこのやり方はやらない気がする。 吻合…

気づけば留学200日目。あっという間。もう帰りたい気持ちがかなり強いけど。 朝はなぜかボスの機嫌が悪く、カンファもなく終了。なんだったんだ？ OPCAB-3 (LITA-LAD, Ao-RA-CX, Ao-SVG-Dg) B先生執刀 心機能のかなり悪い人で術前からIABP。今日はRAとSVG採取。肥満だったのもあってSVGは少し手こずったけど、RAはいつも通り。心機能悪いのもあって、B先生はかなりナーバスになっていた。ので、色々と怒られた。イラっとしたけど、ここで悪ついても正論かましても、意味がないと思ってやめた。ただただYesmanになるだけ。とりあえず無事終了。 MICS-MVP, rem…

ChatGPTで音声入力 ChatGPTにPCから音声入力できるChromeの拡張機能はあるが、あんまり使い勝手が良くなかったので、連休で暇だったので作ってみた。 初めて作ったのでどうやってデバッグするのかとか最初わからなくて困ったが、慣れると結構簡単に作れることが分かった。 折角だからChrome拡張機能として一般公開でもしてみようかな。 作成する際には以下の記事を参考にしました。 Chrome 拡張機能のマニフェストファイルの書き方 #chrome-extension - Qiita Webページでブラウザの音声認識機能を使おう - Web Speech API Speech Recogn…

雛形の作成 stateを使うことを意識したモックを最初に作成しておく import { useState } from 'react'; import reactLogo from './assets/react.svg'; import viteLogo from '/vite.svg'; import './App.css'; export const Todo = () => { const [incompleteTodos, setInCompleteTodos] = useState(["TODOです1", "TODOです2"]) const [completeTodos, setC…

外部変形は データのやり取りをテキストファイルで行うので プログラム言語は 自由に選ぶことができます。図形は機能的かつシンプルなため、数多くのユーザーに受け入れられています。 line は線を引くコマンドです。 関数 do_line(x1, y1, x2, y2) do_line("#{x1} #{y1} #{x2} #{y2}") do_line([x1, y1, x2, y2]) do_line([[x1, y1], [x2, y2]]) do_line(x1:1, y1:2, x2:3, y2:4) do_line("x1:1, y1:2, x2:3, y2:4") do_line([x…

概要 TypeScriptが導入されたReactプロジェクトを作成した際、いろいろと要らないファイルが入っている。 まっさらな状態にするには、色々とファイルを削除し、不要な記述を削除する必要がある。 何を消せばいいかメモ 手順 1. TypeScriptプロジェクトを作成 D:\test>npx create-react-app hatena-test --template typescript 2. vs codeで開く D:\test>cd hatena-test プロジェクトに移動 D:\test\hatena-test>code . vs codeを起動 3. 要らないファイルを削除 …

続き。 最終的にPxに変換しているので値をそのまま描画したらいい感じに同じ図形が描画できた。当たり前と思うかもしれないが・・・ 最終系がこんな感じ。 SwiftUIとComposeの違いとしてmodifierの影響範囲が違うことがわかった。 Composeと同様にbackGroundを設定してからClipするとSwiftUIでは期待したようにClipされなかった。 SwiftUIではメソッドチェインされたものは順にViewが渡されて処理されるので、Clipを最後にするとその矩形で最終的にClipするようだ。(感覚的にはこちらの方がわかりやすい。) Composeでは.clipはあくまで大元のV…

アンティグア空港の到着ロビーに着いたのが12:30、次のBMN航空のモンセラット行きの便は17:00発とかなり時間があったので、まずは空港で昼飯を済ませることに。ほとんどのレストランは制限エリア内にあるとのことで、インフォメーションカウンターに教えてもらった別の建物にあるこちらの食堂Browniesに来てみました。 メニュー表は特段無くスタッフのおばちゃんが口頭で今日のメニューを教えてくれるスタイル。どうやら空港職員向けの食堂のようで、昼時ということもあって入れ替わり立ち替わりやってくる職員でかなり繁盛している様子でした。 私が選んだのはPork Stew, Spinach Rice, Col…