スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】

jQuery Mobileってなに？

jQuery Mobileは、javascriptのフレームワークです。スマートフォン向けの直観的で使いやすいUIを瞬時に作成できます。

JavaScriptをWebデザイナーでも扱える身近な存在に変えた「jQuery」。そのjQueryと同じ開発元からリリースされていることもあって、スマートフォン向けフレームワークとして注目のjQuery Mobile、文法はjQueryとまったく同じですのでためしにサンプルを作ってみました。

jQuery Mobileは、解像度の違いなど、デバイスの特性の違いも吸収してくれるというのが最大の強みになっていて、ほとんど全ての機種に対応しています。そのため制作者は悩み所だったデバイスの違いを気にすることなく、スマートフォンサイトを作成できてしまいます！iOSやAndroidなどのWebKitベースのスマートフォンだけでなく、Windows PhoneやBlackBerryなどにもいち早く対応しています。
（対応状況は公式サイト：http://jquerymobile.com/gbs/で確認できます）

制作はGoogle ChromeやSafariで行い、仕上げの段階になったらiOSシミュレータや、実機で動作検証すればよいでしょう。

jQuery Mobileは、HTML5+CSS3+javascriptで、アプリはもちろん、アプリのようなアトラクティブなＵＩのスマホサイトが簡単に組めてしまいます。しかも基本的なフレームワークならjavascriptを１行も書かなくてもＯＫです。今回のサンプルもjavascriptを１行もコーディングせずに作成します！

jQuery Mobileのメリットとデメリット

そもそもjQuery Mobileって何？何が出来るようになるの?という疑問を、メリット＆デメリットからざっくりお答えしますと、

【メリット】

数多くのデバイスに対応できる
jQuery Mobile本体は12KBと非常に軽量
WebサイトだけでなくWebアプリ開発もできる
専用のフォームやボタンが簡単に実装できる(UIデザインが容易にできる)
クロスブラウザ対策を考えなくて良い
スマートフォンのアプリみたいなエフェクトでのページ遷移が可能になる

他にもまだまだたくさんありますが、記事の中でご紹介していきます！！

反対にデメリットもあります。

【デメリット】

完全オリジナルのデザインは出来ない。大掛かりなカスタマイズが難しい。
低スペックのデバイスでは、まだまだ動きが遅い

”完全オリジナルのデザイン”を要求されるファッション系サイトには適していません。また、大がかりなデザインを変更するためには、上書きでjQuery MobileのCSSを変更する必要があり、出来ない訳ではありませんが、CSS3でカスタマイズせねばならないので敷居が高くなります。

ですので、お客さんのニーズを良く考え、まずは”サイトの１部”として試しに導入するのもアリだと思います。

さっそくjQuery Mobileを使ってみよう

今回はjQuery Mobileの基本的な使い方でシンプルなサイトを作ってみました。

トップページのメニューをタップすると各ページへスライドして移動するシンプルなスマートフォンサイトです。まずはトップページ部分から作ってみましょう。

jQuery Mobileを記述するためのHTML

jQuery MobileはHTML5のカスタムデータ属性でさまざまな設定を定義するので、HTMLはHTML5で記述します。HTML5というと難しそうですが、jQuery Mobileを記述する基本のHTML5は以下でＯＫです！

正しく動作させるためのUTF-8設定のmeta要素と、マルチデバイス対応のため、viewport※1 設定のmeta要素を記述するのも忘れないで下さいね。

「viewport」 ※1 ブラウザの表示領域の事です。viewportの設定をmeta要素内で行い、ページが最初に読み込まれたときの幅指定や、拡大率の指定をデバイス間の解像度の問題等を軽減できます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5でサイトをつくろう jQueryMobile版</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
本文
</body>
</html>

■ここまでのサンプルを見る（ファイル名：1.html）
※画面上はまだなにも写りません。

jQuery Mobileを読み込もう

