http://clockmaker.jp/blog/2010/02/flash-vs-html5/
- 2010年02月03日 (水)
Flashだとここまでできる! HTML5とFlashの機能比較
アップルの新デバイス iPad が Flash に対応していないことや、アップルの CEO スティーブ・ジョブズ氏の苦言により、HTML5 は Flash に取って代わるのかという論議が現実味を帯びて論じられるようになりました。
そこで、HTML 5 と Flash は何が違うのか両者の違いを図にまとめてみました。
(上の画像はクリックで拡大できます)
左側が HTML5 にしかない機能、右側が Flash にしかない機能で、中央の重なっているところが両方が利用できる機能です。グラフィック関係では、HTML5 では描画やビデオ関係はサポートするものの、テキスト周りや高度なグラフィック処理、デバイス機能ではまだ Flash のほうができることが多いといった状況でしょうか。
それでは具体的なウェブサイトを例に、Flash 側のメリットを詳しく紹介します。
クロスブラウザの映像対応
HTML5 は video タグ搭載によりプラグインを利用してないで映像を再生できるようになります。例えば YouTube でも HTML5 のみで実装された動画プレイヤーが公開されています。ただし注意点は、依然として動画コーデックの統一が進んでおらずクロスブラウザに対応した動画コンテンツを提供することが難しい状況です。
Flash Player ではバージョン7 (2003年)の頃からクロスブラウザ対応の動画プレイヤーを実装することができ、現時点では普及率も98.0%もあります。
Flash だと縦書きができる
Flash 10 (2008 年) から利用できるようになった新機能ですが、縦書きレイアウトを組むことができます。縦書きにしても文字組みにそってテキストを選択することができるためユーザビリティーをさげることなく、DTP レベルに近い柔軟なレイアウトを施すことができます。
- http://macromarionette.com/ (上図のサイト)
ちなみに、Flash 開発者でないと知られていないかもしれませんが、Flash のテキストはフォントサイズが小さい場合にでも読みやすさを損なわないように、独自のアンチエイリアシング処理が適用されています。そのため小さな文字サイズでも読みやすさを損なうことなくレイアウトすることが可能です。
※単色ではなく他の色も利用してアンチエイリアシング処理を行う。Windowsの Clear Type に似た技術。
Flash だとタイムラインアニメーションに映像を組み込める
コンテンツ開発者から見たメリットになりますが、Flash はオーサリングソフト上で動画をタイムラインアニメーションとして組み込むことができます。実はこれはハイエンドなプロモーションサイトで採用されているケースが多く、画面遷移の効果的な見せ方として普及しています。
この手法を巧みに利用したウェブサイトとしては以下のようなものがあります。
将来的に技術の進化が進めばこのような手法が HTML5 でできるかもしれませんが、現状の HTML5 では難しい手法です。
Flash の 3D は進化している
Papervision3D を初めとして現在ではさまざまな ActionScript 3.0 向けの 3D ライブラリが開発され 3D コンテンツの制作が容易にできるようになってきています。
3D を効果的にウェブプロモーションとして利用したサイトとしては以下のような物があります。特に以下のものは秀逸なので一見の価値ありです。
ほかにも次の記事に 3D のサイトをまとめています。
Flash だとウェブカメラが利用できる
ウェブカメラを利用したコンテンツを Flash だと作ることができます。例えば、昨年話題になった AR (拡張現実)。ウェブカメラで手に持った現実のマーカーを撮影することで、そこにバーチャルな3Dシミュレーションが合成されるという技術です。
Flash 内部で音を生成して再生することができる
これもFlash 10 (2008年登場)の最新機能ですが、Flash 内部で動的に音を生成することができます。
最後に
技術としてどちらが優れているとかではなく、ユーザー体験を向上させるにはどちらのほうが向いており最適かは制作するウェブサイトによって判断していくことが必要です。
HTML5 の新機能は「HTML5 について at Cool Coding」に丁寧にまとめられていますが、「ストレージ/データベース」や「ブラウザ外からのファイルのドラッグ＆ドロップ」などは喉から手がでるほど渇望していた機能です。このような一方にしかない技術も Flash と HTML5 をJavaScript を介してブリッジすれば互いの弱みを補完することができます。
決して競合する技術ではなく、ともにウェブ体験を豊かにしていく技術であることを認識して、経過を見守っていくことが大事なのではないでしょうか。
ご意見等がありましたら私のTwitterアカウントまでお気軽にお寄せください。TwitterではHTML5のことをよくツイートしています。
当ブログ内の関連記事
- Yahoo! Creative AwardでHTML5 賞を頂きました
- HTML5 Canvasを始めよう：Flashライクに制作できるEaselJSとTweenJS
- Canvasタグで作った3DのデモでFlashとHTML5のパフォーマンスを比較
BookMark