夏休みに入りましたね。武田です。
夏休みは色々と冒険すべきだと私は思います。
ここで言う「冒険」とは、「ふだんは出来なそうな予測がつかない体験」という意味です。
その理由は、成長ができるし楽しいから、です。
話は変わりますが、いつでも出来る予測がつく体験として今日は「jQueryMobile」と言うライブラリを紹介します。
こんなものが作れます！
ちょっとしたページならjQueryMobileを使うことでスマホアプリっぽく見せることが出来ます。
いかにもボタンリンクして複数ページあるように見えますが、実際はindex.htmlの１ファイルしかありません。
こんな感じ。
<!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>
１ ゆらゆらと揺れ動いて定まらない。「波間に小舟が―・う」<br>
２ 気持ちが定まらずためらう。心を決めかねる。
</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>
１ 心にこだわりがなく、晴れ晴れとして明るいさま。「―な性格」「―に話す」<br>
２ 明るく光るさま。日ざしが明るく、空が晴れわたっているさま。「―な春の日」<br>
３ 広く開けて明るいさま。<br>
４ あいまいさがなく、はっきりしているさま。<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はおススメです！
今回のサンプルはこちらからダウンロード出来ます。
ぜひこの夏休み、かっこいいページを作る冒険に旅立ってみてください！
＼ 最新情報をチェック ／
