iPhoneページ製作用ｊQueryプラグイン「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を指定し忘れると実機では動きません）
- 画面を指でタッチしたときのスタイル
シュミレーターは見た目だけの確認で使用し、実際に機能がきちんと動いているかは必ず実機でご確認ください
コメント
iPhone対応サイト構築 jQTouch備忘録その１
えー、アプリの前にサイトを対応させろや！って事で、
ちゃんとiPhone向けにhtmlを書くことに。
で、なにか良いフレームワークないかし…
We extremely prefer that which you place in this article. Particularly informative as well as reasonable. A particular situation however. I’m operating Safari along with Debian as well as segments of the active style items really are a small wonky. We realise it’s not really a popular setup. Nevertheless it’s a specific thing in order to have in view. We trust it might assist as well as always keep in the main high quality composing.