iui.jsで構築するシンプルなiPhoneサイト

iui.js x iPhone Site

忙しいからこそ、やりたいことをやらねば!!
というわけで、引き続き死にそうになりながらも、時間を見つけてiPhone, iPod touch用のサイト制作に向けて勉強中。とりあえずは、簡単にiPhoneのUIっぽく見せるJavaScript「iui.js」を使って、本当に簡単な、シンプルなページを作ってみた。

iPhoneを真似ろ!!

SCREAMO for iPhone & iPod touch

「iui.js」は、ページをiPhoneのUIっぽく表示させるJavaScript。リストタグの組み合わせることによって、簡単にiPhoneのUIそっくりにページを表示することができる。また、SafariやFirefoxできちんと表示することができるので、確認も簡単簡単。

iui – Google Codeからダウンロードでき、現在のバージョンは0.13だ。バージョンからまだ開発段階な事が伺えるが、現時点でもシンプルなページならば、十分に作成できる実力をお持ちのよう。ダウンロードして解凍したら、「iui」フォルダをサーバの適当なところに設置して、headからスタイルシートとJavaScriptを読み込ませよう。なお「iui」と「iuix」の2種類があるが、とりあえず今回は「iui」でOK。「iuix」は実のところ、よくわからんとです。

ちなみにSCREAMOのiPhone用サイトはコチラ。Recent Entriesしか表示しないので、まったく実用性がないが、これからどんどん改造していくつもり。(体力があるときにでも・・・。)

リストタグのコンビネーション

本当はMovable TypeやWordPressと絡ませたソースを紹介したいが、とりあえず最初は基本部分を押さえてほしいので、簡単なサンプルソースを紹介する。このソースはカテゴリーわけされたリンク集などに利用すると効果絶大だろう。こちらのサンプルページは、コチラ

サンプルソース

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>サンプルページ</title>
<link rel="stylesheet" href="[iui.cssのURL]" type="text/css" />
<!-- スタイルシートの読み込み -->
<script type="application/x-javascript" src="[iui.jsのURL]"></script>
<!-- iui.jsの読み込み -->
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<!-- これはページのUIのパラメータ。表記せずとも動作するが、ページサイズが大きくなってしまい、
もの凄く見づらくなってしまう。なお、ページサイズのパラーメータは、width=320; の部分。これを変更することによって、
iPhone, iPod touch上で表示されるページ領域を変更できる。320pxはジャストフィットサイズだ。よっぽどの事が無い限り、変更する必要はないだろう。 -->
</head>
<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<!-- div class="toolbar" で、ページ上部の表示領域を設定する。
その中のh1タグで、一番始めに表示するページタイトル、
<a id="backButton" class="button" href="#"></a>で、HOMEへ戻るボタンを設置できる。 -->
<ul id="home" title="Home" selected="true">
<li><a href="#navi1">ナビゲーション1</a></li>
<li><a href="#navi2">ナビゲーション2</a></li>
<li><a href="#navi3">ナビゲーション3</a></li>
</ul>
<!-- ulにid="home"をつけることによって、toolbarのHOMEボタンが押されたときに、この表示領域まで戻る仕組み。
liのアンカーリンクは、他のulナビゲーションにページ内移動する仕組みだ。 -->
<ul id="navi1" title="NAVI1">
<li><a href="https://www.screamo.jp/1-1.html" target="_self">ナビゲーション1:リンク1</a></li>
<li><a href="https://www.screamo.jp/1-2.html" target="_self">ナビゲーション1:リンク2</a></li>
<li><a href="https://www.screamo.jp/1-3.html" target="_self">ナビゲーション1:リンク3</a></li>
</ul>
<!-- ul id="home"の入れ子になっているliのアンカーリンクをクリックすると、表示されるページ。このページのリンクをクリックすると、目的のページに移動してくれる。
なお、target="_self"をつけていないと、クリックしても反応がないので、かならず表記しておこう。 -->
<ul id="navi2" title="NAVI2">
<li><a href="https://www.screamo.jp/2-1.html" target="_self">ナビゲーション2:リンク1</a></li>
<li><a href="https://www.screamo.jp/2-2.html" target="_self">ナビゲーション2:リンク2</a></li>
<li><a href="https://www.screamo.jp/2-3.html" target="_self">ナビゲーション2:リンク3</a></li>
</ul>
<ul id="navi3" title="NAVI3">
<li><a href="https://www.screamo.jp/3-1.html" target="_self">ナビゲーション3:リンク1</a></li>
<li><a href="https://www.screamo.jp/3-2.html" target="_self">ナビゲーション3:リンク2</a></li>
<li><a href="https://www.screamo.jp/3-3.html" target="_self">ナビゲーション3:リンク3</a></li>
</ul>
</body>
</html>

少しばかり独特なソースで何が何だかわからないかもしれないが、<ul>〜</ul>が一つのページと認識しておけば、意外とスムーズに理解できるはず。リストからリストへ、がiui.jsで構築するiPhoneサイトの基本なのだ。

サイトの内容によってはiui.js

Sampe Page

「iui.js」は、基本的には難しいことはできない。<ul>〜</ul>を駆使しての、ページ内移動をiPhoneのUIに似せているだけで、今後は仕様に変更があるかもしれないが、通常<p>タグを利用することもできないし、タブで開くこともできない。この辺はスタイルシートの改良でなんとかできそうだが、一般的には敷居が高いだろう。

というわけで、「iui.jsを利用するの場合は用途を選ぶべき」というのが、持論。もっと複雑な事をやろうとするのならば、通常のHTMLでスタイルシートだけiPhone用に書いたり、他のJavaScriptを使ってみるのも良い。UIに縛られてしまって使いにくくなってしまうのは、iPhoneのUIポリシーに反することだろうから、適材適所を忘れずにiPhone, iPod touch用のサイト構築に望んで欲しいと切に願う。

related story