てっく煮ブログ

2012年02月28日
Google, Flash, HTML5

Google がまだ Flash を使っているサービスでみる脱 Flash の難しさ

スマートフォンの普及が進む中、iPhone には Flash が搭載されず、Android 版 Flash は開発停止になるなど、遅かれ早かれ Web 上から Flash が消えていき、リッチな表現は HTML5 に置き換わっていくことは確実となりました。

「これからは HTML5 だ」という印象を世間に強く与えたのが、2009 年の Google I/O でした。

Google はそれ以降、多くのサービスに HTML5 を取り入れてきました。しかし、いまだに Flash を利用しているサービスがいくつかあります。

この記事では、HTML5 化していない、または、できていない Google の 5 つのサービスについて、

  • どこで Flash が使われているのか
  • なぜ Flash が使われているのか
  • 今後、HTML5 に移行するのか

を考察していきたいと思います。

それでは、さっそく 1 つ目から見ていきましょう。

その 1: YouTube

Flash を使っている Google のサービスといえば、まず YouTube を思い浮かべる方も多いでしょう。

パソコン上では Flash がインストールされていないと YouTube で動画をみることができません。Google Chrome で Flash を無効にして動画ページを開くと、「この動画を開くには Flash Player をアップグレードする必要があります」という警告が表示されます。

なぜ Flash が使われているか

YouTube のリリース当時、Windows Media Player・RealPlayer・QuickTime などの動画プレーヤーが存在していましたが、利用できる OS が限られていたり、普及率が低かったり、多くの人に見てもらうには中途半端でした。

その点、Flash プラグインは多くの端末にインストールされていたため、Flash Video フォーマットを採用することで、多くの人にビデオを見てもらうことが可能になりました。

HTML5 化に向けての動き

HTML5 では動画を見るための <video> タグが定義されています。しかし、<video> タグで再生できる動画フォーマットはブラウザーによって異なります。

たとえば

  • H.264 フォーマットの動画は Firefox・Opera で再生できない
  • WebM フォーマットの動画は IE・Safari で再生できない

のように決め手に欠けている状況です。各ブラウザー ベンダーの利害関係が絡まりあって、大人のドロドロした世界が繰り広げられています。

そんな中、YouTube は HTML5 版 YouTube の試用版を公開しています。次の手順で HTML5 を使った YouTube 再生を試すことができます(2012年2月現在)。

  1. http://www.youtube.com/html5 を開く。
  2. [HTML5 試用版を有効にする] をクリックする。
  3. ブラウザーによって手順が変わります：
    • H.264 に対応したブラウザー (IE9・Safari)
      全ての動画が <video> タグで再生されるようになる。
    • WebM にのみ対応のブラウザー(Firefox・Chrome・Opera)
      WebM フォーマットに変換済みなら <video> タグで再生される。
      未変換の場合は Flash で再生される。
      検索結果の URL の末尾に &webm=1 と追加すると、WebM に変換された動画のみが検索結果に登場する。

広告付きの動画は再生できなかったり、ブラウザーによっては全画面再生が無理だったりと、課題は多いようです。

Google の <video> と YouTube 関連の最近の動きを時系列でまとめておきます。

  • 2010年02月
    • Google が VP8 コーデックを公開する On2 買収を完了 (参考)。
  • 2010年05月
    • Google が VP8 コーデックをベースにした WebM フォーマットを公開 (参考)。
    • YouTube に WebM 形式の動画アップロードが可能になる。また、過去の動画を順次 WebM に変換していることを表明(参考)。
  • 2010年07月
    • YouTube モバイル版が H.264 フォーマットでいち早く HTML5 化完了(参考)。
  • 2011年01月
    • Google Chrome の H.264 のサポート終了を表明 (参考)。しかし、表明はしたものの、実際には削除されていない。
  • 2011年04月
    • YouTube への新規アップロード動画はすべて WebM フォーマットに変換されるようになった。既存動画の 3 割が WebM フォーマットに変換された (参考)

今後の流れを予想

YouTube の完全 HTML5 化はいつになるでしょうか。

現時点で、各ブラウザーがサポートする <video> タグのフォーマットは次のようになっています。

ブラウザーH.264WebM
IE9○×
Chrome△○
Firefox△○
Safari○×
Opera×○
  • Google Chrome は H.264 のサポート終了を表明したものの、Chrome 17 の時点でいまだに再生可能。*1
  • Firefox は 2011年3月、H.264 のサポートを表明 (参考)。*2

YouTube は H.264 と WebM に対応しているので、すべてのブラウザーの最新版で <video> タグを使える状況にはあります。デフォルトが Flash から <video> タグに変わる日も近いかもしれません。

ただ、Google Chrome では YouTube の H.264 動画は再生できないようになっていて、YouTube には WebM 化できていない動画が残っています。「HTML5 化しました！」と大々的に発表しておきながら、「昔の動画を見たら Flash Player が動きました」では悲しすぎます。

2010年4月～2011年4月の 1 年間で全体の 3 割の動画の変換が完了したようなので、それ以後に変換のペースが上がっていることを期待します。

その2: ストリート ビュー

Google Maps のストリートビューでも Flash が使われています。


(Google Chrome でストリートビュー表示中に右クリックして確認)

iPhone や Android に関しては、ストリートビューは Flash ではなくネイティブ アプリで提供されているようです。

なぜ Flash が使われているか

ストリートビューのリリース時、ブラウザー上でパノラマ表示を行うためには、Flash が現実的でした。

独自にプラグインを作成することも可能ではあったでしょうが、多くの利用者に使ってもらうためには敷居が高い上に、ブラウザーごとにプラグインを作成するのは大変です。

HTML5 化に向けての動き

2011年10月、MapGL ベータ版が公開されました。

MapGL は <canvas> の 3D 版ともいえる WebGL 技術を利用しています。その結果、MapGL 版の Google Maps では

  • 地図のスムーズなズーム
  • 45° Imagery のスムーズな回転
  • 地図とストリートビューへのシームレスな遷移
  • ストリートビューの表示

が実現されています。

詳しくは次の動画の 40 秒あたりからを見ると分かりやすいでしょう。

このように、脱 Flash に向けての動きが進んでいます。しかし、Internet Explorer が WebGL に対応しないことを明言しており（参考）、こちらも当分は PC 上では Flash がデフォルトになりそうです。

その 3: グラフ表示

Google アナリティクスではグラフの表示 Flash が利用されています。

また、Google ファイナンスでも、グラフの表示に Flash が利用されています。

なぜ Flash が使われているか

Google アナリティクスや Google ファイナンスのリリース時、<canvas> はまだ未成熟でした。IE が <canvas> をサポートしていなかったため、ブラウザー シェアの点からも、Flash が現実的でした。

HTML5 化に向けての動き

Google アナリティクスは 2011年3月にリニューアルしていますが、リニューアル後もグラフ表示には Flash が使われています。Google アナリティクスや Google ファイナンスは PC からの利用がほとんどなので、HTML5 化してもメリットやインパクトは小さいのかもしれません。

(追記 2012/03/01) Google アナリティクスのグラフが HTML5 化されたようです。Flash ではなく SVG を使って描画しています。公式発表では アナリティクスの高速化 として表明されています。クライアント側にデータをキャッシュして高速になったようです。

一方、2010 年 3 月、Google は HTML5 でグラフを描画する Google Public Data をリリースしています。このサービスのグラフ描画には <canvas> や SVG などの HTML5 技術がフル活用されています。

その 4: アップロード機能

Gmail の [ファイルを添付] リンクは実は Flash です。

なぜ Flash が使われているか

Flash の機能を使うと

  • 複数ファイルの同時アップロード
  • アップロードの進行状況をリアルタイムに表示

を実現できます。

この両方の機能を活用するために、Gmail では Flash をこっそり埋め込んでいます。[添付] ボタンが Flash になっているおかげで、アップロードの進捗状況をリアルタイムに表示できるのです。

気づいている人は少ないかもしれませんが、Gmail の設定画面の [高度な添付機能] には「メールにファイルを添付するときに進行状況を表示します。また、一度に複数のファイルを添付できます。Flash が必要です。」と書いてあります。

HTML5 化に向けての動き

HTML5 では <input type="file"> タグの multiple 属性を使えば、複数ファイルのアップロードが可能になりました。しかし、IE9 ではサポートされていません。

