必要条件

この記事に必要な予備知識

HTML、CSS、およびJavaScriptを使用したWebページの作成に関する知識が必要です。

ユーザーレベル

中級

注意:このチュートリアルは、Dreamweaverの任意のバージョンまたはテキストエディターで実行できます。

いつもポケットに入っていて、ときどき話しかけたりゲームを遊んだりするもの-それがスマートフォンです。スマートフォンには様々な種類があります。Androidフォン、Apple iOSデバイス、BlackBerry、まだ他にもあるでしょうか。感じをつかんでいただくために、スマートフォンのカテゴリに入るモバイルデバイスのリストを次に示します。

  • Apple iPhone/iPod Touch
  • Google Android
  • RIM BlackBerry/Playbook OS
  • Nokia Symbian(販売は終了したが、まだ全世界に10億人以上のユーザーが存在)
  • HP/Palm WebOS
  • Microsoft Window Phone 7

このような多種類の異なるシステムを対象とする場合に困るのが、規格のサポートがまちまちであることです。例えば、Appleの最新のiPhoneはHTML5規格を高いレベルでサポートしているのに対して、SymbianやMicrosoft Phoneシリーズは現在のところほとんどサポートしていません。モバイルデバイス用のWebサイトの作成を効果的に行えるように、jQueryコミュニティは、jQuery Mobileと呼ばれるフレームワークの作成を進めてきました。この記事では、この新しいフレームワーク(現時点ではアルファ版)について解説し、jQuery Mobileの開発スキルを短時間で身につけるために役立つ内容を紹介します。

jQuery MobileによるWebサイトの開発

モバイルWebサイトの開発は、もうWebデザインチームの単なる要望リスト項目ではなく、現実のものになりました。モバイルデバイスの利用者数は急速に増えています。最近のGartnerの調査によると、今後2年以内にスマートフォンやタブレットからWebサイトを訪れる人の数がPCからの数を超え、2013年までに182億台のモバイルデバイスが使用される見込みです。

jQuery Mobileの目標としていることは、できるだけ多くのモバイルデバイス上でこのフレームワークを動作させることです。米国では、iOSおよびAndroidスマートフォンが主に注目されています。その一方で、米国以外では、Nokiaなどの他のキャリアが支配的地位を占めています。広範囲のデバイスで動作することを達成するために、2010年9月にjQuery Mobileが発表されたときに、jQueryの作者であるJohn Resigは、一般的なモバイルオペレーティングシステムの一覧を示すチャートを公開しました(図1を参照)。各OSには、サポートの重要性を示すA(高)、B(中)、C(低)の文字が付記されていました。

モバイル業界の変化の速さを示す一例として、ある重要な出来事によって、このチャート全体の書き換えが必要となりました。ある出来事とは、NokiaがSymbianプラットフォームを捨てて、Windows Mobile Phone 7への乗り換えを決めたことです。これによって、Windows Mobile Phone 7の評価が、対象外から一気に高(A)に跳ね上がりました。

モバイル開発のニーズをサポートするため、jQuery Mobileはプログレッシブ機能拡張という考え方を採用しています。プログレッシブ機能拡張の根本的な意味はこうです。最初に、静的なセマンティックHTMLマークアップから出発します。これはすべてのブラウザーで動作するはずです。その後、その上に動作と機能拡張(飾り)を追加していきます。この方法なら、ページのコンテンツと基本的なHTML機能は、能力の低いブラウザーからもアクセスできます。

モバイルブラウザーの課題は、現実の問題です。一方には、機能豊富なブラウザー(Android Webブラウザー、BlackBerry 6、iOS Mobile Safariなど)があります。これらはすべて、WebKitのバリエーションを使用しています。WebKitとは、Google ChromeやApple Safariのデスクトップバージョンなど、多くのWebブラウザーに使用されているレンダリングエンジンです(WebKitは、ネットワークから情報を読み取る方法に関しては何も知りません。また、OSネイティブのイベントに関しても何も知りません。スクロールについてもそうです。このような機能は、それぞれのOS、ブラウザー、またはデバイスベンダーが、このエンジンを基にブラウザーを作成する際に追加する必要があります)。その一方で、Web標準を断片的にしかサポートしていない、NokiaのSymbianやWindows Mobile 6以前を搭載した何百万台もの携帯電話が存在します。さらに問題を複雑にしているのは、それぞれのモバイルOSで異なるバージョンのWebKitが使用されていることです。結局のところ、プログレッシブ機能拡張とは、サポートされるすべてのモバイルデバイス上にコンテンツを表示するためのモデルなのです。

