スマホ・iPhone・iPad用サイトをiUiで作ってみる

１　http://www.iui-js.org/　から　iUi 0.4　をダウンロードします。
　　サンプルを眺めて推測します。

２　リスト形式でindexファイルを作成。

　　＜ul id="home" title="栃木県の神社" selected="true"＞
　　＜li＞＜a href="#kiture"＞旧喜連川町の神社＜/a＞＜/li＞
　　＜li＞＜a href="#miya"＞宇都宮市の神社＜/a＞＜/li＞
　　＜/ul＞

　　＜ul id="kiture" title="喜連川"＞

　　＜li＞＜a href="kiture.html"＞旧喜連川町の神社＜/a＞＜/li＞
　　＜li＞＜a href="otome.html"＞早乙女の神社＜/a＞＜/li＞

＜/ul＞

３　リンクさせるページを作成。次の形式の簡単な構造。
　　＜div title="栃木県の神社"＞
　　ここに本文
　　＜/div＞

４　あとは適宜iui＞iui.cssを解読して変更させたり，iui＞t＞defaultの中のpngを変えたりします。しなくてもかまいません。

構造はとても簡単です。このシステムすごいです。
テストはiOSシュミレーターで行ないます。iOSシュミレーターはiPhone，iPadなどデバイスも切り替えられるようになっています。

試作したページはこちらでご覧ください。PCからはWindows Internet Explorerでは残念ながら見えませんが，Firefox，Google Chrome，Safariならタブレットふうに動きます。
ChromeはJava7をインストールしてしまうとうまく動きません。

問題があります。リンク先ページがGoogleの検索で引っかかってきます。それをクリックするとエンコード自動の場合文字化けします。エンコードをutf-8にしてもらえば読めますが面倒です。2行目にコードはUTF8だよというおまじないを書けば解決します。。

画像リンクも手を抜くと切れます。iPodサイトの入り口index.htmlが基本ディレクトリーで下の階層のファイルもindex.htmlに呼び出されて画面上で置き替わるだけなのでディレクトリも1つ繰り上がります。
index.htmlのあるフォルダーと同じ階層の別のフォルダーから画像を呼び出している場合，リンク先ページだけを閲覧されると画像リンクが切れます。iPodサイトのフォルダーの中に画像を置けば解消されますが。あるいは相対パスをやめるとか。