how_to_jqtouch - TatenoSystem Wiki

【番外編】jQTouchでのiPhone Webアプリ開発 †

関連リンク †

jQTouch - jQuery plugin for mobile web development
http://www.jqtouch.com/

Safari 4 Download
http://www.apple.com/jp/safari/download/

iPhoney（Mac OS X 10.4.7 or later）
http://marketcircle.com/iphoney/

jQuery on iPhone - jQTouchを使ったWebアプリ開発
http://journal.mycom.co.jp/articles/2009/09/08/jqtouch/menu.html

jQTouchデモ †

http://tatenosystem.com/mobile/jqt/demos/main/ 　

環境構築 †

jQuery plugin をダウンロード＆解凍 †

jQTouch - jQuery plugin for mobile web development
http://www.jqtouch.com/

下のサンプルHTMLを解凍したフォルダに配置 †

jQTouch テーマ
http://tatenosystem.com/wiki/img/jqt/sample1.html

Apple テーマ
http://tatenosystem.com/wiki/img/jqt/sample2.html

Safariで閲覧 †

　

HTML内容 †

テンプレート head部分 †

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQTouch &beta;</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.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	var jQT = new $.jQTouch({
		icon: 'demos/main/jqtouch.png',			// ホーム画面アイコン
		addGlossToIcon: false,				// アイコン光沢処理
		fullScreen: true,				// フルスクリーンモード
		startupScreen: 'demos/main/jqt_startup.png',	// ページ起動画面
		statusBar: 'black'				// ステータスバースタイル（default、black-translucent、black）
	});
</script>
</head>

　

テンプレート body部分 †

<!-- 【スタート画面】 -->
<div id="home" class="current">
       <!-- スタート画面内容 -->
</div>

<!-- 【About画面】 -->
<div id="about" class="selectable">
        <!-- About画面内容 -->
</div>

　

ファイルを分けよう †

リンク先に画面のHTMLを指定する。
呼び出される画面ファイルには、内容のみを記載する。

index.html（画面呼び出し側）

……
<!-- 【スタート画面】 -->
<div id="home" class="current">
       <div class="toolbar">
           <h1>jQTouch</h1>
           <a class="button slideup" id="infoButton" href="about.html">About</a>
       </div>
       <!-- スタート画面内容 -->
</div>
……

about.html（画面ファイル）

<div id="about" class="selectable">
        <p><img src="jqtouch.png" /></p>
        <p><strong>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>

　

デザインクラス・アクションクラス †

　

.button　　　　　… 右上ボタン
.add　　　　　　 … 右上巨大ボタン
.blueButton　　　… 左上ボタン（青基調）（Appleテーマのみ）
.back　　　　　　… 左上矢印ボタン（戻り処理セレクタ）
.cancel　　　　　… 左上ボタン（戻り処理セレクタ）
.leftButton　　　… 左上表示(画像なし、ほかのクラスと併用) 　
.whiteButton　　 … ボタン（白基調）
.grayButton　　　… ボタン（灰色基調）

　

ulのクラス †

クラス指定なし　　… 標準のリストスタイル
.form　　　　　　 … 標準のリストスタイルと比較し、若干ハイトが小さくなる
.individual　　　 … 横に並べて表示される。画面サイズ的にliの数は2つが限度

　

アニメーション要素 †

ul　li　a　　　　　　… Slideアニメ
.dissolve　　　　 … Dissolveアニメ
.fade　　　　　　 … Fadeアニメ
.flip　　　　　　　　… Flipアニメ
.pop　　　　　　　… Popアニメ
.swap　　　　　　 … Swapアニメ
.cube　　　　　　 … Cubeアニメ

　

liのクラス †

クラス指定なし　　… 標準のリストスタイル
.arrow　　　　　　… 右部に右方向の矢印が表示される
.forward　　　　　… 右部に丸いアイコンの矢印が表示される

　

その他クラス †

.goback　　　　　　　　　　　　　…　戻り処理セレクタ
.submit　　　　　　　　　　　　　…　サブミットするセレクタ
a　.touch　　　　　　　　　　　　…　touchstartイベントハンドラ要素

　

iPhone Webアプリ †

Web起動画面

　