最初のステップ

jQuery Mobileを使用する際の最初のステップは、Webページをセットアップすることです。HEAD要素の内部で、jQuery MobileのCSSとJavaScriptファイルを次のように参照します。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script src="http://code.jquery.com/jquery-1.5.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

スクリプトのソースファイルからわかるように、jQuery MobileはコアjQueryライブラリを拡張しています。リソースに関心がある方のために言っておくと、jQuery Mobileの現在の縮小後のファイルサイズは12 Kbです。

上のリンクは、jQueryサーバー上にホストされているライブCDNバージョンを指しています。CSSリンクには、必要なグラフィックファイルへの参照も含まれています。ファイルをダウンロードしてローカルにホストしたい場合は、次のWebアドレスにアクセスする必要があります。

http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.zip

ZIPファイルをダウンロードして展開します。このファイルの中には、CSSおよびJavaScriptファイルの圧縮バージョンと非圧縮バージョン、およびCSSドキュメントで使用される10個の画像を含むサブフォルダーがあります。

初めてjQuery Mobileサイトを作成する場合は、Webページ上に3つの基本コンテンツ領域を配置する必要があります。次に示すのは、今後のプロジェクトで使用できるボイラープレートマークアップの例です。

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script src="http://code.jquery.com/jquery-1.5.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /header --> </div><!-- /page --> </body>

このテンプレートには、いくつか注目すべき点があります。1つ目は、DIV要素が使用されていることです。モバイルデバイスではHTML5が普及しているので、新しいHEADER、ARTICLE、SECTION、FOOTER要素を使用すればよさそうに思われるかもしれません。しかし、古いスマートフォンのブラウザーは、新しいHTML5要素を理解できません。場合によっては、Windows PhoneのInternet Explorerの旧バージョンのように、ブラウザーのバグのせいで、CSSでスタイルを指定するためには、タグの中にプログラムで非HTML要素を作成しておくことが必要な場合もあります。これに対して、DIVタグはすべての環境でサポートされています。

Webページを保存して、Webブラウザーでテストしてみましょう。コードはHTMLなので、デスクトップで動作するはずです。HTML/JavaScriptが正しく動作することを確認するには、Chromeを使用してローカルテストを行うことをお勧めします。実際の品質テストでは、様々なモバイルデバイス上でモバイルWebページを動作させてみる必要があります。

リンクを使用したモバイルサイトのページの作成

標準のWebページとモバイルWebページの違いは、画面上に配置できるコンテンツの量にあります。もちろん、ニューヨークタイムズのWebサイトをiPhoneに読み込むこともできますが、コンテンツを読むにはピンチして拡大する必要があります。もっとよい方法は、ページを整理して、表示したいコンテンツだけを残すことです。

従来のWebサイトの場合は、少量のコンテンツを含む多数のWebページを作成するのが普通でした。一方、jQueryを使用すると、少量のコンテンツをもっと効率的な方法で扱うことができます。

先ほど、jQuery Mobile用のボイラープレートページを作成する方法を説明しました。この方法を一歩進めて、コンテンツの「ページ」を作成してみましょう。ページは、jQuery Mobile内のDIVブロックとして構成できます。前述のボイラープレートテンプレートを使用して、BODY要素内部のコンテンツを削除します。ここでは、4つのページにリンクするメニューを追加します。1つ目のページは、リンクのあるメニューページです(図3を参照)。

<!-- Start of first page --> <div data-role="page" id="menu"> <div data-role="header"> <h1>Menu</h1> </div><!-- /header --> <div data-role="content"> <p>What vehicles do you like?</p> <p><a href="#Cars">Cars</a></p> <p><a href="#Trains">Trains</a></p> <p><a href="#Planes">Planes</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page -->

このHTMLブロックの重要な部分は、最初のDIVです。要素の中には、IDとdata-roleプロパティがあります。

data-role="page" id="menu"

data-roleは、DIV要素内部のコンテンツを「ページ」として定義する役割を果たします。「ページ」という呼び方はやや不正確で、実際にはこれはHTMLコード内の1つのパネルあるいは画面であり、独立したページではありません。data-role="page"は、画面上に表示されるコンテンツをDIV要素を中心に作成するように、jQuery Mobileに指示します。IDは、HREFリンクでこのセクションにリンクするために使用します。

メニューページは最初のページなので、ブラウザーでは最初に表示されます。この他に3つの「ページ」を追加できます。各ページには、Cars、Planes、TrainsというIDがついています。

<!-- Start of second page --> <div data-role="page" id="Cars"> <div data-role="header"> <h1>Cars</h1> </div><!-- /header --> <div data-role="content"> <p>We can add a list of cars</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> <!-- Start of third page --> <div data-role="page" id="Trains"> <div data-role="header"> <h1>Trains</h1> </div><!-- /header --> <div data-role="content"> <p>We can add a list of trains</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> <!-- Start of fourth page --> <div data-role="page" id="Planes"> <div data-role="header"> <h1>Planes</h1> </div><!-- /header --> <div data-role="content"> <p>We can add a list of planes</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page -->

ページをAndroidまたはiOSデバイスでテストしてみましょう。Webページをロードすると、次の3つのことが起こります。

  • メニューが専用のページに表示されます(上下にスクロールしてみても、他には何も表示されないはずです)。
  • リンクを選択すると、ページはアニメーションシーケンスによって新しいセクションに移行します。
  • メニューページから移動すると、上のヘッダーDIVセクションに戻るボタンが自動的に表示されます。

これらのDIV要素はそれぞれWebブラウザーにロードされ、別々のWebページのように表示されます。画面の間の移行はスムーズです。

複数の画面からなるコンテンツを1ページにまとめることで、モバイルデバイスの動作が遅く見える原因の1つであるページの読み込み時間を減らすことができます。外部Webページへのリンクも可能ですが、1つ問題があります。jQuery MobileのリンクはAjax呼び出しとして処理されるのです。jQuery Mobileページ内部のリンクは、CSSのトランジションを利用して画面を書き換えています。現在のアプリケーションの外にあるページにリンクするには、強制アクションを作成して新しいドキュメントを作成し、現在のjQuery Mobileファイルを置き換える必要があります。その例を以下に示します。

<a href="http://www.madinc.co" rel="external">madinc.co</a>

rel="external"プロパティとその値を使用する必要があります。これにより、現時点で使用しているローカルページリンクの外部にあるWebページにリンクできるようになります。ただし、jQuery Mobileには1つ追加機能があります。外部リンクを単なるサイト外部のリンクとして扱うのではなく、jQuery Mobileはページ移行のアニメーションを表示するのです。これは、他の一般的なモバイルフレームワークにはない独自の特長です。Webサイトのコンテンツをすべて1ページにまとめる代わりに、複数のページにコンテンツを分割することで、大規模なソリューションを構築することもできます。

コンポーネントの操作

もちろん、リンクとページはモバイルWebデザインの1つの要素に過ぎません。多くのモバイルWebデベロッパーが直面するもう1つの問題は、アプリの氾濫です。Android、iOS、およびその他のシステム用のアプリは、Webページと異なり、Objective-C、Java、C#といった複雑なテクノロジーによって作成されています。これらのテクノロジーを使うことで、デベロッパーは、メニューツールやユニークリストなど、HTMLにネイティブには用意されていないコントロールやコンポーネントを容易に利用できます。

jQuery Mobileには、現在何種類かのコンポーネントが付属しています。最新のアルファバージョンに含まれるコンポーネントは次のとおりです。

  • ページ
  • ダイアログボックス
  • ツールバー
  • ボタン
  • コンテンツフォーマッティング
  • フォーム要素
  • リストビュー

コンポーネントの追加や変更はそれほど難しくありません。HTMLを多少知っていれば、すぐにできるようになります。例として、ページコンポーネントを見てみましょう。

ページへのヘッダーとフッターの追加

上記のボイラープレートの例は、ヘッダーやフッターなどのツールバーをページに簡単に追加できることを示しています。ツールバーは、様々な画面に表示されるコンテンツを作成する際に、最も制御が難しいものの1つです。困難さの理由は、異なる画面サイズに合わせてコンテンツを動的に拡大縮小する点にあります。例えば、ヘッダーツールバーには、ヘッダーとボタン(戻るボタンなど)が含まれる場合があります。jQuery Mobileを使用すると、画面の大きさに関わらず、常にタイトルがヘッダーツールバーの中央に、ボタンがページの左端または右端に表示されるようにすることができます。

次のスニペットは、2つのボタンがあるヘッダーツールバーを作成します(図4を参照)。

