Ajaxを使おう
掲載日： 2008年 07月 31日
iPhone 3G用のWebページを作る3
iPhone 3G用のWebページを作る3
前回に引き続きiPhone 3G用のWebページを作るためのテクニックですが、 今回は、iPhone用に作られたライブラリを紹介します。
普通にHTMLを書くだけでiPhone用のページへ変身させてくれるライブラリiUIです。
iPhone用のページが簡単に作れるiUI
iUIは、Firebugの開発者でもあるJoe HewittがはじめたiPnone用のWeb製作支援ライブラリで、 標準的なHTMLを記述するだけで、iPhoneライクなナビゲーションページを簡単に作ることができます。コードは次のページで入手できます。
iui User Interface (UI) Library for Safari development on iPhone
http://code.google.com/p/iui/
解凍すると次のような構成のホルダーが現れますのでとりあえず、/sampel/index.htmlを見てみましょう。
iui-0.13 ├ iui │ ├ iui.js │ ├ iui.css │ ├ iuix.js │ ├ iuix.css │ : │ ├ samples/ ├ index.html ├ LICENSE.txt ├ NOTICE.txt ├ README.txt └ releaseNotes.txt
 「Artists」をタップすると右の画面になります。 |
 「B」「C」のようにグループ化もできます。 |
 ただのパネルを作ることもできます。 |
 トグルスイッチも利用できます。 |
では、試してみましょう。 とりあえず、iui.cssとiui.jsへのパスを確認してから、次のおまじないを書いて始めます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>テスト</title>
<meta name="viewport"
content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css" media="screen">@import "../iui/iui.css";</style>
<script type="application/x-javascript" src="../iui/iui.js"></script>
</head>
<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
ここへコンテンツを書きます
</body>
</html>
これは、つぎのように表示されます。
 |
このままでは、まだ何もできませんがこれに3行加えてみます。
<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<ul id="home" title="All About" selected="true">
<li><a href="http://allabout.co.jp/...">All About </a></li>
</ul>
</body>
 タップすると |
 All Aboutが開きます |
どうでしょう、いきなり、見栄えも動作もiPhoneらしくなってきました。
ポイントは、 selected="true"な ul要素に書いた title="All About" がh1要素のid="pageTitle"へコピーされたことです。
もうひとつは、li要素内のa要素の後ろに「>」マークがついてiPhoneらしくなっていることです。
これらは自動で行われます。
ちなみに、サンプル画像にあるグループ化 は class="group" を指定した要素がグループバーとなり、 パネルは、 class="panel"を指定したブロック要素という具合に指定されています。
次に、ナビゲーションを試してみます。
