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

Kii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装するKii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装する

本記事は、Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]の続編です。準備編では、新規アプリケーションの作成からKii CloudのJavaScript SDKの概要までをご紹介しました。今回は、アカウント登録とログイン機能の実装についてご紹介します。※JavaScript SDKのv2.1.20から仮ユーザーの機能が追加され、アカウント登録をしない状態でもデータ操作が可能となったようです。 アカウント登録

縦書きにWebフォントを使いたい!けど使えるのか検証してみた縦書きにWebフォントを使いたい!けど使えるのか検証してみた

最近、IT系の記事や勉強会でWebフォントの話題を見かけるようになってきました。以前の記事では、Webフォントサービスのデコもじを使ってRIAXDNPブログの記事タイトルのフォントを変えてみましたが、今回は縦書きにした文字にWebフォントを適用できるのか検証してみました。検証環境はWindows版Safari(5.1.2)とMac版Safari(5.1.1)です。 WEBフォントを使う Webフォントサービスを使わずに自分でフォントを定義する場合、フォントのライセンスに注意してください。今回のフォントデータはデモ用に弊社の秀英体開発室からお借りしました。CSS3では以下のように@font-face規則を使って、フォントを定義することができます。 @font-face {font-family:’DNPShueiMinPr5B’;      src:url(‘../../fonts/DNPShueiMinPr5-B.otf’) format(‘opentype’);} .myFontStyle {      font-family:’DNPShueiMinPr5B’;}

【HTML5】iPhone向けWEBアプリで、Audioを使ってみてハマった点【HTML5】iPhone向けWEBアプリで、Audioを使ってみてハマった点

HTML5のAudio要素を使い、再生する音を遅延無く切り替える方法を、先週8/20(土)に開催された「第5回おばかアプリ選手権」で紹介しましたアプリ、iBooNを例に紹介したいと思います。 iBooNの仕組み iBooNは、Mobile Safari上で動作するWEBアプリです。Mobile Safariから加速度を取得(iOS4.2から加速度センサーに対応)し、前後のシェイクジェスチャ(ぶーんと走らせる動き)、左右の傾き(ドリフト)に応じて異なる車の音を再生させています。 当初は複数のAudioファイルをプリロードさせ、ユーザのアクションに応じて各ファイルを再生させる予定でしたが、Mobile Safariでは複数のAudioファイルをプリロードして保持しておくことが難しく、1音しかプリロードされた状態で鳴らなかったり(参照:iPhoneでHTML5のaudio要素を使うときに気をつけたいこと)、ユーザのアクションごとにAudioデータのロードでタイムラグが発生し、動きによって音が出ているという感じがありませんでした。  ポイント