Webサイトの制作現場でよく用いられるJavaScriptライブラリーの一つに、jQueryがあります。jQueryは半分以上のWebサイトで利用されているという統計情報もあるほど、非常に普及しているJavaScriptライブラリーです。jQueryを用いると、JavaScriptのDOM操作や簡単なアニメーションが、とても短いコードで記述することができます。

画面●jQuery Mobileで作成したカメラ撮影アプリ
画像1●今回作成するアプリ
[画像のクリックで拡大表示]

 さて、このjQueryのサブプロジェクトとして、jQuery Mobileというプロジェクトがあります。その名のとおり、jQuery Mobileはモバイルブラウザ向けのライブラリーで、ネイティブOSのようなルック&フィールを持つアプリを作成できます。

 jQuery MobileはPhoneGapなどのハイブリッドアプリ開発でも威力を発揮します。そこで今回は、jQuery Mobileを用いたPhoneGapアプリ開発について見ていきましょう。


jQuery Mobileの特徴

 jQuery MobileはjQueryをベースとした、モバイルアプリ開発向けのJavaScriptライブラリーです。jQueryは「$」という関数を用いて、JavaScript開発を容易にするものでした。jQuery Mobileではこうした関数だけでなく、モバイルのネイティブUIのような画面パーツやアニメーションを提供します。公式サイトでは、サンプルも兼ねたドキュメントが充実しています。最初の正式リリースから1年が経過し、機能面においても磨きがかかってきました。今では多くのモバイル向けサイトで、jQuery Mobileが利用されています。

PhoneGapとjQuery Mobileの組み合わせ

 第1回で説明したとおり、PhoneGapは独自のUIライブラリーを持ちません。ハイブリッドアプリを開発する場合、開発者は一から画面を作成するか、jQuery MobileのようなUI機能を持つライブラリーを用いてアプリ開発を行う必要があります。

 一から画面を作成し、ネイティブアプリのデザインを表現するのは困難です。もちろん、独自にUIを組み立てた方がJavaScriptやCSSの分量も少なく、キビキビしたアプリ動作につながります。しかし、モバイルブラウザの特性を理解したHTMLやJavaScript、CSSの記述には経験が必要とされます。そのため、jQuery MobileのようなUIライブラリーが注目を浴び、活用事例が増えています。

jQuery Mobileを組み込む

 jQuery Mobileは公式サイトからダウンロードできます。今回は、執筆時点での最新版である、バージョン1.2.0を利用しました。

 jQuery Mobileは、JavaScript、CSS、そして各種画像で構成されています。ファイルの構成は下記の通りです。

図●jQuery Mobile 1.2.0のファイル構成
図●jQuery Mobile 1.2.0のファイル構成
[画像のクリックで拡大表示]

 jQuery Mobileを利用する際には、jquery.js、jquery.mobile.js、そしてjquery.mobile.cssを取り込む必要があります。jquery.mobile.theme.cssおよびjquery.mobile.structure.cssについては、必要に応じて利用します。