jQuery Mobileを使用するには、jQueryとjQuery Mobileのjsファイル、そしてjQuery Mobileのcssの、3ファイルを一緒に読み込む必要があります。順番を間違えると動きませんので注意が必要です。

ローカルにダウンロードして使う方法もありますが、今回は、ローカルにダウンロードせず、提供元の3ファイルを直接リンクで参照します。
※jQuery Mobile 1.0の正式版が、ついに2011年11/16に公開されました。

この３ファイルを読み込むためのコードは、jQuery Mobileのダウンロードページからコピーして、head要素内にペーストするだけでＯＫです。この方がCDN※2 を使用でき、最も手軽です。

※2 Content Delivery Networkの略。キャッシュ利用するため、通信量を削減できます。

<!-- 2.html:4行目～10行目-->

<head>
<meta charset="UTF-8">
<title>HTML5でサイトをつくろう jQueryMobile版</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.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/jquery.mobile-1.0.min.js"></script>
</head>

■ここまでのサンプルを見る（ファイル名：2.html）
※画面上はまだなにも写りません。

検証環境はどうする？

Safariを機能拡張すれば簡単に検証環境ができます。（Safari以上）心配ならやはり、iPhone、Androidなどの実機で検証してみましょう。

jQuery Mobileのページを作成してみよう！

jQuery Mobileのページ構成

jQuery Mobileのページ構成は、ページ（< div data-role=”page”>～< /div>）の中に

ヘッダー（< div data-role=”header”>～< /div>）
コンテンツ（< div data-role=”content”>～< /div>）
フッター（< div data-role=”footer”>～< /div>）

で構成します。

divやsection要素を使いそれぞれの部位の役割の宣言には、data-role属性を使います。

data-role属性の値に、”header”や”content”など、用意されているUIタイプを指定すると、そのUIタイプとして表示されるようになります。

<!-- 3.html：12行目～30行目-->

<body>
<!-- ぺージ -->
<div data-role="page">
<!-- ヘッダー -->
<div data-role="header">
<h1>タイトル</h1>
</div>
<!-- コンテンツ -->
<div data-role="content">
コンテンツ
</div>
<!-- フッター -->
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>
</body>

■ここまでのサンプルを見る（ファイル名：3.html）

なお、ヘッダーとフッターに関しては省略が可能です！ここでSafariか、デバイスで表示してみましょう！

このコードだけで、jQuery Mobileによって各パーツが自動的に装飾され、スマートフォンらしいUIになって表示されます。

HTML1ページ内にjQuery Mobile複数ページ分をまとめて記述することもできます

HTMLでしたら、[1ページ=1HTMLファイル]ですが、jQuery Mobileでは、HTML1ページ内にjQuery Mobile複数ページ分をいっきに記述することも可能です。ちょっとわかりにくいと思いますので、まずはスクリプトを見てみましょう。

<!-- 4.html：12行目～65行目-->

<body>
<!-- ぺージ -->
<div data-role="page">
<!-- ヘッダー -->
<div data-role="header" id="page1">
<h1>TOPページ</h1>
</div>
<!-- コンテンツ -->
<div data-role="content">
<ul>
<li><a href="#page2">2ページ</a></li>
<li><a href="#page3">3ページ</a></li>
</ul>
</div>
<!-- フッター -->
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>

<div data-role="page" id="page2">
<!-- ヘッダー -->
<div data-role="header">
<h1>2ページ</h1>
</div>
<!-- コンテンツ -->
<div data-role="content">
コンテンツ
</div>
<!-- フッター -->
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>
  
<div data-role="page" id="page3">
<!-- ヘッダー -->
<div data-role="header">
<h1>3ページ</h1>
</div>
<!-- コンテンツ -->
<div data-role="content">
コンテンツ
</div>
<!-- フッター -->
<div dayta-role="footer">
<h4>フッター</h4>
</div>
</div>
</body>

■ここまでのサンプルを見る（ファイル名：4.html）