<div data-role="header" data-position="inline"> <a href="cancel.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> <a href="save.html" data-icon="check">Save</a> </div>

ボタンの位置は、コンテンツの順序によって定義されます。結果のモバイルWebページでは、タイトルが中央に、ボタンが左端と右端に表示され、どのデバイスでも同じ表示と動作が得られます。

ヘッダーとフッターをカスタマイズして、ナビゲーションツールを作成することもできます。画面の各セクションに移動するインタラクティブボタンをフッターに追加することができます。このためには、"navbar"データロールを使用します。navbarのコードを以下に示します。

<div data-role="navbar"> <ul> <li><a href="#nav1" class="ui-btn-active">One</a></li> <li><a href="#nav2">Two</a></li> </ul> </div><!-- /navbar -->

この場合も、jQuery Mobileのほとんどのコードと同様に、navbarはDIVタグ内部に含まれる単純なHTMLのListで構成されています。ui-btn-activeのようなプロパティを設定することで、どのボタンが選択されるかを指定できます。

ボタンを選択して同じページの2つ目の画面に移動すると、jQuery Mobileは戻るボタンをヘッダーに自動的に追加します。例えば、次のHTMLでは、1つのHTMLページに3つの画面が追加されます。メイン画面と、navbarからリンクされる2つのサンプル画面です。このコードを追加して、画面を移動すると戻るボタンが自動的に追加されることを確認してください。

<div data-role="page"> <div data-role="header"> <h1>Navigation</h1> </div><!-- /header --> <div data-role="content"> Navigation page </div><!-- /content --> <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#nav1" class="ui-btn-active">One</a></li> <li><a href="#nav2">Two</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="nav1"> <div data-role="header"> <h1>Nav Screen 1</h1> </div><!-- /header --> <div data-role="content"> Screen for Navigation One </div><!-- /content --> <div data-role="footer"> <h4>Additional Footer information</h4> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="nav2"> <div data-role="header"> <h1>Nav Screen 2</h1> </div><!-- /header --> <div data-role="content"> Screen for Navigation Two </div><!-- /content --> <div data-role="footer"> <h4>Additional Footer information</h4> </div><!-- /footer --> </div><!-- /page -->

jQuery Mobile用のSCRIPTおよびCSS参照を追加するのを忘れないでください。

フッターとヘッダーの固定表示

一般的なユーザーインターフェイスのデザイン技法では、ヘッダーを画面の上部、フッターを画面の下部に固定します。jQuery Mobileでこれを実現するには、ヘッダーまたはフッターにdata-position="fixed"を追加するだけですみます。これにより、次の例のように、ヘッダーは画面の上部、フッターは画面の下部に密着します(図5を参照)。

<div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Navigation</h1> </div><!-- /header --> <div data-role="content" > <ul data-role="listview" data-dividertheme="d" style="margin-top: 0;"> <li data-role="list-divider">Royal Family</li> <li><a href="#nav1">Henry VIII</a></li> <li><a href="#nav1">George V</a></li> <li><a href="#nav1">Prince of Wales</a></li> <li><a href="#nav1">Elizabeth I</a></li> <li><a href="#nav1">Elizabeth II</a></li> <li data-role="list-divider">Prime Miniseters</li> <li><a href="#nav2">Winston Churchill</a></li> <li><a href="#nav2">Tony Blare</a></li> <li><a href="#nav2">David Cameron</a></li> </ul> </div><!-- /content --> <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#nav1" class="ui-btn-active">Royals</a></li> <li><a href="#nav2">Leaders</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="nav1" data-position="fixed"> <div data-role="header"> <h1>Royal Family</h1> </div><!-- /header --> <div data-role="content"> <p>Members and relatives of the British Royal Family historically represented the monarch in various places throughout the British Empire, sometimes for extended periods as viceroys, or for specific ceremonies or events. Today, they often perform ceremonial and social duties throughout the United Kingdom and abroad on behalf of the UK, but, aside from the monarch, have no constitutional role in the affairs of government. This is the same for the other realms of the Commonwealth though the family there acts on behalf of, is funded by, and represents the sovereign of that particular state, and not the United Kingdom.</P> </div><!-- /content --> <div data-role="footer" data-position="fixed"> <h4>Royal Family</h4> </div><!-- /header --> </div><!-- /page --> <div data-role="page" id="nav2" data-position="fixed"> <div data-role="header"> <h1>Prime Ministers</h1> </div><!-- /header --> <div data-role="content"> The Prime Minister of the United Kingdom of Great Britain and Northern Ireland is the Head of Her Majesty's Government in the United Kingdom. The Prime Minister and Cabinet (consisting of all the most senior ministers, who are government department heads) are collectively accountable for their policies and actions to the Sovereign, to Parliament, to their political party and ultimately to the electorate. The current Prime Minister, David Cameron, was appointed on 11 May 2010.</div><!-- /content --> <div data-role="footer" data-position="fixed"> <h4>Prime Minister</h4> </div><!-- /header --> </div><!-- /page -->

