はじめに
jQuery MobileをFxOSで使ってみたいと思います。
jQuery Mobileはタッチに最適化したHTML5ベースのフレームワークとの記載があるため、FxOSには向いていると思いました。UIウィジェットが複数用意されており、デザインがそのまま使えそうなところもよいかと。
jQuery Mobile
JQuery Mobileについて理解する
demoページから最新の1.4.5のページに行くとintroductionがありましたので、これを見ました。
理解した特徴をまとめると
- Responsive Web Design(RWD)、progressive enhancementを考慮しており、スマホ、タブレット、e-reader、デスクトップ環境で使える
- タッチ操作の場合に使いやすいUIウィジェットが複数用意されている
- テーマをカスタマイズできるWebツール（ ThemeRoller )が用意されている
- jQuery Mobile使用時のHTMLの構成について
- page が基本要素でpageは１ページに対応する
- pageを複数組み合わせてアプリを作成する
- page内はHTML要素が使える。また、ヘッダ、コンテンツ、フッタを定義できる（実例は WikipediaのA basic exampleを参照）
- HTML標準のリンク、フォーム送信をハイジャックしAjex requestに変換するAjax navigation systemによりpage遷移とpage遷移のアニメーションをサポートする
jQuery Mobileを使ってページ遷移するアプリを作る
page遷移の仕組みが用意されていて（Ajax navigation system）、ページを移動するUIを簡単に作成できそうなので作ってみました。
Pageの「Multi-page template structure」にあるhtmlサンプルが2ページの例だったので、3ページにしただけのアプリです。htmlにpageの定義をして、aタグで遷移先のpageのidを指定するだけで、ページ遷移するアプリができました。jsの処理は書いていません。
Fx0でアプリを動かしキャプチャした画像
アプリのファイル構成
| ファイル | 説明 |
|---|---|
| manifest.webapp | アプリのマニフェスト |
| index.html | Pageの説明の「Multi-page template structure」にある２ページのサンプルを３ページにしただけのhtml |
| jquery-2.1.3.min.js | jQueryのjs。これがないとエラー（TypeError: $ is undefined jquery.mobile-1.4.5.js:26:1）が出て動かない。jQueryのダウンロードページの 「Download the compressed, production jQuery 2.1.3」を取得した |
| jquery.mobile-1.4.5.js | jQuery Mobileのjs。jQuery Mobileのダウンロードページのjquery.mobile-1.4.5.zipにある |
| jquery.mobile-1.4.5.css | jQuery Mobileのcss。jQuery Mobileのダウンロードページのjquery.mobile-1.4.5.zipにある |
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.css" />
<script src="jquery-2.1.3.min.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
</head>
<body>
<!-- １ページ目 -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div>
<div role="main" class="ui-content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p><!-- ２ページ目へのリンク -->
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<!-- ２ページ目 -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div>
<div role="main" class="ui-content">
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
<p><a href="#baz">Go to baz</a></p><!-- ３ページ目へのリンク -->
<p><a href="#foo">Back to foo</a></p><!-- １ページ目へのリンク -->
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<!-- ３ページ目 -->
<div data-role="page" id="baz">
<div data-role="header">
<h1>Baz</h1>
</div>
<div role="main" class="ui-content">
<p>I'm the third in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
<p><a href="#bar">Back to bar</a></p><!-- ２ページ目へのリンク -->
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
おわりに
jQuery Mobileを使用して、Javascriptの処理を書かないでHTMLのみでページ遷移するアプリを作成することができました。Fx0でも動作したし、いくつかjQuery Mobileでの実装を試していこうかと思います。