このようにjQuery Mobileでは、HTML1ページ内で、<div data-role=”page”>～</div>でマークアップされた内容を”１ページ”と認識します。ですので、HTML1ページ内にjQuery Mobile複数ページ分をいっきに記述できます。

これにより、ページ間のトラッフィックを極力抑えることも可能なのです。

ページ名を付けるのには、id属性を使います。ですのでこのidは、サイト内で重複しないように注意しましょう！！

もちろん1ファイル、1ページで作成することも可能です。この場合は以下の一番下のリスト要素のように、「href」にリンク先のファイルを指定するだけです。通常のリンク先のパスやＵＲＬを記述してリンク先のページを作成しておけばＯＫです。リンク先の外部ファイルは「another.html」をサンプルとして用意してあります。

なお、1ファイル、1ページで作成する場合は、page要素（<div data-role=”page”>～</div>）は省略も可です。

<!-- 4.html：23行目～25行目-->

<ul>
<li><a href="#page2">2ページ</a></li>
<li><a href="#page3">3ページ</a></li>
<li><a href="another.html">外部ファイルリンク</a></li>
</ul>

お気づきかと思いますが、これではTOPページに戻れません。

「戻る」ボタンをつけるには、リンク先の

の開始要素内に、data-add-back-btn=”true”を記述するだけでＯＫです！

<!-- 5.html：36行目、51行目-->