このように、カスタムObjective-Cを使用しなくても、固定されたヘッダーとフッターをページに追加できます。

ダイアログボックスの操作

ページコンポーネントでは、data-relプロパティを使用して、カスタムCSSポップアップダイアログボックスを追加することもできます。例えば、次のようにすると、Webページがポップアップダイアログボックスに読み込まれます。

<a href="dialog.html" data-rel="dialog">Open dialog</a>

この方法を使えば、任意のカスタムメッセージをダイアログボックスに読み込むことができます。同じページでダイアログボックスをポストするには、ダイアログボックスに2つのセクションが必要です。面白いことに、jQuery Mobileではダイアログボックスは画面と変わりません。このことを知っていれば、任意の種類のHTMLをダイアログボックスに追加できます。1つ目のセクションには、次に示すように、ダイアログボックスへのリンクが表示されます。

<div data-role="page"> <div data-role="header"> <h1>Dialog Box</h1> </div><!-- /header --> <div data-role="content"> <a href="#dialogPopUp" data-rel="dialog" data-role="button">Open dialog</a> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page -->

「Open Dialog(ダイアログを開く)」ボタンのHREFに、ローカルセクションへのリンクがあるのがわかるはずです。次に示すのは、ダイアログボックス内部のマークアップです。

<div data-role="page" id="dialogPopUp"> <div data-role="header"> <h1>Dialog Title</h1> </div><!-- /header --> <div data-role="content"> This is a dialog box </div><!-- /content --> <div data-role="footer"> <h4>Additional Footer information</h4> </div><!-- /footer --> </div><!-- /page -->

フッターの使用はオプションですが、ヘッダーは必須です。ヘッダーがないと、閉じるボタンが自動的に表示されなくなります。

リストの操作

Web上にはたくさんのデータがあります。それは膨大な量です。大量のデータを管理するツールとしては、リストが役立ちます。前述のいくつかの例で既にリストを使用していますが、ここではリストについて少し詳しく説明します。

標準HTMLの単純なリストを次に示します。

<ul> <li><a href="#nav1">Henry VIII</a></li> <li><a href="#nav1">George V</a></li> <li><a href="#nav1">Prince of Wales</a></li> <li><a href="#nav1">Elizabeth I</a></li> <li><a href="#nav1">Elizabeth II</a></li> </ul>

jQuery Mobileでは、開始ULタグにlistviewロールを追加するだけで、この単純なリストをアプリのような機能満載のリストに変えることができます。data-role属性は、ネイティブアプリケーションのような外観と機能を持つリストを表示するように、jQuery Mobileに指示します。

<ul data-role="listview"> <li><a href="#nav1">Henry VIII</a></li> <li><a href="#nav1">George V</a></li> <li><a href="#nav1">Prince of Wales</a></li> <li><a href="#nav1">Elizabeth I</a></li> <li><a href="#nav1">Elizabeth II</a></li> </ul>

このように、わずか20文字を追加するだけでフォーマットされたリストができました。

基本リスト以外に、jQueryではコアリストを拡張するオプションも用意されています。例えば、次の例ではリストに分割項目が追加されます(図7を参照)。

<ul data-role="listview" data-dividertheme="d"> <li data-role="list-divider">Royal Family</li> <li><a href="#home">Henry VIII</a></li> <li><a href="#home">George V</a></li> <li><a href="#home">Prince of Wales</a></li> <li><a href="#home">Elizabeth I</a></li> <li><a href="#home">Elizabeth II</a></li> <li data-role="list-divider">Prime Ministers</li> <li><a href="#home">Winston Churchill</a></li> <li><a href="#home">Tony Blare</a></li> <li><a href="#home">David Cameron</a></li> </ul>

分割項目を追加するには、開始LI要素にdata-divider属性を追加し、分割項目を表示する特別なリスト項目を追加します(<li data-role="list-divider">Royal Family </li> )。

