これは便利！SVGとJavaScriptを使った動的なコンテンツの作成

2021年10月3日プログラミング

ERR: no device found: 温度計

こんにちは！

週末にWebアプリの作成をやっているけど、なかなか時間がとれない、しずかなかずしです。

本日は、動的で面白いWebコンテンツを作る時にSVG（Scalable Vector Graphics)という技術とJavaScriptを使うととても便利だよ、というお話です。

作ったコンテンツは以下のようなモノです。

上の画像は、SVGで作ったものです。

なにが「動的」なのでしょう？

実は、画像の中の、温度、湿度は現在の私の書斎の実際の値です。部屋の温度・湿度が変われば表示が変わる。つまり、そこが動的なのです。

それでは、この画像がどのようにできているのかを紹介していきます。

1. SVGを使うと何ができるのか？
2. SVGをJavaScriptで操作する
3. SVG図形の作り方: Vectrを使う
4. 具体的な使用例
5. まとめ

SVGを使うと何ができるのか？

SVG（Scalable Vector Graphics)はその名の通り、「ベクター」を使ってWebコンテンツを表示する技術。HTMLと同様、テキストベースのマークアップ言語です。「ベクター」コンテンツとは何かというと、Webコンテンツの２次元の座標系で任意の点を線で結んで描いたような図形のことを言います。

下記の画像は、いくつかの点を直線で結んで描いた"SVG"という文字ですが、SVGで書かれています。

この図形を形成する実際のタグのひとつは、以下のようなものです。

<path d="M142.28 46.09C136.67 56.96 125.43 78.7 108.59 111.3L87.93 41.74" id="cLLY104Wf"></path>

pathというタグで構成されるSVG要素で"V"の部分を描いているコードです。HTMLの中にこれを埋め込む場合は<svg>というタグで囲われ、他のHTML要素と区別されます。もちろん、HTMLと同じように線の色や太さを変える、といった表現もできます。SVGは、まさに「HTMLの図形版」といった仕様になっているのです。

SVGをJavaScriptで操作する

実際にJavaScriptでSVGのDOMを操作してみます。基本的な考え方はHTMLで行うのと同じ感覚です。HTML＋JavaScriptでDOMを操作するプログラムを書いたことがある人であれば、直感的にわかるのではないでしょうか。マークアップのタグの記載時に、操作したい要素をIDなどで識別できるようにしておく。そして、その要素をJavaScriptの変数に入れDOMのAPIで属性を変更する。”アノ”流れです。

ソースコードの概念大枠を書いてみると以下のような感じになります。

<html>
...
  <body>
...
    <svg>
      <path d="..." id="cLLY104Wf"></path>
    ....
    </svg>
    <script>
     ....
      let e = document.getElementById('cLLY104Wf')
      e.setAttribute('visibility', 'hidden')
    </script>
  </body>
</html>

5〜8行目がSVGの内容です。操作したいpathタグはその中にあります。pathタグは、ベクターの一筆文に相当する要素。d属性に座標の位置やコマンドを記載することでさまざまな図形を構成できます。後のJavaScriptのgetElementById()関数でその要素を取り出せるようにid属性を指定するのもHTMLのDOMと同様ですね(11行目)。

取り出したSVGのElementに対して、setAttribute()関数をつかって属性を制御します。例えば、SVGの要素の’visibility’という属性に、’visible’ または、’hidden’を指定すると、それぞれ表示、非表示、をコントールできます。

以下のイメージで実際の動きを試してみましょう。

丸の目玉がSVGで書かれています。一見単なる画像のようにも見えますが、JavaScriptでちゃんと操作できます。

「Change!」と書かれたボタンを押してみて下さい。目玉が出たり、消えたりするのがわかるでしょう。図形に「動き」をつけられるSVGをならではの画像です。

SVG図形の作り方: Vectrを使う

さて、上記の丸目玉のようなSVG図形はどのように作るのでしょう？

pathのd属性の仕様を覚えて地道に座標計算をすることも、もちろん可能です。ですが、最終的な図形を想像しながら、いちいち座標計算をしてテキスト・エディターで打ち込むのは現実的ではありません。そこで、SVGを出力可能な図形作成ツールを使います。例えば、AdobeのイラストレーターはSVG出力可能です。こういった作図ツールを使えば、かんたんに複雑な画像を構築できます。

私の場合は、SVGを作れるWebベースのVectrというサービスを使いました。直感的な方法でベクターの図形を作図でき、作成した図形はSVGファイルとしてダウンロードできます。

SVGファイルは、HTML同様テキストの羅列ですのでVisual Studio Code などの開発ツールで編集できます。Vectrで作ったSVGを、テキスト・エディターで目的に応じてカスタマイズ。こうすれば、いちから座標計算して打ち込まなくても複雑な画像を描けるという訳です。

（2021年10月4日からVectr.comは大変更?が入るそうで、上記の画面イメージは、その前に作業しているところです）

具体的な使用例

この記事の一番はじめに登場した温度計の画像もVectrで作成しました。

このコンテンツの元となったのは温度・湿度が表示されていない以下の写真です。

この写真は、私の手元にあった、IoTガジェットのSwitchBot湿温度計をスマホで撮ったものです。撮影後、フォトレタッチして数字の部分を消し込んでいます。この写真をVectrに取り込み、写真の上に数字を構成する線（セグメント）をVectrのパス機能を使ってひとつひとつ作図しました。

そのような地味な作業の結果、完成したのが以下の画像です。

これをSVGファイルとしてVectrからダウンロード。残るはJavaScriptプログラミング！

温度の「数字」が正しく表示されるようSVGの各path要素をJavaScriptで出したり消したりします。プログラミングの基本的な考え方は前のセクションで説明した通り。エレメントの各要素をgetElementById()で取り出し、setAttribute()でvisibilityの調整という流れです。

表示する温度・湿度の値はどこから得るか？

そこは、以前の記事で説明したやりかたです。SwitchBotのAPIを使ってクラウド経由で取得した「本物の」温度・湿度を使います。