スマホアプリのようなホームページ

夏休みに入りましたね。武田です。
夏休みは色々と冒険すべきだと私は思います。
ここで言う「冒険」とは、「ふだんは出来なそうな予測がつかない体験」という意味です。
その理由は、成長ができるし楽しいから、です。

話は変わりますが、いつでも出来る予測がつく体験として今日は「jQueryMobile」と言うライブラリを紹介します。

こんなものが作れます!

ちょっとしたページならjQueryMobileを使うことでスマホアプリっぽく見せることが出来ます。
いかにもボタンリンクして複数ページあるように見えますが、実際はindex.htmlの1ファイルしかありません。

こんな感じ。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!-- for iPhone -->
	<meta name="viewport" content="width=device-width ,initial-scale=0.64 ,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<!-- /for iPhone -->
	<!-- for jQuery -->
	<link rel="stylesheet" href="lib/jquery.mobile-1.1.0.min.css">
	<script src="lib/jquery-1.7.1.min.js"></script>
	<script src="lib/jquery.mobile-1.1.0.min.js"></script>
	<!-- /for jQuery -->
	<style>
		body{
			font-size: 14pt;
		}
		p{
			font-family: メイリオ, Osaka;
			line-height: 1.7em;
		}
	</style>
	<title>jQueryMobileページ</title>
</head>
<body>
<!-- 目次 -->
<section id="index" data-role="page" data-title="ホーム">
	<div data-role="header" data-position="fixed" data-theme="a">
		<h1>ホーム</h1>
		<a href="#info" class="ui-btn-right" data-icon="info" data-iconpos="notext" data-transition="slide">Info</a>
	</div>
	<div data-role="content" data-theme="c">
		<ul data-role="listview">
			<li><a href="#page1" data-transition="slide">たゆたう</a></li>
			<li><a href="#page2" data-transition="slide">朗らか</a></li>
		</ul>
	</div>
	<footer data-role="footer" data-position="fixed" data-theme="d">
		Copyright 2014 Shuichi Takeda
	</footer>
</section>
<!-- たゆたう -->
<section id="page1" data-role="page" data-title="たゆたう">
	<header data-role="header" data-position="fixed" data-theme="a">
		<a href="#index" data-direction="reverse" data-transition="slide">ホーム</a>
		<h1>たゆたう</h1>
		<a href="#page2" data-transition="slide">朗らか</a>
	</header>
	<div data-role="content" data-theme="c">
	<p>
	1 ゆらゆらと揺れ動いて定まらない。「波間に小舟が―・う」<br>
	2 気持ちが定まらずためらう。心を決めかねる。
	</p>
	</div>
	<footer data-role="footer" data-theme="d">
		Copyright 2014 Shuichi Takeda
	</footer>
</section>
<!-- 朗らか -->
<section id="page2" data-role="page" data-title="朗らか">
	<header data-role="header" data-position="fixed" data-theme="a">
		<a href="#index" data-direction="reverse" data-transition="slide">ホーム</a>
		<h1>朗らか</h1>
	</header>
	<div data-role="content" data-theme="c">
	<p>
	1 心にこだわりがなく、晴れ晴れとして明るいさま。「―な性格」「―に話す」<br>
	2 明るく光るさま。日ざしが明るく、空が晴れわたっているさま。「―な春の日」<br>
	3 広く開けて明るいさま。<br>
	4 あいまいさがなく、はっきりしているさま。<br>
	「打ち忍び嘆きあかせばしののめの―にだに夢を見ぬかな」〈紫式部集〉
	</p>
	</div>
	<footer data-role="footer" data-theme="d">
		Copyright 2014 Shuichi Takeda
	</footer>
</section>
<!-- Info -->
<section id="info" data-role="page" data-title="Info">
	<header data-role="header" data-position="fixed" data-theme="a">
		<a href="#index" data-direction="reverse" data-transition="slide">ホーム</a>
		<h1>Info</h1>
	</header>
	<div data-role="content" data-theme="c">
	<p>
	このサイトは、jQueryMobileの作り方ページです。<br>
	詳しくは、<a target="_blank" href="http://api.jquerymobile.com/category/all/">jQueryMobile APIリファレンス</a>	あたりをご覧下さい。沢山サンプルが載っています(ちなみに英語です!)
	</p>
	</div>
	<footer data-role="footer" data-theme="d">
		Copyright 2014 Shuichi Takeda
	</footer>
</section>
</body>
</html>

jQueryMobileは、有名なjQueryのモバイル版です。
最新版は、本家ページからダウンロードできます。
使い方は、jQueryを読み込んだ後に、jQueryMobileを読み込む形になります。(※注:jQueryMobileのバージョンによりファイル名の数値は異なってきます)

<!-- for jQuery -->
<link rel="stylesheet" href="lib/jquery.mobile-1.1.0.min.css">
<script src="lib/jquery-1.7.1.min.js"></script>
<script src="lib/jquery.mobile-1.1.0.min.js"></script>
<!-- /for jQuery -->

特長は、sectionタグです。
考え方としては、sectionタグが一つのページだと考えると分かりやすいかと思います。

sectionタグにidをつけることで、画面遷移用のリンク先を表現しています。

<section id="index" data-role="page" data-title="ホーム">
	<div data-role="header" data-position="fixed" data-theme="a">
		<h1>ホーム</h1>
		<a href="#info" class="ui-btn-right" data-icon="info" data-iconpos="notext" data-transition="slide">Info</a>
	</div>

 (中略)

</section>

「ホーム」と表示されたボタンを押したとき、id=”index”と書かれたsectionに移動したければ、

<a href="#index" data-direction="reverse" data-transition="slide">ホーム</a>

と記述します。
上記では、画面遷移時のエフェクトもdata-transition=”slide”などとして、スライドインするように指定しています。
スマートフォンに対応したかっこいいページを簡単に作ってみたいならjQueryMobileはおススメです!

今回のサンプルはこちらからダウンロード出来ます。

ぜひこの夏休み、かっこいいページを作る冒険に旅立ってみてください!

コメントを残す

メールアドレスが公開されることはありません。