jQuery Mobile 使用する環境を整える

JavaScriptライブラリの一種である jQuery Mobile ですが、モバイルフレームワークとしてスマートフォンサイト制作で利用されることが多くなってきました。ここでは jQuery Mobile を使用する環境を構築する手順を解説します。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. 必要なファイルをダウンロードする
  2. HTMLにファイル読み込みコードを記述する
  3. 基本となるページのHTMLを作成する

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

必要なファイルをダウンロードする

開発環境がインターネットに接続されていれば、CDN(Content Delivery Network)から必要なファイルを読み込むだけで jQuery Mobile を使用できる環境になります。
実際の Webサイト運用時にはそうしたほうがよいでしょう。

しかしオフライン環境で制作する場合は、必要なファイルをダウンロードしローカルに格納します。

ダウンロードするには下記ページにアクセスします。
http://jquerymobile.com/

jQuery Mobile ダウンロードサイト

[Latest stable]ボタンをクリックすると、最新安定版がダウンロードできます。

ダウンロードしたファイルの中で、通常の制作時に必要なのは以下です。

  1. jquery.mobile-1.4.x.css あるいは jquery.mobile-1.4.x.min.css
  2. jquery.mobile-1.4.x.js あるいは jquery.mobile-1.4.x.min.js
  3. imagesディレクトリ

制作時に必要なファイル

CSSとjsファイルは Uncompressed版と Minified版の2種類ありますので、目的に応じてどちらか一方を使います。設置するディレクトリは任意です。

imagesディレクトリの中にはアイコンの画像ファイルが含まれています。CSSファイルを設置したディレクトリの下にディレクトリごと設置します。

その他 jQuery本体も必要です。ダウンロードした jQuery Mobile の圧縮ファイルの中には含まれていませんので、jQueryダウンロードサイトから適切なバージョンをダウンロードして設置します。

ファイル配置をまとめると以下のようになります。

必要なファイルの配置図

HTMLにファイル読み込みコードを記述する

オフライン環境の場合

以下のように記述します。

オンライン環境の場合

jQueryのCDNから読み込む場合は以下のように記述します。

Google Hosted Libraries から読み込むこともできます。

基本となるページのHTMLを作成する

jQuery Mobile は HTML5 の機能を使いますので、HTML5で記述します。

head要素部分

文字コードは "UTF-8" を指定します。
あとは Viewport, ページタイトルなどを設定し、先ほどのファイル読み込みコードと合わせると以下のようになります。

オフライン環境ですべてUncompressed版を使う場合は以下です。

body要素部分

jQuery Mobile では、HTML5の独自データ属性「data-」を使用して、HTML要素に機能を割り当てます。

例えば、「data-role="page"」と指定すると、その要素内が1ページとして認識されます。
つまり同じHTMLファイル内に「data-role="page"」を複数指定すると、複数ページの内容を1つのファイルに記述するすることができます。

「data-role="page"」を指定した要素内には、ヘッダー、フッター、コンテンツを含めます。
ヘッダーとフッターは、それぞれ「data-role="header"」と「data-role="footer"」を要素に指定します。
コンテンツ部分は他とは少し違い、data-role属性ではなくrole属性とクラスの組み合わせで、
「role="main" class="ui-content"」と指定します。

以上をまとめると、body要素部分は以下のように記述します。

これで必要なファイルを読み込み、基本となるHTMLのマークアップができましたので、jQuery Mobile を使用してWeb制作できる環境が整いました。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