jQuery Mobile フレームワークを紹介するこの記事を読んで、このフレームワークの基礎と、機能的なモバイル Web アプリケーション・ユーザー・インターフェースを作成する方法を学んでください。この記事ではサンプルを用いて、基本的なページ、ナビゲーション、ツールバー、リスト・ビュー、フォームのコントロール、そして切替効果について説明します。

C. Enrique Ortiz, Developer and author, Freelance

C. Enrique Ortiz は、長年の経験を持つモバイル技術者であり、著作活動も行っています。以前はスペース・シャトルのソフトウェア・エンジニアを務めていましたが、危険なロケットで作業するよりもモバイル技術に専念することに決めました。現在は開発者、新興企業、投資家などに対して、技術、ストラテジー、製品、および市場取引を含め、モバイルのあらゆる側面に関するアドバイスを行っています。



2012年 6月 28日

はじめに

jQuery Mobile は、モバイル Web アプリケーションを作成するには最高のフレームワークです。よく使われている jQuery と jQuery ユーザー・インターフェース (UI) をベースに構築された jQuery Mobile は、モバイル Web アプリケーションを作成する際に有効な統合フレームワークとなります。jQuery Mobile を使うことで、さまざまに異なるモバイル・プラットフォームで一貫性のあるルック・アンド・フィールと動作を確実にすることができます。jQuery Mobile には以下の基本的な特徴があります。

  • 全体的な単純さと柔軟性
    この使い易いフレームワークを使用すると、以下のことが可能になります。
    • JavaScript を必要最小限しか使わない、あるいはまったく使わないマークアップによって、Web ページを作成することができます。
    • 高度な JavaScript とイベントを使用することができます。
    • 1 つの HTML 文書に複数のページを埋め込んで使用することができます。
    • 1 つのアプリケーションを複数のページに分割することができます。
  • プログレッシブ・エンハンスメントとグレースフル・デグラデーション
    jQuery Mobile は最新の HTML5、CSS 3、および JavaScript を利用するものの、すべてのモバイル機器にこれらのサポートが備わっているわけではありません。jQuery Mobile の設計理念は、ハイエンドの機器と、それよりも性能の低い機器 (例えば JavaScript をサポートしない機器) の両方をサポートしながら、可能な限り最高のエクスペリエンスを提供することです。
  • タッチ操作やその他の入力方式のサポート
    jQuery Mobile は、さまざまな入力方式 (タッチ操作、マウス操作、カーソル操作などによるユーザー入力方式) およびそれに伴うイベントをサポートします。
  • アクセシビリティー
    アクセシビリティーを念頭に設計された jQuery Mobile は、障害を持つサイト訪問者が補助技術を使用して Web ページにアクセスできるように、WAI-ARIA (Accessible Rich Internet Applications) に対応しています。
  • 軽量のモジュール構造
    この軽量のフレームワークは、(バージョン 1.0.1 用に縮小化および gzip で圧縮された) 合計 24KB の JavaScript ライブラリー、7KB の CSS、そしていくつかのアイコンで構成されています。
  • テーマ設定
    独自のアプリケーション・スタイル設定を定義できるように、このフレームワークはテーマ・システムも提供しています。新たな ThemeRoller アプリケーションを使用して、独自のテーマを簡単に作成することができます。

jQuery Mobile フレームワークには、ページ、ダイアログ、ツールバー、各種のリスト・ビュー、多種多様なフォーム要素とボタンなど、完全なモバイル Web アプリケーションおよび Web サイトを構築するために必要なすべての UI コンポーネントが組み込まれています。jQuery Mobile は jQuery コアをベースに構築されているため、そのフレームワークでは HTML および XML の DOM (Document Object Model) のトラバースと操作、イベント処理、Ajax を使用したサーバー通信、Web ページ用のアニメーションおよび画像エフェクトなどの重要な機能を使用することができます。

jQuery Mobile では、基本的なモバイル Web アプリケーションをほんのわずかな作業で作成することができます。さらに、jQuery Mobile は高度なイベントおよび API を備えた極めて包括的なフレームワークであるため、先進的なモバイル Web アプリケーションや Web サイトを作成することもできます。

