Top » 雑談 »


Flashだとここまでできる! HTML5とFlashの機能比較

  • 2010年02月03日 (水)

アップルの新デバイス iPad が Flash に対応していないことや、アップルの CEO スティーブ・ジョブズ氏の苦言により、HTML5 は Flash に取って代わるのかという論議がわりと現実味を帯びて論じられるようになりました。

そこで、HTML 5 と Flash は何が違うのか両者の違いを図にまとめてみました。

(上の画像はクリックで拡大できます)

左側が HTML5 にしかない機能、右側が Flash にしかない機能で、中央の重なっているところが両方が利用できる機能です。グラフィック関係では、HTML5 では描画やビデオ関係はサポートするものの、テキスト周りや高度なグラフィック処理ではまだ Flash のほうができることが多いといった状況でしょうか。

それでは具体的なウェブサイトを例に、Flash 側のメリットを詳しく紹介します。

クロスブラウザの映像対応

Web ビデオの対応状況

HTML5 は video タグ搭載によりプラグインを利用してないで映像を再生できるようになります。例えば YouTube でも HTML5 のみで実装された動画プレイヤーが公開されています。ただし注意点は、依然として動画コーデックの統一が進んでおらずクロスブラウザに対応した動画コンテンツを提供することが難しい状況です。

Flash Player ではバージョン7 (2003年)の頃からクロスブラウザ対応の動画プレイヤーを実装することができ、現時点では普及率も98.0%もあります。

Flash だと縦書きができる

Flash 10 (2008 年) から利用できるようになった新機能ですが、縦書きレイアウトを組むことができます。縦書きにしても文字組みにそってテキストを選択することができるためユーザビリティーをさげることなく、DTP レベルに近い柔軟なレイアウトを施すことができます。

ちなみに、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 を介してブリッジすれば互いの弱みを補完することができます。

決して競合する技術ではなく、ともにウェブ体験を豊かにしていく技術であることを認識して、経過を見守っていくことが大事なのではないでしょうか。

Papervision3D本 Papervision3Dの詳細を見る Papervision3Dのサンプルを見る wonderfl本の詳細を見る

