30分でjQueryMobileスマホサイト作成

このページでは「jQueryMobileを使った基本的なスマホサイトのページ作成方法」を30分でご紹介します。
「jQueryMobile使ってスマホサイト作ろうと思ってるけど、いまいち気分がのらねー」という人向けのページです。
カンタンなのでコレをきっかけに始めてみてください(詳しい説明などは他サイト・書籍を見てください)。

 

1.はじめに【5分】

jQueryMobileとは
jQueryMobileとはJavaScriptのライブラリ「jQuery」のプラグインで、指定した形式でHTMLを書けば、
自動的にスマホサイトができます。(iOS、Android、WindowsPhoneやBlackBerryにも対応)

スマホサイト構成
PCサイトのような2,3カラムだと非常に見づらくなります。なのでスマホサイトでは1カラムの縦長な感じにして、
見やすく操作しやすい(ボタンなど押しやすい)サイトにしましょう。

CDN(Contents Delivery Network)から取得
jQueryとjQueryMobileのスクリプト、jQueryMobile用スタイルシートはCDNで読み込ませます。
(jQueryMobileサイトでファイルをダウンロードして使うのも、もちろんオッケーです)



						<!-- head内にjQM用CSS、jQuery、jQMの順で入れる -->
						<link rel="stylesheet" href="http://code.jquery.com/mobile/バージョン/jquery.mobile-バージョン.min.css" />
						<script src="http://code.jquery.com/jquery-バージョン.min.js"></script>
						<script src="http://code.jquery.com/mobile/バージョン/jquery.mobile-バージョン.min.js"></script>
					

「jQueryMobile」とそれに対応する「jQuery」バージョンなどありますので、以下公式サイトで確認し、最新のものを使ってください。

 

「jQueryMobile」と対応する「jQuery」バージョン確認

「jQuery Mobile」公式のTOPページの右上のところにあります。

 

2016年5月現在の最新バージョンはこちら


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

上の例では「jQuery」バージョンを「2.1.4」の「2.x」系にしていますが、「1.x」系でも大丈夫です。
例えば、「1.11.1」を使う場合はこちら


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

 

jQueryの「1.x」系と「2.x」系の違い

jQueryの公式ダウンロードページにいくと上のような画面で、「1.x」系と「2.x」系が用意されていますが、違いは、
  • 「1.x」系:旧ブラウザ(IE6以前)をサポートしている
  • 「2.x」系:旧ブラウザのサポートを切り捨てて高速・安定化

スマホサイトなので、気にせず「2.x」系で良いと思います。
PCサイトの場合でも正直、旧ブラウザを切り捨てた「2.x」系でいいような気もしますが、サイト訪問者で旧IE使用してる人が多いなど、自分のサイト状況や環境に合わせてセレクトしてみてください。




2.基本テンプレート【10分】

まずは下のコードを見てください。


						<!DOCTYPE html> 
						<html>
							<head> 
							<meta charset="utf-8">
							<title>sample</title>
							<meta name="viewport" content="width=device-width, initial-scale=1"> 
							<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
							<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
							<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
							</head>
							<body>
								<div data-role="page">
									<!---画像2の1部分---------------------->
									<div data-role="header">
										<h1>header</h1>
									</div>					
									<!---画像2の2部分---------------------->
									<div role="main" class="ui-content">
										<h2>content</h2>
										<p>「企業のカッコいいスマートフォンサイトのまとめ」と「jQueryMobileを使ったスマホサイト作成方法」の紹介をしております。</p>
										<p>また簡単にスマホサイトが作れる「簡単スマホサイト作成ツール」や「無料スマホサイトテンプレート」などの便利ツールもあります。</p>
										<p>スマホサイトを作成する際のデザインの参考などにご活用ください。</p>
									</div>
									<!---画像2の3部分---------------------->
									<div data-role="footer">
										<h3>footer</h3>
									</div>
								</div>
							</body>
						</html>
					

このコードをコピーしてメモ帳に貼り付けてファイルを作成後、ブラウザから開いてください。
※名前を付けて保存する際に文字コードを「UTF-8」にして保存してください。
スマホで見ると下の画像1のようになります。



画像1

画像2

