フラッシュからhtml5への移行

2011年11月、アドビは、Androidデバイス用のFlash Player 11.1とBlackBerry Playbookのリリース後、モバイルデバイス用のFlash Playerの開発を中止し、代わりにモバイルデバイス用のHTML5アプリケーションを構築するツールに集中することを発表しました。 アドビシステムズ社は、パソコンブラウザーでのFlash Playerのサポートを繰り返しましたが、PCバージョンのサポートが終了するのは時間の問題だと多くの人が考えています。 これは、Flashアプリケーションに多額の投資を行っている企業や、Flashアプリケーションの構築に必要なプログラミングスキルの習得に時間を費やしている開発者にとっては悪いニュースです。

FlashとHTML5の違いをいくつか見て、これら2つのプラットフォーム間の移行を容易にするためのヒントとツールを提供しましょう。

フラッシュプラットフォームの基本

Flashは、実際には次のコンポーネントで構成される独自のAdobeプラットフォームを指す包括的な用語として使用されます。

• Flash：主にアニメーションの設計と作成に使用されるツール
• Flex：ソフトウェア開発キット（SDK）を含む、アプリケーションの構築に使用される開発環境
• MXML：Flashプロジェクトで使用されるマークアップ言語
• ActionScript：スクリプト言語

WebブラウザでFlashアプリケーションを実行するには、Flash Playerプラグインをダウンロードする必要があります。 別の方法として、FlashアプリケーションをコンパイルしてAdobe AIRデスクトップランタイム環境で実行できます。 この場合も、AIRアプリケーションを実行するには、ユーザーのコンピューターにAdobe AIRをインストールする必要があります。

Flashは次の主要なファイル形式を使用します。

• .fla：Flashプロジェクトファイル
• .flv：Flashビデオファイル
• .swf：.flvファイルを含む可能性のあるコンパイル済みFlash / Flexアプリケーションファイル

HTML5プラットフォームの基本

HTML5は、以下で構成されるオープンスタンダードプラットフォームです。

• HTML5：Webページの作成に使用されるマークアップ言語
• Cascading Style Sheets 3（CSS3）：HTML5 Webページ上のオブジェクトのフォーマットを指定するために使用されるスタイルシート言語
• アプリケーションプログラミングインターフェイス（API）：ドラッグアンドドロップやクロスドキュメントメッセージングなどの機能をサポートするAPI
• JavaScript：アニメーションを有効にするためにHTML5で使用されるスクリプト言語

HTML5の利点の1つは、Webブラウザーでネイティブに実行され、プラグインを必要としないことです。 ただし、適切に実行するには、ブラウザがHTML5 WebページのHTML5およびCSS3機能をサポートする必要があります。 主要なブラウザは、HTML5とCSS3のサポートのレベルが異なり、実装は完全ではありません。 JavaScriptは、ほぼすべてのブラウザーでサポートされています。 ただし、ユーザーにはJavaScriptを「オフ」にするオプションがあります。この場合、JavaScriptで作成されたクライアント側スクリプトは実行されません。

HTML5ファイル形式には次のものが含まれます。

• .htm / .html：HTML5 Webページファイル
• .css：CSS3スタイルシートファイル

2011年現在、現在のHTML5仕様では、サポートされているビデオファイル形式が指定されておらず、サポートする形式を選択するのは個々のブラウザーに任されています。 現在サポートされている形式は次のとおりです。

• .mp4：H.264ビデオコーデックおよびAACオーディオコーデックを含むMPEG 4ビデオファイル
• .webm：VP8ビデオコーデックとVorbisオーディオコーデックを含むWebMビデオファイル
• .ogg：TheoraビデオコーデックとVorbisオーディオコーデックを含むOggビデオファイル

FlashプロジェクトからHTML5への変換

複雑なFlashプロジェクトをHTML5に手動で変換することは、プラットフォームの違いにより、労働集約的で時間のかかるプロセスです。 開発者は、FlashとActionScriptで作成されたアニメーションをHTML5とJavaScriptに変換する必要があります。 幸いなことに、FlashからHTML5への変換を自動化するのに役立つツールがいくつかあります。

AdobeはWallabyをリリースしました。これは、Adobe Labs Webサイトから無料でダウンロードできる実験的なツールです。 Wallabyは、Flashプロジェクトファイル（.fla）を入力として受け取り、HTML5をエクスポートし、CSSおよびJavaScriptファイルをサポートします。 ただし、Wallabyリリースノートには、変換されない機能のかなり長いリストが含まれています。最も重要なものは、ActionScript、ムービー、およびサウンドです。 Wallabyは、Webページデザインツールを使用してWebページに統合できるように、アニメーション化されたグラフィカルコンテンツをHTML5に変換するために主に設計された限定的なツールです。

Google Labsは、コンパイル済みのFlashアプリケーションファイル（.swf）をHTML5に変換する無料のWebベースのツールであるSwiffyをリリースしました。 その後、出力をWebページに埋め込むことができますが、開発者が編集するのは簡単ではありません。 Wallabyと同様に、SwiffyはすべてのFlash機能を変換するわけではありません。 SwiffyはActionScript変換をサポートしていますが、バージョン2.0のみです（ActionScriptは現在バージョン3.0です）。 Swiffy出力は、Scalable Vector Graphics（SVG）をサポートするブラウザーでのみ実行されます。

Edge、HTML5の新しい開発ツール

HTML5が最適なプラットフォームになると、HTML5、CSS3、およびJavaScriptを統合する設計および開発環境を提供する新しいツールが登場します。

2011年8月、アドビはEdge開発ツールのプレビューバージョンをリリースしました。 エッジにより、デザイナーはHTML5アニメーションを作成し、既存のHTML5プロジェクトにアニメーションを追加できます。 Flashデザイナーは、ステージ、プロパティウィンドウ、アニメーションタイムラインなど、Edgeユーザーインターフェイスのなじみのある要素を認識します。 ただし、EdgeはCSSおよびJavaScriptファイルを生成し、そのアニメーションコンテンツはJavaScript Object Notation（JSON）データ構造に保存されます。

この記事の執筆時点で、Edgeは4回目のプレビューリリースを予定していました。 各リリースに新しい機能が追加されています。

YouTubeをHTML5に変換する

HTML5への移行の兆候の1つは、YouTubeがHTML5ビデオプレーヤーを使用してビデオを表示するオプションを提供していることです。

HTML5オプションを提供する前は、すべてのYouTubeビデオはFlashビデオプレーヤーを介して配信されていました。 ユーザーはほとんどすべての形式のビデオファイルをアップロードでき、YouTubeは各ビデオを必要なFlash（.flv）形式に変換します。

YouTubeは現在、H.264ビデオコーデックとHTML5配信用のWebM形式でビデオをエンコードしています。 HTML5形式の動画を表示するには、HTML5動画タグとYouTubeで使用される動画形式をサポートするブラウザが必要です。

レガシーオブフラッシュ

前述のとおり、Adobeは現在のところ、PCバージョンのFlash Playerで開発を続けています。 アドビが将来Flash Playerのサポートを停止した場合でも、レガシーFlashアプリケーションはWeb上でサポートされ続けます-おそらく何年もの間。 そのため、Flashはすぐに完全に消滅するわけではありません。 FlashアプリケーションをHTML5アプリケーションに変換するツールを使用できますが、現在、これらのツールはすべてのFlash機能の変換をサポートしていません。 HTML5標準が支配的になるにつれて、Flashファイル変換ツールがより洗練され、HTML5プラットフォームでコンテンツを開発するための新しいツールが作成される可能性があります。