この記事では、jQuery Mobile の最新安定版 (バージョン 1.0.1) で jQuery Mobile の基礎を紹介します。このバージョンでのブラウザー・サポート、UI コンポーネント、API について学んでください。記事の内容を理解するには、以下の経験や知識が必要です。

  • HTML を扱った経験
  • JavaScript の基本を理解していること
  • jQuery の基礎知識

この記事で使用する jQuery Mobile のサンプル・ソース・コードは、ここからダウンロードすることができます。また、「参考文献」セクションに、jQuery Mobile、jQuery、JavaScript、DOM、HTML5 などに関する情報の参照先が記載されています。


ブラウザー・サポート

モバイル・ブラウザーは飛躍的な進歩を遂げていますが、すべてのモバイル機器が HTML5、CSS3、JavaScript をサポートしているわけではありません。この領域で活躍するのが、jQuery Mobile のプログレッシブ・エンハンスメントおよびグレースフル・デグラデーションのサポートです。

jQuery Mobile は、ハイエンドの機器と、それよりも性能の低い機器 (例えば JavaScript をサポートしていない機器) の両方をサポートします。プログレッシブ・エンハンスメントという設計理念は、以下の基本原則からなります (Wikipedia)。

  • すべての基本的なコンテンツはどのブラウザーでも利用できるようにすること
  • すべての基本的な機能はどのブラウザーでも利用できるようにすること
  • 拡張レイアウトは外部でリンクされた CSS によって提供すること
  • 拡張動作は外部でリンクされたJavaScript によって提供すること
  • エンド・ユーザーのブラウザー設定を尊重すること

したがって、すべての基本的なコンテンツは (デザインどおりに) 基本機能を備えた機器でレンダリングできるようにする一方、より高度なプラットフォームおよびブラウザーに対しては、外部でリンクされた JavaScript と CSS を追加で適用してプログレッシブ (漸進的) に拡張します。

jQuery Mobile がサポートするモバイル機器は多数に及びます。そこで、jQuery Mobile では機器をそれぞれのサポート・レベルに応じて以下の 3 つのカテゴリーに分類 (グループ化) しています。

  • A グレード: Ajax ベースのアニメーション化されたページ切替効果によって完全に拡張されたエクスペリエンスをサポートする機器。jQuery Mobile がサポートする A グレードの機器は 20 種類以上あります。具体的には、iOS 3.2-5.0、Android 2.1-2.3 および 3.0、BlackBerry 6-7 および Playbook、Skyfire 4.1、Opera Mobile、デスクトップ・ブラウザーの Chrome、Firefox、Internet Explorer、Opera などが挙げられます。
  • B グレード: Ajax ナビゲーション機能を除く拡張エクスペリエンスをサポートする機器。これらの機器に該当するのは、BlackBerry 5.0、Opera Mini 5.0-6.5、および Nokia Symbian ^3 などです。
  • C グレード: 拡張機能を使用しない基本的な HTML エクスペリエンスをサポートする機器。C グレードの機器は、BlackBerry 4.x、Windows Mobil などを含む、古いスマートフォンです。

jQuery Mobile がサポートするプラットフォームの全リストについては、「参考文献」を参照してください。

記事の残りでは、jQuery Mobile ページの構造、HTML5 のデータ属性、および UI コンポーネントについて説明します。


jQuery Mobile ページの構造

リスト 1 に示すように、典型的な jQuery Mobile ページには、ヘッダー、コンテンツ、およびフッターの 3 つのセクションがあります。

リスト 1. 典型的な jQuery Mobile ページ
lt;div data-role="page" id="page1">
    <div data-role="header">
       <h1>HEADER</h1>
    </div
    <div data-role="content">
       <p>
       CONTENT AREA
       </p>
    </div>
    <div data-role="footer">
       <h1>FOOTER</h1>
    </div>

図 1 に、リスト 1 で記述された構造を示します。

図 1. HTML5 jQuery Mobile ページの構造
ヘッダー、コンテンツ・エリア、およびフッターを示す画像

ヘッダー・セクションには通常、ページの見出しと、ロゴなどが配置されます。コンテンツ・セクションには、Web アプリケーションの固有のコンテンツと各種のウィジェットが入ります。フッター・セクションは、ナビゲーションを行う場所として最適です。