コードの説明

  • head内の「meta name="viewport" ~ initial-scale=1"」
    「デバイスの横幅に合わせて等倍で表示」という指定。
  • head内の「jquery.mobile-1.4.5.min.css、jquery-2.1.4.min.js、jquery.mobile-1.4.5.min.js」
    CDNでjQuery、jQM、jQM用CSSを読み込み(2015年5月現在の最新バージョン)
  • 「data-role="page"」
    「data-role="page"」は画面に表示する個々のページを示す属性なので、「data-role="page"」属性のdivで囲まれた部分が1ページとなります。
  • 「data-role="header"」
    「data-role="header"」属性のdivで囲まれた部分はページのヘッダーになります(画像2の①)。
  • 「role="main" class="ui-content"」
    「role="main"」「class="ui-content"」属性のdivで囲まれ部分はページの内容になります(画像2の②)。
    jQM旧バージョンでは「data-role="content"」が使われていました。
  • 「data-role="footer"」
    「data-role="footer"」属性のdivで囲まれた部分はページのフッターになります(画像2の③)。

 


画像2_1

画像2_2

画像2_3

 

あと、ヘッダー、フッターなどは必ず使えという感じではないので、無くても大丈夫です。

画像2_1は上のコードから「data-role="footer"」属性のdivで囲まれた部分を削除。
画像2_2は「data-role="header"」「data-role="footer"」属性のdivで囲まれた部分を削除。
画像2_3は「data-role="header"」「data-role="footer"」属性のdivで囲まれた部分を削除し、
ページ内容部分に「role="main" class="ui-content"」を使わず、


					<div style="padding:10px;background:#dcdcdc;">
						<h2>content</h2>
						<p>「企業のカッコいいスマートフォンサイトのまとめ」と「jQueryMobileを使ったスマホサイト作成方法」の紹介をしております。</p>
						<p>また簡単にスマホサイトが作れる「簡単スマホサイト作成ツール」や「無料スマホサイトテンプレート」などの便利ツールもあります。</p>
						<p>スマホサイトを作成する際のデザインの参考などにご活用ください。</p>
					</div>
					

という感じにしています。
ヘッダー、フッターとかない方がjQMっぽくなくて逆に良いかもしれません。
自由にいろいろ試してみて下さい。





3.ページ遷移【10分】

「1つのファイル内に複数ページ(data-role="page")を作り、各ページにidを指定して移動」する方法と、
「PCサイト同様、普通にHTMLファイルを複数作ってリンクを移動」する方法があります。

 

(1)1つのファイル内に複数ページを作り、idを指定して移動

「2.基本テンプレート」のコードの「body」内をこちらに差し替えてみてください。


						<!-- topページ -->
						<div id="home" data-role="page">
							<div data-role="header">
								<h1>TOP</h1>
							</div>                    
							<div role="main" class="ui-content">
								<p>トップページです</p>
								<a href="#p1" class="ui-btn">P1へ</a>
							</div>
						</div>

						<!-- p1 -->
						<div id="p1" data-role="page">
							<div data-role="header">
								<a data-rel="back">Back</a>
								<h1>1ページ目</h1>
							</div>                    
							<div role="main" class="ui-content">
								<p>1ページ目です</p>
								<a href="#p2" class="ui-btn" data-transition="slide">P2へ</a>
							</div>
						</div>

						<!-- p2 -->
						<div id="p2" data-role="page">
							<div data-role="header">
								<a data-rel="back">Back</a>
								<h1>2ページ目</h1>
								<a href="#home">Home</a>
							</div>                    
							<div role="main" class="ui-content">
								<p>2ページ目です</p>
							</div>
						</div>
					

スマホで見ると画像3のようになります。


画像3

画像4

画像4_1

このサンプルでは、各「data-role="page"」のdivに「id="home"」「id="p1"」「id="p2"」とページidをそれぞれ指定し、 ページを3つ(トップ、1ページ目、2ページ目)用意しています。

ページの移動方法は簡単。aタグに「href="#ページid"」と指定するだけで、そのページに移動することができます。
また、aタグに「class="ui-btn"」を追加すると、画像のようなボタンの形になります。ヘッダーのところのaタグは「class="ui-btn"」を追加しなくてもボタンになります。 そしてヘッダーのaタグには「data-rel="back"」だけ追加していますが、これを追加することで「前のページに戻る」機能が実装されるようになります。

「1ページ目」のaタグに「data-transition="slide"」と入れていますが、「data-transition」属性はページ遷移時の表示効果(ページ切替効果)で、 「"slide"」と指定すると「現在のページが左へスライドアウトし、次のページがスライドイン」するような感じになります。

その他のページ切替効果はこちら
  • pop:中央から拡大しながら切替わる(ポップアップ)
  • flip:回転して切替わる
  • slideup:下から上にスライド
  • slidedown:上から下にスライド
  • slidefade:左へスライドし、次ページがフェードイン
  • fade:フェードイン・アウト
  • turn:左端からターン
  • flow:横にスライドして中央にきた後ポップアップ
