Javascript

【Javascript】iPhone 3G用のWebページを作る3

Javascript関連情報

更新日：2008年07月31日

iPhone 3G用のWebページを作る3

高橋登史朗

今回は、iPhone用に作られたライブラリを紹介します。普通にHTMLを書くだけでiPhone用のページへ変身させてくれるライブラリiUIです。

前回に引き続き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"を指定したブロック要素という具合に指定されています。

次に、ナビゲーションを試してみます。

回答募集中のトピック（お題）

男のカバン完全カタログ

ビジネススタイルは、スーツの着こなしのルールを遵守しつつ、小物で個性を打ち出すのがセオリー。だからこそ、比較的自由度の高いバッグが重要だ。そこで今回は、「ブリーフケース」と「トートバッグ」という今おすすめのタイプから15点ずつアイテムをピックアップ。品質や素材が秀でているだけでなく、機能面も優れる才色兼備な逸品を厳選した。バッグを新調するだけで、不思議なほど心躍る。

For M タブレット版アプリvol.16配信中！

フライパン一つの超簡単男メシ

楽しく痩せるスポーツアイテム

速報！メンズファッションニュース

人気Javascriptランキング