サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
dev.screw-axis.com
独自効果の作成 (JSベース) ユーザがリンクをクリックすると、jQuery Mobileはまず data-transition 属性が指定されていないかを確認します。ここで属性値として指定されたものが、ページ切り替えに使われる名前になります。属性が指定されていない場合、切替効果名はグローバル設定の $.mobile.defaultPageTransition (ページに対して)や $.mobile.defaultDialogTransition (ダイアログに対して)で指定されたものになります。 新たなページが読み込まれると、切替効果名で $.mobile.transitionHandlers に登録されたハンドラを用いてアニメーションが実行されます。ここでハンドラが見つかれば、そのハンドラが切替効果に用いられ、見つからなかった場合は $.mobile.defaultTransition
ページ間リンクの考え方 jQuery Mobileでは、サイトをシンプルなページをリンクで繋いだ集合体として捉えるようデザインされています。基本的に、通常のサイト構築同様にページ間をリンクさせれば、フレームワークはAjaxによる切り替えを自動的に引き受けてくれます。そしてAjaxが利用できない場合( 遷移先のドメインが異なる、Ajaxを使わないよう指定されているなど )、まったく通常のHTTPリクエストが行われることになります。 このモデルは、一般的なサイト構築手順を踏襲することで、特別な設定なくリッチなサイト構築が行えることを目指しています。 Ajaxを用いたデフォルトの挙動 アニメーション効果のついたページ切り替えを有効にしておくと、ページ間のリンクは全て自動的にAjaxを用いたものになります。この時フレームワークはアンカー要素の href 属性を解析し、Ajaxリクエストを実行します
Data属性 リファレンス jQuery MobileフレームワークはHTML5の data- で始まる属性値を使ってマークアップを基本としたウィジェットの初期化を行います。これらの属性値は、全て省略可能です。プラグインの初期化を手動で行い、そこに各オプションを渡す方法もまた、サポートされています。他のプラグインやフレームワークと衝突することを避けるため、必要に応じて data- 属性に名前空間を与えることも出来ます。詳しくはグローバル設定を参照してください。 ボタン リンクに data-role=“button” を指定したものです。Inputを用いたものやbutton要素では data-role 属性の指定が無くても自動的に最適化されます。 data-corners
This domain may be for sale!
ページのプリフェッチ 通常、サイトを複数の単一ページテンプレートでつくることは、大きなひとつの複数ページテンプレートでつくるよりも好ましいスタイルです。それによって、各ページのDOMを小さく保つことができます。 単一ページテプレートを使った場合、ユーザが他のページを高速に訪問できるようDOM上に他のページをプリフェッチすることができます。ページをプリフェッチするには、該当ページへのリンクに data-prefetch 属性を指定します。jQuery Mobileは、現在のページが読み込まれ pagecreate イベントが実行された後で、バックグラウンドで対象ページを読み込みます。たとえば、次のように指定します。 <a href="prefetchThisPage.html" data-prefetch> ... </a> プリフェッチ指定はいくつでも可能です。プリフェッチさせたい全てのリ
$.mobile.showPageLoadingMsg() ページのローディングメッセージを表示します。メッセージの内容はグローバル設定の $.mobile.loadingMessage で行います。 サンプル ローディングメッセージを表示します。 $.mobile.showPageLoadingMsg(); メッセージ表示
固定ポジションツールバー CSSの position:fixed をサポートしているブラウザ(ほとんどのデスクトップブラウザ、iOS5以降、Android2.2以降、BlackBerry6など)では、“fixedtoolbar“プラグインが使われます。これにより、ヘッダやフッタとしてツールバーをページ上下に固定することが出来、コンテンツはその間を自由にスクロールさせられます。この固定機能をサポートしていないブラウザでは、バーの表示位置は固定されず、通常の配置と同様になります。 固定モードを有効にするには、ヘッダやフッタに data-position=“fixed” という属性を指定してやります。 <div data-role="header" data-position="fixed"> <h1>Fixed toolbars</h1> </div> 固定フッタであれば、次のようにします。
アコーディオン式コンテンツのマークアップ アコーディオン式コンテンツは、基本的に開閉式コンテンツがセットになったものです。これらの親要素に data-role=“collapsible-set” 属性を追加してやることで、フレームワークは自動的に各コンテンツをグループ化するような見た目を付与し、アコーディオン式にひとつだけのコンテンツが開かれるような動作を実現します。設定可能な属性値についてはdata属性リファレンスを参照してください。 <div data-role="collapsible-set"> <div data-role="collapsible" data-collapsed="false"> <h3>Section 1</h3> <p>I'm the collapsible set content for section B.</p> </div> <div data-ro
バックグラウンド・ページの関数や変数をポップアップなどから扱う バックグラウンド・ページで設定した関数や変数をポップアップなどで利用することは、拡張機能の典型パターンと言えます。 インスタンスを継続的に保持するバックグラウンド・ページに複雑な処理やその生成物を持っておくことは、ポップアップなどの短命なページでの再定義や再作成のオーバーヘッドをなくしてくれます。 バックグラウンド・ページで定義したそれらの呼び出し方は、次のようになります。 /* background page */ function test_function(){ return 'here is the background page!'; } var test_var = 'background'; /* popup */ function test_function(){ return 'hrer is the pop
フォーム要素 jQuery Mobileが提供するフォームコントロールを紹介します。中には、ネイティブな要素を hidden に変換するものもありますが、値の変更は随時更新されるので、通常同様に submit することが可能です。 全てネイティブなHTMLのフォーム要素で記述されているので、整形がうまく機能しないブラウザにおいてもユーザが操作を完了することは可能になっています。
テーマローラーの概要 テーマローラー とは、jQuery Mobileのテーマで使われるスウォッチなどを作成するためのGUIツールです。 jQueryには元々 jQuery UI用のテーマローラー が存在します。これはそのMobile版といった位置づけなので、両者を判別するために本来こちらは「ThemeRoller for jQuery Mobile」のように呼ばれます。ただ、ここではjQuery Mobile用であることは明確なので、「テーマローラー」と表記してしまいます。 独自テーマ作成の流れ テーマローラーは非常に直観的で分かりやすいと思いますが、一応簡単な流れを書いておきます。 1. テーマをつくる テーマを自由にデザインします。左側のコントロールパネルで値を設定するか、右側のWYSIWYGで色をパレットからドラッグ&ドロップすることも出来ます。 また、InspectorをOnにす
開閉型のブロックを作成するには、コンテナ要素に data-role=“collapsible” 属性を指定します。コンテンツ部分のテーマ変更には data-content-theme を使います。開閉式コンテンツに指定可能な属性はdata属性リファレンスを参照してください。 このコンテナ直下には、ヘッダ要素(h1～h6のどれか)を追加します。フレームワークはこのヘッダ要素をクリック可能なボタンのように整形し、左端に “+” アイコンを追加します。 ヘッダの後ろには、開閉される部分のコンテンツを自由に記述してください。後続のコンテンツは自動的にラップされて、ユーザの操作により表示/非表示が切り替わるようになります。
jQuery Mobileは極めて基本的なナビゲーションバー(navbar)のウィジェットを用意しています。これは、ヘッダやフッタなどのバーに5つまでのアイコン付きボタンを配する際などに便利です。 ナビゲーションバーは data-role=“navbar” 属性を持った順序無しリスト(ul)のリンクとして記述されます。リンクのひとつが選択状態になると、そのアンカーには class=“ui-btn-active” が追加されます。次のコードは、フッタに二つボタンを配置し、そのうち “One” の方をアクティブにしているものです。
jQuery Mobile用プラグイン “jQuery Mobile ActionSheet Plugin“ を試してみました。 これは、jQuery Mobileで iOS のアクションシート風のインターフェースを簡単に実装するためのプラグインです。 通常、フレームワークでダイアログを表示するには外部に別のページとして作る必要があります。あるいは同ファイル内にページを書くこともできますが、その場合は複数ページテンプレートにしなければなりません。そうした煩雑さを避け、なおかつマークアップだけで簡単にポップアップを実装できるのが、このプラグインの強みでしょう。 とりあえず、簡単な実装方法とデモを用意してみました。 デモ 簡易的なデモページを、下に用意しました。 » ActionSheetプラグイン デモ このデモページには、全部で3つのアクションシートを含ませています。ひとつは、ヘッダ内右側
jQuery Mobileでサイト構築をはじめる jQuery Mobileはタッチパネルに最適化されたUIウィジェットとAJAXによるアニメーション効果のついたスムーズなナビゲーションシステムを実装しています。ここでは、最初のjQuery Mobileページを簡単につくってみましょう。 基本的なページのテンプレートをつくる 好きなテキストエディタを使って、次のテンプレートをコピーしてファイルを作ってください。そしてブラウザで開いてみましょう。これだけでもう、モバイル開発の第一歩は完了です！ テンプレートには、次のものが含まれています。まず head 要素には meta 要素として viewport が設定されています。これは、画面の横幅などを定義するものです。そしてjQuery本体とjQuery Mobileのスクリプトとテーマ用のスタイルシートをCDNから取得するようにしています。jQ
jQuery Mobileと動的なページ生成 jQuery Mobileは、デフォルトでリンクがクリックされた際の動作を乗っ取り、ページを動的にDOMへ挿入するようにしています。あるいは手動で $.mobile.changePage() 関数が呼ばれた際も同様です。これはサーバ側でHTMLを出力する場合には非常に優れていますが、時にはJSONなどで取得したデータをクライアント側でジェネレートしたいような場合もあるでしょう。それは通信量やパフォーマンス的な問題かもしれませんし、連携するサービスのフォーマットによる問題かもしれません。 クライアント側でページのマークアップを作成する必要がある場合、$.mobile.changePage()関数による通知の仕組みについて知っておくことが重要です。それによって、ナビゲーションの流れの適切なタイミングで処理をフックすることが出来るようになります。 c
jQuery MobileによるPhoneGapアプリの構築 PhoneGap とは、Web技術でネイティブアプリケーションを作るためのHTML5プラットフォームです。つくられたアプリケーションはApp Storeに登録することも出来ます。アプリケーションは通常のHTMLページとして構築され、UIWebView や WebView (クローム無しのブラウザ、以後ウェブビューと呼ぶ) でネイティブアプリとして実行されます。この PhoneGap と jQuery Mobile を、組み合わせて使われることがよくあります。その際に有用やヒントや、はじめて開発する際にお勧めの情報などをまとめます。 アプリケーションの最初のドキュメントは、PhoneGapによって file:// URLを用いてローカルファイルとして読み込まれます。これはつまり、このページに会社のリモートサーバからページを取り込み
チェックボックスはリストから複数の値を選択させるために用いられます。従来のデスクトップPC上のチェックボックスは、jQuery Mobileのようにタッチに最適化されていませんでした。ここでは label 要素をチェックボックス全体にすることでタップ領域を大きくし、見た目にもクリックしやすくしています。独自のアイコンを設定することで、更に見た目をよくすることも出来ます。 以下に紹介するラジオボタンやチェックボックスは、通常の input/label としてマークアップされますが、よりタッチパネルに適した形に整形されます。スタイルが適用されるコントロールは、実際には input 要素の上に重ねられた label 要素です。もしブラウザの問題などで label を重ねることに失敗した場合、それでも元々のコントロールが表示されることになります。ほとんどのブラウザはでは label をクリックする
jQuery Mobileにおける自動初期化処理 jQueryやjQuery UIのような他のjQueryプロジェクトと異なり、jQuery Mobileはロードされると同時(document.readyイベントが発生するよりもずっと前)に沢山のマークアップ操作を行います。これらの埋め込みは、jQuery Mobileが用意している一般的なデザインにあわせた初期設定値に従うことになります。しかし、それはあなたの要望通りで無い部分もあるでしょう。幸いにして、そうした初期値は簡単に再設定することができます。 mobileinit イベント jQuery Mobileが実行されると、まず document オブジェクトの mobileinit イベントが呼び出されます。ここで、jQuery Mobileの初期設置値を上書きすることが出来ます。 $(document).bind("mobilein
どのボタンを押してもフェードになる？ 総ての切り替え効果を見るには、3Dトランスフォームに対応したブラウザを使う必要があります。初期設定では、デバイスが3Dに対応していない(たとえばAndroid2系のような)場合、自動的に「フェード」が使われるようになります。この挙動は、設定により変更することが可能です(下記参照)。 これらの切り替え効果は jQtouch から、若干の変更を加えて流用されています。 切替効果の設定 デフォルトでのページの切替効果は、新たなページが右から左に出てくる slide 効果です。これを変更するには、リンクに data-transition 属性を指定します。 <a href="index.html" data-transition="pop">I'll pop</a> ブラウザの「戻る」ボタンが押された場合、フレームワークは自動的に、そのページが表示された際の効
jQuery MobileはHTMLによるフォーム要素をタッチパネルでの操作に適した形に整形します。 構造 フォームは action と method の指定された form タグで囲まれていなければなりません。 <form action="form.php" method="post"> ... </form> マークアップ作法 jQuery Mobileにおいてフォームを作る場合でも、通常は get や post を指定して一般的なHTTP通信を submit するのが良いでしょう。しかしながら1点だけ注意が必要なのは、各コントロールにつけられた id は、該当ページ内で一意なだけでなく、サイト全体でユニークでなければならないことです。これはjQuery Mobileのナビゲーションシステムが、他のページを同一DOM上にロードする可能性があるためです。そのため id の一意性を保つため
リストビューのテーマ設定 ボタン用の色見本は、リストにも適用されます。フレームワークはデフォルトで色見本 “c” (デフォルトのテーマでは「銀」)が適用され、分類タイトルには “b” (「青」)が使われます。 <ul data-role="listview" data-inset="true"> リストアイテムのテーマ リストに data-theme 属性を設定することで、各リストアイテムにテーマのボタン用色見本を適用できます。 <ul data-role="listview" data-inset="true" data-theme="d">
メッセージ コンテント・スクリプトは拡張機能ではなくウェブページのコンテキスト上で実行されるため、拡張機能側との通信手段が必要になることがしばしば発生する。例えばRSSリーダーを拡張機能で作ろうとした場合、コンテント・スクリプトはページがRSSを提供しているか確認し、ページの有無によってアイコンの表示を変えるためにバックグラウンドページに通知する。 このような拡張機能とコンテント・スクリプトの通信は、メッセージ機能により実現される。両者はお互いにメッセージを送信し、同じチャンネルで応答することも出来る。メッセージにはJSONを用いる。APIには一度だけメッセージを送るシンプルなものも、永続的に接続する複雑なものも用意されている。この機能を使えば、IDを指定することで他の拡張機能と通信することも可能になる。 単発通信 拡張機能の他の部分に単発の通信を送りたい(そして場合によっては応答を受け取
ヘッダの構造 ヘッダはページ最上部に表示されるツールバーで、通常はページのタイトルと、オプションで左端や右端にナビゲーション用のボタンを持っています。 ページタイトルは通常 h1 要素になりますが、セマンティック構造にあわせて h1～h6 のいずれのレベルにも設定できます。たとえば、ドキュメントが複数のページを持っている場合は、h1要素は全体のホームとなるページにだけ用い、それ以外はh2でサブページであることを表現することも出来ます。全てのレベルのヘッダは、一貫性を保つようデフォルトで同じスタイルがあてられます。 <div data-role="header"> <h1>Page Title</h1> </div> デフォルトヘッダの機能 ヘッダはデフォルトで “a” の色見本(用意されたテーマで背景が黒いもの)が適用されます。設定は、容易に変更できます。( ツールバーのテーマ 参照 )
jQuery Mobileではネイティブなイベントの上に、開発を容易にするためのカスタムイベントを用意しています。これらのイベントは、タッチパネルやマウス、ウインドウなど環境によって存在するものだけが呼び出されます。そのため、携帯端末やデスクトップどちらの環境向けのイベントもバインドしてしまって構いません。 イベントは、jQuery同様に live() や bind() を用いてバインドできます。 重要：$(document).ready()ではなく pageinit() を使うjQueryを学んで最初に覚えることは、コードを $(document).ready() に記述することでしょう。DOMが読み込まれ使用可能になると、この関数は真っ先に呼ばれます。しかしながらjQuery Mobileにおいては、Ajaxによって各ページが読み込まれてコンテンツがDOMに追加されます。そのため、DO
次のページ
このページを最初にブックマークしてみませんか？
『dev.screw-axis.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
