世界中のFlasherを震撼させた『HTML5 CANVASサイト』にみる、 HTML5グラフィックの実力と、3つの課題

このエントリーをはてなブックマークに追加

先週こんなニュースがありました。

アドビ、「Flash Player」の「Android 4.1」非対応を明言

これによって、スマホブラウザ向けのコンテンツにFlashを使うことは厳しくなりました。そこでスマホブラウザ向けの言語として注目を集めているのがHTML5です。HTML5とは、HTMLというWebサイトを開発する言語の新しいバージョンのことです。 今回は、そのHTML5で搭載された新しいタグ(HTMLではタグという要素でwebサイトを構築しています)「Canvas」を活用したサイトを紹介します。

HTML5のグラフィックをフルに活かした『HTML5 Canvas and Audio Experiment』

サイトを開いてしばらくすると、音楽とともにカラフルな円形の物体が飛び回り出します。 しばらく見ていると、複数の円でハートや大きな円を形作っていきます。

 画面内ではマウスカーソルに円が追従し、円をクリックすると”HTML5″と”love”という二つの言葉を含むTweetが表示されます。

このサイトはドイツの制作会社「9elements」が制作したHTML5の実験的なデモサイトです。このサイトを実現するのに重要な技術要素がHTML5のCanvasです。

ブラウザ上で物体を自由に描画できる

Canvasを使用すると、ブラウザ上で様々な形状の物体を描画することができるようになります。これを使って今回のサイトでは大量の、様々な大きさの円を表示させています。また、Canvasでは描画した物体を動かしたり、大きさや色を変化させることも簡単にできます。これらの特徴を使うことによって今回のサイトのようなリッチな表現が可能になっています。

Flashに比べ開発コストを押し上げる3つの要因

今まではサイト上でリッチな表現を実現するのはFlashの役割でした。しかし、今後スマホブラウザでFlashが再生されなくなることを考えると、Canvasの持つ可能性は大きいです。しかし、Canvasでは開発環境が整っていなくFlashと比べると開発コストは数倍、多くかかってしまいます。

①開発ツールが整っていない

FlashではAdobeの開発ツールのFlash ProfessionalがFlash開発者の敷居を下げ、多くのデザイナーに支持されていたという経緯がありました。具体的にはFlash ProfessionalではタイムラインというGUI的にアニメーションを制作できる機能があり、プログラミングがあまりわからなくても制作が可能でした。それに比べ、Canvasではツールやフレームワークが存在しているものの、まだWeb上にもチュートリアルが少ないのが現状です。

②端末間のスペックの違い

PCに比べ、スマホのスペックは低く動作も重くなりやすいです。そのため多くの端末でデバッグして動作を確認する必要があります。特にAndroidでは、スペックにばらつきが出やすいので注意が必要です。

③Canavas非対応ブラウザへの対応

Canvas要素はスマホブラウザでは対応しているものの、PCではIE6~8では非対応です。そのため、ExplorerCanvasなど対応させる必要があります。

課題はありますが、ブラウザでリッチな表現を可能にするCanvasが発展していくことは間違いなさそうです。PCはFlashで、スマホはCanvasでといった使い分けもあるでしょう。課題感を理解した上で新技術Canvasを取り入れてみてはいかがでしょうか。

このエントリーをはてなブックマークに追加

This entry was posted in blog. Bookmark the permalink. Both comments and trackbacks are currently closed.

Comments Closed

トップ | tadashiku, Incについて | 製品・サービス | 実績のご紹介 | ニュース | ブログ | パートナーシッププロジェクト | お問い合わせ