アップロードの進行状況表示については、XMLHttpRequest の新仕様（XMLHttpRequest Level 2 から 2011年12月にマージ）では upload.onprogress で進行状況を取得できます。*3

Google ドキュメントのトップページでは、<input type="file"> の multiple 属性を利用して複数ファイルのアップロードが実現されています。IE9 では Flash を利用する親切実装になっています。

このように、最近のプロダクトでは積極的に HTML5 の機能を利用しているようです。

その 5: 広告

Google アドセンスでは、テキスト・画像・Flash の３種類の広告がサポートされています。

そして、Google 自身の広告も Flash を使って作られています。

なぜ Flash が使われているか

広告でリッチな表現を実現するためには、Flash が一番の選択肢です。一部、アニメーション GIF も利用されてはいますが、単純なアニメーションになりがちです。

Flash が好まれる理由は次の 3 つが挙げられます。

  • 凝ったアニメーションをしても端末への負荷・ファイル容量が小さい
  • Flash のオーサリング ソフトが充実している
  • Flash 広告を製作できる人材がたくさんいる

HTML5 化に向けての動き

Google は 2011 年 6 月、Flash を HTML5 に変換する Google swiffy を公開しています。このツールは、既存の Flash を SVG や CSS、JavaScript に変換してくれます。

Swiffy が公開されている URL の“http://www.google.com/doubleclick/studio/swiffy/” には DoubleClick という文字が含まれています。DoubleClick は Google が 2007 年 4 月に買収したオンライン広告会社であることから、Swiffy は「広告 Flash の HTML5 化」を狙ったものであることは間違いありません。

DoubleClick は「HTML5 Challenge」と題した HTML5 広告コンテストを開催するなど、HTML5 広告普及に向けて努力しているようです。コンテストの受賞作品は DoubleClick Rich Media Gallery から確認できます。

しかし、現在、HTML5 広告は皆無に近く、多くのアニメーション広告が Flash で作成されているのが現実です。仮に広告配信システムが HTML5 に対応したとしても、

  • HTML5 アニメーションに対応したオーサリングソフトが出揃う
  • オーサリング ソフトを使いこなすデザイナーの人口が増える

といった条件が揃わない限りは HTML5 広告が一般的にはならないでしょう。

一方、Apple は広告でも攻めています。2010 年末、iTunes でビートルズの楽曲が配信される際、asahi.com・毎日.jp・YOMIURI ONLINE のトップページに 935ピクセル×250ピクセルの巨大動画広告を掲載していました（参考）。この動画は <video> タグを使って埋め込まれており、当時最新の IE8 では表示できませんでした。ビートルズ世代の IE 利用率は高いと思うのですが、意地でも Flash は使わない姿勢には感心してしまいます。

まとめ

長くなってしまいましたが「ビデオ」「3D」「グラフ」「アップロード」「広告」の 5 つについて、Flash が使われている場所を紹介しつつ、いまでも Flash が使われている理由を考察しました。

このうちの「グラフ」はすぐにでも HTML5 化できそうなのですが、それ以外の 4 つは今すぐには厳しいのが現実です。特に、YouTube に関しては WebM を推した結果、YouTube の HTML5 化が遅れているという自己矛盾な状態になってしまっているのが興味深いです。

Adobe は Flash の先細りを指をくわえてみているわけではなく、次のような方向性を打ち出しています。

  • HTML5 オーサリング ソフト「Adobe Edge」を開発中 (参照)
  • Flash は「ゲームやビデオ再生」を重点的に機能拡張していく (参照)

次回は、この記事では触れていなかった「ゲームと Flash、HTML5」についてまとめてみたいと思います。→ まとめました。

*1: 2012/3/22 修正。記事公開当初は未サポートとしていた。

*2: 2012/3/22 追記。ただし、Firefox の H.264 はモバイル版だけだという指摘もあり(参考) http://d.hatena.ne.jp/teramako/20120321/p1

*3: 2012/02/29 指摘を受けて次の記述から修正: HTML5 では不可能です。裏技として、サーバーに定期的に進行状況をポーリングすれば実現できなくはないのですが、Flash ではクライアント側だけで分かっていたものをわざわざ作り直すのは非現実的です。