小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


iUIというライブラリを利用したiPhone用Webページの作り方

はじめに

iPhoneに機種変更してからiPhoneでPC用サイトを閲覧することが劇的に増えました。iPhoneでPCサイトを見ていると、ページによっては文字が小さかったり、見にくかったりすることがあります。
株式会社はてなが運営する「はてなブックマーク」には、iPhone専用のページがあり、iPhoneで閲覧すると、とても奇麗に表示されます。これからiPhoneが普及するにつれて、このようなiPhone用のWebページが増えていくものと予想されます。
そこで今回は、iUIというライブラリで静的なiPhone用Webページを作ってみました。

iUIのダウンロードとライブラリの設置

1.以下のサイトのFeatured downloads:からファイルをダウンロードします。

2.ダウロードしたファイルを解凍し、サイトに設置します。
3.サイトに設置する場合は、以下のようにjsファイルとcssファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="./iui-0.31/iui/iui.css" />
<script type="text/javascript" src="./iui-0.31/iui/iui.js" charset="shift_jis"></script>
iPhone用にビューポートの指定を行う

iPhoneではウインドウのことをビューポートと呼びます。

iPhoneでは、PCでいういわゆるウインドウの代わりに、ビューポート(view port)という言葉が使われています。

ビューポートは、 簡単に言うとコンテンツ領域のことですが、iPhone版SafariにはPCのようにユーザーがサイズを変えたりスクロールバーなどで操作するウインドウがなく、 代わりにビューポートをジェスチャで操作することでコンテンツ内をズームインして移動するといった捕らえ方をします。
iPhone 3G用のWebページを作る1 - [JavaScript]All About はてなブックマーク - iPhone 3G用のWebページを作る1 - [JavaScript]All About

iPhone用にビューポートの指定を行うには、以下のようにwidthを320で指定します。initial-scaleは、ビューポートの拡大率。user-scalableは、ユーザがディスプレイをタップした際に、拡大することを許可するかどうかを指定します。

<meta name="viewport" content="width=320; initial-scale=1.0;user-scalable=1;">
iUIで作る静的Webページ

単純なページ間をリンクによって遷移するだけのページを作ってみました。ページ内遷移と別ページへの移動、新規ウインドウでの別ページの表示という3種類のリンクを用意してみました。

ポイントは、以下のコードです。

<li><a href="#home2">iPhone(同一ページへの移動)</a></li>
<li><a href="page2.html" target="_self">iPhone 3G(別ページへの移動)</a></li>
<li><a href="page2.html" target="_blank">iPhone 3G(新規ウインドウ)</a></li>

iUIでは、ulタグが1ページを表します。ulタグ配下に、aタグを配置することで、自動的にリンクのマークが表示されます。
同一ページ内への遷移は、href属性に、ulタグのidを指定します。これにより、同一ページ内へのリンクを表現することができます。

以下のサイトに、iUIにおけるHTMLタグの書き方が詳しく書かれていますので、参考にしてください。

2010.08.16追記

コメント欄での指摘を受け、サンプルコードを修正しました。

サンプルコード(メインページ)
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=320; initial-scale=1.0;user-scalable=1;">
  <link rel="stylesheet" type="text/css" href="./iui-0.31/iui/iui.css" />
  <script type="text/javascript" src="./iui-0.31/iui/iui.js" charset="shift_jis"></script>
</head>
<body>
<div class="toolbar">
  <h1 id="pageTitle"></h1>
  <a id="backButton" class="button" href="#"></a>
</div>
<ul id="home" title="目次" selected="true">
<li>iPhone(アイフォーン)は、アップル社製のスマートフォンである。オリジナルのモデルは2007年1月に発表され、最新モデルのiPhone 4は2010年6月に発売された。</li>
  <li><a href="#home2">iPhone 3G(同一ページへの移動)</a></li>
  <li><a href="page2.html" target="_self">iPhone 3G(別ページへの移動)</a></li>
  <li><a href="page2.html" target="_blank">iPhone 3G(新規ウインドウ)</a></li>
</ul>
<ul id="home2" title="iPhone3Gとは" selected="false">
  <li>2007年1月9日に発表され、同年6月29日にアメリカ合衆国にて発売された。なお、初代iPhoneはクワッドバンドGSM端末であり、日本、韓国などの通信方式にGSMを採用していない国では使用できないため、これらの地域では初代iPhoneは販売されていない。
初めて携帯電話にiPod機能を搭載し、iTunesに搭載されているCover Flowを標準で搭載した。なお、初代iPhoneが発売された頃、Cover Flowは現行のiPodシリーズには搭載されていなかった。カラーはシルバーのみ、容量は発売当初は4GBと8GBの2通りだったが、後に16GBモデルが用意され、同時に4GBは販売を終了した。
  </li>
</ul>
</body>
</html>
サンプルコード(リンク先ページ)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=320; initial-scale=1.0;user-scalable=1;">
<link rel="stylesheet" type="text/css" href="./iui-0.31/iui/iui.css" />
<script type="text/javascript" src="./iui-0.31/iui/iui.js" charset="shift_jis"></script>
<body>
<div class="toolbar">
  <h1 id="pageTitle"></h1>
  <a id="backButton" class="button" href="main.html#home1">目次</a>
</div>
<ul id="home3" title="iPhone3Gとは" selected="true">
  <li>2007年1月9日に発表され、同年6月29日にアメリカ合衆国にて発売された。なお、初代iPhoneはクワッドバンドGSM端末であり、日本、韓国などの通信方式にGSMを採用していない国では使用できないため、これらの地域では初代iPhoneは販売されていない。
初めて携帯電話にiPod機能を搭載し、iTunesに搭載されているCover Flowを標準で搭載した。なお、初代iPhoneが発売された頃、Cover Flowは現行のiPodシリーズには搭載されていなかった。カラーはシルバーのみ、容量は発売当初は4GBと8GBの2通りだったが、後に16GBモデルが用意され、同時に4GBは販売を終了した。
  </li>
</ul>
</div>
</body>
</html>