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

Parse.comを使ったサーバサイド実装不要のフロントエンド開発[後編]Parse.comを使ったサーバサイド実装不要のフロントエンド開発[後編]

本記事はParse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]の後編です。前編では、Parseの管理画面と、JavaScript SDKのうちBackbone.jsをベースとしている部分とCollectionの生成に必要となるデータの取得方法をご紹介しました。後編では引き続き、ParseのJavaScript SDKの機能として以下の3つをご紹介いたします。 Parse.User: アカウント管理 Parse.File: 画像をはじめとしたファイルのアップロード処理等 Parse.Promise: Defferedの仕組み Parse.GeoPoint: 位置情報 Parse.User

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

Canvasに画像を複数枚重ねて描画するにはCanvasに画像を複数枚重ねて描画するには

HTML5のCanvasには画像を組み込むことができます。Canvas上に複数枚の画像(透過PNG)をレイヤー状に順番に重ねたり、重ねた後の画像を取得する方法を解説します。 画像のプリロード  画像を複数枚重ねる場合、単に描画のループを回してしまうと読み込みが完了されたものから表示れ、重ねる順番が保障されない為、描画の前に順にImageオブジェクトを先読みしておきます。 var fileArry = [‘imgName1’,’imgName2’…]; // 読み込みたい画像のパスの配列 var