jQuery Mobileを(再び)はじめてみる - 感謝のプログラミング

まず、jQueryとjQuery Mobileのダウンロードは以下のURLから行います。

jQueryのダウンロード
http://jquery.com/download/

jQuery Mobileのダウンロード
http://jquerymobile.com/

ファイルをダウンロードせずに、CDNを利用する手もあります。
CDNとは、Contents Delivery Networkといって、大容量のファイルや利用頻度が高いファイルなどをネットワーク経由で安定的に配布するために仕組みです。

GoogleのCDNを使うことが一般的なようです。
https://developers.google.com/speed/libraries/devguide?hl=ja#jquery

実際、どの環境に移動しても動くように書くなら、CDNを使った方がいいと思います。
開発から本番にあげるときに、jQueryのスクリプトを転送し忘れたりしたら、機能しなくなってしまうからです。
まぁ、そんなことはないと思うけど。

スマホの検証環境としては、シミュレータを使うのが一般的かと思いますが、
とりあえず、手元のWindowsで作ったhtmlが、iPhoneでどう動くのか見てみたい、という人は、コマンドプロンプトを立ちあげて、

ipconfig

と打ちます。

出てきたIPアドレスに、接続すると、手元の環境の情報を表示することができます。

こんな感じです。

f:id:sho322:20140625205519j:plain

適当なサンプルを作ってみます。

こんな感じの。

1ページ目
f:id:sho322:20140625205528j:plain

2ページ目
f:id:sho322:20140625205549j:plain

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=divice-width, initial-scale=1">
	<title>jQuery Mobile Example</title>
	<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b" id="one">
  <div data-role="header" data-theme="b">
    <h2>7月24日</h2>
  </div>
  <div data-role="content">
    <p>この日は札幌にいきます</p>
    <ul data-role="listview" data-inset="true">
    	<li data-role="list-divider">10時</li>
    	<li><a href="http://www.voyage1996.com/"><img src="img/soup.jpg">ヴォイジュ</a></li>
    </ul>
    <ul data-role="listview" data-inset="true">
    	<li data-role="list-divider">11時</li>
    	<li><a href="#"><img src="img/tokei.jpg">時計台</a></li>
    </ul>
  </div>

  <div data-role="footer" data-theme="b">
    <h2><a href="#two">7月25日へ</a></h2>
  </div>
</div>

<div data-role="page" date-theme="e" id="two">
  <div data-role="header" data-theme="e">
    <a href="#one" data-direction="reverse">7月24日に戻る</a>
    <h2>7月25日</h2>
  </div>

  <div data-role="content">
    <ul data-role="listview" data-inset="true">
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu1</a></li>
    </ul>
  </div>

  <div data-role="footer" data-theme="e">
    <h2>フッター</h2>
  </div>
</div>
</body>
</html>

中のHTMLについてですが、
一つのHTMLファイルに複数のページを入れるために、

<div data-role="page" data-theme="b" id="one">

のように書いています。idを使って、リンクを付けて飛びます。