HTML5を使うべき10の理由

プラグイン vs HTML5 それぞれの「適材適所」のエントリーの解説編です。続いてHTML5の判断材料です。同じく10項目挙げてみました。また文章ばかりです。

○スマートフォン向けである(特にiOSも対象)

iOSではPlug-inが排除されているのですから、何の余地もありません。またターゲットをAndroid等のスマートフォンに特化できるなら、HTML5が良いかと思います。Flash PlayerはAndroid OS2.2から対応していますが、パフォーマンスを出すには繊細にチューニングした開発が必要です。
ただし、注意が必要なのは、HTML5で画面を作ったからといって、PCでもスマートフォンでもOK!という訳にはいきません。タッチやジェスチャに対応した画面作りが必要で、AppleのUIデザインガイドラインに従わないと違和感のある画面となります。

○読む/見るコンテンツである

テキストを読む、画像を魅せる、といったコンテンツが中心であれば、あえてFlashじゃなくてもいいのでは無いでしょうか。その画面やコンテンツ間の遷移のエフェクトとしてCSS3のTransitionは、アニメーションとして強力な機能だと思います。

○既存HTML画面にアドオンする

これまでHTMLで作成されたWebアプリケーションで、使い勝手の向上のためにちょっとした機能(例えばドラッグ&ドロップ)を追加したり、フォームへの入力項目をWebStrageから呼び出したい、といった機能であれば、HTML5は非常に効果的だと考えます。

○HTMLを生成/編集する

表現が難しいのですが、Webアプリの目的がブログやCMSのようにHTML自体を編集するようなものであったり、ブラウザやDOM操作を行ったり、というような場合、HTMLコンテンツとの親和性の高さからプラグイン技術よりはHTMLベースで作った方がよいと考えられます。

○検索エンジンに最適化する必要がある

Google等のメジャーな検索エンジンではSWFの内容も解析しインデックス化されますが、やはり世界にはマイナーだったり、古い検索エンジンも存在し、何よりキャッシュされたコンテンツの表示にはFlashやSilverlightはほぼ対応していないのではないでしょうか。

○ブラウザの機能を利用する必要がある

ブラウザのテキスト検索はFlashやSilverlightで作られたコンテンツの内容までリーチできません。画像をブラウザ内からドラッグしてデスクトップに置く、といったこともFlash/Silverlightもできないですね。

○他のサービスにパースされる必要がある

HTMLページ全体を翻訳のためにドキュメント全体がパースされたり、セマンティックなサービスに解析される必要があったり…といった要件があれば、画面全てをHTMLベースで作成しておく必要があります。

○ベンダーのコントロールから逃れる

言うまでもなくFlashはAdobe Systemsの、Silverlightは、Microsoftの製品です。FlashやSilverlightのプラグインのアップデートは、我々のコントロールにありません。昨今は脆弱性対応等で細かなアップデートが多く、そのアップデートが今稼働しているシステムに影響があるかどうか知る術はありません。
また、ベンダーの意向によってロードマップが変更になったり開発が中止されたり、ということが現実的に起こりえます。
一方、ブラウザのアップデートによってJavaScriptが突然動かなくなった…ということも無い訳ではないと思いますが、経験的には少ないように思います。
ただ、ベンダーのサポートが無いというのは不安でもあります。いざというとき、MSDNに入っていればサポートが受けられる、というのはエンジニアにとっては心強いです。

○「先進性」をアピールしたい

不純?な動機に見えますが、コンペとかではこういうことで引っかかったりしますよね。表現や機能的にFlashでできることを、HTML5でもここまでできるぞ!ということで話題になります。

○スキルのあるJavaScriptの開発スタッフがいる

Ajaxでクロスブラウザ開発の経験が豊富であれば、こちらも何の躊躇無くHTML5で取り組む事ができます。

いかがでしょうか。

Related Post

Sass/Compassを使ってCSSスプライトに挑戦してみました。Sass/Compassを使ってCSSスプライトに挑戦してみました。

CSSスプライトを作成する機会があったため、最近よく耳にするSassとCompassを使ってみました。CSSスプライトとは、複数の画像を1枚の画像としてまとめ、CSSで表示範囲を指定することにより表示する手法です。画像のリクエスト数を削減することができるため、高速化の手法の1つとして利用されています。 Sass/Compassについて  Sassとは、CSSの拡張メタ言語です。独自の文法で記述したファイルをコンパイルして、CSSを生成します。独自の文法といっても、CSSをそのまま書くこともできますし、CSSをベースに拡張されているので学習コストは低いです。変数や演算、ミックスインと呼ばれる関数のような仕組みや継承、条件式などの文法があり、CSSの冗長性や保守性、生産性の悪さを解消することができます。公式サイトは英語ですが、enja-ossというプロジェクトでリファレンスの日本語訳が進められているようです。 次にCompassとは、sassのフレームワークで、様々なミックスインやスタイルが用意されています。CSSスプライトをはじめ、ベンダープレフィックスを自動で追加してくれたり、sassファイルの変更を監視して自動でコンパイルしたりと便利な機能が満載です。今回は、このCompassのCSSスプライトの機能を使ってみます。Sass/Compassのインストール、設定ファイルの記述については割愛します。 CompassでCSSスプライト  CSSスプライトを生成するためには、まずSass管理下の画像ディレクトリ内に任意のディレクトリを作成し、スプライトの元となる画像を用意します。今回は以下のような構成で画像を用意しました。 続いて、.scssファイルを用意します。最低限書かなければいけないのは、以下の4行です。この4行で、指定したフォルダ内の画像をCSSスプライト画像にまとめ、表示用クラスを生成することができます。  @charset “utf-8”; @import

ぐるぐる360°回転させる3つのjQuery Pluginぐるぐる360°回転させる3つのjQuery Plugin

商品画像をいろんな角度から見せたいけど、3DCGを使ってあらゆる角度を自由に見せるまでは必要はない、、、そんな時に使えるかも?なjQuery Pluginをご紹介します。これらのプラグインはぱらぱら漫画の要領で、複数の画像を高速に切り替えることで動いているような、回転しているような見せ方が可能になります。 SpriteSpin 最初にご紹介するのは3つの描画方法が用意されているプラグインSpriteSpinです。jQuery-1.4.2 以降に依存するプラグインで、MIT ライセンスのもとで公開されています。対応ブラウザは各種PC用ブラウザ(IE6以降)とモバイル用ブラウザがサポートされています。(非minifyのspritespin.js:26.5KB) <!-- 画像を表示するHTML

ドットDNP「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」参加レポートドットDNP「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」参加レポート

5月7日、弊社のドットDNPにてゴールデンウィークのスペシャルイベント「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」が開催されました。 株式会社ミツエーリンクスの木達一仁さんと、株式会社Gaji-Laboの山岸ひとみさんをお招きし、Webデザインにおけるアクセシビリティの取り組みと、サービスとしての読書体験についてそれぞれ講演いただきました。本記事では、その内容を抜粋してご紹介致します。 Webデザインにおけるアクセシビリティへの取組み 読書体験を考える ――サービスとしての読書体験 トークセッション セミナーを終えて Webデザインにおけるアクセシビリティへの取組み