コメント/トラックバック 16件

  • イナヅマtvログ » sublimeVideo, HTML 5 Video Player より:
    2010年02月03日(水) 9:43 PM

    [...] する素晴らしいエントリーがあったのでリンクさせていただきます。 Flashだとここまでできる! HTML5とFlashの機能比較 var addthis_pub = 'taikiken'; var addthis_language = 'ja';var addthis_options = 'email, fav [...]

  • 素人 より:
    2010年02月03日(水) 10:30 PM

    誰がコンテンツを制作するのかという事も重要だと思います。グラフィックに明るいデザイナーがコンテンツを作るのと、HTMLに詳しいコーダｰ/プログラマがコンテンツを作るのではまったく異なりますし、多くの場合、前者の方が好まれますよね。

    そう考えるとスタートがすでにオーサリング環境だったFLASHが伸びたのは正しいですし、デザイナでも扱えるHTML5に対応したオーサリング環境が出てこない事には、HTML5を用いたコンテンツは出てこないように思えます。かといって、Web用コンテンツ制作ツールを展開してきたAdobeがFLASHの立場が悪くなるようなHTML5対応ソフトをすぐに出すようなことはしないと思われますし。

  • とおる より:
    2010年02月04日(木) 2:55 AM

    FlashはFlash OS を作って、その中で普及していけばいいんじゃない？
    レガシーな技術に足を引っ張られて、OS寄りなところまで踏み込んでコントロールを分捕り、あげくの果てにバグで周りまで巻き込んだり、脆弱製でマシン自体を危険にさらす。。。

    制作側が便利なのは認めるけど、利用者は技術は何でもいいんだよ。
    制作者のオナニーは独りで勝手にやってくれ。

  • jan より:
    2010年02月04日(木) 6:49 AM

    結局のところ、ブラウザの種類が沢山あって、HTML6になったらまた仕様が変わって…なんてなると、「やっぱりFLASHが余計な部分に気を遣わなくていいや」という事になるんですよね。

  • links for 2010-02-03 « 個人的な雑記 より:
    2010年02月04日(木) 7:01 AM

    [...] Flashだとここまでできる! HTML5とFlashの機能比較 | ClockMaker Blog (tags: webdesign flash html5) [...]

  • シックボーイ より:
    2010年02月04日(木) 10:50 AM

    FlashとHTML5の技術的な差異について視覚的にとってもよく解りました。ありがとうございます。

    ただ「とおる」さんが上述しているように、ユーザー体験が一番大事っていうのにFlashサイトって開発者の自己満ものが多くて見てられない。未だにFlash的なストレスを感じさせずにスゴい体験＆使い易さを感じさせてくれた快適なFlashサイトってないです。

    ウェブにハマればハマるほどFlashなんていらねぇ。
    って思っちゃいます。Apple Inc.やGoogleがFlashに対して懐疑的なのは、ビジネス上の力関係による所が多いけど、この程度の体験しか出来ず、且つバグによってAppleが苦労させられたこともあったとすれば、脱Flash、HTML5による統一が求められるのも否めないでしょ。

    自分も開発者の一人なんでそんな事いってらないんですが・・・

  • やま より:
    2010年02月04日(木) 11:47 AM

    逆に、現状のTLFで「DTPレベル」と言われるとかなり凹みますわ
    DTPっていうか、レイアウトや文字組の価値って、現状のTLFでできる程度にしか見られてないのね

    TLFには、かなり期待しているので、縦組み漢字圏開発者の方にはがんばって欲しいです。

  • 重いサイトは即閉じ より:
    2010年02月04日(木) 2:31 PM

    この記事はそれなりにまとまってはいますが
    オーサリングツールとしてのFlashとFlash playerをごっちゃにしていると思います。

    またプラグインのFlashに対してはJava等を比較するべきです。あるいはAdobe Acrobatも比較対象です。

    現実問題として実験的かつ強引なサイトでしかFlash9以降の機能は使われておらず需要のあったのはflvそしてmp4の再生だったのが歴史です。
    またFlashは7以降根本的にwebアクセスの制限が非常に大きく
    ほとんどJavaScriptだよりです。

    3Dに関してもhtml5もFlashもOpenGL es 1.0等を使うわけでもない強引な手法で
    かろうじて12年古いレベルのポリゴン表示ができる程度なのが現実。

    androidやiphoneでの対応と現状も含めてせめて１〜2年の短期予測くらいはたてないとだめなのでは?

    そして現時点で安定してmp4動画が見られるのは
    外部プログラムかFlash playerだけでありhtml5なんてお話にならないのが現状

  • Yasu より:
    2010年02月04日(木) 5:47 PM

    ＞素人さん
    誰がHTML5コンテンツを制作するのか、というのは直近では実際のところ大きいと思います。

    HTML5でインタラクティブなサイトを作るとしたら、現状のウェブ制作者だとどういった方が近いのでしょう？Ajaxをやっている人がまず入っていくと思いますが、今、マークアップエンジニアのみをしている人はインタラクティブな分野に入ってくるのでしょうか。

    ＞とおるさん
    利用者は何でも良いというのはその通りです。ユーザー体験が高められるのであれば、バックがどのような技術で作られているか気にしなくても何も問題ないと思います。エンドユーザーが技術の進化に振り回され、特定のブラウザでしかウェブサイトを見れなかったりするのはよろしくないと思います。

    ＞janさん
    それはあると思います。Flash Playerは過去のバージョンでパブリッシュされたswfであっても最新のプレイヤーで問題なく再生できるので、コンテンツ制作者としては少なからず安心感があります。(※一部のセキュリティアップデートで動作しない点は除く)

    HTML6なんて今の策定スピードだといったい何年先になっていることでしょう。Flash Player 20ぐらいまででているかも知れませんね(笑

    ＞シックボーイさん
    スゴイ体験の度合いがどの程度のものを想定されているのは不明ですが、ウェブでも世界的な広告賞があり広告業界的に「体験」が評価されていたりします。また少なくともビジネス上での結果がでているから、Flashのサイトの需要が保たれているわけです。作り手の自己満足と言いますが、広告主のビジネス的な目的があるわけで、それが達成されるからこそFlashを採用するに一定の評価があるわけです。そこを抜きにして作り手の自己満足というような、主観的な意見は論点が違うのかなと思います。

    ちなみに私はANOTHER BOOKMARKで紹介されているウェブサイトは、どれもすごいと思っていますが。
    http://www.anotherbookmark.com/bookmark2009/
    http://www.anotherbookmark.com/bookmark2008/
    http://www.anotherbookmark.com/bookmark2007/

    ＞やまさん
    確かに現状のTLFで「DTPレベル」というのは失礼しました。「近い」という表現に直しておきました。私自身、本物のDTPデザインを勉強不足なので軽率な発言がお恥ずかしいです。

    ＞重いサイトは即閉じさん
    オーサリングソフトとFlash Playerをごっちゃにしたのは、タイムラインアニメーションへの動画埋め込みのところのみですね。「Flash」全体の可能性の話なので特に問題無いと思い一緒にまとめました。

    プラグインの比較だと既にされているので今更取り上げても何もおもしろくないでしょう(特にShockwaveやJava)。Acrobatはそもそも論点が違います。取り上げるならイマドキなSilverlight、Java Fxあたりのほうがおもしろそうですけどね。

    Flash 9以降の機能が一部のサイトというのはまったくの間違いです。媒体バナーや簡単なFlashなどは8以前のバージョンのサイトで作られているところも多いですが、ハイエンドなFlashサイトではAS3(Flash 9以上)がすでにメインストリームですよ。

    ここでは、HTML5とFlashのできることの違いをまとめているので、AndroidやiPhoneの対応とかはまったく話題がそれるので触れていません。

    mp4だとものとしてはQuickTimeプラグインもわりといい線いってると思いますが、いかんせん普及率の関係であまり採用されていないですよね。

  • snabel » -2010年02月04日 より:
    2010年02月04日(木) 6:25 PM

    [...] Flashだとここまでできる! HTML5とFlashの機能比較 | ClockMaker Blog [...]

  • 2010/02/04に気になったこと | debeso より:
    2010年02月05日(金) 12:05 AM

    [...] Flashだとここまでできる! HTML5とFlashの機能比較 | ClockMaker Blog 比較表といっても視点が偏ってますね… 適宜やればいいんじゃん！ でも、今後Adobeの独擅場を作っていくのはダメ絶対！ [...]

  • [2010/02/06]ブックマークまとめ « Hyhy's Weblog より:
    2010年02月06日(土) 10:03 PM

    [...] ActionScript3からPDFを作成出来るライブラリ「purePDF」 Flashだとここまでできる! HTML5とFlashの機能比較 [...]

  • Flash不要論 - 背負い投げとONENTER_FRAME より:
    2010年02月09日(火) 6:44 PM

    [...] 参考： Flashだとここまでできる! HTML5とFlashの機能比較 http://clockmaker.jp/blog/2010/02/flash-vs-html5/ [...]

  • 通りすがり より:
    2010年03月03日(水) 11:54 PM

    Flash叩きは今に始まった事ではないし、
    何度もこの表現手法は否定されて来た気がする。
    で、また、同じ論議なのかと、そして、ジョブズですら
    そう感じたのかと思う。
    私はどんなにJavascriptが進化しようが、Ajaxやら、他のコードが進化しようが、
    このツールの役割は違うところに有ると思う。
    それは、ブラウザ依存しないアニメーション技術。
    W3Cの仕事の遅さにどこまで世間が付いていけるかわからない。
    そのうち、ブラウザすらいらなくなるかもしれない。
    Flashの持つ表現力は、TVのCM的なものを補完している。そこにあって、目を引きながら一度だけで満足する。
    でも、そういうコンテンツも必要なのだと思う。
    そして、そのインプレッションを作れる強力なツールにおいてFlashを現時点、超えるものは無い。
    だから、Flash叩きの議論は不毛なんだと思う。
    代替ツールを作るには、ブラウザの統合が必要なんですから。

  • とりあえずこれ読めばHTML5コーダーになれるかも資料集 | UMLAND より:
    2010年03月09日(火) 1:17 PM

    [...] Flashだとここまでできる! HTML5とFlashの機能比較 | ClockMaker Blog [...]

  • flexer より:
    2010年03月10日(水) 12:27 AM

    機能面だけでなく、コンパイルというプロセスや、厳密型の有無、バックエンドとの親和性なども比較必要かと思います。

コメントをどうぞ

Top » 雑談 »