FlashとjQuery どちらで実装するか決める際の重要なファクター
Post on:2010年8月9日
ウェブサイトを構築する際、FlashとjQueryは非常に魅力的なツールです。コンテンツを実装する際にどちらを使用すべきか迷うこともあると思います。
両方の特徴を把握し、実装する際に適切に選択するための重要なファクターを紹介します。

A Closer Look at Choosing Between Flash and jQuery
下記は各ポイントを意訳したものです。
はじめに
HTML5の登場により、それがFlashを破るか否かに関わらずこれらはウェブコミュニティで議論の的でした。この議論が活発に行われる中、Flash vs. JavaScriptの話題は少し失われていました。
ここではJavaScriptの中から特に人気の高い「jQuery」をとりあげ、モダンなウェブで広く使用されるアクティブなプラットホームであることを考慮にいれて考えてみます(どちらかというと逆説的です)。
1. FlashとjQuery どちらにするか重要なファクター
ウェブサイトの開発でどのツールが使用されるべきか事前に決定している重要なファクターはサイトの目的とその対象となるユーザーです。あなたが制作しようとしているのは個人のポートフォリオですか? オンラインストアですか? 純粋なエンターテイメント? インフォメーションの提供? どんな種類のウェブサイトで使用するアイデアでも最も適したツールを選択する必要があります。
ここではその決め手となるファクターを紹介します。
1-1. インタラクション
コンテンツのインタラクションから検討してみます。インタラクションが強化されたコンテンツはプロモーションや広告、プロダクトのプレゼンテーション、ミュージッククリップなどインフォメーションが比較的低レベルで提供されたウェブサイトです。
これらのウェブサイトは二つの情報(主に、プロモーションの名称とその入手方法)を伝えることを目的とし、楽しいユーザーエクスペリエンスを届けることにフォーカスしています。よく使用されるエレメントにはコントロール可能な3Dオブジェクト、高度なアニメーションやトランジションなどがあります。
タスクがインタラクションに大きく依存し、楽しいユーザーエクスペリエンスを提供しユーザーを引き込もうとするのには、FlashはjQueryより多くの手段を提供するものとなります。
マウスホバーやクリックでビジュアル的なフィードバックを行ったり、スムースなアニメーションなどはHTML/CSSベースでjQueryがよいでしょう。

jQueryでカルーセルを実装しています。デザイナーはユーザーにコンパクトなスペースに魅力的なコンテンツを表示することに成功しました。

ユーザーが自身の写真を撮り掲載することで、面白い対話型のエクスペリエンスをもたらしています。オンラインの広告キャンペーンのためにFlashを使用した良い例です。
1-2. リッチメディア
ビデオやオーディオをコンテンツに含むかも検討の材料になります。
写真や画像を扱う場合はFlashでもjQueryでも大きな違いはありませんが、ビデオとオーディオの扱いは重要なポイントになります。
ユーザーがFlash Playerでビデオを見るには、すべての主要なブラウザでインストールの必要があります。HTML5のvideoタグは、Flashに変わる適切な選択肢になります。これはいくつかの点でサイトにビデオを使用する際のプロセスを単純化します。
HTML5はjQuery(JavaScript)と組み合わさると特に強力なビデオ配信フォーマットになります。しかしながら重要な問題があります、それはHTML5のビデオコーディックがまだ標準化されていないことです。現在HTML5でビデオのエレメントを作るときは、それぞれのブラウザ用にいくつかのコーディックを使用しなくてはいけません。主要なブラウザすべてにサポートされるには、まだ数年を要するかもしれません。
そのため、サイトの重要なエレメントとしてビデオを採用したり、ビデオとオーディオを含む際はFlashにすることを勧めます。ビデオやオーディオを多少使用する程度はそこだけFlashにし、サイトのメインはjQueryを使用することが最適な解決です。

リッチメディアのサイトではFlashを必要とします。複数のソーシャルサービスを活用した面白いウェブサイトです。

