ここでの動作環境は次のとおり。なお、アニメーションのムービー撮影にはiPhoneyを使用した。

  • OS: Mac OS X 10.5.8
  • iPhone: 3GS 3.0
  • iPhoney: 1.2
  • jQTouch テーマ: jQTouch cutom theme

同梱されているデモファイルをもとに、まずは簡単なサンプルを作成してみよう。

hello_jqtouch.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />

    <title>Hello, jQTouch</title>

    <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.js" type="application/x-javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        $.jQTouch();
    </script>
    <style type="text/css" media="screen">
        body.fullscreen #home .info {
            display: none;
        }
        #about {
            padding: 100px 10px 40px;
            text-shadow: rgba(255, 255, 255, 0.3) 0px -1px 0;
            font-size: 13px;
            text-align: center;
            background: #161618;
        }
        #about p {
            margin-bottom: 8px;
        }
        #about a {
            color: #fff;
            font-weight: bold;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>
        <div class="toolbar">
            <h1>Hello, jQTouch!</h1>
            <a class="button slideup" id="infoButton" href="#about">About</a>
        </div>
    </div>

    <div id="about">
            <p><img src="jqtouch.png" /></p>
            <p><strong>Powered by jQTouch</strong><br />Version 1.0 beta<br />
                <a href="http://www.davidkaneda.com">By David Kaneda</a></p>
            <p><em>Create powerful mobile apps with<br /> just HTML, CSS, and jQuery.</em></p>
            <p><br /><br /><a href="#" class="grayButton goback">Close</a></p>
    </div>
</body>
</html>

2画面構成の単純なサンプルだ。これを各種Webブラウザで表示してみよう。

iPhoneでhello_jqtouch.htmlにアクセス。右上のAboutボタンにタッチすると、&ltdiv id="about">の中身が縦スライド表示される

動画
iPhoneyでhello_jqtouch.htmlにアクセスし、右上のボタンをクリックした様子)

わずかこれだけのコードで「いかにも」なアニメーションをともなうWebアプリができた。ページアクセス後、まず最初に<div id="home">の内容が表示される。<a class="button slideup" id="infoButton" href="#about">About</a>は<div id="about">に対応しており、タップすることで<div id="about">の内容が縦スライド表示される。

これだけではまだまだWebアプリケーションとは呼べないUIだ。しかしながらはやく先に進みたい気持ちを押さえ、まず先に設定できるオプションから整理しておこう。

jQTouchで使用できるオプション

preloadImage プリロードする画像を指定
icon iPhoneのホーム画面に表示するアイコン(apple-touch-icon)を指定。デフォルト値は「null」
addGlossToIcon trueにすることでiPhone側でのアイコン処理をおこなわないようにする(apple-touch-icon-precomposed)。デフォルト値は「true」
startupScreen ネイティブアプリケーションのような起動画面(apple-touch-startup-image)を指定。デフォルト値は「null」
fixedViewport viewport に固定値を使用する。デフォルト値は「true」
fullScreen フルスクリーンモード(<meta name="apple-mobile-web-app-capable" content="yes" />)で表示。デフォルト値は「true」
statusBar ステータスバーのスタイル(apple-mobile-web-app-status-bar-style)を「default」「black-translucent」「black」の中から指定。デフォルト値は「default」
backSelector 戻り処理をおこなうセレクタを定義。デフォルト値は「.back」「.cancel」「.goback」の3つ
flipSelector フリップをおこなうセレクタを定義。デフォルト値は「.flip」
formSelector フォームセレクタを定義。デフォルト値は「form」
fullScreenClass フルスクリーンのクラス名を指定。デフォルト値は「fullscreen」
initializeTouch touchstartイベントハンドラをバインドする要素を指定。デフォルト値は「a」「.touch」の2つ
slideInSelector 横スライド表示させるセレクタを指定。デフォルト値は「ul li a」
slideUpSelector 縦スライド表示させるセレクタを指定。デフォルト値は「.slideup」
submitSelector サブミットするセレクタを定義。デフォルト値は「.submit」

パッと見、用途不明のオプションがいくつかあるが、まずはよく使いそうなオプションを優先的に覚えたいところ。見た目を変更する場合は「icon」「addGlossToIcon」「startupScreen」「fullScreen」「statusBar」を、動作に関係するところを変更する場合は「backSelector」「initializeTouch」などをチェックしておこう。

これらのオプションを踏まえ、それぞれのクラスがどのように見た目や動きに影響していくのかを確認していこう。