jQueryMobile・・・他、スマートデバイスコンテンツ制作について

jQueryMobileはモバイル(スマートフォンとか)でやりたくなるような、あれやこれやの機能が満載で、とても便利なライブラリ(プラグイン群)です。
それも良し悪し・好き嫌いはあるのですが、とりあえず難しいコードを書かなくてもあれやこれやの機能が使えるので、導入しているサイトは結構あります。


jQueryMobileの使い方

さて、jQueryMobileの使い方ですが、解説始めるとかなり長くなるので、詳しい説明は割愛します。
その代り、どうやって利用したらいいのか、やりたいことを実現するための方法をどうやって調べたらいいのか、とっかかりになりそうなことを説明しておきます。


導入方法

jQuery Mobileから以下のファイルをダウンロードして、適切なディレクトリに格納してください(Pmang mobileではすでに読み込んでいますが、参考までに)。

  • jquery.mobile-x.x.x.js
  • jquery.mobile-x.x.x.css

xは正の整数でバージョン番号を表す(2015/06現在、最初のxは1のみ)。ファイル名にminと付いている方でもよいです。
jsファイルとcssファイルのバージョンは一致していた方が良いです。
そして、headタグ内でファイルを読み込みます。以下はその例です。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

この例では、jqueryのサイトから直接ファイルを読み込む方法で記述していますが、ディレクトリに格納した場合はファイルパスは適宜修正してください。
バージョンはこの通りでなくてよいです(html5を想定してのソースなので、type属性を省略しています)。

つまり、jQuery Mobileからダウンロードしてくるのは2つのファイルだけですが、実際はjqueryライブラリも必要になります。
この3つのファイルを必ず読み込んでください。

cssファイルを読み込んでいることからわかるように、jQuery Mobileではある程度デザインが決められています。
色を変えたりできるようにあらかじめ、何種類かのデザインが用意されていますが、細かいデザインの変更は、別途独自のcssファイルを用意して、カスタマイズします。


入門

入門解説サイトとか、チュートリアルがネットに落ちているので、google先生に訊いてください。
以下は代表的なものです。

jQuery Mobileのバージョンが古いもので解説されているものもあります。
その場合は、最新のものと若干使い方が違っていたりするので、解説通りにやってもうまくいかないことがあります。
何度トライしてもうまくいかないときは、google先生に訊いてみてください。


リファレンス

たとえば開閉式コンテンツ(リンク箇所をタップするとその下に情報が表示される)の場合、以下のように記述するのですが、

<div data-role="collapsible">
    <h3>ヘッダ</h3>
    <p>ここがコンテンツ部分です。初期状態では表示されており、ヘッダがクリックされると非表示になります。</p>
</div>

jQuery Mobileの独自属性data-roleに[collapsible]という値を与えることで実現できます。
このように、jQuery Mobileは独自の属性に適切な値を入れることによって、さまざまな機能やデザインを適用させていくわけです。

このような独自属性(データ属性)と適用したい値を上記のようなリファレンスを活用して、調べます。


戻る

Top