忙しいからこそ、やりたいことをやらねば!!
というわけで、引き続き死にそうになりながらも、時間を見つけてiPhone, iPod touch用のサイト制作に向けて勉強中。とりあえずは、簡単にiPhoneのUIっぽく見せるJavaScript「iui.js」を使って、本当に簡単な、シンプルなページを作ってみた。
iPhoneを真似ろ!!
「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="http://www.screamo.jp/1-1.html" target="_self">ナビゲーション1：リンク1</a></li> <li><a href="http://www.screamo.jp/1-2.html" target="_self">ナビゲーション1：リンク2</a></li> <li><a href="http://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="http://www.screamo.jp/2-1.html" target="_self">ナビゲーション2：リンク1</a></li> <li><a href="http://www.screamo.jp/2-2.html" target="_self">ナビゲーション2：リンク2</a></li> <li><a href="http://www.screamo.jp/2-3.html" target="_self">ナビゲーション2：リンク3</a></li> </ul> <ul id="navi3" title="NAVI3"> <li><a href="http://www.screamo.jp/3-1.html" target="_self">ナビゲーション3：リンク1</a></li> <li><a href="http://www.screamo.jp/3-2.html" target="_self">ナビゲーション3：リンク2</a></li> <li><a href="http://www.screamo.jp/3-3.html" target="_self">ナビゲーション3：リンク3</a></li> </ul> </body> </html>
少しばかり独特なソースで何が何だかわからないかもしれないが、<ul>〜</ul>が一つのページと認識しておけば、意外とスムーズに理解できるはず。リストからリストへ、がiui.jsで構築するiPhoneサイトの基本なのだ。
サイトの内容によってはiui.js
「iui.js」は、基本的には難しいことはできない。<ul>〜</ul>を駆使しての、ページ内移動をiPhoneのUIに似せているだけで、今後は仕様に変更があるかもしれないが、通常<p>タグを利用することもできないし、タブで開くこともできない。この辺はスタイルシートの改良でなんとかできそうだが、一般的には敷居が高いだろう。
というわけで、「iui.jsを利用するの場合は用途を選ぶべき」というのが、持論。もっと複雑な事をやろうとするのならば、通常のHTMLでスタイルシートだけiPhone用に書いたり、他のJavaScriptを使ってみるのも良い。UIに縛られてしまって使いにくくなってしまうのは、iPhoneのUIポリシーに反することだろうから、適材適所を忘れずにiPhone, iPod touch用のサイト構築に望んで欲しいと切に願う。
Comments