High Point Village Apartments. Hayes
動画にFlashを使用していますが、スライダ、ポップアップ、ツールチップなどjQueryのソリューションを使用したウェブサイトです。
1-3. データ
テキストの量もFlashとjQueryのどちらを使うべきか決定する要因の一つです。テキストベースのインフォメーション中心のサイトでは、大量のテキストをレイアウトで処理することができるのでjQueryの方がFlashよりよいでしょう。jQueryはテキストのリーダビリティとインフォメーションの量に制限を与えずに、テキストベースのサイトにインタラクションを加えることができます。
Flashがリッチなビジュアルやオーディオのエフェクトやディープなインタラクションを使って、ユーザーにエンターテイメント性と強い印象を与えることにおいては最適であることに疑いようがありません。しかし、パラグラフが一つ以上のテキストを扱うのは苦手かもしれません。

オンラインの音楽チャートサイトです。ビデオ、サウンド、テキストなど、大量の更新データが含まれたサイトでJavaScriptを採用するのは適切です。

インパクトのあるデザインがとても印象的なサイトです。繊細なコンテンツ、クールなタイポグラフィ、これら大規模なコンテンツは双方向性のナビゲーションを使用して提供しています。
1-4. ポリッシュ
今日、FlashとHTML+jQueryの両方がウェブサイトの印象的なビジュアルを作成するのに充分な力をデザイナーに与えています。その違いは残念ながら機能ではなく、時間の消費の差で選択されることがあります。
もしデザインで多くのグラデーション、レイヤーのエレメント、シャドウ、変わったフォントを使用する際はFlashはずっと簡単で短時間に実装することができるでしょう。HTMLとJavaScriptを使っても同様のものが実装できます、しかし実装時間は多くかかるかもしれません。

このサイトを見たほとんどの人がFlashだと思うでしょう。さまざまなアニメーション、美しい繊細なデザイン、これらにFlashがないことを信じるほうが難しいかもしれません。

Flashを使用してバーチャルな体験を提供するサイトです。デザイン的にはJavaScriptでも実装可能ですが、制作時間を考えるとFlashの方が適切です。
1-5. バジェットやリソースなど
どちらを使用するかの選択に影響を与えているファクターはまだたくさんあります。
例えば、ツールのリソースです。HTML, CSS, JavaScriptを使用するには確かな知識を必要とします。それはFlashも同様で、更にAdobe Flashというソフトウェアを購入する必要もあります。
また他のファクターとしてはセクション508を遵守したアクセシブルなコンテンツにすること(これはHTML+CSS+JavaScriptの方が楽だと思います)、ファイルサイズ(FlashはたいていのコンテンツでHTML+JavaScript版より大きくなります)があります。ページのロード時間がどれくらい重要であるかもおおきなポイントになります。
最後に軽視できないファクターとして、FlashはiPhoneとiPadに対応していないことがあります。FlashはAppleのモバイルインターネットにおいてHTML+JavaScriptに遅れをとっているということです。

FlashMotoのFlashのテンプレートです。こういったテンプレートを利用することは、ウェブサイトの実装を短時間で行えるようにする一つの手です。

サイトはダイナミックで、素晴らしいビジュアルエクスペリエンスを提供しています。これはjQueryのテキスト置換、ナビゲーションがうまく機能したものです。
2. jQueryとFlashサイトのショーケース
jQueryとFlashの両方のプラットフォームを使用した素晴らしいウェブサイトを紹介します。
2-1. jQuery Websites
「Flashじゃないの?」と見間違ってしまうようなサイトも多々あります。


Thomas Birke Urban Photography













2-2. jQuery Experiments
jQueryを使用した実験的なサイトです。


2-3. Flash Websites
Flashを使用したサイトです。音がでるものもあります。











2-4. Flash Experiments
Flashを使用した実験的なサイトです。


まとめ
jQueryとFlashは共に、素晴らしいユーザーエクスペリエンスを提供できる強力なツールです。「Flash vs HTML5」「Flash vs JavaScript」というくだらない争いはあなたを混乱させるだけです。提供するコンテンツのゴールと利用可能なリソースを判断し、適切なツールを選択するようにしてください。
sponsors