HTML5 アプリケーションをビルドする

  • [アーティクル]

モバイル エクスペリエンスの作成に HTML5 を使用する

Brandon Satrom

コード サンプルのダウンロード

先月は CSS3 のメディア クエリについて概要を説明しました (msdn.microsoft.com/magazine/hh882445)。メディア クエリは、条件付きの規則に基づいてページのスタイルを適用できるようにする新しいモジュールです。メディア クエリはさまざまなデバイスに幅広く適用できますが、多くの場合、モバイル用のサイトやアプリを構築する場面で取り上げられます。前回のメディア クエリの説明では、タブレットとモバイルでのエクスペリエンスの作成について取り上げました。

モバイル サイトとアプリを構築する場合の難しさを考えると、メディア クエリは間違いなく、ますます活躍するようになります。ブラウザー スニッフィング (デバイス検出とも言われます) によってプラットフォームごとにモバイル エクスペリエンスを作成するといった望ましくない方法に比べて、メディア クエリは非常に優れています。確かにこれはすばらしいモジュールで、先月取り上げた理由は、多くの開発者が早くこれを使うべきだと考えたからです。

再び、レスポンシブ Web デザイン

しかし、話はまだ続きます。CSS メディア クエリはすばらしいものですが、優れたモバイル Web エクスペリエンスを生み出すのに必要なもののほんの一部にすぎません。先月は「レスポンシブ Web デザイン」という言葉を使いました。これは Ethan Marcotte が独創的な記事 (bit.ly/9AMjxh) で提唱した言葉です。Marcotte はメディア クエリに注目していますが、他に必要な 2 つの対策についても指摘しています。それは流動的なグリッドと柔軟な画像です。メディア クエリは、応答性が高く、柔軟性に優れたサイトを構築するためのエンジンですが、これはサイトの設計が応答性や柔軟性を意識している場合にのみ実現できます。今月はレスポンシブ Web デザインについて、この 2 本柱を中心に説明します。まず、非常に有望な CSS レイアウト モジュールの概要を説明し、次にテキスト以外の要素、たとえば画像や埋め込みのビデオに柔軟性を持たせる方法について説明します。この説明の過程で、これらの活用に役立つフレームワークやライブラリについても紹介します。またモバイル Web アプリの作成によく使用されるフレームワークについても説明し、最後に HTML5 を使ったネイティブ アプリの作成について簡単に触れます。この記事を読み終えるころには、レスポンシブ Web デザインによってアプリを実装するための強固な基盤が得られます。

流動的なグリッドとレイアウト

印刷デザインのためにグリッドを使うことは、可動活字の発明の前から、何世紀もにわたって行われてきた方法です。縦横の軸が交差する 2 次元構造によって、デザイナーは見栄えの良いレイアウトに、要素を整列および整理できます (図 1 参照)。この数年間、Web デザイナーたちはこれと同じ方法をデジタルの作品にも採用し始めました。960 Grid System (960.gs) や Semantic Grid System (semantic.gs) など、よく使われる多くのフレームワークがグリッド レイアウトへのアクセスを提供しています。

A Typographic Grid
図 1 活字印刷のグリッド

しかし、活字印刷のグリッドを Web に直接当てはめるには、大きな問題があります。印刷レイアウトは固定ですが、Web のレイアウトは固定ではありません。さらに、多くのグリッドの実装はあまり意味合いがはっきりとしておらず、マークアップを追加してグリッドを定義する必要があるため、HTML ページにプレゼンテーションとコンテンツが混在することになります。

そこで Marcotte の主張する "流動的なグリッド" の流動性が焦点になります。真に応答性を高くするには、グリッド (またはレイアウト) を変化するエクスペリエンスに対応させる必要があります。先月触れたとおり、メディア クエリは要素再配置のための規則の定義に役立ちますが、効果を上げるには、それらの要素をまず流動的で柔軟なコンテナー内で定義する必要があります。他のツールでも同様ですが、先に述べたツールは、ネイティブに (Semantic Grid)、または補完的なライブラリ (960 Grid の Adapt.js には adapt.960.gs) の使用によってこの問題を解決します。また、流動的なレイアウトの作成に役立つ、新しく登場した CSS モジュールもあります。

Marcotte の言葉では流動的な「グリッド」と言われているライブラリを、ここでは流動的な「レイアウト」と言い換えている点に注意してください。これは、新しい CSS モジュールには、グリッドに基づいていなくても、流動的で柔軟性が高いコンテナーの作成に役立つものがあるためです。