<div data-role="page" id="page2" data-add-back-btn="true"><!-- (36行目）-->
<!-- (中略)-->
<div data-role="page" id="page3" data-add-back-btn="true"><!-- (51行目）-->

■ここまでのサンプルを見る（ファイル名：5.html）

シンプルなサンプルでページ遷移を理解していただいた所で、以下のように、ごくごく簡単なCSSをhead要素内で適応し、具体的にコンテンツのテキストや画像等を入れておきましょう。

画像のデバイス間の解像度問題の回避には、ウィンドウサイズに合わせて画像サイズも可変させる手法、「Fluid Image」※3 というテクニックを採用しています。

「Fluid Image」※3 参考サイト

head要素内に簡単なCSSを適応

/*6.html：12行目～21行目*/
img {
	max-width:100%
}
h1, p, section.introductions {
	font-size:0.9em
}

/*another.html：17行目～23行目*/
img {
	max-width:100%
}
h1, p, section.introductions {
	font-size:0.9em
}

また、1ぺージ(TOPページ)部分の最初に、簡単なタイトル画像とリード文を入れておきましょう。

リンク先のページのタイトルも「デザイン参考サイトまとめ」、「Facebookページまとめ」、「イベント会場」とします。

<!-- 6.html：28行目～40行目 -->
<!-- 1ぺージ(TOPページ) -->

<div data-role="page" id="page1">
<div data-role="header">
<h1>HTML5でサイトをつくろう jQueryMobile版</h1>
</div>
<div data-role="content">
<section class="introductions"> <img src="images/tit_logo.png" alt="HTML5で
サイトをつくろう jQueryMobile版">
<p>簡単なスマホ対応サイトやイベント告知サイトなら、jQueryMobileが最適!!</p>
</section>
<ul>
<li><a href="#page2">デザイン参考サイトまとめ</a></li>
<li><a href="#page3">Facebookページまとめ</a></li>
<li><a href="another.html">イベント会場</a></li>
</ul>

最後に、リンク先の2ぺージ、3ぺージ目の方のタイトルとコンテンツも、簡単な画像などを入れて作成しました。

<!-- 2ぺージ -->
<div data-role="page" id="page2" data-add-back-btn="true">
<div data-role="header">
<h1>デザイン参考サイトまとめ</h1>
</div>
<div data-role="content">
<h1>デザイン参考サイトまとめ</h1>
<p><img src="images/ph01.jpg" alt="宮古島の海"></p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト</p>
</div>
<div data-role="footer">
<h4>&copy;HTML5でサイトをつくろう</h4>
</div>
</div>
<!-- 2ぺージ ここまで-->

<!-- 3ぺージ -->
<div data-role="page" id="page3" data-add-back-btn="true">
<div data-role="header">
<h1>Facebookページまとめ</h1>
</div>
<div data-role="content">
<h1>Facebookページまとめ</h1>
<p><img src="images/ph02.jpg" alt="海と自転車"></p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト</p>
</div>
<div data-role="footer">
<h4>&copy;HTML5でサイトをつくろう</h4>
</div>
</div>
<!-- 3ぺージ ここまで-->

<!-- another.html：27行目～37行目-->

<body>
<div data-role="page" id="another" data-add-back-btn="true">
<div data-role="header">
<h1>イベント会場</h1>
</div>
<div data-role="content"><p>このファイルは別ファイル(another.html)です。</p></div>
<div data-role="footer">
<h4>2011&copy;HTML5でサイトをつくろう</h4>
</div>
</div>
</body>

トランジション効果とテーマ

トランジション効果をつけてみよう！

トランジション効果（ページ間の切り替え効果）は、以下の通り全部で6種類あります。付け方はまたいたって簡単です。先ほどリンクの為に記述したa要素に、id属性と一緒にdata-transition属性を指定するだけです。

【data-transition属性一覧】

スライド(右から左へ) data-transition=”slide”
スライド(下から) data-transition=”slideup”
スライド(上から) data-transition=”slidedown”
ポップアップ data-transition=”pop”
フェードイン data-transition=”fade”
フリップ（回転） data-transition=”flip”

デフォルトでは自動的に「slide」が指定されます。
（注：「flip」が一番派手なのですが、低スペックのAndroidでは正確にレンダリングされません。使用は避けた方が無難かもしれません。）

<!-- 6.html：36行目～40行目-->

<ul data-inset="true">
<li><a href="#page2" data-transition="slide">デザイン参考サイトまとめ</a></li>
<li><a href="#page3" data-transition="slideup">Facebookページまとめ</a></li>
<li><a href="another.html" data-transition="pop">イベント会場</a></li>
</ul>

■ここまでのサンプルを見る（ファイル名：6.html）
■ここまでのサンプルを見る（another.html）

トランジション効果を付けると、もうまるでネイティブアプリみたいになりました。

テーマを変更して雰囲気を変えてみよう！

jQuery Mobileのデザインは、デフォルトでは黒を基調としたテーマ（cssによるデザイン）が適用されていますが、ページの要素に対してカスタムデータ属性「data-theme」を指定することでテーマを変更できます。

例えば、「data-theme=”b”」と指定すると、iPhone風UIに変わります。

「a」～「e」の5種類のテーマが用意されており、そのアルファベットを「data-theme」の値に指定して利用します。「a」～「e」の色味は、サンプルページ「theme.html」を参考にいろいろ選んで試してみよう。

または公式ページのデモ ※4 を参考にして下さい。

【参考】「jQuery Mobile Frameworks」※4

「jQuery Mobile Frameworks」

各要素（”header”や”content”など）、UIごとに別々のテーマを指定することも可能です。
サンプルの全てのページの、ページ全体にはテーマ”c”を、ヘッダーとフッターにはテーマ”b”を適用してみよう。

<!-- 7.html-->

<!-- 1ぺージ(TOPページ) -->
<div data-role="page" id="page1" data-theme="c"> <!-- (27行目）-->
<div data-role="header" data-theme="b">  <!-- (28行目）-->
<!-- (中略)-->
<div data-role="footer" data-theme="b"> <!--  (41行目）-->

<!-- 2ぺージ(デザイン参考サイトまとめページ)  -->
<div data-role="page" id="page2" data-theme="c" data-add-back-btn="true"> <!-- (48行目）--> 
<div data-role="header" data-theme="b">  <!-- (49行目）-->
<!-- (中略)-->
<div data-role="footer" data-theme="b">  <!-- (57行目）-->

<!-- 3ぺージ(Facebookページまとめページ)  -->
<div data-role="page" id="page2" data-theme="c" data-add-back-btn="true"><!-- (64行目）--> 
<div data-role="header" data-theme="b"> <!-- (65行目）-->
<!-- (中略)-->
<div data-role="footer" data-theme="b">　<!--  (73行目）-->

<!-- another_theme.html(イベント会場ページ)  -->
<div data-role="page" id="another" data-theme="c" data-add-back-btn="true">　<!--   (22行目）-->
<div data-role="header" data-theme="b"> 　<!--  (23行目）-->
<!-- (中略)-->
<div data-role="footer" data-theme="b"> 　<!--  (27行目）-->

■ここまでのサンプルを見る（ファイル名：7.html）

上のキャプチャは「a」～「e」の5種類のテーマをいろいろ設定してみたものです。サンプルファイル内の「7_theme.html」は、ページ全体にはテーマ”e”を、ヘッダーとフッターにはテーマ”a”を適用してみた所です。

これらのテーマは「jquery.mobile-1.0.min.css」の中で定義されているので、カスタマイズのためこれを書き換えるか上書きすれば、独自のデザインや、テーマを作成もできます。
（ただし前述の通りCSS3の知識が必要になります。）

ここでカスタマイズされたjQuery Mobileのサイト集 ※5 をご紹介します。

右側の「CATEGORIES」でテイストがごとにまとめられているので、スマホサイト制作にも非常に参考になります。

「jQuery Mobile Gallery」※5

jQuery Mobile Gallery

jQuery Mobile Gallery

デザインのカスタマイズについても今後取り上げて行きたいと思います！！

まとめ

いかがでしたでしょうか。

今回はjQuery Mobileで基本的なスマホサイトを組んでみました。

本当にjavascriptは一行もかきませんでしたね！もちろんかけばjQuery Mobileでもっと複雑なUIや、Twitterと連動、PhoneGapとの連携でiPhoneアプリ、Androidアプリに変換できたり、もっと高度な事が出来ます。

また、jQuery Mobile対応したDreamweaver CS5.5を使えば、ドラッグ＆ドロップで、jQuery MobileのUIを作成できます。

予測を超えたスピードで進化するスマートフォン。

「モバイルファースト」で、人の生活に密着させたいスマホサイトやアプリの制作をする際に要求されるのは直観的で使いやすいUIです。その直観的で使いやすいUIが瞬時に作成できるjQuery Mobileが、今後活躍するかもしれません。今回のサンプルを作ってみて、使いどころを確かめて行って下さい！

次回は、今回学んだjQuery Mobileの基礎を生かして、同じこのサンプルでさらにさらに、jQuery Mobileのより具体的な使いどころ、ボタンなどUIパーツやフォームの作成方法、Googleマップをスマホサイトに表示する方法をやっていきたいと思います。

第2回の記事：jQuery MobileでGoogle Mapsの表示からお問い合わせフォームの作成まで「jQuery Mobile」でスマホサイトを作ってみよう【実践編】

スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】

jQuery Mobileってなに？

jQuery Mobileのメリットとデメリット

さっそくjQuery Mobileを使ってみよう

jQuery Mobileを記述するためのHTML

jQuery Mobileを読み込もう

検証環境はどうする？

jQuery Mobileのページを作成してみよう！

jQuery Mobileのページ構成

HTML1ページ内にjQuery Mobile複数ページ分をまとめて記述することもできます

トランジション効果とテーマ

トランジション効果をつけてみよう！

テーマを変更して雰囲気を変えてみよう！

まとめ

この記事を書いた人

最近書いた記事

この記事に関連する記事

サイト内検索

最新のエントリー

まずはここから始めよう！作業効率を早めるPhotoshopとIllustratorのショートカットまとめ（ファイル操作・コピペ・ズーム関連）

Instagram（インスタグラム）の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。

アプリ風インターフェイスのフォトギャラリーをCSS3で作成する【jQuery連載17】