ユーザー・インターフェース (UI) フレームワークである jQuery Mobile を使用すると、実用的なモバイル Web アプリケーションを 1 行も JavaScript のコーディングをせずに作成することができます。この記事では、jQuery Mobile フレームワークの特徴について、基本的なページ、ナビゲーション・ツールバー、フォーム・コントロール、トランジション・エフェクトなどを含めて学びます。
この記事を読み進める上で必要なものは以下のとおりです。
- HTML を扱った経験
- JavaScript の基本知識
- jQuery の基本知識
この記事で使用する jQuery プラグインのソース・コードは下記の「ダウンロード」セクションからダウンロードすることができます。「参考文献」には、jQuery、JavaScript、DOM、HTML5 などについての情報を挙げてあります。
jQuery Mobile はタッチ操作に適した Web UI 用の開発フレームワークであり、さまざまなスマートフォンやタブレットで動作するモバイル Web アプリケーションの開発に活用することができます。jQuery Mobile フレームワークは jQuery コアをベースに構築されており、さまざまな機能を提供しています。例えば、HTML や XML の DOM (Document Object Model) のトラバースや操作、イベント処理、Ajax を使用したサーバーとの通信、Web ページのためのアニメーションや画像エフェクトなどの機能があります。jQuery Mobile フレームワーク自体は jQuery コアとは別に、約 12KB (縮小化され、gzip で圧縮されています) を追加でダウンロードする必要があります (jQuery コアは縮小化して gzip で圧縮した場合に約 25KB あります)。jQuery フレームワークの他と同様で、jQuery Mobile は無料のデュアル・ライセンス (MIT と GPL) のライブラリーです。
この記事の執筆時点で、jQuery Mobile フレームワークのバージョンはアルファ 2 です (v1.0a2)。コードはまだドラフト・レベルであり、変更される可能性があります。とは言っても、現状の jQuery Mobile フレームワークはかなり安定しています。驚くほど豊富な数のコンポーネントがアルファ・リリースに用意されていることから、jQuery Mobile はモバイル Web アプリケーション開発のための素晴らしいフレームワーク兼ツール・セットになると期待されています。
jQuery Mobile の基本的な特徴として、以下の点が挙げられます。
- 全体として単純
- jQuery Mobile フレームワークの使い方は簡単です。主にマークアップを使って Web ページを作成することができ、JavaScript はほとんど、あるいはまったく使う必要がありません。
- プログレッシブ・エンハンスメントとグレースフル・デグラデーション
- jQuery Mobile は最新の HTML5、CSS3、JavaScript を活用していますが、すべてのモバイル機器がそれらをサポートしているわけではありません。jQuery Mobile の基本思想は、ハイエンドの機器も、あまり高機能ではない機器 (JavaScript をサポートしない機器など) も共にサポートしつつ、可能な限り最高のエクスペリエンスを提供することです。
- アクセシビリティー
- jQuery Mobile はアクセシビリティーを考慮して設計されています。jQuery Mobile は WAI-ARIA (Accessible Rich Internet Applications) をサポートすることにより、ユーザー補助技術を使用して障害を持つ訪問者でも Web ページを利用できるようにします。
- サイズが小さい
- jQuery Mobile フレームワーク全体としてのサイズは比較的小さく、12KB の JavaScript ライブラリー、6KB の CSS、そしていくつかのアイコンがあるのみです。
- テーマ設定
- jQuery Mobile フレームワークには、独自のアプリケーション・スタイルを設定できるテーマ・システムも用意されています。
Web 技術を使用してスタンドアロンのアプリケーションを作成する PhoneGap (「参考文献」を参照) などのツールキット、そして jQuery Mobile フレームワークを組み合わせて使用すると、アプリケーション開発を単純化することができます。
モバイル機器におけるブラウザーのサポートは大きく進歩しましたが、すべてのモバイル機器が HTML5、CSS 3、JavaScript をサポートしているわけではありません。このような状況で強みを発揮するのが、プログレッシブ・エンハンスメントとグレースフル・デグラデーションをサポートする jQuery Mobile です。上述のように、jQuery Mobile はハイエンドの機器も、あまり高機能ではない機器 (JavaScript をサポートしない機器など) も、共にサポートすることができます。プログレッシブ・エンハンスメントの中核となる原則は以下のとおりです (ウィキペディアから引用)。
- すべての基本コンテンツはすべてのブラウザーで利用可能であること
- すべての基本機能はすべてのブラウザーで利用可能であること
- レイアウトの拡張は外部リンクの CSS によって提供されること
- 動作の拡張は外部リンクの JavaScript によって提供されること
- エンド・ユーザーのブラウザーの設定が優先されること
すべての基本コンテンツは (設計されたとおり) 基本的な機器で表示できる必要がありますが、より高度なプラットフォームやブラウザーでは、追加された外部リンクの JavaScript および CSS によるプログレッシブ・エンハンスメントが行われます。
jQuery Mobile は現在、以下のモバイル・プラットフォームをサポートしています。
- Apple® iOS: iPhone、iPod touch、iPad (すべてのバージョン)
- Android™: すべての機器 (すべてのバージョン)
- Blackberry® Torch (バージョン 6)
- Palm™ WebOS Pre、Pixi
- Nokia® N900 (対応中)
詳細な情報は、jQuery Mobile のサイトに掲載されている、サポートされているブラウザーの一覧を参照してください (「参考文献」を参照)。
jQuery Mobile はさまざまな種類の UI 要素をサポートしており、そのサポートは安定しています。図 1 は現在サポートされている UI コンポーネントの概要を示しています。
ツールバー、ボタン、リスト・ビュー、タブ、ポップアップ・メニュー、ダイアログ、トランジション・エフェクト、編集パネル、フォーム要素がサポートされています。すべてとは言わないまでも、モバイル Web アプリケーションに必要なほとんどの UI 要素が用意されています。
$.mobile とサポートされているメソッドおよびイベント
JavaScript オブジェクトとしての jQuery は $ と書かれることもあります。jQuery Mobile フレームワークはモバイル・プラグインによって jQuery コアを拡張しています (例えば、いくつかのイベントやメソッドを定義する mobile つまり $.mobile などがあります)。$.mobile が公開しているメソッドには以下のようなものがあります。
| メソッド | 使い方 |
|---|---|
$.mobile.changePage | プログラムによってページを切り換えます。 例えばスライドショーを使って weblog.php というページに遷移するには、 |
$.mobile.pageLoading | ページのロード中を示すメッセージを表示または非表示にします。 例えばメッセージを非表示にするためには |
$.mobile.silentScroll | 特定の Y 座標の位置まで、スクロール・イベントを生成せずにスクロールします。 例えば Y 座標の位置 100 までスクロールするためには |
$.mobile.addResolutionBreakpoints | jQuery Mobile には、min/max クラスに対するブレークポイントがあらかじめ定義されています。ブレークポイントを追加するためには、このメソッドを呼び出します。 例えば、ピクセル幅 800 の min/max クラスを追加するには、 |
$.mobile.activePage | 現在アクティブなページを参照します。 |
bind() メソッドまたは live() メソッドを使ってバインドすることができるイベントがいくつかあります。例えば jQuery Mobile の初期化、タッチ・イベント、機器の向きの変更、スクロール・イベント、ページ表示/非表示イベント、ページ初期化イベント、アニメーション・イベントなどがあります。
例えばタッチ・イベントには、tap、taphold、そしてさまざまなスワイプ・イベントなどがあります。スクロール・イベントにはscrollstart と scrollstop があります。ページ・イベントを利用すると通知を受信することができ、通知のタイミングとしては、ページの作成前、ページ作成時、ページ表示/非表示の直前、そしてページを表示/非表示にした時があります。
リスト 1 は jQuery Mobile の実行開始時に特定のイベントをバインドする例を示しています。
$(document).bind("mobileinit", function(){ //apply overrides here }); |
上記のイベントにより、jQuery Mobile 起動時のデフォルト値を変更することができます。変更可能な設定は以下のとおりです。
LoadingMessage― ページのロード中に表示されるデフォルトのテキストを設定します。defaultTransition― Ajax を使用するページが切り替わるときのデフォルトの遷移を設定します。
必要に応じて変更することが可能な構成パラメーターは他にもあります。詳細については jQuery Mobile のドキュメント (「参考文献」を参照) またはソース・コード (「ダウンロード」を参照) を参照してください。
また、他のイベントにバインドし、touch イベントや page イベントをベースにした動的アプリケーションを作成することもできます。
jQuery Mobile は HTML5 の data-* 属性を利用することで、さまざまな UI 要素、遷移、ページ構造をサポートしています。ブラウザーでサポートされていない場合には、それらの機能は単純に無視されます。表 2 は UI コンポーネントを作成するための data-*属性の使い方を示しています。
| コンポーネント | HTML5 の data-* 属性 |
|---|---|
| ヘッダー・ツールバー、フッター・ツールバー | <div data-role="header"> <div data-role="footer"> |
| コンテンツ本体 | <div data-role="content"> |
| ボタン | <a href="index.html" data-role="button" data-icon="info">Button</a> |
| グループ化されたボタン | <div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Hell Yeah</a> </div> |
| インライン・ボタン | <div data-inline="true"> <a href="index.html" data-role="button">Foo</a> <a href="index.html" data-role="button" data-theme="b">Bar</a> </div> |
| フォーム要素 (選択メニュー) | <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> |
| 基本的なリスト・ビュー | <ul data-role="listview"> <li><a href="index.html">One</a></li> <li><a href="index.html">Two</a></li> <li><a href="index.html">Three</a></li> </ul> |
| ダイアログ | <a href="foo.html" data-rel="dialog">Open dialog</a> <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a> |
| 遷移 | <a href="index.html" data-transition="pop" data-back="true"> |
jQuery Mobile のドキュメントには、サポートされている data-* 構文の完全なリストがあります。
このセクションでは、jQuery Mobile のページの一般的な構造について説明します。jQuery Mobile にはページ自体の構造に関するガイドラインがあります。一般的に、ページの構造には以下のセクションが含まれている必要があります。
- ヘッダー・バー
- 通常はページ・タイトルと「戻る」ボタンを含んでいます。
- コンテンツ
- アプリケーションのコンテンツです。
- フッター・バー
- 通常は、ナビゲーション要素、著作権情報、その他フッターに追加する必要のある任意のものが含まれています。
図 2 はさまざまなセクションの例を示しています。
ヘッダー・ツールバーとフッター・ツールバーの位置オプションとして、固定型とフルスクリーン型がサポートされています。固定型の位置オプションでは、スクロールの際にツールバーは静止しています。フルスクリーン型の位置オプションは基本的に固定型と同じですが、ページをクリックした場合にのみツールバーが表示され、それ以外のときには、コンテンツの表示が妨げられることなくフルに表示される点が異なります。このセクションのここから先では、一般的なページ構造の HTML コードについて探っていきます。
HTML 型の文書自体を定義するものは !DOCTYPE html> です。このタグは HTML5 の文書型を定義しています。
HTML の head セクションにより、以下の 3 つの重要な jQuery Mobile コンポーネントがロードされます。
- jQuery Core ライブラリー — jQuery のコア・ライブラリー
- jQuery Mobile ライブラリー — jQuery フレームワークのモバイル特有の部分
- jQuery Mobile CSS — jQuery Mobile のコア UI 要素を定義する CSS です。この CSS は遷移や多種多様な UI ウィジェット (スライダーやボタンなど) を定義し、また Webkit による変換やアニメーションを多用します。
リスト 2 は HTML の head セクションを示しています。
<html> <head> <meta charset="utf-8" /> <title>Intro to jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile /1.0a2/jquery.mobile-1.0a2.min.css" /> <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a2 /jquery.mobile-1.0a2.min.js"></script> </head> |
次のHTML コード・セクションでは、ページ自体を定義します。data-role="page" 属性の使い方の例として、リスト 3 を見てください。
<body> <div data-role="page" id="page1"> |
リスト 3 はページを定義しています。id 属性が必要となるのは、同じ HTML ファイル文書上にローカルのページ・ブロックが複数ある場合のみですが、一意の ID を定義することは適切なプラクティスです。
以下のコード・リストはページのヘッダー・セクション、コンテンツ・セクション、フッター・セクションを定義する方法を示しています。ヘッダー・バーは通常、ページ・タイトルと「戻る」ボタンで構成されています (リスト 4)。
<div data-role="header"> <h1>Header Bar</h1> </div><!-- /header --> |
この場合、ヘッダー・バーは h1 で囲まれるヘッダー・タイトルのテキストのみで構成されています。コンテンツの大部分は以下に示すようにヘッダーの後に配置されます。リスト 5 の例には単純な段落しかありませんが、この部分にリスト、ボタン、フォーム等を追加します。
<div data-role="content"> <p>Content Section</p> </div><!-- /content --> |
フッター・バーには通常、ナビゲーション要素と著作権情報を配置します (リスト 6)。
<div data-role="footer"> <h4>Footer Bar</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html> |
リスト 6 のフッター・セクションは非常に単純です。フッター・バーにナビゲーション・バーを追加することも、それほど複雑ではありません (リスト 7)。
<div data-role="footer" class="ui-bar"> <div data-role="controlgroup" data-type="horizontal"> <a href="index.html" data-role="button">Today</a> <a href="index.html" data-role="button">Tomorrow</a> <a href="index.html" data-role="button">Week</a> <a href="index.html" data-role="button">No date</a> </div> </div><!-- /footer --> |
図 3 はナビゲーション・バーが新たに追加されたフッター・バー・セクションを示しています。
上の例では 1 つのページについて説明しました。jQuery Mobile では 1 つの HTML 文書の中に複数のページを持つことができます。複数のページは内部でリンクされたローカルな「ページ群」であり、これらのページをグループ化してプリロードすることができます。複数ページの構造は上記の 1 つのページの場合と似ていますが、ページ用の data-roleロールが複数含まれる点が異なります。リスト 8 はその一例を示しています。
<div data-role="page" id=page1"> <div data-role="header"> : </div> <div data-role="content"> : </div> <div data-role="footer"> : </div> </div> : : <div data-role="page" id=page2"> <div data-role="header"> : </div> <div data-role="content"> : </div> <div data-role="footer"> : </div> </div> |
同じ HTML 文書にとってローカルな 1 つのページを参照する場合、jQuery Mobile はその参照を自動的に処理します。外部ページを参照する場合には、jQuery Mobile はローディング・スピナーを表示します。エラーが発生すると、jQuery Mobile フレームワークはポップアップ表示されるエラー・メッセージを自動的に表示して処理します。
jQuery Mobile は (jQtouch の発想による) CSS ベースのページ遷移をサポートしており、新しいページにナビゲートする際、またそのページから戻る際、それらのページ遷移が適用されます。ページ遷移には以下のようなものがあります。
- slide
- 水平方向に遷移します。
- slideup と slidedown
- 上向きまたは下向きに画面を遷移します。
- pop
- ポップアップ形式の遷移を行います。
- fade
- フェードイン/フェードアウト遷移を行います。
- flip
- ページをめくるフリップ形式の遷移を行います。
ページ遷移を追加する方法には以下の 2 つがあります。
- リンクに data-transition 属性を追加する方法 (
<a href="index.html" data-transition="pop" data-back="true">を使用します)。静的なページには
data-transition属性を使用します。 - プログラムによる方法 (
$.mobile.changePage("pendingtasks.html", "slideup");を使用します)。動的なページを扱う場合にはプログラムによる方法を使用します。
リスト・ビューは基本的なタイプの UI 要素ですが、モバイル・アプリケーションでは非常によく使われます。jQuery Mobile は数多くのリスト・ビューをサポートしています。例えば、基本リスト、ネストされたリスト、番号付きリスト、読み取り専用リスト、スプリット・ボタン、リスト・デバイダー、カウント・バブル、サムネイル、アイコン、検索フィルター・バー、スタイル設定 (余白や角丸など) されたリスト、テーマ・リストなどをサポートしています。
リスト 9 は基本的なリスト・ビューを示しています。リスト・ビューを作成するためには <ul data-role="listview"> というデータ属性を使用します。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Intro to jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile /1.0a2/jquery.mobile-1.0a2.min.css" /> <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a2 /jquery.mobile-1.0a2.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Facebook Friends</h1> </div><!-- /header --> <div data-role="content"> <p> <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> </p> </div><!-- /content --> <div data-role="footer"> </div><!-- /footer --> </div><!-- /page --> </body> </html> |
<ul data-role="listview"/> の中で、共通の <li> リスト項目を定義します。これは基本的な HTML 構文を jQuery Mobile によって拡張する絶好の例です。リスト 10 のコード・サンプルの結果を示したものが図 4 です。
フォームも一般的な Web 成果物であり、サーバーに情報を POST 送信するために使用されます。jQuery Mobile は多くのフォーム UI コンポーネントをサポートしています (テキスト入力、検索入力、スライダー、フリップ・トグルスイッチ、ラジオ・ボタン、チェックボックス、選択メニュー、テーマ・フォームなど)。これらはどれも非常に容易に作成することができます。リスト 10 は選択メニューと送信ボタンを持つフォームを示しています。
選択メニューはネイティブの <select name="select-options" id="select-options"> によって作成されますが、jQuery Mobile ではそのルック・アンド・フィールが改善されています。<div data-role="fieldcontain"> 文は、さまざまな値をグループ化し、画面を見やすくします。フォーム自体はネイティブの <form action="..." method="get"> によって定義することができます。
<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> |
図 5 はフォームとフォームの内容を示しています。
選択メニューが選択されると、jQuery Mobile は画像の上にポップアップを表示します (図 5の右側部分)。このポップアップには選択対象となる値がすべて表示されており、選択動作が終了すると自動的にポップアップは閉じられます。フォームの action 属性とmethod 属性が適切に定義されている限り、フォーム、Ajax 呼び出し、結果ページの間の遷移は jQuery Mobile によって処理され、また必要に応じてスピナーが表示されます。
jQuery Mobile の Web サイトやドキュメントには、調べる価値のある UI 要素や要素のバリエーションが他にもたくさんあります (「参考文献」を参照)。この記事の補足として調べることをお勧めする項目としては、折り畳み可能なコンテンツ、レイアウト・グリッド、テーマ設定、上記以外のリスト・ビューやフォームなどがあります。
jQuery Mobile JavaScript フレームワークを詳細に説明したこの記事では、jQuery Mobile の基本を学び、また 1 行も JavaScript のコーディングをせずに実用的な Web ページを作成する方法を学びました。HTML 文書を操作する必要がある場合には、jQuery コアを利用して HTML 文書を操作することができます。またこの記事では、基本的なページとナビゲーション、ツールバー、フォーム・コントロール、トランジション・エフェクトについても説明しました。jQuery Mobile には非常に多数のメソッド、イベント、プロパティーが用意されており、それらをプログラムによって操作することができます。この記事を元に、この記事で説明しなかった UI コンポーネントについても調べてみてください。
学ぶために
- jQuery Mobile フレームワークのすべてについて学んでください。
- jQuery Mobile のドキュメントとデモのページを見てください。技術記事、API、デモ・コードなどが用意されています。
- jQuery のドキュメントを調べてみてください。
- Mobile Graded Browser Support ページには jQuery Mobile でサポートされているブラウザーの一覧があります。
- 「jQuery Fundamentals」(Rebecca Murphey 著、2010年) は jQuery JavaScript ライブラリーの全体的な概要を解説しています。
- jQuery: Plugins/Authoring には独自の jQuery プラグインを作成する方法が解説されています。
- JavaScript Guide には、JavaScript を使用するために知っておく必要のあるすべてが概説されています。
- Mozilla Developer Network は Web 開発者にとって素晴らしいリソースです。
- W3C 仕様のドキュメント、「What is the Document Object Model?」を読んでください。
- JavaScript のチュートリアル、「DOM objects and methods」には W3C DOM のすべてのプロパティー、コレクション、メソッドが解説されています。
- WAI-ARIA (Accessible Rich Internet Applications Suite) の概要を学んでください。WAI-ARIA は障害を持つ人達に Web コンテンツや Web アプリケーションを利用しやすくするための方法を規定しています。
- プログレッシブ・エンハンスメントは、アクセシビリティー、セマンティック HTML マークアップ、外部スタイルシート、スクリプト技術を重視する Web 設計の戦略です。
- 「JavaScript and the Document Object Model」(developerWorks、2002年7月) は JavaScript によって DOM を処理する方法を解説し、またユーザーがメモを追加でき、メモの内容を編集できる Web ページの作成方法について順を追って解説しています。
- チュートリアル、「Understanding DOM」(developerWorks、2007年5月) では DOM 文書の構造を学ぶことができます。
- W3C の HTML5 仕様を読んでください。
- developerWorks の Web development ゾーンには、Web ベースの多様なソリューションを解説した記事が豊富に用意されています。
- developerWorks podcasts ではソフトウェア開発者のための興味深いインタビューや議論を聞くことができます。
- developerWorks の Technical events and webcasts で最新情報を入手してください。
製品や技術を入手するために
- jQuery Mobile (現在アルファ 2) をダウンロードしてください。
- PhoneGap を入手してください。PhoneGap はクロスプラットフォームのモバイル・アプリケーションを作成するためのオープンソースの開発フレームワークです。
- 皆さんの次期開発プロジェクトを IBM ソフトウェアの試用版を使って革新してください。ダウンロード、あるいは DVD で入手することができます。
0 件のコメント:
コメントを投稿