スマートフォン向けフレームワークの登場
そうした中、注目を浴びているのが「スマートフォン向けフレームワーク」です。スマートフォン向けフレームワークを使うと、わずかなHTMLやJavaScriptの記述でスマートフォンに最適化したサイトデザインを制作できます。デバイスの特性の違いも吸収してくれるので、制作者はデバイスの違いを気にすることなく、スマートフォンサイトを作成できます。代表的なスマートフォンフレームワークには次のようなものがあります。
iUi
■iUi（http://code.google.com/p/iui/）
Firefoxのアドオン「Firebug」の開発者、Joe Hewitt氏 （@joehewitt）が作成したスマートフォンフレームワークです。iPhone向けサイトに特化しており、iOSのメニューとよく似たデザインのサイトを作成できます。スマートフォン向けフレームワークの先駆けですが、ここ数年バージョンアップされていません。
jQTouch
■jQTouch（http://jqtouch.com/）
jQueryをベースに開発されたスマートフォン向けフレームワークです。iPhoneやAndroidなどのWebKit(※2)ベースのスマートフォンに特化しており、HTMLにさまざまなclass属性を追加することでスマートフォンサイトを作成できます。ページ遷移のアニメーションに優れており、後に登場する多くのスマートフォンフレームワークに大きな影響を与えました。David Kaneda氏（@davidkaneda）により開発されましたが、氏は次に紹介する「Sencha Touch」の開発元である米Sencha Inc.に合流しており、現在はJonathan Stark氏（@jonathanstark）によってメンテナンスされています。
Sencha Touch
■Sencha Touch（http://www.extjs.co.jp/products/touch/）
米Sencha Inc.（日本ではExt Japan）が開発・販売するJavaScriptライブラリー「Ext JS」のスマートフォン版です。ベータ版の時点では有料とされていましたが、2010年11月の正式版公開時に完全無料に変更されました。JavaScriptベースの記述方法を採用しており、利用にあたってはJavaScriptの知識が必須です。jQTouchと同じくWebKitベースのスマートフォンに対応しています。
iOSヒューマンインターフェイスガイドライン
多くのスマートフォン向けフレームワークが登場する1つの要因としてあげられるのが、アップルが公開している「iOSヒューマンインターフェイスガイドライン」の存在です。iOSヒューマンインターフェイスガイドラインでは、ユーザーがiPhoneなどのiOSデバイスを操作するときに最適なデザインについてまとめられており、「タップ可能なUI要素の快適な最小サイズは、44×44ポイント」といった具体的な記述から、「インターフェイスの一貫性を保つ」といったデザインの基本ルールまで、広範なガイドラインが提示されています。スマートフォンに限らず、デザインを仕事にする人は一度目を通しておくと参考になるでしょう。
アップルが公開している「iOSヒューマンインターフェイスガイドライン」
スマートフォン向けフレームワークの多くは、iOSヒューマンインターフェイスガイドラインを参考に作られています。言い換えれば、iOSヒューマンインターフェイスガイドラインに準じたUIを手軽に実現するのが、スマートフォン向けフレームワークだと言ってもいいでしょう。スマートフォンを対象としたモバイルWebデザインはまだ黎明期ですが、すでに強力なデザインガイドラインとガイドラインに準じたフレームワークが存在するので、完成度の高いスマートフォンサイトが多く存在しているのです。
スマートフォン向けフレームワークの本命「jQuery Mobile」
本連載で取り上げる「jQuery Mobile」も、iOSヒューマンインターフェイスガイドラインの流れを組むスマートフォン向けフレームワークです。jQueryの開発者で米モジラのJavaScriptエバンジェリストであるJohn Resig氏 （@jeresig）が中心となって開発されています。本稿執筆時点（2010年4月）ではアルファ版が公開されており、5月中にもベータ版、正式版がリリースされる予定です。
jQuery Mobileが他のスマートフォンフレームと大きく異なるのは、対応デバイスの幅広さです。iOSやAndroidなどのWebKitベースのスマートフォンだけでなく、Windows PhoneやBlackBerryにも対応しており、さまざまな環境に自動的に最適化してくれるのがメリットです。
jQuery Mobileの公式サイト(http://jquerymobile.com/)
jQuery Mobileにはこのほかにも以下のような特徴があります。
高いアクセシビリティ性
jQuery Mobileは多くのスマートフォンに対応しているだけではなく、Web標準によるセマンティックなHTMLの記述を前提に設計されており、高いアクセシビリティを確保できます。W3CのWAI-ARIA(※3)で定められているフォーマットに対応しているので、スクリーンリーダーや音声ブラウザーなどの支援デバイスを利用するユーザーにとっても快適な体験を提供できます。
Write Less , Do More.
jQuery Mobileの大きな特徴の1つに、jQueryのコンセプト「Write Less , Do More.（少ない記述で、よりたくさんのことができる）」を受け継いでいる点があります。詳しくは本連載で解説していきますが、HTML文書にカスタムデータ属性を追加することで簡単にスマートフォン向けの機能を追加できます。
※2 アップルが中心になって開発するオープンソースのレンダリングエンジン。PC向けのSafariやGoogle Chrome、iPhoneなどのiOS向けのMobile Safari、Androidのブラウザなどで採用されている
※3 Web Accessibility Initiative-Accessible Rich Internet Applicationsの略でJavaScriptやAjaxで作成されたコンテンツをスクリーンリーダーでの読み上げやキーボード操作に対応させるための技術仕様