※さらに「data-direction="reverse"」属性を追加すると、逆方向に切替わります。

 

 

【推奨】(2)普通にHTMLファイルを複数作ってリンクを移動

「2.基本テンプレート」のコードの「body」内だけ差し替えて、「index.html」「p1.html」を用意してみてください。


						<!-- index.html -->
						<div data-role="page">
							<div data-role="header">
								<h1>TOP</h1>
							</div>                    
							<div role="main" class="ui-content">
								<p>トップページです</p>
								<a href="p1.html" data-ajax="false" class="ui-btn">P1へ</a>
							</div>
						</div>
					


						<!-- p1.html -->
						<div data-role="page">
							<div data-role="header">
								<h1>1ページ目</h1>
							</div>                    
							<div role="main" class="ui-content">
								<p>1ページ目です</p>
								<a href="index.html" data-ajax="false" class="ui-btn">HOME</a>
								<a href="https://twitter.com/" target="_blank" class="ui-btn">ツイッター</a>
							</div>
						</div>
					

PCサイト同様、普通にHTMLファイルを複数作って、aタグに「href="URL"」で移動するかたちですが、
「1つのファイル内に複数ページでid移動」の場合と違う点は、「data-role="page"」のdivに「id」入れてない事と、 aタグに以下いずれかの属性を追加している点です。

  • target="_blank" →リンク先がサイト外である場合
  • rel="external" →リンク先がサイト外である場合
  • data-ajax="false" →リンク先がサイト内の場合(非同期通信したくない場合)

サイト内のページ移動の場合は、aタグに「data-ajax="false"」を追加してください。





4.テーマ【5分】

jQueryMobile1.4では「light」「dark」の2種類のテーマが用意されています。「data-theme="a" or "b"」属性を追加することで「light(グレーっぽい)」「dark(黒っぽい)」色に変えることができます。

※旧バージョンでは「黒、青、グレー、白、黄色」の5つのテーマ(data-theme="a~e")がありましたが、1.4からは2種類のみになりました。



画像5

画像6

画像7


						<!-- 画像5 -->
						<div data-role="page" data-theme="a">

						<!-- 画像6 -->
						<div data-role="page" data-theme="b">

						<!-- 画像7 -->
						<div data-role="header" data-theme="b">
						<div data-role="footer" data-theme="b">
					

「data-role="page"」のdivに「data-theme="a"」を追加するとページ全体が「light」になります(画像5)が、jQueryMobile1.4ではデフォルトで「light」の設定のため、「data-theme="a"」を追加しなくても大丈夫です。

「data-role="page"」のdivに「data-theme="b"」を追加するとページ全体が「dark」になります(画像6)。画像7のようにページ全体は「light」で、ヘッダー・フッター部分的に「dark」ということも可能です。この場合は、 「data-role="header"」「data-role="footer"」に「data-theme="b"」を追加します。

という感じでテーマに関する説明終わりますが、スタイルシートで自分好みの色にするのもオッケーです。また「テーマローラー」を使うと独自のテーマを簡単に作ることができます。こちらもいろいろ試してみて下さい。


 

 

5.簡単スマホサイト作成ツール&無料スマホサイトテンプレート

簡単なjQueryMobileスマホページの作成ツールを用意しました。各項目を入力するだけで「スマホで見た時の画面」と「そのソースコード」が表示されます。 一度この作成ツールを試して気分がのってきたところで、jQueryMobileの勉強を進めていってください。

完全無料のスマホサイトテンプレートも用意しました。ファイル一式をダウンロードして使ってみてください。
1つのファイル内に複数ページがあり、ページidで遷移していくかたちになってます。デフォルトでは6ページ用意してあります。 基本的にはindex.html内のテキストを差し替えるだけでOKですが、ページを追加したり、メニュー数を追加したり、下層ページの中身を作ったり、自由にカスタマイズして使ってみてください。

 

6.PC/SPサイト別URLの場合

PCサイト(http://sample.com/)、スマホサイト(http://sample.com/sp/)のように、レスポンシブサイトではなく、同じ内容だけどPCとスマホで別URLで作成している場合は、検索エンジンに「このページはPCまたはスマホ向けのURLがある」ということを伝える必要があります。
「alternate」と「canonical」、UA(ユーザーエージェント)で判断してPC/SP振り分け、モバイルフレンドリーテストなどの紹介。

 

以上で、jQueryMobileを使った基本的なスマホサイトのページ作成方法は終了です。
さらにスマホサイトっぽくしていくために次回は「リストビュー」作成方法をご紹介します。