インラインSVG

■補講　インラインSVGをJavaScriptで制御　本書の補習講義でもSVGについて少し解説しました。ここでは、JavaScriptを使ってHTMLファイル内に記述されたインラインSVGを制御してみます。　まず、本書のコラムで掲載したSVGをHTML5ドキュメント内に埋め込んだものが以下のものになります。IE9, Safari/Google Chrome, Firefoxで表示されます（Opera 11.5は未対応です）。 ---------------------------------------------------------------------------------------------------------------- ■HTML ---------------------------------------------------------------------------------------------------------------- インラインSVG ---------------------------------------------------------------------------------------------------------------- それでは、このSVGデータをJavaScriptで制御して図形の色を変更してみましょう。インラインSVGの場合、通常の要素と同様にID名を割り当てておけばdocument.getElementById()でアクセスできます。上記のようにID名が割り当てられていない場合にはdocument.getElementsByTagName()を使って要素にアクセスすることができます。 document.getElementsByTagName()を使ってrect要素を指定し、塗り潰された色を青色に変更するプログラムが以下のものです。ページが読み込まれると、すぐに図形の色を青色に変えています。 ---------------------------------------------------------------------------------------------------------------- ■HTML ---------------------------------------------------------------------------------------------------------------- インラインSVGを制御する ---------------------------------------------------------------------------------------------------------------- それでは次にタイマーを使って四角形の色を変化させてみましょう。四角形に設定されているカラーを読み出して処理するので、やや長めのプログラムになっています。 SVG図形に設定されている属性値を読み出すにはgetAttribute()メソッドを使います。このメソッドのパラメータに読み出したい属性名を文字列で指定します。例えばfillという属性に設定されている値を取得したい場合には以下のように指定します。 ele.getAttribute("fill"); この場合、#ffee77のように属性に設定されている文字列が読み出されます。以下のサンプルではfill属性に設定されているのが#rrggbb形式のカラーコードであることが前提となっています。もし、fill="red"のようにカラー名が指定されていると正しく動作しません。 ---------------------------------------------------------------------------------------------------------------- ■HTML ---------------------------------------------------------------------------------------------------------------- インラインSVGを制御する ---------------------------------------------------------------------------------------------------------------- ここまでは手書きのSVGデータなので非常にシンプルです。しかし、SVGデータを手書きで作成するのは、あまり現実的ではありません。SVGデータを作成するのであれば、やはり作図ツール／アプリケーションの手助けが必要になります。 SVGデータを作成できるアプリケーションとしてはInkscapeやAdobe Illustratorがあります。 ●Inkscape http://inkscape.org/index.php?lang=ja ●Adobe Illustrator http://www.adobe.com/jp/products/illustrator.html Inkscapeは標準の保存形式がSVGです。つまり作図すれば、そのままSVGデータができあがります。Adobe Illustratorは保存する際にSVGを選択すれば、SVG形式のテキストまたは圧縮された形式(svgz)になります。SVGは、もとはAdobe社が提唱したものですから、Adobe Illustratorとの親和性は高くなっています。以前はAdobe社がSVGプラグインを出していた時期もありました。ここではAdobe Illustrator CS5を使ってHTML文書内にSVGデータを入れてみます。Adobe Illustrator CS5より前のバージョンでもSVGデータを生成することができますが、かなり冗長なものになるので、おすすめできません。CS5以降を利用するのがベストです。 Adobe Illustratorを使って作図したらSVG形式で保存します。保存されたSVGファイルをテキストエディタで開きます。するとインラインSVGを制御する ---------------------------------------------------------------------------------------------------------------- それでは、Adobe Illustratorで作成したSVGデータをJavaScriptで制御してみましょう。アプリケーションが生成したSVGの場合、そのまま利用できる場合と手直ししないと使えない場合があります。より、細かく制御する場合には手直しは必須です。特定の図形だけを制御する場合には、その図形にID名を割り当てるなどJavaScriptから制御しやすくするのもよいでしょう。今回は手直しせず赤い円のサイズを大きくしていきます。これはcircle要素のr属性の値を大きくしていくだけです。なお、getAttribute()で読み出した半径は数値型ではなく文字型になります。このまま、数値を加算してしまうと予想とは違う結果になってしまいますので注意してください。 ---------------------------------------------------------------------------------------------------------------- ■HTML ---------------------------------------------------------------------------------------------------------------- Adobe Illustrator CS5で作成されたインラインSVGを制御する ---------------------------------------------------------------------------------------------------------------- 先ほどの方法では制御する図形を探し出すのが大変です。もっと簡単な方法はないものでしょうか？　実はAdobe Illustratorにはクリックイベントなどいくつかのイベント発生時にJavaScriptを呼び出す事ができます。 Adobe Illustrator CS5ではウィンドウメニューから「SVGインタラクティビティ」を選択します。すると、SVGインタラクティビティパネルが表示されます。図形に対してイベントを設定してみましょう。まず、イベントを設定する図形をクリックして選択します。その状態でSVGインタラクティビティパネルでイベントのポップアップメニューから設定したいイベント名を指定します。イベントを選択したら、その下にある欄にJavaScriptコードを入力します。なお、コードは自動的にダブルクオーテーションで囲まれるため、コード内で文字列を指定する場合にはシングルクオート(')を使うようにしてください。この欄には複雑なコードを書くよりも、あらかじめ用意されているJavaScriptの関数名を指定するのがベストです。コードを入力後にリターンキーを押すと図形にイベントが設定されます。【図】fig1.png SVGインタラクティビティパネルを使って呼び出すJavaScriptコードを設定する後は、これまでと同様にSVG形式で書き出します。書き出したSVGをHTML文書内にペーストします。これでできあがりです。実際のプログラムは以下のようになります。赤い四角形をクリックするとアラートダイアログが表示されます。 ---------------------------------------------------------------------------------------------------------------- ■HTML ---------------------------------------------------------------------------------------------------------------- Adobe Illustrator CS5でJavaScriptコードを埋め込む ---------------------------------------------------------------------------------------------------------------- SVGを制御する場合には、アプリケーションをうまく活用することで作成する労力を減らすことができます。なお、インラインSVGに関しては以下の連載でも解説していますので参考にしてみてください。 ●古籏一浩のJavaScriptラボ http://ascii.jp/elem/000/000/585/585608/ http://ascii.jp/elem/000/000/588/588081/ http://ascii.jp/elem/000/000/589/589429/