まず、bit.ly/yguOHU (英語) にある CSS3 Flexible Box Layout Module (Flexbox) を見てみましょう。Flexbox は、子要素を水平または垂直に自動配置し、要素の間隔を自動調整するレイアウト コンテナーの作成に役立つように設計されています (もう "ul li { float: right; }" は要りません)。このモジュールは Internet Explorer 10 Platform Preview、Firefox、Chrome、Safari、iOS Safari、Android で、ベンダーごとにプレフィックス付きでサポートされます (詳細については caniuse.com/flexbox (英語) を参照)。

では、まず Flexbox を先月説明したフォト ギャラリー サイトに適用してみましょう。図 2 の CSS による結果に、若干の説明用のスタイルの追加を行った結果を図 3 に示します。図 2 の CSS はベンダーごとのプレフィックスとして "-ms-" だけを使っています。オンラインで入手できるサンプルコード(code.msdn.microsoft.com/mag201205HTML5、英語) では、他のベンダーのプレフィックス (-webkit、-moz、-o) を含めていますので、これを使ってください。

図 2 Flexbox モジュールを使用するための CSS

ul.thumbnails {
  width: 100%;
  background: #ababab;
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
}
ul.thumbnails li {
  -ms-box-flex: 1;
}

Photo Gallery Images with Flexbox Applied
図 3 Flexbox を適用したフォト ギャラリーの画像

これは良くできていますが、既にあるもののように見えます。Flexbox の柔軟性を示すために、ブラウザー ウィンドウのサイズを変更したり、モバイル エミュレーターやデバイスでページを開いてみてください。この例ではメディア クエリを定義していませんが、レイアウトはやや流動的になっています。2 つのモジュールを組み合わせると、要素の整列や間隔の調整を反応良く行える流動的なコンテナーを作成できます。たとえば、480 ピクセルより小さな画面用のメディア クエリ規則を作成したり、向きを横に変えることができ、モバイル レイアウトの出発点になります。

bit.ly/ylx7Gq にある CSS グリッド レイアウト (または単に CSS グリッド) は、World Wide Web コンソーシアム (W3C) の CSS ワーキング グループに 2011 年 4 月に提出された新しい仕様で、現時点では Internet Explorer 10 Consumer Preview のみに実装されています。これは堅牢なグリッドをブラウザー内でネイティブにサポートするものです。この結果、開発者とデザイナーにとっては、表のレイアウトや意味のないマークアップを使うことなく、リッチな活版グリッドを使うことができます。

CSS グリッドを使うと、あらかじめ定義された行と列、およびコンテンツの要素への配置方法を指定する規則を使って、ページ レイアウトを定義できます。最初の手順ではグリッド コンテナーを定義し、選択した要素の表示プロパティとして "グリッド" を指定します。

body {
  display: -ms-grid; // A vendor prefix is required.
}

ここでは body 要素を選択し、グリッドがドキュメント全体に広がるようにします。これは必須ではなく、ページの一部をグリッドにすることも、1 つのページに複数のグリッドを定義することも容易です。グリッドを定義したら、行と列のサイズを定義します。

body {
  display: -ms-grid;
  -ms-grid-rows: 50px 30% 20% auto;
  -ms-grid-columns: 75px 25px 2fr 1fr;
}

ここでは 4 列 2 行のグリッドを指定し、サイズを絶対値 (50 px、75px など)、ウィンドウ サイズとの相対値 (30%、20%)、またはコンテンツの幅に応じて自動 (auto) で指定しています。また新しい単位として "fr" を使うこともできます。これは CSS グリッドの仕様では「利用可能なスペースの比例配分」と定義されています。比例配分値は固定サイズを割り当てた後に計算され、fr 値で定義したすべての行と列の間で比率で分割されます。上記の例では、列 1 と列 2 用に合わせて 100 ピクセルが確保され、列 3 には残りのスペースの 2/3 が、列 4 には 1/3 が割り当てられます。

グリッドを定義したら、行と列の値を割り当てることによって、子要素をグリッド内に容易に配置できます。

#main {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  -ms-grid-row-span: 2;
  -ms-grid-row-align: center;
}