各リスト項目にデータバブルを追加することもできます。次の例では、英国王室の各メンバーの治世がバブルに追加されています(図8を参照)。

<ul data-role="listview" style="margin-top: 0;"> <li><a href="#nav1">Henry VIII <span class="ui-li-count">Reign 37 Years</span></a></li> <li><a href="#nav1">George V <span class="ui-li-count">Reign 25 Years</span></a></li> <li><a href="#nav1">Prince of Wales <span class="ui-li-count">N/A</span></a></li> <li><a href="#nav1">Elizabeth I <span class="ui-li-count">Reign 44 Years</span></a></li> <li><a href="#nav1">Elizabeth II<span class="ui-li-count">Reign since 1952</span></a></li> </ul>

リストのもう1つの種類として、リンク、画像、テキストなどをリスト(LI)要素内に追加できる複雑なリストがあります。次に例を示します。

<ul data-role="listview" style="margin-top: 0;"> <li> <img src="http://img.freebase.com/api/trans/image_thumb/en/henry_viii_of_england?pad=1&errorid=%2Ffreebase%2Fno_image_png&maxheight=64&mode=fillcropmid&maxwidth=64" /> <h3><a href="index.html">Henry VIII</a></h3> <p>Reign 37 Years</p> <a href="#home">Details</a> </li> <li> <img src="http://www.iwise.com/authorIcons/15/King_George%20V_64x64.png" /> <h3><a href="index.html">George V</a></h3> <p>Reign 25 Years</p> <a href="#home">Details</a> </li> <li> <img src="http://img.freebase.com/api/trans/image_thumb/en/prince_of_wales_secondary_school?pad=1&errorid=%2Ffreebase%2Fno_image_png&maxheight=64&mode=fillcropmid&maxwidth=64" /> <h3><a href="index.html">Prince of Wales</a></h3> <p>Reign N/A</p> <a href="#home">Details</a> </li> <li> <img src="http://www.iwise.com/authorIcons/13846/Elizabeth%20I%20of%20England_64x64.png" /> <h3><a href="index.html">Elizabeth I</a></h3> <p>Reign 44 Years</p> <a href="#home">Details</a> </li> <li> <img src="http://www.iwise.com/authorIcons/9098/Elizabeth%20II_64x64.png" /> <h3><a href="index.html">Elizabeth II</a></h3> <p>Reign Since 1952</p> <a href="#home">Details</a> </li> </ul>

この種のリストは、大量のリッチデータを表示する場合に便利です。例えば、クラスの学生のリストに、名前、写真、成績評価を表示することができます。これにより、複雑なスクロールするリストをHTMLだけで作成できます。

jQuery Mobile Webサイトのパブリッシュ

jQuery Mobileサイトの開発が終了したら、最後の作業として、ファイルを世界中から見えるようにデプロイすることが必要です。

結局のところ、jQuery Mobileは、HTML、CSS、JavaScriptのファイルの集合に過ぎません。したがって、デプロイの手順は標準のHTML/CSSサイトの場合と何ら変わりません。FTPまたはふだん使用しているWebサイト管理ソリューション(Dreamweaverなど)を使用して、ファイルをWebサーバーにポストします。サポート用のJavaScript、CSS、および画像ファイルをすべてポストするのを忘れないでください。

ファイルがサーバー上に置かれたら、BlackBerry、iPhone、Android、Windows Phone.などのモバイルデバイスでサイトにアクセスしてみてください。

jQuery Mobileを使用する場合、サイトがスマートフォンをターゲットにしていることが前提となります。作成するのがメインWebサイトに付随するサイトの場合、jQuery Mobileサイトとして完全に区別することをお勧めします。例えば、メインサイトがwww.companyname.comなら、jQuery Mobileサイトはm.companyname.comのようにします。

デスクトップをターゲットとしたサイトとモバイルサイトを区別する際に、正しい方法や間違った方法が明確に決まっているわけではありません。必要なことは、モバイルデバイスを利用している顧客をサポートするモバイルWebサイトを用意することだけです。

次のステップ

jQuery Mobileの現在のアルファバージョンには、多くの開発努力がつぎ込まれています。モバイルWebデザインの世界に飛び込む機会をうかがっているなら、今がそのときです。jQuery Mobileは、他の方法では実現困難なモバイルWeb開発のフレームワークを提供してくれます。

jQuery Mobileの使用について詳しくは、以下を参照してください。