jQuery Mobileを使ってみよう！ (2/5)

jQuery Mobileは、JavaScriptのライブラリとして有名な「jQuery」のプラグインです。jQueryに、このjQuery Mobileを追加することで、指定した形式でHTMLを書けば、自動的にスマートフォン向けにデザインされたWebページが出来上がる、というスグレモノなのです。

http://jquerymobile.com/

jQuery Mobileは、上記のURLにて公開されています。まずはここからファイルをダウンロードし……と、普通ならば説明するのですが、実はjQuery Mobileを利用するのにファイルのダウンロードなどは一切不要です（いえ、まぁダウンロードして自分のWebサイトに組み込んで使うこともできるんですが……普通はそうしないだろう、ってことです）。

jQuery MobileおよびそのベースとなっているjQueryでは、「Contents Delivery Network(CDN)」と呼ばれる機能をサポートしています。これは文字通り「ネットワークで配信されるコンテンツ」すなわちネットワークでjQueryおよびjQuery Mobileを配信している、ということです。どういうことかというと、配信しているアドレスを指定してライブラリを読み込ませることで、ファイルのインストールなど一切行うことなく、jQuery Mobileの機能が使えるようになる、ということんです。

下のリスト欄に、jQuery MobileをCDNで利用するためのHTMLタグを掲載しておきます。2012年3月現在、jQuery Mobileの最新版は1.0.1となっており、これを利用するために必要なjQueryは1.6.4となってします。これらのバージョンをCDN経由で読み込ませるためのタグです。（なお、既にver. 1.1が開発中で、間もなく正式にリリースされる予定です）

見ればわかるように、ここでは３つのコンテンツを読み込ませてます。jQuery Mobileを利用するために必要となるものと、そのCDNによる公開アドレスはそれぞれ以下のようになります。

1. jQuery Mobile用のスタイルシート

http://code.jquery.com/mobile/バージョン/jquery.mobile-バージョン.min.css

2. jQueryのスクリプト

http://code.jquery.com/jquery-バージョン.min.js

3. jQuery Mobileのスクリプト

http://code.jquery.com/mobile/バージョン/jquery.mobile-バージョン.min.js

――現在、jQuery Mobileはまだ正式公開前であり、今後、更にバージョンアップされていくでしょう。それにあわせて、CDNで公開される最新バージョンも変わります。上記のように、アドレス内に書かれているバージョンの部分を変更することで、読み込ませるコンテンツを最新のものに書き換えていくことができます。

ただし！　自分のWebページに、ただこれらのタグを書けばjQuery Mobileが使える、というわけではありません。そのまま普通のWebページのHTML内にタグを記述してアクセスすると、おそらく驚くはずです。画面には、何も表示されなくなってしまうからです。jQuery Mobileを使うには、あらかじめ指定された形式でページを記述する必要があるのです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※jQuery Mobileを使うために記述するタグ

<link rel="stylesheet" 
	href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" 
	src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" 
	src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>