[初級]簡単なインタラクティブコンテンツの作り方

Photo credit: yaph

2週間程前回の更新から間が空きました。期間未定でしばらくの間になりそうですが私小菅が本ブログの記事を書くことになりました。またお付き合いのほど宜しくお願い致します。

前回の記事でインタラクティブコンテンツはBtoBで受けが良いと説明しました。今回は簡単なサンプルを使ってどのように作るのかを具体的に実践して行きます。

真田家の家紋「6文銭」をインタラクティブにしてみる

サンプルと言っても、こう、ぱっと気を引く企画を立てるのも難しいものですよね。

今年は真田信繁こと真田幸村の主人公の大河ドラマ「真田丸」が人気になっていますので、この真田家の家紋「6文銭」が動くインタラクティブコンテンツを作ってみます。

この「6文銭」の由来は三途の川の渡し賃が6文なので決死の覚悟で物事に挑む事から家紋にした説があります。

あと小学館発行のビッグコミックスペリオールで「六文銭ロック」（作/武論尊 画/池上遼一）が2013年から連載中です。原作/作画の超ビックネームに圧倒されて読んでみたのですが、幼少期に主人公の真田幸村が織田信長に引き取られた後に海外で仲間たち（伊達政宗など）と冒険する胸躍る青春？ストーリーで最高にロックでした。

SVGの家紋データを準備する

Wikipediaの真田家ページに家紋画像データがあります。ライセンスを見るとpublic domain（パブリックドメイン）になっているのでこちらを拝借します。

真田氏：https://ja.wikipedia.org/wiki/%E7%9C%9F%E7%94%B0%E6%B0%8F

https://commons.wikimedia.org/wiki/File:Japanese_Crest_rokumonsen.svg

SVGデータになっていますので今回はこのデータをそのまま使います。

インタラクティブコンテンツでSVGデータが使われる理由

なぜインタラクティブコンテンツではアニメーションgifではなくSVGが使われるのでしょうか？

それはアニメーションの初期化と制御をCSSとJavaScriptできるためです。

SVGでチャート描画を行うライブラリのD3.jsを使ったサンプルを見てもらうとSVGが使われる理由が分かると思います。

データが固定されている単発のコンテンツであればGif画像や動画で良いですが、データが時期によって都度違うコンテンツや毎月データが更新されるような継続して利用されるインタラクティブコンテンツはこのようにプログラムを使った制御が求められてきます。

SVG+CSS3でアニメーション

まずは背景色を黒 > 赤 > 緑 > 青 > 黒とループさせてみます。以下のCodePenに設置したデモをご覧ください。

このデモではCSS3のkeyframesプロパティを利用して5秒間隔で無限ループしています。HTMLにSVGファイルの内容で必要なものを抜き出して展開しました。

要素のIDが分かりづらいので図説します。外枠背景と○の中の■を同じ物として扱い、各要素に同じアニメーションルール（fill）を適用しています。

ここではjavascriptを使わずにCSS3のみで動きを出しています。

SVG+JavaScriptでアニメーション

次はJavaScriptを使って一文銭ずつずらしながらアニメーションしてみる事にします。ここではSVGアニメーションライブラリの「vivus」を使います。

以下CodePenに設置したデモをご覧ください。一文銭の外枠がずれながらループしています。

ここで何をしているかと言うと、ライブラリのvivusを呼び出して200ミリ秒のディレイを付けてストローク（枠線）の描画を順番にしています。そして全ての描画が終端まで到達したら逆再生をしてループします。枠線の色も背景色と合わせてループするようにしています。

CSS3＋SVG＋JavaScriptでインタラクティブコンテンツ

真田家の家紋「六文銭」を使って簡単なインタラクティブコンテンツを作ってみました。色々準備しながら調査してデモを動かしてと所要2時間程でした。

興味を持たれて方はCodePenのアカウントを取得して今回作ったサンプル2つをフォーク（複製）して動かして見ると、もっと具体的にイメージ出来て行くと思います。

ページに変化を付けて飽きさせない

インタラクティブコンテンツは記事中のピンポイントでも利用できます。例えば年間レポートの要約を紹介する記事があったとします。読者を飽きさせないためにレポート中で利用する棒グラフをインタラクティブするとページ内で注目を引くポイントを作る事が出来ます。

企画から実装まで大変かと思いますが、作り切りではなく使い回しが出来ますしインタラクティブコンテンツは試して見る価値が大いにあります。

ただ、高品質かつ納期通りに開発・実装してくれる企業を見つけるのが難しいのが困り所です。

※本サイト(scripta.jp)内のコンテンツの転載を禁止します。
※始めたばかりのブログですが、公開記事をリライトしたものが転載されているとの連絡を複数受け取っています。引用の範疇を超えた転載記事を短期間で多数公開しているサイトへは法的措置を含めた対応を検討します。

テキストコンテンツの品質が低くて困っていませんか？高品質なテキストコンテンツが必要な方はSCRIPTAから調達して下さい。SCRIPTAのサービス紹介を見る。