Mobileコードを加えてみよう。追加した部分は太字で表している。Mobileの動作には、以下のファイルが必要となる。Mobile本体)いずれもjQuery本家のコンテンツ・デリバリ・ネットワーク(CDN*1)で提供されているので、まずはこちらを利用させてもらうのが便利だろう(準備が不要という意味でも、レスポンスが良いという意味でも、一般的にはCDNを利用するのが有利だ)。Mobileの順でインポートすること。1.6.4である点にも注意されたい。ライブラリや画像リソースなど、コンテンツ配信専門に最適されたネットワークのこと。オフラインで動作を確認したいなどといったケースでは、ライブラリを手元に置いておきたいということもあるだろう。Mobileには同梱されないので要注意)。jquery.mobile-1.0.zipを解凍すると、jquery.mobile-1.0フォルダ配下には、以下のようなフォルダ/ファイルが用意されているはずだ。Mobile標準のスタイルシート。Mobileスタイルシートのコアのみ。最小版)/imagesフォルダ*(画像リソース)拡張子の前に「.min」と付いているのは、オリジナルのソース・コードからコメントや空白などを取り除いてファイル・サイズを最小にしたファイルだ。実行には「.min」付きのファイルを、ソース・コードそのものを確認する場合のみ「.min」なしのファイルを利用するとよい。/imagesフォルダは、スタイルシートから参照される一連の画像リソースを収めたものであるので、.cssファイルと同列のフォルダに配置する必要がある(要は、本番環境に必要なファイルは「*」の付いたものであるということ)。Mobileでは「data-role属性がpageである要素」が1つのページと見なされる(次の図を参照)。サンプルでは、「たまたま」1つのファイルに1つのページを定義しているだけだ。Mobile的な書き方だ*2。Mobileのさまざまな機能を有効にするために、この後もたびたび登場するので、きちんと覚えておいてほしい。「1ファイル複数ページ」パターンを採用することで、リクエストを1つにまとめ、通信効率を向上できる、その後のページ遷移がスムーズになる、などのメリットを享受できる。その分、ロードされる文書ツリーが大きくなるというデメリットもあるので、ページの分け方は文書ツリーのサイズも勘案しながら決めていくべきだろう。[Note]独自データ属性data-xxxxx属性は、HTML5で追加されたグローバル属性*3の一種で、主にJavaScript(や、そのライブラリ)にパラメータ情報を渡すのに利用する——いわゆる「自由に利用できる属性」だ。独自データ属性、カスタム・データ属性、などと呼ばれることもある。Mobileでは、独自データ属性を駆使してページにさまざまな効果や機能を付与しているのが特徴だ。全てのタグで利用できる属性のこと。代表的なグローバル属性として、id、class、style、titleなどがある。(3)ページの配下にはヘッダ/コンテンツ/フッタを配置するページの配下には、ヘッダ/コンテンツ/フッタといった要素を配置できる。それぞれ該当する要素にヘッダ/コンテンツ/フッタとしての機能を与えるのも、data-role属性の役割だ。ヘッダ/コンテンツ/フッタ要素に対して、それぞれ「data-role="header"」「data-role="content"」「data-role="footer"」という記述を追加すればよい。Mobileのページは以下のようなマークアップで表現できるというわけだ。ヘッダ/フッタは必要なければ省略しても構わない。Mobileを利用した最も小さなアプリケーションの完成だ。以下は、リスト2の結果をAndroid環境で確認したものである。Mobile標準のスタイルシートが自動的に適用され、スマートフォンらしいデザインでページが表示されている。[Note]セクション要素HTML5の記述にのっとるという意味では、<section>、<header>、<footer>などのセクション関連要素を使って、ページ/ヘッダ/フッタを表現してもよいだろう。以下は、サンプルをセクション関連要素で書き換えたものだ(結果は、先ほどと同じように表示される)。Project</footer></section>セクション関連要素によるマークアップ(<body>要素内を抜粋)<div>要素を列挙する従来の書き方よりも、タグ・レベルで構造が明確になるため、今後は上のような書き方が主流となってくるはずだ。Mobile本家サイトの例に沿って、<div>要素による記述を優先しているが、セクション関連要素による記述にも慣れておくことをお勧めしたい。Mobileアプリケーションを本格的に開発するならば、スマートフォンの実機環境を用意しておくのが望ましいが、いちいちアプリケーションをIIS/ApacheのようなHTTPサーバに配置しなければならないし、そもそも開発マシンにスマートフォン実機にと、動作確認のたびにいちいち環境を切り替えなければならないのは面倒だ。開発過程でのちょっとした表示/動作の確認であれば、それぞれのプラットフォームに用意されたエミュレータを利用するのが簡便であろう。AIRランタイムが必要)のようなフリーのエミュレータを利用してもよいかもしれない。SDKに同梱されているエミュレータで、サンプルを確認した結果である。次のページでは、先ほどのサンプルを複数ページに対応させる方法を説明する。7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。TranslatorはPowerPoint用のアドイン。