iphone での旬なweb開発 (jqtouch編)
TRANSCRIPT
![Page 1: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/1.jpg)
iPhone での旬なWeb開発 - jQTouch 編 -
2009 / 11 /14 (Sat)
スマートフォン勉強会@関西#6
ドラちゃん (大内 泰明@SIGDIA株式会社)
http://d.hatena.ne.jp/dora-kou/
Twitter : @dora_kou
![Page 2: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/2.jpg)
参加者の方へ確認。 iPhoneのWeb開発について、以下の事項をご存知の方どれだけいます?
1. iPhone内蔵Safariでは、ローカルにゕプリケーションが使うDB領域を持てる。
2. iUIとか、jQTouchというライブラリを聞いたことがある。
3. Webゕプリもメニューに登録できる。
![Page 3: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/3.jpg)
今日お話しするのは、 JavaScriptライブラリの話です。
一般的なWeb開発に関しては時間が足りないのでざっくり省略。
Web開発、と銘打ってますがiPhone向けUIのサイトを作る時にも使えます。
WebサービスをiPhone対応させるときに一番役に立つかもしれません。
![Page 4: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/4.jpg)
- 前提条件 -
jQTouch 1.0β2 r109 の搭載機能を前提
にお話しします。
HTML5の話も一部しますが、ブラウザによって対応状況が異なります。
![Page 5: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/5.jpg)
![Page 6: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/6.jpg)
jQTouch でできること
iPhone向けUIの生成支援
テーマ設定機能
コールバック関数のサポート
フルスクリーンモードのサポート
![Page 7: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/7.jpg)
jQTouch でできること
iPhone向けUIの生成支援
テーマ設定機能
コールバック関数のサポート
フルスクリーンモードのサポート
![Page 8: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/8.jpg)
UI作成支援機能
iUIと変わらない手間で作成できます。
独自のテーマを作成できるので、UIの自由度は高くなります。
![Page 9: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/9.jpg)
実際の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>
![Page 10: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/10.jpg)
テーマ作成機能
theme.cssはテーマ開発用。
theme.min.cssはいわゆるプロダクショ
ン(実稼働)用。サイズが小さくなるの
で作っておいた方がいい。
img themes テーマ名 root
theme.css
theme.min.css
イメージフゔイル
![Page 11: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/11.jpg)
jQTouch でできること
iPhone向けUIの生成支援
テーマ設定機能
コールバック関数のサポート
フルスクリーンモードのサポート
![Page 12: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/12.jpg)
要はイベントのことです
コード例用意しようと思ったのですが、jQueryの知識が必要なんでやめました。
画面がロードされたり他のページに移るときにイベント発生させられます。
jQuery開発やったことある人には、そんなに難しくないかと。
![Page 13: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/13.jpg)
jQTouch でできること
iPhone向けUIの生成支援
テーマ設定機能
コールバック関数のサポート
フルスクリーンモードのサポート
![Page 14: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/14.jpg)
フルスクリーンにするには
FullScreen : 既定はtrue
FullScreenClass : フル画面時のdivクラス名
<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>
![Page 15: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/15.jpg)
あれ…?
UI・サーバサイドときたらローカル側 にもデータ置きたくなりませんか?
ゕプリにするには足りない要素が ありますね?
![Page 16: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/16.jpg)
HTML5の機能ですが…
青がHTML、緑がmanifestフゔイル
Apache側に以下の記載が必要です。
AddType text/cache-manifest .manifest
<html manifest=“cache.manifest”>
</html>
CACHE MANIFEST index.html
style/default.css
images/logo.png images/backgound.png
NETWORK:
server.cgi
![Page 17: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/17.jpg)
jQTouchに関するリソース
公式サイト
◦ http://www.jqtouch.com/
Google Code公式(ドキュメント類)
◦ http://code.google.com/p/jqtouch/
![Page 18: iPhone での旬なWeb開発 (jQTouch編)](https://reader033.vdocuments.site/reader033/viewer/2022051211/55661177d8b42a06318b4c8d/html5/thumbnails/18.jpg)
ありがとうございました。
今日の話は以上です。
仕様が乱立するのはユーザー・開発者両方にとって幸せではないですね。
懇親会にも参加しますので、質問あれば適当に捕まえてください(笑)