動いて音が鳴るサイト
2003年頃から2007年頃まで、ブラウザの中は賑やかでした。企業系のサイトやプロモーションサイトなどは、Flashで作った派手な演出や音楽や効果音にあふれていて、ブラウザで映画館めぐりをしているような時代でした。
最初は個性が発散されていましたが、時間が経つにつれ演出が定型化してきて、その動作の重さや、いちいち面倒な奇抜なインターフェースに、本来のインターネットに求められる情報収集という目的が邪魔されてしまい、使いにくさを感じるユーザーも増えてきていました。
そして、Flashのブラックボックス的にパッケージされた仕組みは、悪用された場合のセキュリティの脆弱性を指摘されるようになり、個人情報などの安全性にシビアなスマートフォン市場を中心にFlash離れが進み、派手な動きを見せるWebサイトは消えていきました。
かつての時代のように、どのサイトもFlashという状況ではなくなりましたが、情報収集以外にも演出的な楽しさを提供するサイトのニーズが完全になくなったわけではありません。そういった演出のあるサイトが効果的な場合も多いですし、然るべきニーズに合わせて用意する事で、プロモーション効果としてもサイトの楽しさとしても、期待以上のものになるはずです。
Flash以外の方法
今の時代に、音を鳴らしたり、アニメーションさせる場合、Flashを使う事は望ましくありません。スマートフォンに採用されているiOS、android、その他のOSでは動作しませんし、PCでは標準では実行する事ができなくなり、Flashそのものも2020年に終了する事が決まりました。
では、どんな技術を使って音を鳴らしたりアニメーション演出を作れば良いのか？その具体的な手段と、実現可能な表現方法をまとめてみました。
Javascript
Javascriptはインターネットの利用が一般市場に広まる前から、HTMLと共に存在していました。1990年台の半ば、まだホームページに動きや音といった演出を持ち込むのが難しかった時代。Webサイトの開発達はJavascriptを使ってなんとかしてブラウザの中を賑やかそうと努力していました。しかし、当時のブラウザ技術では、実現は難しく。とてもまともに動くものではありませんでした。
そんな時に、Macromedia社によってShockwave(後にFlashの原型となった)という、ブラウザとは違うプログラム領域で動く技術が開発されました。
ShockwaveやFlashは、まだ未完成だったブラウザとは違うプログラム領域で動くため、安定してアニメーションや音声を使ったコンテンツを作る事ができました。
しかし、上記で書いたような理由からFlashは使われなくなり、PCやスマートフォンの高機能化によって、いつの間にか、ブラウザの技術もJavascriptの技術も向上し、派手な演出やサウンドもJavascriptによって安定したものを作れるようになりました。
Flashと、その同等レベルの安定度となったJavascript、どちらのほうがお勧めかと言うと、断然Javascriptです。開発には特別なツールは必要なく、テキストエディタでスクリプトを書き、サーバ上に設置するだけで実行できます。そしてブラウザやHTMLに直接干渉した処理を実行できるので、Flash以上に広がりのある表現が可能です。
HTML5 Canvas
アニメーション制作において無敵と思われていたFlashですが、苦手だった表現があります。それは線や点、丸といった図形の描画や、画像分析や、ドット単位から起こす画像描画です。Flashは形状データの組み合わせをアニメーションさせるツールでしたので、１から描くという処理はあまり得意ではなかったのです。
Flashは使って棒グラフや円グラフ、自由な図形の描画を行っているサイトはありましたが、得意そうに見えて、実はそこには本来Flashが苦手としている事を、開発者の努力で実現させていただけの事でした。
HTML5 Canvasとは、HTMLに標準で備わっている図形の描画機能です。線や点や円といったグラフや、ドット単位での画像分析や画像描画を実装するための技術が、とても開発しやすい仕組みで用意されています。プラグイン等を追加する必要もなく、標準のブラウザで実現可能です。
gifアニメーション
Javascriptも、HTML5 Canvasも、HTMLやスクリプトを組む必要があり、そういった知識を必要とします。少し敷居が高く感じる場合は、gifアニメの活用も検討してみてください。
コーディングやスクリプトが全くできなくても、グラフィックツールさえ使えれば、紙芝居のように並べたアニメーションデータを作成する事ができます。それがgifアニメーションという手法です。
IFrame Player API
撮影し、編集し、ネットにアップロード。ここまでの流れをいつも持ち歩いているスマートフォンを使って片手でできる時代になりました。面倒なスクリプトを組むためには技術者の援助が必要ですが、編集された映像なら個人でも作れてしまいます。
もし、自慢の映像をもっているのなら、Youtubeにアップロードし、それをホームページに貼り付けるだけでも、派手な映像や音響のあるWebサイトを作る事ができます。再生停止、シーク、タイムラインの制御、背景動画にするなど、細かいプログラム制御を行うためのIFrame Player APIも提供されています。
埋め込むだけでしたらIFrame Player APIは何かの登録手続きは必要なく、無料で使う事ができます。
YouTube Data API
上記でIFrame Player APIは登録手続きは必要なく無料で使えると書きました。しかし、Youtube APIで検索すると、登録が必要であり、ライセンス内容によっては有料になる可能性もあるといった情報がでてきます。
YouTube動画を再生するための様々な機能が提供されている、IFrame Player APIと、一般的にYoutube APIと言われている、YouTube Data APIは、別のものです。
YouTube Data APIは、動画の再生よりも、Youtubeの登録ユーザーに関する情報の取得や、公開されている動画や、自らが所有している動画に関する細かい情報を扱うためのAPIです。こちらは登録やライセンスなどの手続きを必要としますので、ご注意ください。
HTML5 audio要素
さっきからHTML5という表記があるけど、HTML4とかHTML3とかあるんですか？という疑問にお答えします。HTMLは1.0から始まり、2.0、3.0と進化してきました。そして現在はHTML5が標準となっており、古いHTML4を使った環境は望ましくないとされています。
現在では標準とされているHTML5では、mp3などの音声ファイルを用意すれば、画像ファイルを指定するのと同じような簡単なHTMLタグで指定するだけで、音声を再生する事ができます。
ただし、設置するのが簡単なだけに、できる事も、ほとんど音楽を視聴する程度の「再生するだけ」の事しかできません。然るべきタイミングに音楽を鳴らしたり、効果音を再生するためには、少し面倒なプログラム処理を用意する必要があります。
Web Audio API
HTML5 audio要素は、音楽を視聴する程度の事しかできませんが、複数の音楽を鳴らし分けたり、フェードで切り替えたり、ゲームやクイズ番組のように効果音を鳴らしたりするためには、更に新しい技術を使わなくてはなりません。その全てを実現できるのがWeb Audio APIです。
サウンドを自由に制御しながら再生するためには、Flashなどのような特定企業が開発したものをライセンス購入したり、Youtubeなどの外部サイトの力を借りるなどするしかありませんでした。しかし、もう今の時代なら、「サウンドくらい標準で鳴らしたいものだ」
と思うわけで、まだサウンドの再生は標準化されているわけではありませんが、標準化を目指すW3Cという団体がこのWeb Audio APIを開発しました。
まだ未対応のブラウザはありますが、「対応したブラウザのみ」という条件に絞り込んで、この機能を実装する事ができます。
特別に何か支払いをしたり、登録する必要はありませんので、標準化を目指すためにも、積極的に使っていきましょう。