最近、後輩の仕事に関する相談をプライベートで解決するようになってきた…。
今回相談受けたのは、Webサイトに回路図のような画像を載せて、かつ図の中のデータをサーバ内のデータに応じて可変にしたいというもの。 元々は、それをHTMLでやりたい！と言っていたんだけど、さすがにその解決策は思いつかなくて、持ち帰り宿題化。
結局、解決策として提示したのがタイトルにもあるSVGを使ったアプローチ。 別の解決策として、HTML 5のCanvasタグを使って、画像を描くってのもあったけど、 Canvasタグが良く分かってなかった＋SVGの方が目的には簡単だったので却下。
やったことは、InkscapeでSVGファイルを作って、それをJavaScriptで操作すること。 SVGファイルを作るのにInkscapeを使ったのは、SVGの規格標準なファイルが作れることと、 Illustratorとは違ってフリーで使えたから。
MacにInkscapeをインストール
InkscapeはX11アプリなので、単純にダウンロードしてインストールじゃ動かない。 まずは、X11のインストールが必要。と言っても、昔はMac OS XにX11も含まれてたと思うけど、 今は含まれていないのでXQuartzをインストール。
Xquartzは、XQuartzのWebサイトからダウンロードしてきて インストール。
続いてInkscapeのインストールだけど、手順は公式サイトが 詳しく書いているので割愛。
Inkscapeで画像を描く
画像のように、ごくごく簡単な画像をInkscapeで描く。今回は、「80w」の部分を可変にするイメージ。
で、可変にしたい部分は、プロパティでIDを付与する。これは自動的にも付与されるんだけど、自分で付けた方がわかりやすいと思う。
画像を描いたら、SVGファイルとして保存する。
JavaScriptから操作する
SVGファイルはXMLになっているので、テキストエディタで開いてHTMLへコピペする。
今回は、以下のようなHTMLを用意した。テキストボックスに値を入れて、「書き換え」ボタンを押すと画像が変わる。
画像マッピングテスト ワット数を書き換える：
JavaScriptでこれを操作するのは、こんなコード。jQuery使ってる。
$(document).on("click", "#wButton", function() {
console.log($("#textW01").text());
$("#textW01").text($("#textW01edit").val());
});
こんな感じで、結構簡単に画像とJavaScriptのコラボレーションができた。
と、感動して後輩に伝えたら、上司に良くわからないものを使うな、と言われたらしい。 自分が知らないものを「良くわからないもの」で片付けるのは老害というのでは…。
