2012/12/08

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

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

2 リスト形式で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>

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

4 あとは適宜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サイトのフォルダーの中に画像を置けば解消されますが。あるいは相対パスをやめるとか。

0 件のコメント: