Miyakawa Blog

ウェブディレクターが日々のことを綴るブログ

jQuery Mobile 1.3.2 を利用したときの覚書

職種は「ウェブディレクター」ですが、いざというときは自分でもできるように心がけています。 本職のデザイナーさんや、プログラマさんには適いませんが、自分でも作れることは好きなのでいろいろ試してます。

久しぶりに jQuery Mobile を仕事で使ったんだけど、忘れてたりすることもあるので、半年後の自分のためにメモを残すこととする。

jQuery Mobile は、スマートフォンサイトを作るときや、スマートフォンのウェブアプリを作るときに利用すると簡単にページを作ることができるフレームワークです。

2013/12/18 日現在は「Latest stable version - 1.3.2」ということでこれが現在のバージョンらしい。 「jQUERY MOBILE 1.4.0 RC1 RELEASED!」ということで RC版も出ています。

必要なファイルを揃えるところから

まずは jQuery Mobile

次の URL にそれぞれアクセスして、必要なファイルをダウンロードする。

Download | jQuery Mobile http://jquerymobile.com/download/

上記 ZIP ファイルをダウンロードすれば次のファイルは一通り入っています。

  • jquery.mobile-1.3.2.min.css
  • jquery.mobile-1.3.2.min.js
  • ajax-loader.gif
  • icons-18-black.png
  • icons-18-white.png
  • icons-36-black.png
  • icons-36-white.png

もう1つ jQuery

もう1つ忘れていけないのが次のファイル http://jquery.com/download/ にアクセスして次の jQuery をダウンロードしてください。

  • jquery-1.9.1.min.js

私が試したのは 1.9.1 ですが、そのときどきでバージョンの組み合わせが違うので必ず事前に確認すること。

ファイルの階層

jQuery Mobile から DownLoad した通りにすると、ファイルの設置は全てルートディレクトリになります。 ルートディレクトリに index.html 以外に js ファイルや、css ファイルを設置するのが嫌いなので、以下のように階層を変更しました。 jQuery Mobile 用の images フォルダは css フォルダ内に設置します。 独自イメージファイルは ルートの直下に「img」フォルダを用意して設置します。 css の表示を変更するための独自 css ファイルのファイル名は style.css として css フォルダに設置しました。

index.html
├ img /
│  └─ 独自イメージファイル
├ js /
│  ├─ jquery.mobile-1.3.2.min.js
│  └─ jquery-1.9.1.min.js
└ css /
    ├─ jquery.mobile-1.3.2.min.css
    ├─ style.css
    └─ images /
           ├─ ajax-loader.gif
           ├─ icons-18-black.png
           ├─ icons-18-white.png
           ├─ icons-36-black.png
           └─ icons-36-white.png

サンプル Code と独自 CSS で見た目をかえることも

<!doctype html>
<html lang="ja">
  <head>
    <title>Page Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
    http://js/jquery-1.9.1.min.js
    http://js/jquery.mobile-1.3.2.min.js
    <link rel="stylesheet" href="css/style.css" />
  </head>
<body>
<div>
  <div>
    <h1>Page Title </h1>
  </div>
  <div>
    <p>コンテンツエリア</p>
  </div>
  <div>
    <h4>Page Footer</h4>
  </div>
</div>
</body>
</html>

jQuery Mobile のひな形はいろいろ有るのでここでは詳しく書きません。 注意するポイントとして独自 css ファイルのパスは jQuery Mobile の css を読み込んでいる行より下に書きます。 これは最後に読み込まれた css が優先性質を利用するためです。 私は jQuery Mobile には直接変更を加えたくないですからね。

jQuery Mobile を利用した開発の参考になるサイト類

jQuery Mobile Demos

http://view.jquerymobile.com/1.3.2/dist/demos/ ページ上部でダウンロードした ZIP ファイルにもデモファイルは入っています。 様々な動きを確認できます。 ソースファイルも公開されているので一通り目を通しておくと後々役立ちますよ。

ThemeRoller | jQuery Mobile

http://jquerymobile.com/themeroller/ ※jQuery Mobile のデフォルトのテーマ色って数が限られてるんですが、オリジナルのテーマ色が作れるジェネレータも用意されています。 jQuery Mobile 臭さがどうしても残るなら、オリジナルで style.css を書いて見た目をかえればいいでしょう(そこまでするなら、jQuery Mobile を使うなという声も聞こえそうですがw)

jQuery Mobile 1.1.0 日本語リファレンス

http://dev.screw-axis.com/doc/jquery_mobile/ 「1.1」で更新が終わっていますが、どうしても日本語リファレンスが欲しいという方はどうぞ。 ボタンのアイコンや、ヘッダーの固定とか、ボタンやテーマの色の変更など基礎的な書き方はここで確認できるかな。