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

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の話も一部しますが、ブラウザ
によって対応状況が異なります。

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

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

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

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