jQuery Mobile の高度な機能と HTML 構文を利用するには、jQuery Mobile の HTML 文書で HTML5 の DOCTYPE が定義されていなければなりません。HTML 文書の残りの部分は、<head> セクションと <body> セクションで構成されます。

  • <head> セクション: jQuery Mobile への参照と、CSS モバイル・テーマが記述されます。
  • <body> セクション: 実際の jQuery Mobile コンテンツが格納されます。

リスト 2 に、jQuery Mobile の HTML5 文書の一例を記載します。

リスト 2. jQuery Mobile の HTML5 ページの構造
//Define the HTML5 doctype:

<!DOCTYPE html> 

// Define the HTML5 <head> with references to jQuery, jQuery Mobile and CSS mobile themes:

<html> 

<head> 
    <title>Page Title</title> 
	
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/
jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.
min.js"></script>
</head> 

// Define the HTML document <body> that includes the jQuery Mobile elements:

<body> 

<div data-role="page" id="page1">

    <div data-role="header">
       <h1>HEADER</h1>
    </div>

    <div data-role="content">
       <p>
       CONTENT AREA
       </p>

    </div>

    <div data-role="footer">
       <h1>FOOTER</h1>
    </div>
</div>

<div data-role="page" id="page2">
:
:
</div>

</body>
</html>

// The footer can be turned into a navigation bar very easily, as follows:

<center>
<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button">One</a>
<a href="index.html" data-role="button">Two</a>
<a href="index.html" data-role="button">Three</a>
<a href="index.html" data-role="button">None</a>
</div>            
</div>
</center>

図 2 に、リスト 2 によって作成されたページ・フッターを示します。

図 2. ページ・フッター
「One」、「Two」、「Three」、および「None」ボタンを表示するページ・フッターの画像

page、header、content、および footer 属性はオプションですが、使用することをお勧めします。これらの属性によって、ページが jQuery Mobile に従っていることがより明確になります。

単一のページ、複数のページ、そしてページのリンク

data-role="page" 属性に示唆されているように、単一の HTML 文書には 1 つ以上の jQuery Mobile ページを含めることができます。複数のページを含める場合には、id 属性に一意のページ ID を指定する必要があります。これらのページ ID が、文書内のページ同士をリンクするために使用されます。複数ページが含まれる HTML 文書をロードした場合には、最初のページだけが表示されます。

jQuery Mobile は、ページをロードするために Ajax を使用します。ページのロード中にはロード・スピナーが表示されます。ロードが正常に完了すると、UI ウィジェットが拡張され、ページが DOM に追加され、ページにアニメーションまたは切替効果が適用されます。

Ajax を使用しないでページをリンクしてロードする場合には、HTTP が使用されることになります。HTTP でロードする場合、アニメーション化されたページ切替効果は適用されません。Ajax なしでロードするには、rel="external"data-ajax="false"、または target 属性をリンクに設定してください。


サポートされるイベントとメソッド

JavaScript で jQuery を使用するときには jQuery オブジェクト自体を $ として参照して jQuery の機能を利用することができます。jQuery コアの拡張である jQuery Mobile フレームワークを使用するには、$.mobile を使用します。$.mobile は、jQuery Mobile に固有のイベントとメソッドにアクセスする手段でもあります。これから、$.mobile で公開されているイベントとメソッドのいくつかを取り上げて説明します。

イベント

他の jQuery イベントと同じく、jQuery Mobile イベントにバインドする場合も live() 関数と bind() 関数を使用します。イベントの種類としては、例えば (tap イベント、taphold イベント、そして各種のスワイプ・イベントを含む) タッチ・イベントや、各種の仮想マウス・イベントがあります。また、端末回転イベントや、scrollstart および scrollstop などのスクロール・イベントをバインドすることもできます。ページ関連のイベントにバインドすると、以下の時点で通知を受け取ることができます。

  • ページが作成される前
  • ページが作成された時点
  • ページが表示または非表示になる直前
  • ページが表示または非表示にされた時点

jQuery Mobile を初期化する

jQuery を使い慣れているとしたら、DOM のロードが完了した時点でコードを実行するには、$(document).ready() 関数の中で初期化する必要があることを思い出すのではないでしょうか。jQuery Mobile を初期化する場合には、pageinit イベントにバインドします (リスト 3 を参照)。

