jQueryMobileを使ったアプリをFxOSで動かしてみる

## はじめに
jQuery MobileをFxOSで使ってみたいと思います。
jQuery Mobileはタッチに最適化したHTML5ベースのフレームワークとの記載があるため、FxOSには向いていると思いました。UIウィジェットが複数用意されており、デザインがそのまま使えそうなところもよいかと。
![JqueryMobile-top.gif](https://qiita-image-store.s3.amazonaws.com/0/72852/09d5000c-f88f-6573-7e2c-b853273d6cd4.gif)
[jQuery Mobile](http://jquerymobile.com/)

## JQuery Mobileについて理解する
[demoページ](http://jquerymobile.com/demos/)から最新の[1.4.5のページ](http://demos.jquerymobile.com/1.4.5/)に行くと[introduction](http://demos.jquerymobile.com/1.4.5/intro/)がありましたので、これを見ました。
![JqueryMobile-demos-145.gif](https://qiita-image-store.s3.amazonaws.com/0/72852/80c5976a-7a55-927c-5fe2-67f435633500.gif)

理解した特徴をまとめると

* Responsive Web Design(RWD)、progressive enhancementを考慮しており、スマホ、タブレット、e-reader、デスクトップ環境で使える
* タッチ操作の場合に使いやすいUIウィジェットが複数用意されている
* テーマをカスタマイズできるWebツール（ [ThemeRoller](http://themeroller.jquerymobile.com/) )が用意されている
* jQuery Mobile使用時のHTMLの構成について
    * [page](http://demos.jquerymobile.com/1.4.5/pages/) が基本要素でpageは１ページに対応する
    * pageを複数組み合わせてアプリを作成する
    * page内はHTML要素が使える。また、ヘッダ、コンテンツ、フッタを定義できる（実例は [WikipediaのA basic example](http://en.wikipedia.org/wiki/JQuery_Mobile)を参照）
* HTML標準のリンク、フォーム送信をハイジャックしAjex requestに変換する[Ajax navigation system](http://demos.jquerymobile.com/1.4.5/navigation/)によりpage遷移とpage遷移のアニメーションをサポートする

## jQuery Mobileを使ってページ遷移するアプリを作る
page遷移の仕組みが用意されていて（[Ajax navigation system](http://demos.jquerymobile.com/1.4.5/navigation/)）、ページを移動するUIを簡単に作成できそうなので作ってみました。

[Page](http://demos.jquerymobile.com/1.4.5/pages/)の「Multi-page template structure」にあるhtmlサンプルが2ページの例だったので、3ページにしただけのアプリです。htmlにpageの定義をして、aタグで遷移先のpageのidを指定するだけで、ページ遷移するアプリができました。jsの処理は書いていません。

**Fx0でアプリを動かしキャプチャした画像**
![test1-page123.png](https://qiita-image-store.s3.amazonaws.com/0/72852/53aed5b6-c8ec-890b-010f-5fa31987b66d.png)

**アプリのファイル構成**

|ファイル|説明|
|:--|:--|
|manifest.webapp|[アプリのマニフェスト](https://developer.mozilla.org/ja/Apps/Manifest)|
|index.html|[Pageの説明](http://demos.jquerymobile.com/1.4.5/pages/)の「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のダウンロードページ](http://jquery.com/download/)の 「Download the compressed, production jQuery 2.1.3」を取得した|
|jquery.mobile-1.4.5.js|jQuery Mobileのjs。[jQuery Mobileのダウンロードページ](http://jquerymobile.com/download/)のjquery.mobile-1.4.5.zipにある|
|jquery.mobile-1.4.5.css|jQuery Mobileのcss。[jQuery Mobileのダウンロードページ](http://jquerymobile.com/download/)のjquery.mobile-1.4.5.zipにある|

**index.html**

~~~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での実装を試していこうかと思います。

[jQueryMobileを使ったアプリをFxOSで動かしてみる（２）](http://qiita.com/Souj/items/cc3d8b693802887379a5)