日記

日々のことと、Python/Django/PHP/Laravel/nodejs などソフトウェア開発のことを書き綴ります

jQuery Mobile （その2）

JavaScript

前回は1つのHTMLの中で、複数ページを構成してリンクを作りました。
今回は、複数のページに分けてみます。

複数ページでリンクする

  • page1.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>jQuery Mobile!!</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
  <script type="text/javascript">
    // user's script...
  </script>
</head>
<body>
  <div id="page1" data-role="page">
    <div data-role="header">
      <h1>Page 1.</h1>
    </div>
    <div data-role="content">
      <div style="text-aling:center">Page 1.</div>
      <a href="page2.html">Page 2.</a>
    </div>
    <div data-role="footer">
      by monajiro
    </div>
  </div>
</body>
</html>
  • page2.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>jQuery Mobile!!</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
  <script type="text/javascript">
    // user's script...
  </script>
</head>
<body>
  <div id="page2" data-role="page">
    <div data-role="header">
      <h1>Page 2.</h1>
    </div>
    <div data-role="content">
      <div style="text-aling:center">Page 2.</div>
      <a href="page3.html">Page 3.</a>
    </div>
    <div data-role="footer">
      by monajiro
    </div>
  </div>
</body>
</html>
  • page3.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>jQuery Mobile!!</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
  <script type="text/javascript">
    // user's script...
  </script>
</head>
<body>
  <div id="page3" data-role="page">
    <div data-role="header">
      <h1>Page 3.</h1>
    </div>
    <div data-role="content">
      <div style="text-aling:center">Page 3.</div>
      <a href="page1.html">Page 1.</a>
    </div>
    <div data-role="footer">
      by monajiro
    </div>
  </div>
</body>
</html>

本当に分割しただけです。手抜きでごめんなさい。
各ページが違うファイルになったので、各ページへのリンクもアンカーリンクからファイル名のリンクに変更しています。
実際に動かしてみると分かるのですが、ファイルを分割してもスライドのアニメーションもそのまま。簡単ですね。

画面遷移したときのアニメーションを変更する

これだけで終わってしまうと、あんまり過ぎるのでリンク時のアニメーションの変更もしてみます。
aタグに次のように属性を追加します。

<a href="page1.html" transition="slideup">Page 1.</a>

こうすると画面が下から上にスライドするようになります。
ヘッダーやフッターもそうだったのですが、jQuery Mobileでは HTMLのマークアップのみでアニメーションや意味づけを行っています。こうすることでページ作成者としてはスクリプトを実装する必要はないし、HTMLコーディングだけ出来れば、スマートフォンらしいサイト作りができます。
実装する側だけのメリットかな、と思っていたらオーサリングツール側も対応が楽みたいで Dreamweaver が jQuery Mobileを扱えるように実装しているみたいですね。スマートフォンに最適化されたサイトが急速に増えてくるかもしれません。

ちなみにページ遷移のアニメーションは他にもあるので載せておきます。

属性値 説明
slide 左から右にスライド（デフォルト）
slideup 下から上にスライド
slidedown 上から下にスライド
pop ページがポップアップ
fede うっすらと段々表示される
flip 裏返しになる

この内容、このペースで良いのかなと思いつつ。
合間合間にやっているので仕方が無いかなぁ、という感じ。
次はヘッダーとフッターのカスタマイズをしてみるつもりです。