リスト 3. pageint イベントへのバインディング
$( '#welcomePage' ).live( 'pageinit',function(event){
...
});

pageinit イベントは、ページの初期化後、参照されているページに対してトリガーされます。この動作は、ページがロードされる方法 (直接ロードされるか、Ajax を使用してロードされるか) に関わらず実行されます。

jQuery Mobile の初期設定を上書きする

mobileinit イベントにバインドすると、jQuery Mobile の実行開始時にこのイベントがトリガーされて、jQuery Mobile の一部の初期値を上書きすることができます。リスト 4 に一例を記載します。上書きできる初期設定には、ページの切替効果、ページのロード中に表示されるテキスト、ページのロード中に適用されるテーマをはじめ、他にもさまざまなものがあります。

リスト 4. jQuery Mobile の初期化
$(document).bind("mobileinit", function(){
  //apply overrides here
});

jQuery Mobile の初期設定値について詳しく学ぶには、jQuery Mobile のグローバル設定についてのページにアクセスしてください (「参考文献」を参照)。

メソッド

jQuery Mobile には、$.mobile オブジェクトを使用した多数のメソッドが用意されています。表 1 に、使用可能なメソッドの一部を記載します。

表 1.jQuery Mobile のメソッド
メソッド用途
$.mobile.changePageプログラムによってページを切り替えます。例えば、slide 切替効果を使用して weblog.php ページに移動するには、$.mobile.changePage("weblog.php", "slide") と記述します。
$.mobile.loadPage外部ページをロードし、jQuery Mobile でそのページを拡張して DOM に挿入します。
$.mobile.showPageLoadingMsgページのロード中にメッセージを表示します。
$.mobile.hidePageLoadingMsgページのロード中のメッセージを非表示にします。
$.mobile.path.isSameDomain2 つの URL のドメインを比較するユーティリティー・メソッドです。
$.mobile.activePage現在表示されているページを参照します。

jQuery Mobile のメソッドに関するページには、上記に挙げた以外にも多数のメソッドおよびユーティリティーが記載されています (「参考文献」を参照)。


ウィジェットと HTML5 の data-* 属性

jQuery Mobile は、各種の UI 要素、切替効果、ページ構造をサポートするために HTML5 の data-* 属性を利用します。つまり、これらの HTML5 の属性が jQuery Mobile の単純さのカギとなっています。HTML5 をサポートしていないブラウザーは、HTML5 属性を暗黙的に破棄します。

