夏休みに入りましたね。武田です。
夏休みは色々と冒険すべきだと私は思います。
ここで言う「冒険」とは、「ふだんは出来なそうな予測がつかない体験」という意味です。
その理由は、成長ができるし楽しいから、です。
話は変わりますが、いつでも出来る予測がつく体験として今日は「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はおススメです!
今回のサンプルはこちらからダウンロード出来ます。
ぜひこの夏休み、かっこいいページを作る冒険に旅立ってみてください!