jQueryMobileスピード導入

· by · in

jQueryMobileの導入にあたり、回りくどい書き方の資料ばかりが目についたので、最速の導入方法を記します。

ライブラリのダウンロード

jQuery本体と、jQueryMobileの、両方が必要。

ダウンロード・展開したファイルのjsファイルは全て「js」フォルダへ、cssファイルや画像は「css」「img」フォルダに収める前提で話を進めます。

ページへの読み込み

<header>内へ下記のように記述。
※バージョン数（ファイル名）は適切なものに変えてください。

<link rel="stylesheet"  href="css/jquery.mobile-1.0rc1.min.css" />
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0rc1.min.js"></script>

ちなみに自分の場合、バージョン更新が頻繁に思えるライブラリ・フレームワークは、キャッシュ対策のため下記のようにファイル名を変更し、変数付けで読み込むことがあります。

<link rel="stylesheet"  href="css/jquery.mobile.min.css?10rc1" />
<script type="text/javascript" src="js/jquery.min.js?164"></script>
<script type="text/javascript" src="js/jquery.mobile.min.js?10rc1"></script>

ベースHTML例

下記のHTMLをベースとして利用してみてください。CSSも別途作成して下記の内容をコピペしてください。
ぶっちゃけ確認してませんが、それなりに動くと思います。

<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>jQueryMobile Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link rel="apple-touch-icon" href="img/icon.png" />
<link rel="stylesheet"  href="css/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet"  href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>

<div data-role="page" id="a">
	<header class="pageHeader" data-role="header" data-position="fixed">
		<p>ページ「A」</p>
	</header>
	ページ「A」の内容
	<footer class="pageFooter" data-role="footer" data-position="fixed">
		<navi class="navigation">
			<ul>
				<li><a href="#a" class="ui-link-inherit active">A</a></li>
				<li><a href="#b" class="ui-link-inherit">B</a></li>
				<li><a href="#c" class="ui-link-inherit">C</a></li>
			</ul>
		</navi>
	</footer>
</div>

<div data-role="page" id="b">
	<header class="pageHeader" data-role="header" data-position="fixed">
		<p>ページ「B」</p>
	</header>
	ページ「B」の内容
	<footer class="pageFooter" data-role="footer" data-position="fixed">
		<navi class="navigation">
			<ul>
				<li><a href="#a" class="ui-link-inherit">A</a></li>
				<li><a href="#b" class="ui-link-inherit active">B</a></li>
				<li><a href="#c" class="ui-link-inherit">C</a></li>
			</ul>
		</navi>
	</footer>
</div>

<div data-role="page" id="c">
	<header class="pageHeader" data-role="header" data-position="fixed">
		<p>ページ「C」</p>
	</header>
	ページ「C」の内容
	<footer class="pageFooter" data-role="footer" data-position="fixed">
		<navi class="navigation">
			<ul>
				<li><a href="#a" class="ui-link-inherit">A</a></li>
				<li><a href="#b" class="ui-link-inherit">B</a></li>
				<li><a href="#c" class="ui-link-inherit active">C</a></li>
			</ul>
		</navi>
	</footer>
</div>

</body>
</html>

style.css

.pageHeader,
.pageFooter {
	text-align:center;
	background:#ccc;
}
.navigation ul,
.navigation li {
	margin:0px;
	padding:0px;
}
.navigation li {
	float:left;
	width:33%;
}
.navigation li a {
	display:block;
	line-height:2em;
	text-align:center;
}

解説

iPhone（スマホ）表示のためのタグについてちょっと解説。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

こいつはスマホ表示時の設定を行なっています。
幅をデバイス標準の等倍に合わせ、ピンチインによるズームを禁止しています。

<meta name="format-detection" content="telephone=no">

こいつは電話番号の自動リンクを禁止しています。

<link rel="apple-touch-icon" href="img/icon.png" />

こいつはファビコンではなく、iPhoneの場合ならば「ホーム画面に追加」のブックマークをした際のアイコンになります。いわば擬似的にアプリっぽくアクセスできるようになるアイコンです。
アイコンのフォーマットは175×175の透過PNGでキレイに表示できます。

<div data-role="page" id="a">
～
</div>

「data-role=”page”」による<div>で挟んだ内容が、スマホ上での一つのページとして認識されます。IDはそのページ名にあたり、「href=”#a”」といったアンカーリンクでその内容にアクセスできます。

<header class="pageHeader" data-role="header" data-position="fixed">
～
</header>

「data-role=”header”」が定義されたブロック要素はページヘッダーとして認識されます。
「data-position=”fixed”」を付けることでスライドしても上側固定の表示となります。
ちなみにHTML5らしく<header>タグを使っていますが、別に<div>でも問題ありません。

<footer class="pageFooter" data-role="footer" data-position="fixed">
～
</footer>

「data-role=”footer”」が定義されたブロック要素はページフッターとして認識されます。
「data-position=”fixed”」を付けることでスライドしても下側固定の表示となります。
こちらも<header>同様、<div>でも問題ありません。

ただしjQueryMobileのヘッダー・フッターの固定表示はかなりクセがある感じで、個人的なクオリティ感としては利用に耐えません。ダサいです。

jQueryMobileの導入としましては以上だと思います。
CSSの影響で全部「jQueryMobileなデザイン」になりがちだったり、画像表示のノウハウもありますがそれはまた別の記事にて。

筆者について

KaBuKi
ゲームとジョジョを愛するファミッ子世代。好きな言葉は「機能美」。
公私ともにWebサービスを作る系男子。
Tags: , ,