以降に、さまざまな UI ウィジェットと data-* 属性を使用して UI コンポーネントを作成するコードと、そのコードによるレンダリングの結果を示します。

  • ページ、ヘッダー、コンテンツ、およびフッター
    リスト 5. ページ、ヘッダー、コンテンツ、およびフッター
    <div data-role="page" id="page1">
        <div data-role="header">
           <h1>HEADER</h1>
        </div
        <div data-role="content">
           <p>
           CONTENT AREA
           </p>
        </div>
        <div data-role="footer">
           <h1>FOOTER</h1>
        </div>
    </div>
    図 3. ページ、ヘッダー、コンテンツ、およびフッター
    ページ、ヘッダー、コンテンツ、およびフッター
  • 基本的なボタン
    リスト 6. 基本的なボタンn
    <a href="index.html" data-role="button" data-icon="info">Button</a>

    図 4. 基本的なボタン
    基本的なボタン
  • チェック・ボックス
    リスト 7. チェック・ボックス
    <input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />
    <label for="checkbox-0">Checkbox</label>
    図 5. チェック・ボックス
    チェック・ボックス
  • 折り畳み式コンテンツ
    リスト 8. 折り畳み式コンテンツ
    <div data-role="collapsible">
       <h3>Header</h3>
       <p>Paragraph...</p>
    
    </div>
    図 6. 折り畳み式コンテンツ
    折り畳み式コンテンツ
  • 切替効果を使用したダイアログのオープン
    リスト 9. ダイアログのオープン
    <a href="dialog.html" data-rel="dialog" data-transition="pop">Open dialog</a>

    リスト 9 のコードは、pop タイプの切替効果を使用してダイアログ・ウィジェットを開くハイパーリンクです。図 7 に、ダイアログ・ウィジェットの一例を示します。

    図 7. ダイアログのオープン
    ダイアログのオープン
  • フリップ・スイッチ
    リスト 10. フリップ・スイッチ
    <label for="flip-a">Select slider:</label>
    <select name="slider" id="flip-a" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select>
    図 8. フリップ・スイッチ
    フリップ・スイッチ
  • リスト・ビュー
    リスト 11. リスト・ビュー
    <ul data-role="listview" data-theme="g">
      <li><a href="Friends.html">Friends</a></li>
      <li><a href="SendMessage.html">Send Message</a></li>
      <li><a href="Share.html">Share</a></li>
    </ul>
    図 9. リスト・ビュー
    リスト・ビュー
  • ナビゲーション・バー
    リスト 12. ナビゲーション・バー
    <div data-role="navbar">
       <ul>
           <li><a href="a.html" class="ui-btn-active">One</a></li>
           <li><a href="b.html">Two</a></li>
       </ul>
    </div>
    図 10. ナビゲーション・バー
    ナビゲーション・バー
  • ラジオ・ボタン
    リスト 13. ラジオ・ボタン
    <fieldset data-role="controlgroup">
        <legend>Choose a pet:</legend>
            <input type="radio" name="radio-choice-1" id="radio-choice-1" 
    value="choice-1" checked="checked" />
            <label for="radio-choice-1">Cat</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-2" 
    value="choice-2"  />
            <label for="radio-choice-2">Dog</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-3"
    value="choice-3"  />
            <label for="radio-choice-3">Hamster</label>
    </fieldset>
    図 11. ラジオ・ボタン
    ラジオ・ボタン
  • 選択 (フォーム)
    リスト 14. 選択 (フォーム)
    <label for="select-choice-0" class="select">Shipping 
    method:</label>
    <select name="select-choice-0" id="select-choice-1">
       <option value="standard">Standard: 7 day</option>
       <option value="rush">Rush: 3 days</option>
       <option value="express">Express: next day</option>
       <option value="overnight">Overnight</option>
    </select>
    図 12. 選択 (フォーム)
    選択 (フォーム)
  • スライダー
    リスト 15. スライダー
    <label for="slider-0">Input slider:</label>
    <input type="range" name="slider" id="slider-0" value="60" 
    min="0" max="100" />
    図 13. スライダー
    スライダー
  • テキスト入力
    リスト 16. テキスト入力
    <label for="basic">Text Input:</label>
    <input type="text" name="name" id="basic" value=""  />
    図 14. テキスト入力
    テキスト入力
  • テキスト・エリア
    リスト 17. テキスト・エリア
    <label for="textarea-a">Textarea:</label>
    <textarea name="textarea" id="textarea-a">
    Basic textarea.
    </textarea>
    図 15. テキスト・エリア
    テキスト・エリア
  • グリッド
    リスト 18. グリッド
    <div class="ui-block-a">Block A</div>
    <div class="ui-block-b">Block B</div>
    <div class="ui-block-c">Block C</div>
    </div>

    注:

    • 2 列のグリッドには、ui-grid-a クラスを使用します。
    • 3 列のグリッドには、ui-grid-b クラスを使用します。
    • 4 列のグリッドには、ui-grid-c クラスを使用します。
    • 5 列のグリッドには、ui-grid-d クラスを使用します。
    図 16. グリッド
    グリッド

data-role 属性はさまざまなウィジェットを定義するために使用されますが、すべての UI ウィジェットが data-role 属性を使用するわけではないことに注意してください (例えば、セレクト・メニュー、スライダー、テキスト入力には、この属性を使用しません)。各種の data-* 属性についての詳細は、jQuery Mobile 日本語リファレンスの data 属性リファレンスについてのページを参照してください (「参考文献」を参照)。

前述のように、jQuery Mobile UI フレームワークには、ページ、ダイアログ、ツールバー、各種のリスト・ビュー、多種多様なフォーム要素とボタンなど、完全なモバイル Web アプリケーションおよび Web サイトを構築するために必要なすべての UI コンポーネントが組み込まれています。そのうち、上記ではさまざまな jQuery Mobile UI ウィジェットを定義するために使用する HTML5 の data-* 属性を取り上げました。このセクションの残りでは、最もよく使われている jQuery Mobile UI ウィジェットについて説明します。