ここでは、"main" セクション要素をグリッドの 2 つ目の行と列に配置しています。要素が 2 行にわたるようにし、コンテンツをコンテナーの内部で中央揃えしています。Microsoft Internet Explorer テスト ドライブ デモ サイトでは CSS グリッド レイアウトの実装を使い、人気の高い Grid System サイトである thegridsystem.org と同じ実装を作成しています。これは bit.ly/gEkZkE から確認できます。

同様のページをマークアップと CSS2.1 で作成したことがあれば、CSS グリッドの柔軟性を理解できるでしょう。さらに、メディア クエリと組み合わせて CSS グリッドを使うと、ユーザーがデバイスのサイズと向きを変更しても、規則を少し変更するだけで容易に修正可能で柔軟なレイアウトを作成できます。

説明する CSS の最後のレイアウト仕様は、CSS 複数列レイアウト モジュールです。これは bit.ly/yYEdts (英語) で参照できます。CSS 複数列は "勧告候補" 段階にあり (bit.ly/x5IbJv、英語)、Internet Explorer 10 でのサポート計画を含め、すべてのブラウザーで広くサポートされています。つまり、複数列を使用すると、手動での位置決めや比例配分を行わずに、ページ上で列をレイアウトできます。必要なのは "column-width" プロパティ (必要な場合はプレフィックスを使用) をコンテナーに適用することだけです。

article {
  width: 960px;
  column-width: 240px;
}

この規則により、article 要素は 240 ピクセルの列に分割され、コンテナーに可能な限りの列を作成します (この例では 240 ピクセルの列を 4 つ作成し、960 ピクセルのコンテナーを埋めます)。column-count プロパティを使って、固定数の列を定義することもできます。この場合は、列の幅はコンテナーの幅を均等に分割します。

Flexbox や Grid のようなモジュールとメディア クエリを組み合わせることにより、シンプルで柔軟性の高い規則をすばやく定義し、モバイル ユーザーに優れたユーザー エクスペリエンスを提供できます。

説明した 3 つのモジュールには多くの共通点があり、各モジュールは、真に応答性の高い Web サイトに必要とされる流動的なレイアウトの作成に使用できる機能を備えています。レイアウト上の問題を解決する際に適切なモジュールを選択できるようにするため、これらをよく調査し、各モジュールに触れることをお勧めします。

これらの仕様を活用して新たに登場してきたフレームワークについても確認しておきます。これらのうちの 1 つを使うことは、自身のサイトで流動的なレイアウトを構築するための非常に良いきっかけとなります。Skeleton (getSkeleton.com、英語) と、Twitter 発のサイト スターター キットである Bootstrap (twitter.github.com/bootstrap、英語) が、2 つの著名なフレームワークです。最近、自身のサイトの 1 つを Skeleton を使って再構築しました (html5tx.com、英語)。

レスポンシブ メディア

レスポンシブ Web デザインにおいて、特にモバイルでは、メディアは厄介なものです。画像から始めましょう。応答性の高い画像のスタイリングを行う最も容易な方法の 1 つは、スタイルシートに下記を追加することです。

img {
    max-width: 100%;
  }

この規則は、画像の親コンテナーに合わせるように画像を常に拡大または縮小します。したがって、(これまでに紹介した方法などによって) コンテナー要素の応答性が高ければ、画像の応答性も高くなります。

この方法の課題は、サイト上の画像が、想定し得るどのようなサイズに対しても十分な大きさであることです。私が使っているフォト ギャラリー サイトでは、画像そのものが非常に大きいため、サイズの変更が可能です。

しかし、サイズ変更可能な巨大画像を使用することは、モバイルにとっては大きな問題になり、オーバーヘッドによって不適切なモバイル エクスペリエンスになることがあります。大きな画像を 320 x 240 のウィンドウに合わせてサイズ変更する場合でも、デバイスに画像全体が転送されます。つまり、デバイスが 10 KB の写真のみを必要とする場合でも、2 MB の写真を送信することになります。モバイルでは依然として帯域幅が問題になるため、デバイス幅でなく他の方法を使う必要があります。

