狠狠撸

iPhone での旬なWeb開発
- jQTouch 編 -

2009 / 11 /14 (Sat)
スマートフォン勉強会＠関西＃６
ドラちゃん (大内泰明＠SIGDIA株式会社)
http://d.hatena.ne.jp/dora-kou/
Twitter : @dora_kou

参加者の方へ確認。
? iPhoneのWeb開発について、以下の事
項をご存知の方どれだけいます？
1. iPhone内蔵Safariでは、ローカルに?プ
リケーションが使うDB領域を持てる。

2. iUIとか、jQTouchというライブラリを聞
いたことがある。

3. Web?プリもメニューに登録できる。

今日お話しするのは、
JavaScriptライブラリの話です。

? 一般的なWeb開発に関しては時間が足
りないのでざっくり省略。
? Web開発、と銘打ってますがiPhone向
けUIのサイトを作る時にも使えます。
? WebサービスをiPhone対応させるとき
に一番役に立つかもしれません。

- 前提条件 -
? jQTouch 1.0β2 r109 の搭載機能を前提
にお話しします。
? HTML5の話も一部しますが、ブラウザ
によって対応状況が異なります。

iPhone での旬なWeb開発 (jQTouch編)

jQTouch でできること
? iPhone向けUIの生成支援
? テーマ設定機能
? コールバック関数のサポート
? フルスクリーンモードのサポート

UI作成支援機能
? iUIと変わらない手間で作成できます。
? 独自のテーマを作成できるので、UIの
自由度は高くなります。

実際のHTMLファイルは…
<!doctype html>
<html>
<head>
～CSSやjQuery/jQTouchライブラリなどのお約束～
～カスタムイメージの指定やコールバック変数もここで定義～
</head>
<body>
<div id=“toolbar” class=“current”>
<h1>ツールバーに表示！</h1>
<a class=“back” href=“#”>戻る</a>
</div>
<ul id=“rounded”>
<li class=“arrow”><a href=“#ar”>?ロー付きのリンク</a></li>
<li class=“forward”><a href=“#fw”>外部リンク</a></li>
</ul>
～それ以外はDemoのindex.htmlを参照してください～
</body>
</html>

テーマ作成機能
root themes テーマ名 img

theme.css イメージ
フ?イル
theme.min.css

theme.cssはテーマ開発用。

theme.min.cssはいわゆるプロダクショ
ン(実稼働)用。サイズが小さくなるの
で作っておいた方がいい。

要はイベントのことです
? コード例用意しようと思ったのですが、
jQueryの知識が必要なんでやめました。
? 画面がロードされたり他のページに移
るときにイベント発生させられます。
? jQuery開発やったことある人には、そ
んなに難しくないかと。

フルスクリーンにするには
<head>
～ CSS/JSライブラリ呼んだり～
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
FullScreen: false,
FullScreenClass: ‘FullHome’,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
});
</head>

? FullScreen : 既定はtrue

? FullScreenClass : フル画面時のdivクラス名

あれ…？
?プリにするには足りない要素が
ありますね？

UI?サーバサイドときたらローカル側
にもデータ置きたくなりませんか？

HTML5の機能ですが…
<html manifest=“cache.manifest”>
</html>

CACHE MANIFEST
index.html
style/default.css
images/logo.png
images/backgound.png
NETWORK:
server.cgi

? 青がHTML、緑がmanifestフ?イル

? Apache側に以下の記載が必要です。

AddType text/cache-manifest .manifest

jQTouchに関するリソース
? 公式サイト
? http://www.jqtouch.com/

? Google Code公式(ドキュメント類)
? http://code.google.com/p/jqtouch/

ありがとうございました。
? 今日の話は以上です。
? 仕様が乱立するのはユーザー?開発者
両方にとって幸せではないですね。
? 懇親会にも参加しますので、質問あれ
ば適当に捕まえてください(笑)

狠狠撸

iPhone での旬なWeb開発 (jQTouch編)

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to iPhone での旬なWeb開発 (jQTouch編) (20)

Recently uploaded (9)

iPhone での旬なWeb開発 (jQTouch編)