ダイアログ

ユーザーにアラートやメッセージを表示する手段として非常に役立つモーダル・ダイアログは、ページに不可欠のタイプです。以下のようにページのアンカー・リンクに data-rel="dialog" 属性を追加することで、あらゆるページをモーダル・ダイアログに変換することができます。

<a href="tc.html" data-rel="dialog" data-transition="pop">Terms of 
Use</a>

モーダル・ダイアログには、切替効果とテーマを適用することができます。詳細は、jQuery Mobile 日本語リファレンスのダイアログについてのページを調べてください (「参考文献」を参照)。

リスト・ビュー

リスト・ビューは、モバイル・アプリケーションでは最も重要な UI 要素の 1 つです。jQuery Mobile では、基本的なリスト、階層化リスト、分割ボタン・リスト、番号付きリスト、子要素数表示リスト、アイコン表示リストなど、多彩なリスト・ビュー要素をサポートしています。いくつかのリスト・ビューのコードとレンダリング結果を見ていきましょう。

  • リンクされた基本的なリスト
    リスト 19. リンクされた基本的なリスト
    <ul data-role="listview">
      <li><a href="index.html">Acura</a></li>
    </ul>
    図 17. リンクされた基本的なリスト
    リンクされた基本的なリスト
  • 階層化リスト
    リスト 20. 階層化リスト
    <ul data-role="listview">
      <li>
        <h3>Animals</h3>
        <p>All your favorites from aarkvarks to zebras.</p>
          <ul>
            <li>Pets
              <ul>
                <li><a href="index.html">Canary</a></li>
                <li><a href="index.html">Cat</a></li>
                <li><a href="index.html">Dog</a></li>
                <li><a href="index.html">Gerbil</a></li>
                <li><a href="index.html">Iguana</a></li>
                <li><a href="index.html">Mouse</a></li>
              </ul>
            </li>
          </ul>
    </ul>
    図 18. 階層化リスト
    階層化リスト
  • 番号付きリスト
    リスト 21. 番号付きリスト
    <ol data-role="listview">
      <li><a href="index.html">The Godfather</a></li>
    </ol>
    図 19. 番号付きリスト
    番号付きリスト
  • 分割ボタン・リスト
    リスト 22. 分割ボタン・リスト
    <ul data-role="listview" data-split-icon="gear" data-split-theme="d">
      <li>
        <a href="index.html">
        <img src="images/album-ws.jpg" />
        <h3>Elephant</h3>
        <p>The White Stripes</p>
        </a><a href="lists-split-purchase.html" data-rel="dialog" 
    data-transition="slideup">Purchase album</a>
      </li>			
    </ul>
    図 20. 分割ボタン・リスト
    分割ボタン・リスト

インセット・リスト

jQuery Mobile は、そのすべてのリスト・ビューのインセット・リスト (角丸リスト) をサポートしており、それには data-insert 属性を指定します (図 21 を参照)。

図 21. インセット・リスト
インセット・リスト

リスト 23 に、インセット・リストのコードを記載します。

リスト 23. インセット・リスト
<ul data-role="listview" data-inset="true">
    <li>
      <a href="index.html">Get Friends</a>
    </li>
    <li>
      <a href="index.html">Post to Wall</a>
    </li>
    <li>
      <a href="index.html">Send Message</a>
    </li>
</ul>

jQuery Mobile には豊富なリスト・ビューが用意されています。詳細は、jQuery Mobile 日本語リファレンスのリスト・ビューについてのページを参照してください (「参考文献」を参照)。

フォーム

フォームは、サーバーに情報を送信するために Web で共通して使用される成果物です。jQuery Mobile でサポートしているフォーム UI コンポーネントは、テキスト入力、検索入力、スライダー、フリップ・スイッチ、ラジオ・ボタン、チェック・ボックス、セレクト・メニュー、フォームのテーマなど、多数に及びます。これらの UI コンポーネントはすべて、簡単に作成することができます。これらの要素の大半については、前のセクションで取り上げました。

