iUIを使ってみる
こんにちは、お昼ご飯担当の熊谷です。今日のお昼ご飯はというともちろんお弁当、すっかり外食することはなくなり日々健康的な生活を送っています。その結果、健康診断で知ったショッキングな体重は順調に減り続けて現在54-55kg。この調子で自分の体重をコントロールしたいです！
さて、先週末ようやくiPod touchの店頭販売が始まりました。この日を待ち望んでいた私はすぐさま16GBを購入しいろいろ遊びまくっているんですが、なんといっても残念で仕方がないのは独自アプリケーションをインストールすることができないということ。これさえできればもう大大満足なんですが、どうなんでしょうか。時間が解決してくれるのかなぁと淡い期待を持ちつつ、それまではWebアプリケーションを作ったりして遊ぼうかと思っている今日この頃です。
そんなことで、ググっているとiPod touchにあったWebアプリケーションを作成するのに便利なライブラリがあるとのことで、早速使ってみることにしました。「iUI」というこのライブラリ、JavascriptとCSS、画像で構成されています。
使い方はiUIのサイトのサンプルを見るとわかりますが、iUIで定義されているIDとクラス名をHTML上で指定するだけでそれらしいページを作成することができます。どのようなものが定義されているのか、ドキュメント等はまだ用意されていないのでサンプルやソースを見て見よう見まねで作ることにはなりますが、
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<ul id="home" title="ページ一覧" selected="true">
<li><a href="#page1">ページ1</a></li>
<li><a href="#page2">ページ2</a></li>
<li><a href="#page3">ページ3</a></li>
</ul>
<ul id="page1" title="ページ1">
<li class="group">あ</li>
<li><a href="#page1-1">あいうえお</a></li>
<li><a href="#page1-2">あああああ</a></li>
<li class="group">か</li>
<li><a href="#page2-1">かきくけこ</a></li>
<li><a href="#page2-2">かかかかか</a></li>
</ul>
<div id="page1-1" title="あいうえお" class="panel">
<h2>フィールド1</h2>
<fieldset>
<div class="row">
<label>トグルボタン</label>
<div class="toggle" onclick=""><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
</div>
</fieldset>
<h2>フィールド2</h2>
<fieldset>
<div class="row">
<label>テキスト</label>
<input type="text" name="text" value=""/>
</div>
<div class="row">
<label>パスワード</label>
<input type="password" name="password" value=""/>
</div>
</fieldset>
</div>
ほぼサンプルそのままですがこんな感じになります。クラス名toolbarというのがページ上部に表示されているタイトルや戻るボタンが表示される場所になります。そして、ul要素でリストを作成しtitle属性はそのページのタイトルになります。また 、クラス名toggleを使うとトグルボタンを作成したりすることができます。
上記HTMLを表示すると
このようになります。で、「ページ1」をクリックするとスライドして
2ページ目が表示され、「あいうえお」をクリックすると
3ページ目。このような感じで表示されます。
あくまで「iUI」はユーザインターフェースを簡単に作るためのものなので、ロジック的なものは自分で作らなくてはいけませんが、これを利用していろいろ遊ぶことができそうです。
ちなみに、iPod touchは通信機能として無線LANが内蔵されているわけですが、無線LANのアクセスポイントがない場所ではネットに繋ぐことができません。早く日本でもiPhoneが使えるようになればいいなと思うのですが、Advanced／W-ZERO3 [es]ユーザな私は、「ZEROProxy」を使用しています。これによってアドエス経由でネットに繋ぐことが可能になるので、Willcomの電波が入るところであればどこでもOK、すばらしいです！