残念ながら、この点はなお課題であり、W3C は正式には特定の方法をサポートしていません。応答性の高い画像を扱う方法はたくさんありますが、2 つの方法に大別できます。つまり、問題への対処をサーバー上で行うか、クライアント上で行うかです。サーバーで行う多くの方法は、bit.ly/rQG0Kw (英語) で紹介したものを含め、1 x 1 ピクセルのプレースホルダー画像、クライアントの cookie、およびサーバー再書き込み規則を使って、適切な画像を適切なデバイスに送信します。クライアントで行う方法は、bit.ly/tIdNYh (英語) で紹介したものを含め、多くの場合、JavaScript、<noscript> フォールバック、条件付きコメントなどの CSS の興味深い技法を活用します。どちらの方法もハックのように思えますが (実際そうなのですが)、現状の <img> タグの制約の下で、できる限りのものを提供します。短期的には、両方の方法をよく調査し、アプリに合う方法を決定することをお勧めします。

しかし、長期的には希望があります。Smashing Magazine 誌の記事「HTML5 Semantics」(bit.ly/rRZ5Bl、英語) で、Opera 社の Bruce Lawson は <picture> 要素の追加について議論しています。これは <audio> や <video> と同様の動作を行うもので、開発者は親 <picture> の中の複数の子要素 <source> にアクセスできるものです。インライン メディア クエリと新しい <picture> 要素を組み合わせると、応答性の高い画像のための堅牢なソリューションをようやく提供できる、すばらしい方法になる可能性があります。

<picture alt="cat gallery">
  <source src="nyan-high.png" media="min-width:800px" />
  <source src="nyan-med.png" media="min-width:480px" />
  <source src="nyan-low.png" />
  <!-- fallback for unsupporting browsers -->
  <img src="nyan-med.png" alt="cat gallery" />
</picture>

このソリューションは既に評判を呼んでおり、W3C のコミュニティ グループが結成されましたが (bit.ly/AEjoNt)、私が知る限りでは正式なワーキング グループはまだありません。この要素はおそらく HTML6 のころになるでしょう。

同様の課題は応答性の高いビデオをサイトやアプリに追加する場合にも存在しますが、ビデオの場合は画像よりも堅牢なソリューションが HTML5 に存在します。手始めとしては、既に架空の <picture> 要素のところで述べたように、メディア クエリによって拡張される <source> 要素は、次のように <video> に対して有効です。

<video>
  <source src="nyan-mashup-high.webm" media="min-width:800px" />
  <source src="nyan-mashup-med.webm" media="min-width:480px" />
  <source src="nyan-mashup-low.webm" />
  <!-- Insert Silverlight or Flash Fallback here -->
</video>

独自のサーバーからビデオをサービスする場合や、複数のバージョンを埋め込んで提供するサービスを使う場合には、この構文を使って、ユーザーがデバイスに適したビデオを見られるようにすることを強く推奨します。

このソリューションによってユーザーは帯域幅を節約できますが、開発者は依然として埋め込むビデオ要素のサイズを考慮する必要があります。これは画像の場合と同じです。メディア クエリを使うと、ビデオ要素をさまざまな画面サイズに容易に適応させることができますが、さらに自動化されたソリューションを必要とする場合には、jQuery プラグインである FitVids.js (fitvidsjs.com、英語) を検討できます。これによってビデオ要素を自動的に、流動的かつレスポンシブにすることができます。しかし、これは jQuery プラグインであるため、このソリューションは JavaScript を無効にしているユーザーには使えないことに注意してください。

HTML5 フレームワークを使ってモバイル Web アプリをビルドする

これまでにレスポンシブ Web デザインの他の 2 つの柱として、流動的なレイアウトと柔軟な画像について説明しました。ここでは、単にモバイルに適した Web サイトやアプリを作成するだけでなく、特にモバイル エクスペリエンスをターゲットとする場合について考えてみます。

開発の世界では、従来のデスクトップ (クライアント) や Web のパラダイムは、ネイティブ アプリと呼ばれる第 3 の種類のアプリに取って代わられようとしています。ネイティブ アプリは特定のデバイス (たとえば Windows Phone ベースのスマートフォンや iPad など) に固有のアプリで、デバイス固有のフレームワーク (iOS や Android) を使って開発され、App Store や Marketplace からインストールされます。

それらのフレームワークはリッチで堅牢なものですが、Web 開発者は同様にネイティブに感じられるような、モバイル Web アプリを提供したいと考える場合があります。そのようなアプリはサーバー上に存在し、デバイスの App Store や Marketplace を使わずに配信されます。

