【WDE2010】John Resig氏、JavaScriptライブラリ「jQuery Mobile」を紹介

Mozilla Corporation社John Resig氏

　ウェブ制作・開発のエキスパートが集まる世界的なイベント「Web Directions East 2010」のカンファレンスが11月15日に開催された。JavaScriptの人気ライブラリ「jQuery」の作者であるMozilla CorporationのJohn Resig氏は、10月にα1版がリリースされたばかりの新しいプロジェクトである、スマートフォンやタブレット向けのJavaScriptライブラリ「jQuery Mobile」について講演した。

●さまざまなプラットフォームで自動テスト

　Resig氏がモバイルに取り組み始めたのは、準備期間を含めると、2009年だという。モバイルはいまちょうど面白い分野だが、モバイル向けブラウザーは種類があり挙動が違うため、「モバイルでのウェブ開発はクレイジー」だと氏は語る。

　jQuery Mobileプロジェクトを開始したときのシンプルな目標は「普及しているモバイルプラットフォームにjQueryを対応させる」。そこで疑問となったのが、ではどのプラットフォームが普及しているのか、どのブラウザが普及しているのか、という点だ。Resig氏は、ブラウザシェア解析のStatCountと、調査会社のGartnerのデータを元に、利用数ではSymbian・iPhone・BlackBerryが、端末販売数ではSymbian・BlackBerry・Androidが普及していると説明。また、ブラウザではOpera・iPhone・Nokia・BlackBerryが多く、Androidはここ1年で伸びているというデータを見せた。

　そして、Symbian、iPhone、BlackBerry、Android、Windows Mobile、WebOS、MeeGo、Opera mini、Fennecなど、プラットフォームやブラウザごとに特徴や注意点を紹介した。たとえば、iPhoneのWebKitはCSSのpositionのfixedに対応していないこと、Blackberryでは4.6以前は実質的にJavaScriptが実行できないこと、Androidはさまざまなデバイスベンダーが異なるバージョンのOSでリリースしていること、Windows Mobileは7.0でもIE7ベースであることなどを注意点として説明した。

　こうした挙動の違いを吸収するには、徹底したテストが必要になる。Resig氏は、「シミュレータと実機の両方でテストする必要がある」という。シミュレータだと実機との違いが出るほか、タッチ画面などもあるので、実際のデバイスがどうしても必要となる。そのため、jQueryのテストのために何千ドルというデバイスを購入したという。

　一方、自動テストにはシミュレータが有効だ。Resig氏は、自身の開発した、ウェブブラウザにJavaScriptを送り付けてテストを実行し結果を返してもらう分散テストツール「TestSwarm」を紹介。モバイルの各機種とそのシミュレータで一斉にテストを実行していると語った。

モバイルプラットフォームごとの利用数	モバイルプラットフォームごとの販売数

モバイル用ブラウザごとの利用数	PC用ブラウザとプラットフォームごとの機能レベル表

モバイル用ブラウザとプラットフォームごとの機能レベル表	変更ごとにTestSwarmにより各モバイル用ブラウザで自動テストを実行する

●jQuery Mobileのユーザーインターフェイス機能を紹介

　後半では、jQuery Mobileの機能がデモをまじえて紹介された。jQueryには大きく分けて、より多くのプラットフォームをサポートすることと、モバイル向けに新たなユーザーインターフェイスを提供することの、2つの要素があるという。前者については、万一JavaScriptが使えなくても、HTMLで基本的な表示ができると説明した。

　そのうえで、ダイアログボックス、ページの切り替え効果表示、テーマの機能やそれに含まれるカラースキーム（swatch）の機能、スクロール中は消えて画面を広く見せるヘッダーとフッター、画面サイズにあわせて伸び縮みするナビゲーションバー、テーマで外見変更できポップアップ選択などの機能を持ったformなどをデモした。特に、jQuery Mobileのデモのメニューでも使われているリストビューについては、実装がうまくいって優れたものになったと自負を語った。

　さらに、モバイル端末向けのため、通信速度を考えてサイズを小さくすることも重要だと主張。jQuery Mobileでは13KBしか消費せず、今後もできるかぎり小型にしていくと語った。

ダイアログを表示	リストビュー

テーマに含まれるカラースキーム（swatch）	ヘッダーとフッター。スクロール中には消えて画面を広く見せる

画面サイズにあわせて伸び縮みするナビゲーションバー	テーマで外見を変更できるform

ポップアップで選べるform	階層構造を持ったリストビュー

　質疑応答では、jQueryのjQTouchプラグインからの影響や、キャッシング、画面サイズ、カスタムデータタイプなど、技術的な質問が飛び交った。なお、jQuery Mobileでは解像度や縦横置きなどごとにCSSのクラスを細かく分けて切り替えているのだという。