jQuery Mobile にはフォーム要素が豊富に用意されています。リスト 24 に、セレクト・メニューとサブミット・ボタンを使用したフォームを記載します。

リスト 24. 単純なフォームとサブミット・ボタン
<form action="forms-results.php" method="get"> 
    <fieldset> 
        <div data-role="fieldcontain">
            <label for="select-options" class="select">Choose 
an option:</label>
            <select name="select-options" id="select-options">
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option2">Option 3</option>
            </select>
        </div>
        <button type="submit">Submit</button> 
    </fieldset> 
</form>

セレクト・メニューには、ネイティブの <select name="select-options" id="select-options"> が使用されますが、jQuery Mobile はそのルック・アンド・フィールに磨きをかけます。<div data-role="fieldcontain"> ステートメントによって、表示に関するさまざまな値がグループ化され、ネイティブの <form action="..." method="get"> によって、フォーム本体が定義されます。

図 22 に、リスト 24 による結果を示します。

図 22. セレクト・メニューとサブミット・ボタンからなる単純なフォーム
セレクト・メニューとサブミット・ボタンからなる単純なフォーム

詳細は、jQuery Mobile 日本語リファレンスのフォーム要素についてのページを調べてください (「参考文献」を参照)。


ページ切替効果

jQuery Mobile は、表 2 に記載する数々の巧みな CSS ベースの切替効果をサポートします。これらの切替効果は、ダイアログとページの両方に適用することができます。

表 2. CSS ベースの切替効果
切替効果の種類切替効果の内容
fadeページまたはダイアログをフェードイン/フェードアウトさせて切り替えます
popページまたはダイアログをポップアップ表示させて切り替えます
flipページまたはダイアログを横方向の回転で裏返して切り替えます
turnページまたはダイアログをスライドしながら横方向に 90 度回転させて切り替えます
flowページまたはダイアログを小さくしてから (slide 効果と似たように) スライドさせて切り替えます
slideページまたはダイアログを (横方向に) スライドさせて切り替えます
slideupページまたはダイアログを下から上にスライドさせて表示します
slidedownページまたはダイアログを上から下にスライドさせて表示します
none切替効果を使用しません

特定のアニメーションを適用するには、該当する data-transition 属性をリンクに追加します (リスト 25 を参照)。

リスト 25. data-transition 属性の追加
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog"
 data-transition="fade">Search</a>

切替効果にはハードウェア・アクセラレーションが使用されるため、ブラウザーが 3D 変換をサポートしている必要があります。3D をサポートしていない機器では、切替効果は fade にフォールバックされます。

jQuery Mobile の切替効果についてのページに、切替効果の動作とその他の関連情報が記載されています (「参考文献」を参照)。


テーマと ThemeRoller

jQuery Mobile では、data-theme 属性でテーマを指定することにより、アプリケーションの外観をカスタマイズできるようになっています。jQuery Mobile には 1 つのデフォルト・テーマと、A から E までの名前が付いた 5 つのスウォッチが用意されています (表 3 を参照)。

表 3. テーマとスタイル
テーマスタイル
デフォルト・テーマ
スウォッチ A
スウォッチ B
スウォッチ C
スウォッチ D
スウォッチ E

テーマは、ページやボタンなどの個々の要素ごとに設定することができます。

図 23 に示す ThemeRoller という Web ベースのアプリケーションでは、モバイル Web アプリケーションやミニ Web サイトのテーマを作成することができます。また、ThemeRoller を使って独自のテーマを作成し、カスタム CSS ファイルをダウンロードしてプロジェクトで使用することも可能です。

図 23. ThemeRoller
ThemeRoller

まとめ

この記事では、まず始めに jQuery Mobile フレームワークの基礎を説明し、続いてサンプルを用いて基本的なページ、ナビゲーション、ツールバー、リスト・ビュー、フォームのコントロール、切替効果などの使い方を説明しました。jQuery Mobile フレームワークには、この記事で取り上げた以外のメソッドやイベントを含め、高度なアプリケーションを作成するための豊富な機能があります。jQuery Mobile では、ウィジェットを使用したり、カスタマイズしたりすることも可能です。この記事をきっかけに、皆さんが jQuery Mobile を使用して機能的なモバイル Web アプリケーション UI を作成してみようという気になったことを願います。