このようなアプリを手動でビルドすることは可能ですが、フレームワークを使ってビルドするのがより一般的です。モバイル Web アプリ向けによく使用される選択肢の 1 つが jQuery Mobile (jquerymobile.com、英語) です。これは、ほぼすべてのモバイル プラットフォームをターゲットとした HTML5 ベースの UI システムを提供するモバイル開発フレームワークです。jQuery UI を使って構築された、OpenTable.com のモバイル アプリの例を図 4 に示します。

A Sample Mobile Screen Built with jQuery Mobile
図 4 jQuery Mobile を使ってビルドしたモバイル画面の例

ネイティブの外観を持つモバイル アプリをビルドするためによく使われるもう 1 つの選択肢は Kendo UI Mobile (kendoui.com、英語) です。これは Telerik Inc. による HTML5、JavaScript、CSS のフレームワークです。Kendo UI を使うと、iOS と Android ベースのデバイスでほぼネイティブに見えるモバイル アプリを単一のコードベースで作成できます。この機能が動作するようすを図 5 と図 6 に示します。これは bit.ly/wBgFBj (英語) から確認できます。

A Kendo UI Mobile Demo Application Viewed on an iOS-Based Device
図 5 iOS ベースのデバイスで表示した Kendo UI Mobile のデモ アプリ

図 6 アンドロイド ベースのデバイスで表示した Kendo UI Mobile のサンプル アプリ

HTML5 を使ってネイティブ アプリをビルドする

Web アプリにネイティブのようなルック アンド フィールを持たせることは、Web 開発者としてのスキルを十分に活用できるだけでなく、モバイル環境におけるユーザーの期待に沿ったアプリを作成するという点で重要です。このようなアプリは、デバイス上のネイティブのセンサーと API を活用することが可能です。地理位置情報などのいくつかの機能はモバイル ブラウザーにも提供されますが、加速度計やビデオなどの多くの機能は提供されません。これらの機能にアクセスするには、ネイティブ アプリを選択することになります。

しかし、Web プログラミングが人気を博してることにより、HTML5、JavaScript、CSS はネイティブ レベルになってきています。PhoneGap (phonegap.com、英語) や Titanium Appcelerator (appcelerator.com、英語) などのよく使用されるフレームワークは HTML5 と JavaScript を使って iOS、Android、Windows Phone 用にブートを行うデバイス API アクセスを含む、ネイティブ アプリをビルドできます。さらに、jQuery Mobile や Kendo UI Mobile などのモバイル開発フレームワークは、これらの環境でもブラウザーでも動作します。PhoneGap と Kendo UI を使ってビルドしたネイティブの iOS アプリを図 7 に示します。詳細については、bit.ly/zpIAPY (英語) のブログ記事を参照してください。

An iOS Application Built with HTML, JavaScript and CSS
図 7 HTML、JavaScript、CSS でビルドした iOS アプリ

マイクロソフトは、HTML5、JavaScript、CSS を使って、追加の抽象化やフレームワークを必要とせずに、Windows 8 アプリをビルドすることを正式にサポートし、ネイティブの Web 開発を新しいレベルに引き上げました。Windows 8 の Consumer Preview と、このプラットフォームのための新しい開発者ツールについては、dev.windows.com を参照してください。

モバイル Web に関しては、開発者に選択肢があります。拡張された現実機能を備えたネイティブ エクスペリエンスをビルドする Web プログラマなら、Windows 8 または PhoneGap や Titanium Appcelerator などのフレームワークをよく調べることをお勧めします。ブラウザーを使ったネイティブに近いルック アンド フィールを求めている場合は、jQuery UI と Kendo UI Mobile を調べてみてください。最後に、多くのデバイスとエクスペリエンスに対応した単一の Web サイトやアプリの作成を目標とする場合は、今月と先月の記事で説明したレスポンシブ戦略を試してください。現在、モバイルが開発者にとって最も熱いプラットフォームの 1 つであることは間違いありません。どの戦略やプラットフォームを選択する場合でも、モバイルの開発を最優先することを推奨します。

Brandon Satrom は、Telerik Inc. の HTML5 およびモバイルのツールセットである、Kendo UI (kendoui.com、英語) のプロダクト マネージャーです。彼のブログは userinexperience.com (英語) です。Twitter のアカウントは twitter.com/brandonsatrom (英語) です。彼は Chris Sells との共著『Building Metro Style Apps for Windows 8 in JavaScript』の執筆に取り組んでいます。

この記事のレビューに協力してくれた技術スタッフの Jon Box、Burke Holland、Clark Sell に心より感謝いたします。