ページサンプル †

       <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="http://www.yahoo.co.jp" 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>

　

       <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>

　

       <div id="edge">
           <div class="toolbar">
               <h1>Edge to Edge</h1>
               <a href="#" class="back">Back</a>
           </div>
           <ul class="edgetoedge">
               <li class="sep">F</li>
               <li><a href="#">Flintstone, <em>Fred</em></a></li>
               <li><a href="#">Flintstone, <em>Pebble</em></a></li>
               <li><a href="#">Flintstone, <em>Wilma</em></a></li>
               <li class="sep">J</li>
               <li><a href="#">Jetson, <em>Elroy</em></a></li>
               <li><a href="#">Jetson, <em>George</em></a></li>
               <li><a href="#">Jetson, <em>Jane</em></a></li>
               <li><a href="#">Jetson, <em>Judy</em></a></li>
               <li class="sep">R</li>
               <li><a href="#">Rubble, <em>Bambam</em></a></li>
               <li><a href="#">Rubble, <em>Barney</em></a></li>
               <li><a href="#">Rubble, <em>Betty</em></a></li>
           </ul>
       </div>

　

       <div id="plastic">
           <div class="toolbar">
               <h1>Plastic Lists</h1>
               <a href="#" class="back">Back</a>
           </div>
           <ul class="plastic">
               <li class="arrow"><a href="#">Simple list</a></li>
               <li class="arrow"><a href="#">Contact list</a></li>
               <li class="arrow"><a href="#">Content List</a></li>
               <li class="arrow"><a href="#">Metal list</a></li>
           </ul>
           <div class="info">
               <p><strong>Best enjoyed on a real iPhone</strong></p>
           </div>
       </div>

　

       <div id="metal">
           <div class="toolbar">
               <h1>Metal Lists</h1>
               <a href="#" class="back">Back</a>
           </div>
           <ul class="metal">
               <li class="arrow"><a href="#"><small>AM</small> 9:40 <em>Buenos Aires</em></a></li>
               <li class="arrow"><a href="#"><small>PM</small> 19:40 <em>Singapur</em></a></li>
               <li class="arrow"><a href="#"><small>PM</small> 22:40 <em>Japan</em></a></li>
               <li class="arrow"><a href="#"><small>PM</small> 11:40 <em>New York</em></a></li>
               <li class="arrow"><a href="#"><small>PM</small> 9:40 <em>Ontario</em></a></li>
           </ul>
       </div>

　

       <div id="forms">
           <div class="toolbar">
               <h1>Forms</h1>
               <a href="#" class="back">Back</a>
           </div>
           <form>
               <ul class="edit rounded">
                   <li><input type="text" name="name" placeholder="Text" id="some_name" /></li>
                   <li><input type="text" name="search" placeholder="Search" id="some_name" /></li>
                   <li><input type="text" name="phone" placeholder="Phone" id="some_name"  /></li>
                   <li><input type="text" name="zip" placeholder="Numbers" id="some_name" /></li>
                   <li><textarea placeholder="Textarea" ></textarea></li>
                   <li>Sample Toggle <span class="toggle"><input type="checkbox" /></span></li>
                   <li>
                       <select id="lol">
                           <optgroup label="Swedish Cars">
                               <option value ="volvo">Volvo</option>
                               <option value ="saab">Saab</option>
                           </optgroup>
                           <optgroup label="German Cars">
                               <option value ="mercedes">Mercedes</option>
                               <option value ="audi">Audi</option>
                           </optgroup>
                       </select>
                   </li>
                   <li><input type="password" name="some_name" value="iphonedelcopon" id="some_name" /></li>
                   <li><input type="checkbox" name="some_name" value="Hello" id="some_name" title="V8 Engine Type" /></li>
                   <li><input type="checkbox" name="some_name" value="Hello" checked="checked" id="some_name" title="V12 Engine Type" /></li>
                   <li><input type="radio" name="some_name" value="Hello" id="some_name" title="Only cars" /></li>
                   <li><input type="radio" name="some_name" value="Hello" id="some_name" title="Only motorbikes" /></li>
               </ul>
           </form>
       </div>

　

       <div id="animdemo">
           <div style="font-size: 1.5em; text-align: center; margin: 160px 0 160px; font-family: Marker felt;">
               Pretty smooth, eh?            
           </div>
           <a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="whiteButton goback">Go back</a>
       </div>

　

       <div id="about" class="selectable">
               <p><img src="jqtouch.png" /></p>
               <p><strong>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>
                   <a href="http://twitter.com/jqtouch" target="_blank">@jQTouch on Twitter</a>
               </p>
               <p><br /><br /><a href="#" class="grayButton goback">Close</a></p>
       </div>

CSS

       <style type="text/css" media="screen">
           #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>

iPhone HTML †

iPhone向けサイト構築基礎文法最速マスター
http://designblog.ecstudio.jp/htmlcss/iphone-master.html

iPhone向けSafari、HTML拡張属性を使いこなす
http://symple.jp/93.html

スマートフォン向けサイトの作り方
http://www.u-ziq.com/blog/2011/01/post_61.html

　

jQTouchと関係ない技術関連リンク †

iPhoneタッチイベント・ジェスチャーイベント
http://blog.asial.co.jp/524

iPhoneブラウザからGPS情報取得
http://lab.cirius.co.jp/blog/2009/06/-iphone-safari.php

jQueryでiPhone/iPadの向きを検出する
http://blog.webcreativepark.net/2010/08/17-200704.html

　
　

実習 †

トップ

パソコン
デジカメ
AV機器
カー用品
調理家電
生活家電

パソコンカテゴリ一覧

【 パソコン本体 】
デスクトップパソコン
ノートパソコン
PDA

【 パソコン周辺機器 】

プリンター
液晶ディスプレイ
CRTモニター
スキャナー
キーボード
マウス

Apple iMac MB953J/A 販売情報

メーカー：Apple
商品名：Apple iMac MB953J/A
最安値：186,871 円
取扱店：19 店
OS: MacOS X v10.6 
CPU名：Core i5 
CPUクロック：2.66 GHz
メモリ基本容量：4096 MB
HDD容量：1000 GB

　
　

Last-modified: 2011-01-24 (月) 15:25:49 (394d)