復興ログ

未来の被災地にいるアナタと数十年後のキミたちへ。すべての記録を残します。

jQTouchでiPhoneWebアプリ

jQuery on iPhone - jQTouchを使ったWebアプリ開発を参考にして、iPhoneのWebアプリを作成してみました。

jQTouchとは?

名前を見て、想像が出来る通り、iPhone向けWebアプリを作るためのjQueryです。

オフィシャルのjQtouchより、ダウンロードして使用することができます。

すぐに分かる特徴としては

  • テーマサポート(2種類)
    • Apple
    • jQTouch custom theme
  • iPhoneお作法の自動補完

実装方法

実際に作ったのがこちらのページ。
蛇田.jpのiPhone版です。

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

<link rel="apple-touch-icon" href="http://iphone.hebita.jp/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<style type="text/css" media="screen">@import "http://iphone.hebita.jp/js/jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "http://iphone.hebita.jp/js/themes/apple/theme.min.css";</style>
<script src="http://iphone.hebita.jp/js/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://iphone.hebita.jp/js/jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>


<script type="text/javascript" charset="utf-8">
	$.jQTouch();
</script>

<title>蛇田.jp</title>

</head>

<body>

<div id="top"><!-- トップページ -->
	<div class="toolbar">
		<h1>蛇田.jp</h1>
		<a class="button slideup" id="infoButton" href="#appli">About</a>
	</div>
<div>
	<h2>メニュー</h2>
	<ul>
		<li class="arrow slideup"><a href="#twitter">twitter</a></li>
	</ul>
	
</div>
</div><!-- /トップページ -->

<div id="appli"><!-- about -->
	<div class="toolbar">
	<a class="back slideup" href="#top">トップ</a>
		<h1>Webアプリ</h1>
	</div>
<ul>
<li>
テスト
</li>
</ul>
	</div>
        <p><br /><br /><a href="#" class="grayButton goback">戻る</a></p>
</div><!-- /about -->

<div id="twitter"><!-- twitter -->
<script src="http://iphone.hebita.jp/js/twitter.js" type="text/javascript" charset="utf-8"></script>
	<div class="toolbar">
	<a class="back slideup" href="#top">トップ</a>
		<h1>twitter</h1>
	</div>
	<h2>宮城を検索</h2>
	<p><a class="whiteButton" href="#" onClick="TwitterSearch('宮城')" ontouchend="TwitterSearch('宮城')">宮城</a></p>
	<a class="whiteButton" href="#" onClick="TwitterSearch('仙台')" ontouchend="TwitterSearch('仙台')">仙台</a>
	<p><a class="whiteButton" href="#" onClick="TwitterSearch('石巻')" ontouchend="TwitterSearch('石巻')">石巻</a></p>
<div id="tweetResult"></div>
</div><!-- /twitter -->

</body>
</html>

ブロックごとに解説

表示しているdiv単位で解説

1.head内

iPhone Webアプリのおまじない

<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

<link rel="apple-touch-icon" href="http://iphone.hebita.jp/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

ホームアイコン

<link rel="apple-touch-icon" href="http://iphone.hebita.jp/apple-touch-icon.png">

上記については、ブックマークをiPhoneのホームに登録する際にアイコンとする画像を指定します。
ルートに「apple-touch-icon.png」のファイル名で置いておきます。
画像のサイズは64px*64pxか129px*129pxにすると、iPhoneが自動で加工して保存してくれます。
jQtouchの読み込み
4つのファイルを読み込みます。

<style type="text/css" media="screen">@import "http://iphone.hebita.jp/js/jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "http://iphone.hebita.jp/js/themes/apple/theme.min.css";</style>
<script src="http://iphone.hebita.jp/js/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://iphone.hebita.jp/js/jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>

jQtouchの作動
これをすることで、jQtouchが有効になります。

<script type="text/javascript" charset="utf-8">
	$.jQTouch();
</script>

2.body内

ポイントはbody内の最初のdivタグで囲まれた範囲がトップページになる
ということです。
トップページ
下記記述部分がトップページとなります。

<div id="top"><!-- トップページ -->
	<div class="toolbar">
		<h1>蛇田.jp</h1>
		<a class="button slideup" id="infoButton" href="#appli">About</a>
	</div>
<div>
	<h2>メニュー</h2>
	<ul>
		<li class="arrow slideup"><a href="#twitter">twitter</a></li>
	</ul>
	
</div>
</div><!-- /トップページ -->

ツールバー部分

	<div class="toolbar">〜〜</div>

上記記述箇所が、そのページにおけるツールバー部分となります。
スライド形式
スライド形式を変更する際には

<a class="button slideup" id="infoButton" href="#appli">About</a>

classの内部を変更します。
詳細はこちらに記述されています。
ボタンにリンクをつける
iPhoneにおいてはonClickのイベントが拾えません。
まー、クリックではないから。。というのが理由なのだと思います。
そこで、代用するのがontouchendになります。
こんな記述になります。

<a class="whiteButton" href="#" onClick="TwitterSearch('石巻')" ontouchend="TwitterSearch('石巻')">石巻</a>

こうすることで、PC用のブラウザでもiPhoneでもイベントが拾えるようになります。
※分からなくて、悩んだ部分・・・
リストの表示
iPhoneにおいてリストの表示というのは、非常に有効です。
そんなリストの表示も簡単に綺麗に見せることができます。

	<h2>メニュー</h2>
	<ul>
		<li class="arrow slideup"><a href="#twitter">twitter</a></li>
	</ul>

リストの内容を増やしたい時にはliタグで、記述内容を増やすだけ。
また、リストの表示方法の詳細はこちらに記述されています。
数字アイコンにしたりできます。
別のページ内容を表示
別ページ内容を表示させる際には、トップで表示したdivと同じノードにdivで囲った要素を構成してあげます。
上記ソースでは

<div id="twitter"><!-- twitter -->
<script src="http://iphone.hebita.jp/js/twitter.js" type="text/javascript" charset="utf-8"></script>
	<div class="toolbar">
	<a class="back slideup" href="#top">トップ</a>
		<h1>twitter</h1>
	</div>
	<h2>宮城を検索</h2>
	<p><a class="whiteButton" href="#" onClick="TwitterSearch('宮城')" ontouchend="TwitterSearch('宮城')">宮城</a></p>
	<a class="whiteButton" href="#" onClick="TwitterSearch('仙台')" ontouchend="TwitterSearch('仙台')">仙台</a>
	<p><a class="whiteButton" href="#" onClick="TwitterSearch('石巻')" ontouchend="TwitterSearch('石巻')">石巻</a></p>
<div id="tweetResult"></div>
</div><!-- /twitter -->

この部分が、別ページ内容になります。(見た目上、別ページ)

まとめ

ポイントとしては、1ページ内にdivで囲ったコンテンツを構築しiPhoneに最初のアクセスで全てを読み込ませておき
idを指定したリンクで表示を切り替え、あたかもサクサクページを読み込んでいるように(アプリのように)表示させるということのようです。

また、余計な通信を減らすためにも非同期の通信が良いように思われます。
理由としては、初回のアクセスで全てのコンテンツを表示させようとしても、全てのコンテンツをユーザが閲覧するわけではないので。

なので、大枠としてのコンテンツは初回の読み込みで配置しておき、ボタンのタップをイベントにして非同期でコンテンツを提供するやり方が良いように思います。
JSONPAJAXでコンテンツを構成するのが良さそうですね。
ますます、クライアントサイドの技術になるなぁ。。