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>

テーマ作成機能

theme.cssはテーマ開発用。

theme.min.cssはいわゆるプロダクショ

ン(実稼働)用。サイズが小さくなるの

で作っておいた方がいい。

img themes テーマ名 root

theme.css

theme.min.css

イメージフゔイル

要はイベントのことです

コード例用意しようと思ったのですが、jQueryの知識が必要なんでやめました。

画面がロードされたり他のページに移るときにイベント発生させられます。

jQuery開発やったことある人には、そんなに難しくないかと。

フルスクリーンにするには

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>

あれ…？

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

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

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

jQTouchに関するリソース

公式サイト

◦ http://www.jqtouch.com/

Google Code公式(ドキュメント類)

◦ http://code.google.com/p/jqtouch/

http://www.jqtouch.com/

http://code.google.com/p/jqtouch/

ありがとうございました。

今日の話は以上です。

仕様が乱立するのはユーザー・開発者両方にとって幸せではないですね。

懇親会にも参加しますので、質問あれば適当に捕まえてください(笑)

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

Technology

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