iPhone用Webページを作成してみた

最近世の中で、WebサイトをiPhone用インタフェースにするところがどんどん増えてきてます、今後も増え続けると思いますが、例としてあげたいのはFacebookのiPhone用ページです。iPhoneのブラウザがSafariなんで、Safariを使えばコンピュータでも確認できます。Firefoxでもある程度正しく表示できますが、IEではボロボロでした。そういった格好いい動いをするページ、今まで見たことのないページをどう作成したかはFacebookの開発者しかわからないですが、表面上のものはある程度まねできると思います。

１．まずはiuiというJavascripｔライブラリをダウンロードします。
http://code.google.com/p/iui/downloads/list ここからライブラリをダウンロード。
ダウンロードしたファイルを解凍してみるとサンプルがあるので、イメージはつかめると思います。

２．iui.css, iui.js の読み込み
ページのhead 部分に iui.css と iui.js の読み込みコードを追加

<link rel="stylesheet" type="text/css" href="/css/iui/iui.css" />
<script type="text/javascript" src="js/iui/iui.js"></script>

３．ページ作成

<!-- トップバー -->
<div class="toolbar">
    <h1 id="pageTitle"></h1>
    <a id="backButton" class="button" href="#"></a>
</div>

<!-- Homeページ -->
<ul id="home" title="Home" selected="true">
    <li><a href="#blogs">Blogs</a></li>
    <li><a href="#play">Play</a></li>
    <li><a href="#me">Me</a></li>
    <li><a href="/"  target="_self">Safari</a></li>
</ul>

<!-- Blogsページ -->
<ul id="blogs" title="Blogs">
    <li class="group">中 and 韓</li>
    <li><a href="http://steadiness.blogspot.com/"
           target="_blank">Split-Second</a></li>
    <li class="group">日</li>
    <li><a href="https://footmark.wordpress.com/"
           target="_blank">FootMark</a></li>
    <li><a href="http://www.foxus.com/mt/mw/"
           target="_blank">Multi Works</a></li>
</ul>
<!-- Playページ -->
<ul id="play" title="Play">
    <li><a href="#youtube">YouTube</a></li>
    <li><a href="#sns">SNS</a></li>
</ul>
<!-- Meページ -->
<ul id="me" title="Me">
    <li><a href="#about">About</a></li>
    <li><a href="#projects">Projects</a></li>
    <li><a href="#gallery">Gallery</a></li>
</ul>

<!-- Aboutページ -->
<div id="about" class="panel" title="About">
    <h2>About</h2>
    <fieldset>
    <div class="row">
        <label>Name</label>
        <input type="text" value="King"/>
    </div>
    <div class="row">
        <label>Contact</label>
        <input type="text" value="dongrikin@gmail.com"/>
    </div>
    </fieldset>
</div>
・・・・・

後も続きますが、大体はこんな感じで追加していきます。
作成したページがこちらになります。
http://www.dongrikin.com/iphone