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

10293 ワード
Fx0 JavaScript FirefoxOS fxos jQueryMobile JavaScript テキストリンク

はじめに

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

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