Jquery Mobile 即効iphoneサイト
新しいスマートフォン サイト作成のフレームワークが出たということで、早速試してみました。
その名もJquery Mobile。
特徴は
- HTMLの知識だけでiphoneサイトが作成可能
- 軽い
- 動きも滑らか
以前 jqtouchというものを使ってiphone版サイトの作成を試みた時は、動きが硬い、使いづらい、カスタマイズし難いなど問題があり、Senchaというフレームワークを使ってみようとSenchaの勉強を始めたところだったのですが、Javascriptの知識が豊富にないとやはりカスタマイズに難ありでした。
その点、このJquery MobileはHTMLの知識だけでiphoneサイトが作れてしまうという優れものです！
ファイルの読み込みは３つだけ。
<link rel="stylesheet" href="./js/jquery.mobile-1.0a3.min.css" />
<script src="./js/jquery-1.5.min.js"></script>
<script src="./js/jquery.mobile-1.0a3.min.js"></script>
読み込みの順番もこうなります。
ファイルのダウンロードはこちらからできます
とにかく、HTMLだけでiphoneサイトが作れる！
これは今回私がデモ用に書いたindexファイルなのですが、Javascriptは一切自分では書いていません。
DEMO
(こちらのデモはスマートフォンか、Google Chromeで見ることをおすすめします)
<div id="page_move" data-role="page">
<div data-role="header"><h1>ページ遷移</h1></div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#page_move_next1" data-transition="slide">スライド(横移動)</a></li>
</ul>
</div>
<div data-role="footer"><h1>Demo</h1></div>
</div>
<div id="page_move_next1" data-role="page">
<div data-role="header"><h1>ページ遷移1</h1></div>
<div data-role="content">
試しに作ってみました。どうでしょうか。
</div>
<div data-role="footer"><h1>Demo</h1></div>
</div>
WEBデザイナーの方はだいたいソースコードを見ればどういうことをしているのかがイメージ付くかと思いますが、シュッという動きやフェードなど iphoneサイトっぽいエフェクト効果のついたリンクについてはページ内リンクということになります。
全頁に渡ってエフェクト効果付きのページ遷移をすると、１ファイルあたりのコード量が計り知れないものとなりますが、そのあたりはPHPファイルで個別にインクルードしてあげる必要があるでしょう。
動きの解説
iphoneサイトっぽい動きにしたい時は
リンクボタン
<a href="#page_move_next1" data-transition="slide">スライド(横移動)</a>
リンク遷移先
<div data-role="header"><h1>ページ遷移1</h1></div>
<div data-role="content">
試しに作ってみました。どうでしょうか。
</div>
<div data-role="footer"><h1>Demo</h1></div>
</div>
このようにページ内リンクを書いてあげるだけで、そこがAjax通信になるというわけです。
ページ遷移の効果
| スライド(横) | data-transition="slide" |
| スライド(下から) | data-transition="slideup" |
| スライド(上から) | data-transition="slidedown" |
| ポップ | data-transition="pop" |
| フェード | data-transition="fade" |
| くるくる | data-transition="flip" |
他にもたくさんの効果がありますが,私も始めて使ってみたのでここまで。
フォームなどの効果もたくさんありますので、みなさんもぜひ使ってみてください。