jQuery mobileフレームワークとHTML5,CSS3でiPhoneサイトを作る

スマートフォンの主流であるiphoneやアンドロイドで利用するブラウザではほぼ、HTML5やCSS3に対応しているのでかなり自由度の高いコーディングが可能です。

今回はjQueryをベースに作られたモバイル構築用フレームワークの「jQuery mobile」を使ってみました。
試しに、以前作ったテストサイトにjQuery mobileをあててみました。

スマホテスト⇒ http://www.myu-zin.com/demo/iphone/

一見普通ですが、ページ遷移の際のアニメーションやスライドはjQuery mobileによるものです。上部の「home」アイコンの表示も一発指定で表示されます。
記述もとても簡単でJavascriptなどを記述する必要もほとんどないと思います。

HTMLタグに「data-」から始まる属性を指定するだけでほとんどまかなえてしまいます。
jQuery Mobileを使うためには下記のファイルが必要です。

  1. jQuery本体のjsファイル ⇒ダウンロード
  2. jQuery mobileのjsファイル ⇒ダウンロード
  3. jQuery mobileのcssファイル ⇒ダウンロード

それぞれダウンロードして使うことも可能ですが、直接ライブラリのファイルを指定することも可能です。
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>

jQuery mobileのオフィシャルページ

jQuery mobileの日本語解説ページ

1 Response

  1. 2012年7月31日

    […] jQuery mobileフレームワークとHTML5,CSS3でiPhoneサイトを作る […]

コメントを残す

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