HTML5 でクロスプラットフォーム・アプリケーションを開発する

この記事は、インテル® デベロッパー・ゾーンに掲載されている「Building Cross-Platform Apps with HTML5」 (http://software.intel.com/en-us/html5/articles/building-cross-platform-apps-with-html5) の日本語参考訳です。

クロスプラットフォーム・アプリケーションとは、例えば職場では Windows* PC、コーヒーショップでは Apple* iPad*、外出先では Android* スマートフォンというように、あらゆる場所で多種多様なデバイスで利用されるアプリケーションのことを指します。

C#、Windows* API、Visual Studio*、Objective-C、iOS* API、Xcode*、Java*、Android* API、Eclipse* などのさまざまなプログラミング・テクノロジーを習得して使用する代わりに、HTML5 ではクロスプラットフォーム向けの言語、API、ツールを利用することができます。コードの移植を省き、アプリケーションに必要な機能やユーザー・エクスペリエンスの向上など、より重要な作業に集中することができます。さらに、HTML5 でコードを記述することで、新しいデバイスが市場に投入されても、アプリケーションはそのデバイスで動作します。

HTML5 でインタラクティブな Web ページ (または Web アプリケーション) をすでに開発している方は、複数のブラウザーと OS プラットフォームにわたって展開できる HTML5 の利点を理解していることでしょう。HTML5 で開発したクロスプラットフォーム・アプリケーションは、このモデルを論理的に拡張したもので、ブラウザー (Chrome*、Safari*、Firefox* など) の代わりに、ターゲット・プラットフォーム上の内部 Web ランタイム (WebView) をプラットフォームとします。

現在、クロスプラットフォーム・アプリケーションはさまざまな可能性と課題に直面しています。デバイスのフォームファクター、特にディスプレイはますます多様化しています。クロスプラットフォーム・アプリケーションは、さまざまな画面サイズ、解像度、縦横比、向きに対応する必要があります。また、デバイスには、カメラ、加速度計、GPS などの多くの新機能が搭載されています。幅広いデバイスにわたって充実したユーザー・エクスペリエンスを提供しつつ、これらの機能を移植可能な方法で利用することも必要です。

HTML5 アプリケーションは、ブラウザーで表示される Web ページに限定されるものではありません。HTML5 コードをパッケージ化し、ローカルにインストールされるハイブリッド Web アプリケーションとして配布することができます。そのため、ネイティブ・アプリケーションと同じ展開および収益チャネルを利用し、同じインストールと起動動作を実現できます。サンドボックス・ブラウザー・ウィンドウ・フレーム内ではなく、全画面の WebView でアプリケーションを実行し、画面とデバイスの機能を完全に制御することができます。

この記事では、新しいデバイス中心の世界でクロスプラットフォーム HTML5 アプリケーションを開発する最も効果的な方法を説明します。

• プラットフォーム固有の API を避ける
• 画面のパラメーターに動的に対応する
• 「互換性」を管理する

プラットフォーム固有の API を避ける

アプリケーションで使用しているすべての API が、全ターゲット・プラットフォームでサポートされる場合のみ、その HTML5 アプリケーションはクロスプラットフォームと言えます。これは、主に 2 つの理由から重要です。

• API が JavaScript* で記述されていても、クロスプラットフォームであるとは限りません。JavaScript* は、標準ベースの HTML5 ブラウザーでのみ使用されているわけではありません。Microsoft* Visual Studio*、Appcelerator* Titanium*、Node.js を含む最新の開発ツールでサポートされている優れたプログラミング言語です。WinJS の JavaScript Windows Runtime API (http://msdn.microsoft.com/ja-jp/ja_jp/library/hh710230(v=vs.94).aspx) や Google* Chrome* Extension の Chrome* API などのプラットフォーム固有の API を使用するアプリケーションは、クロスプラットフォーム・アプリケーションとは言えません。

• Web 標準規格は、実験的なランタイム実装を通じて進化してきました。つまり、各ターゲット・プラットフォーム上の HTML5 ランタイム実装でサポートされる API は、常に多少異なります。新機能が次々と登場し、時間が経つと人気のある成熟した機能が残るからです。これは、HTML5 プログラミング・プラットフォームの革新にとっては素晴らしいことですが、アプリケーション開発にとっては煩わしいことです。HTML5 アプリケーションでは、クロスプラットフォーム JavaScript* ライブラリー API を利用して、ランタイム実装の違いをマスクし、足りない機能を補わなければならないことがよくあります。

新しいデバイス中心の世界で重要なクロスプラットフォーム・ライブラリー API の 1 つは、Apache Cordova*¹ です。Cordova* により、多種多様なデバイス・プラットフォームにわたって、カメラ、加速度計、位置情報などのデバイス機能を一貫した方法で利用できます。あらゆるデバイスで実行可能な 1 つの HTML5 コードベースを開発し、デバイス機能を (標準の HTML5 API で未サポートであっても) 活用して充実したユーザー・エクスペリエンスを提供することができます。Cordova* は、デバイス機能の利用に必要な OS とのインターフェイス処理を行い、各ターゲット OS プラットフォームのネイティブ実装へのアクセスを実現します。Cordova* を利用するアプリケーションは、ハイブリッド Web アプリケーション (またはハイブリッド HTML5 アプリケーション) としてパッケージ化する必要があります。コード自体は移植可能ですが、パッケージ化されたアプリケーションはデバイス固有になります。Adobe PhoneGap* Build* (https://build.phonegap.com/) やインテル® XDK のようなツールを使って、数回のクリックだけで一度に複数のプラットフォーム向けにパッケージ化できます。また、Cordova* は Web 標準規格に従って実装されているため、HTML5 プラットフォーム・ランタイム向けにデバイス API の標準化を行う移植パスとしても利用できます。

¹ Cordova* API およびライブラリーの以前のバージョンは、PhoneGap* と呼ばれていました。現在 PhoneGap* (http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/) という名称は、Adobe* から提供されている Apache Cordova* に使用されています。

画面のパラメーターに動的に対応する

さまざまな画面サイズ、解像度、縦横比に対応した優れたユーザー・エクスペリエンスを提供できなければ、真のクロスプラットフォーム・アプリケーションとは言えないでしょう。HTML5 コードでさまざまなディスプレイに対応する手法は多数あります。

スケーリング

最も簡単な手法は、画面の大きさに応じて UI コンポーネントとフォントをスケーリング (拡大/縮小) することです。さらに、UI コンポーネントの周囲のパディングを調整して、さまざまな縦横比に対応させることもできます。通常、まず小さな画面のモバイル向けに設計し、それを基に拡大していくと良いでしょう。各デバイスには縦向きにした場合と横向きにした場合の 2 つの使われ方があり、設計ではこれも考慮する必要があります。スケーリングには、CSS の相対単位や jQuery Mobile (http://software.intel.com/en-us/articles/jquery-mobile-basics)、Sencha Touch などの UI フレームワークを使用することができます。

流動的なイメージ

イメージは、単にスケーリングするだけでは十分でないことがあります。イメージのトリミング方法を変更したり、それぞれの解像度向けに最適化された異なるイメージを読み込んだりする必要があるかもしれません。こちらのガイド (英語) を参考に適切なイメージ・ソリューションを選択してください。また、流動的なイメージのサポートに関して提案されている Web 標準規格の概要は、http://blogs.adobe.com/webplatform/2012/09/19/responsive-images-for-html5/ (英語) をご覧ください。

流動的なレイアウト

アプリケーションの UI が複数のセクションで構成される場合は、画面サイズに応じてセクションを再配置できる (場合によっては、一部を非表示にすることもできる) 流動的なレイアウトを考慮してください。流動的な UI の設計方法については、流動的なレイアウトパターン (http://www.lukew.com/ff/entry.asp?1514) と流動的なナビゲーション・パターン (http://bradfrostweb.com/blog/web/responsive-nav-patterns/) を参照してください。流動的な Web 設計手法や流動的なグリッドシステムにより、流動性を実現することができます。

「互換性」を管理する

クロスプラットフォーム・デバイス API と流動的な UI 設計手法を駆使しても、プラットフォームのランタイム動作の違いにより、クロスプラットフォーム開発は複雑になります。HTML5 標準の急速な進化は、HTML タブ、CSS 属性、JavaScript* API 実装レベルだけでなく、ターゲット・プラットフォームの関数でも動作に違いが生じることを意味します。

例えば、Android* プラットフォームでは、メーカー実装によってオーディオとビデオの再生動作が一貫していないことがよく問題になります。また、別の例として、HTML の