スマートフォンの主流であるiphoneやアンドロイドで利用するブラウザではほぼ、HTML5やCSS3に対応しているのでかなり自由度の高いコーディングが可能です。
今回はjQueryをベースに作られたモバイル構築用フレームワークの「jQuery mobile」を使ってみました。
試しに、以前作ったテストサイトにjQuery mobileをあててみました。
スマホテスト⇒ http://www.myu-zin.com/demo/iphone/
一見普通ですが、ページ遷移の際のアニメーションやスライドはjQuery mobileによるものです。上部の「home」アイコンの表示も一発指定で表示されます。
記述もとても簡単でJavascriptなどを記述する必要もほとんどないと思います。
HTMLタグに「data-」から始まる属性を指定するだけでほとんどまかなえてしまいます。
jQuery Mobileを使うためには下記のファイルが必要です。
それぞれダウンロードして使うことも可能ですが、直接ライブラリのファイルを指定することも可能です。
htmlファイルのhead内に下記のように指定します。
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.css" />
今回はcssの修正が必要だったためcssファイルはダウンロードして直接サーバーに設置しています。
上記URLのトップページのソースを載せておきます。参考までに。
スマホテスト⇒ http://www.myu-zin.com/demo/iphone/
<!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"> <style type="text/css" media="screen"> @import "css/jquery.mobile.css"; @import "css/style2.css"; </style> <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> <title>iPhone View Test</title> </head> <body class="index"> <div data-role="page"> <header class="index-header"> <h1>HTML5 & CSS3<br><span>jQuery Mobile DEMO Site</span></h1> </header> <div id="tabs"> <ul> <li class="current">MEDIA</li> <li><a href="html5.html" data-transition="slidedown">HTML5</a></li> <li><a href="css3.html" data-transition="slidedown">CSS3</a></li> </ul> </div> <div id="content" data-role="content"> <nav> <ul class="list"> <li><a href="music.html" data-transition="flip">MUSIC</a></li> <li><a href="picture.html">PICTURE</a></li> <li><a href="movie.html">MOVIE</a></li> <li><a href="jquery-mobile.html">jQuery Mobile</a></li> </ul> </nav> <section id="about"> <h2>About</h2> <p> スマートフォン表示テスト用にHTML5,CSS3で構築しています。ページ遷移時のスライドや簡易アイコン、その他動作をjQuery Mobileを利用してみます。 </p> </section> </div><!--data-role"content"--> <footer data-role="footer"> Copyright WeBridge 2011. </footer> </div><!-- data-role "page" --> </body> </html>
