iPhoneページ製作用jQueryプラグイン「jQTouch」

Javascript

iPhoneページ製作用jQueryプラグイン「jQTouch」をご紹介します。

jQTouchとは

iPhone(WebKit)向けjQueryのプラグインです。

何ができるか

  • iPhoneでよく利用される機能を容易に実装されるようになっている。
  • ページ移動のアニメーションなどの機能が最初からついている

jQTouchの使い方

まずサンプルページを見て、必要なJSファイルを読み込みます。http://www.jqtouch.com/preview/demos/main/#home(※公式サイトからダウンロードしたファイルの/demos/main/index.html に同じページが入ってます)

<style type="text/css" media="screen">@ import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@ import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>

JSまでのパスはそれぞれあわせてください。基本的にはこれで準備完了です。読み込むCSSのパス「jqt」の箇所を「apple」に変更すると、白っぽいスタイルに変更できます。

  • apple
  • jqt

HTML構造

一倍のHTMLファイルでbody直下のdivごとにページが分かれます。もちろんページごとにHTMLファイルを分ける事も可能ですが、リンクのモーションが使用できません。

下記はソースを抜粋したものです。


/* ----- Animations のページ ----- */
<div id="animations">
	<div class="toolbar">
		<h1>Animations</h1>
		<a class="back" href="#">Home</a>
	</div>
	<ul class="rounded">
		<li><a href="#animdemo">Slide</a></li>
		<li><a class="slideup" href="#animdemo">Slide Up</a></li>
		<li><a class="dissolve" href="#animdemo">Dissolve</a></li>
		<li><a class="fade" href="#animdemo">Fade</a></li>
		<li><a class="flip" href="#animdemo">Flip</a></li>
		<li><a class="pop" href="#animdemo">Pop</a></li>
		<li><a class="swap" href="#animdemo">Swap</a></li>
		<li><a class="cube" href="#animdemo">Cube</a></li>
	</ul>
	<div class="info">
		Custom animations are also <a href="http://code.google.com/p/jqtouch/wiki/Animations" target="_blank">easy to write</a>. <br />View the source in <code>demos/customanimation</code> to see how.
	</div>
</div>
/* ----- Animations のページここまで ----- */

/* ----- トップページ ----- */
<div id="home" class="current">
	<div class="toolbar">
		<h1>jQTouch</h1>
		<a class="button slideup" id="infoButton" href="#about">About</a>
	</div>
	<ul class="rounded">
		<li class="arrow"><a href="#ui">User Interface</a> <small class="counter">4</small></li>
		<li class="arrow"><a href="#animations">Animations</a> <small class="counter">8</small></li>
		<li class="arrow"><a href="#ajax">AJAX</a> <small class="counter">3</small></li>
		<li class="arrow"><a href="#callbacks">Callback Events</a> <small class="counter">3</small></li>
		<li class="arrow"><a href="#extensions">Extensions</a> <small class="counter">4</small></li>

		<li class="arrow"><a href="#demos">Demos</a> <small class="counter">2</small></li>
	</ul>
	<h2>External Links</h2>
	<ul class="rounded">
		<li class="forward"><a href="http://www.jqtouch.com/" target="_blank">Homepage</a></li>
		<li class="forward"><a href="http://www.twitter.com/jqtouch" target="_blank">Twitter</a></li>
		<li class="forward"><a href="http://code.google.com/p/jqtouch/w/list" target="_blank">Google Code</a></li>
	</ul>
	<ul class="individual">
		<li><a href="mailto:dk@morfunk.com" target="_blank">Email</a></li>
		<li><a href="http://tinyurl.com/support-jqt" target="_blank">Donate</a></li>
	</ul>
	<div class="info">
		<p>Add this page to your home screen to view the custom icon, startup screen, and full screen mode.</p>
	</div>
</div>
/* ----- トップページここまで ----- */

上記のようにソースの順番が逆でもbody直下divのidにhomeがついている箇所が最初に表示されます。またbody直下divにclass="currnet"をつけると一番最初に読み込まれる。ただ表示されるのはid="home" (読み込み時にチラっとうつります)

aタグについているclassがモーションの種類を決めています。(class="slideup"やclass="dissolve")

詳しいソースはサンプルページをご覧いただくか、ダウンロードしたファイル(/demos/main/index.html)をご覧下さい。

利用する際の注意点

このプラグインを入れたことによっていろいろできるわけではなく、元のテンプレートに沿った構造でサイトを構築することになります。

リンクのモーションがbody直下div直下のリストのaタグにしか効かないので、モーションを付けたい箇所などは注意して製作する必要があります。

<div id="home" class="current">
	<ul>
	<li><a href="#">ここのモーションは動く</a></li>
	</ul>
	<div>
		<ul>
		<li><a href="#">ここのモーションを動かすにはモーションのclassを何か指定する(ただしそのモーションの効果はえられない)</a></li>
	</ul>
	<p><a href="#">ここのモーションを動かすにはモーションのclassを何か指定する(ただしそのモーションの効果はえられない)</p>
</div>

iphone用シュミレーター

ここからはjQTouchだけのないようではありませんが、PCでのiphone用表示確認は以下の方法があります。

Safari
iphoneはブラウザのSafariを使用していますので、基本的な見た目はSafariと変わらないようです。
iBBDemo
こちらはSafariにiphoneの見た目の枠をつけたもののようです。

今のところ上記2つと実機で違うところが確認できたのは、

  • Safariではリンクが効いているが、実機だとリンクが機能していない(原因としてはdivの複数入れ子にしたaタグのリンクでclassを指定し忘れると実機では動きません)
  • 画面を指でタッチしたときのスタイル

シュミレーターは見た目だけの確認で使用し、実際に機能がきちんと動いているかは必ず実機でご確認ください