iUIではじめるiPhone／スマートフォン向けサイトの作り方

はじめに

昨年、iUIというライブラリを利用したiPhone用Webページの作り方 - 大人になったら肺呼吸というエントリを書きましたが、最近になり、このiUIがアップデートされたそうです。オフィシャルサイトもカッコ良くなっています。

このエントリでは、モバイルウェブフレームワークであるiUIを使ったスマートフォン向けWebページの作り方を簡単にですが、まとめてみました。

iUIをダウンロードする

iUIライブラリは以下のサイトからダウンロードすることができます。

iUI - Download

iUIを使う際に必要なこと

iUIを使う場合、タグ内に以下のような指定をする必要があります。

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
   <link rel="stylesheet" href="iui/iui.css" type="text/css" />
   <link rel="stylesheet" href="iui/t/default/default-theme.css" type="text/css"/>
   <script type="application/x-javascript" src="iui/iui.js"></script>
</head>

metaタグには、viewportという名前で、コンテンツの横幅やスマートフォンの２本指による拡大縮小（ピンチイン／アウト）を許可するか否かを指定することができます。
initial-scaleは、ビューポートの拡大率。user-scalableは、ユーザがディスプレイをタップした際に、拡大することを許可するかどうかを指定します。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

CSSは以下の２つのファイルを読み込みます。先頭の指定はiUIのグローバル定義で、２行目はiOSのデフォルトテーマを指定しています。

<link rel="stylesheet" href="iui/iui.css" type="text/css" />
<link rel="stylesheet" href="iui/t/default/default-theme.css" type="text/css"/>

最後に、ボタンやリンクの見た目を制御するためのJavaScriptファイルを読み込みます。

<script type="application/x-javascript" src="iui/iui.js"></script>

iUIを使用したシンプルなページの例

Hello Worldと表示するだけのシンプルなページを作成する場合のコードは以下になります。デモはこちら

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
   <link rel="stylesheet" href="iui/iui.css" type="text/css" />
   <link rel="stylesheet" href="iui/t/default/default-theme.css" type="text/css"/>
   <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>
   <div id="index" title="Index" selected="true">
      Hello World
   </div>
</body>
</html>

ページ、画面、およびアプリケーションのコンテンツ

通常、新しいWebページを表示する場合は、新しい物理HTMLファイル読み込みますが、iUIは少し違います。iUIは、携帯電話やスマートフォン向けに、ページ遷移にかかる読み込み時間をできる限り短縮させるため、１つのHTMLにほぼすべてのコンテンツを詰め込みます。

それぞれのページには、任意のHTML要素を使うことができます。各HTML要素には、'id'と'title'属性を指定する必要があり、これらの値は他の要素と重複しないようにする必要があります。'title'属性は画面のタイトルや[戻る]ボタンのラベルとして使用されます。

iUIはページの読み込み時に、selected属性が"true"のものをのぞいて、それ以外の要素を非表示にします。selected属性を指定することで、iUIに最初に表示すべきメイン画面であることを通知します。

<div id="index" title="Index" selected="true">
  Hello World
</div>

リストを表示する場合は、以下のように書くことが出来ます。

<ul id="contacts" title="My Contacts">
  <li>List item</li>
</ul>

フォームは以下のように書くことが出来ます。

<form id="" title="Index" name="formname" action="" method="GET">
  <input type="text" name="inputname">
  <input type="submit">
</form>

複数の画面のナビゲーション

iUIでは、ツールバーのdivを持っていて、残りの部分はページあるいは画面になっています。以下の例では、リンクをクリックして、2画面目に遷移する例です。デモはこちら

<body>
   <div class="toolbar">
      <h1 id="pageTitle"></h1>
      <a id="backButton" class="button" href="#"></a>
   </div>
   <ul id="screen1" title="Screen 1" selected="true">
      <li><a href="#screen2">Go to Screen #2</a></li>
   </ul>
   
   <div id="screen2" title="Screen 2">
      Hello World
   </div>
</body>

２画面だけでなく、３画面以上を使って遷移させたい場合は、以下のような例で実装することができます。デモはこちら

<body>
   <div class="toolbar">
      <h1 id="pageTitle"></h1>
      <a id="backButton" class="button" href="#"></a>
   </div>
   <ul id="screen1" title="Screen 1" selected="true">
      <li><a href="#screen2">Go to Screen #2</a></li>
   </ul>
   
   <div id="screen2" title="Screen 2">
      <a href="#screen3">Go to screen #3</a>
   </div>
   
   <div id="screen3" title="Screen 3" class="panel">
      Hello World
   </div>
</body>