ダウンロード

内容ファイル名サイズ
jQuery plugin source codejquerymobileexamplecode.zip2KB

参考文献

学ぶために

  • jQuery Mobile フレームワーク: サポートされるプラットフォームやテーマについての情報、そしてリソース、ドキュメント、ニュースなどを入手してください。
  • ドキュメント: jQuery のすべてのドキュメントにアクセスしてください。
  • ThemeRoller for jQuery Mobile: A から Z までの名前が付いた、それぞれ固有のカラー・スキームを持つ最大 26 のテーマ「スウォッチ」を作成する方法を調べてください。これらのスウォッチをミックス・アンド・マッチすることで、無限大の可能性が生まれます。
  • jQuery Mobile の詳細を学んでください。
  • デモとドキュメント: jQuery Mobile の概要を把握し、その API とコンポーネントを学んでデモ・コードにアクセスしてください。
  • Mobile Graded Browser Support: jQuery Mobile でサポートされているブラウザーのリストを参照してください。
  • JavaScript Guide: JavaScript を使用する際に必要なすべての情報を提供します。
  • Mozilla Developer Network: Web 開発者向けの素晴らしい情報源です。
  • jQuery Fundamentals」(Rebecca Murphey 著、2010年): jQuery JavaScript ライブラリーの包括的概要を説明しています。
  • jQuery: Plugins/Authoring: 独自の jQuery プラグインを作成する方法を説明しています。
  • What is the Document Object Model?」(W3C、2000年11月): ドキュメント・オブジェクト・モデルとは何かについて詳しく学んでください。
  • DOM objects and methods: W3C DOM のプロパティー、コレクション、およびメソッドのすべてを網羅した JavaScript チュートリアルです。
  • WAI-ARIA Overview: WAI-ARIA (Accessible Rich Internet Applications Suite) は、障害者にとって利用しやすい Web コンテンツと Web アプリケーションにする方法を定義しています。
  • Progressive enhancement」(Wikipedia): アクセシビリティー、セマンティック HTML マークアップ、そして外部スタイルシートとスクリプト技術を重視した Web 設計ストラテジー、プログレッシブ・エンハンスメントについての説明を読んでください。
  • JavaScript and the Document Object Model」(developerWorks、2002年7月): JavaScript での DOM 手法、そしてユーザーがメモを追加し、メモの内容を編集できる Web ページの作成手順を説明しています。
  • Understanding DOM」(developerWorks、2007年3月): このチュートリアルで、DOM 文書の構造について学んでください。
  • W3C による HTML5 仕様を読んでください。
  • developerWorks Web development ゾーン: さまざまな Web ベースのソリューションを話題にした記事を調べてください。広範な技術に関する記事とヒント、チュートリアル、標準、そして IBM Redbooks については、Web development の Technical Library を参照してください。
  • developerWorks Mobile development ゾーン: モバイル開発者向けの広範なトピックを集めたこのゾーンで、ハウツー記事、評価コード、技術的見解を調べてください。
  • developerWorks の Technical events and webcasts: これらのセッションで最新情報を入手してください。
  • developerWorks Live! briefings: 無料の developerWorks Live! briefing に参加して、IBM の製品およびツールについての情報や IT 業界の動向についての情報を迅速に把握してください。
  • developerWorks オンデマンド・デモ: 初心者向けの製品のインストールおよびセットアップから熟練開発者向けの高度な機能に至るまで、さまざまに揃ったデモを見てください。
  • Twitter での developerWorks: 今すぐ登録して developerWorks のツイートをフォローしてください。

製品や技術を入手するために

  • jQuery Mobile: 1.1.0 をダウンロードしてください。jQuery Mobile Alpha 2 も入手可能です。
  • PhoneGap は、クロスプラットフォーム・モバイル・アプリケーションを構築するためのオープンソースの開発フレームワークです。
  • IBM 製品の評価版: DB2、Lotus、Rational、Tivoli、および WebSphere のアプリケーション開発ツールとミドルウェア製品を体験するには、評価版をダウンロードするか、IBM SOA Sandbox のオンライン試用版を試してみてください。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Mobile development, Open source
ArticleID=822274
ArticleTitle=jQuery Mobile 入門
publish-date=06282012