Javascript

【Javascript】iPhone 3G用のWebページを作る3

Javascript関連情報

更新日：2008年07月31日

iPhone 3G用のWebページを作る3

高橋登史朗

今回は、iPhone用に作られたライブラリを紹介します。普通にHTMLを書くだけでiPhone用のページへ変身させてくれるライブラリiUIです。

外部ファイルを読み込む

前ページでは、ハッシュを使って同一ファイル内のDOMブロックを利用したページナビゲーションを構成しましたが、実は、iUIでは、a要素内の普通のリンクに記述された普通のURLは、同一ドメインならXMLHttpRequestで処理され次ページとして挿入されます。

つまり、同じドメイン内にそのリンク先HTMLを置けば、いろいろな処理を外部ファイルとして管理できるのです。

サンプル
http://jsgt.org/a/lib/iui-0.13/test4.htm
(iPhoneで見てください。PCでもSafariやFirefoxなら雰囲気はつかめるかもしれません)
まず、メインのページです。

<!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">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>テスト</title>
<meta name="viewport" 
      content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css" media="screen">@import "./iui/iui.css";</style>
<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>

    <ul id="test1" title="Test1" selected="true">
      <li><a href="#test2">同ファイル内へ</a></li>
      <li><a href="betu1.htm">外部ファイル</a></li>
    </ul>
    
    <div id="test2" class="panel" title="Test2">
      <h2>これは同ファイル内です</h2>
    </div>

</body>
</html>

読み込む外部ファイル betu1.htm です。(utf-8で保存しています)

<ul id="test3" title="外部ファイル" class="panel">
    <li>これは別ファイルです</li>
</ul>

次のように表示されます。

「同ファイル内へ」(#test2)をタップすると右の画面になります。	div id="test2"のブロックです。
betu1.htmを読み込んで表示しています。	「外部ファイル」(betu1.htm)をタップするとAjaxでファイルを読み込み表示します。

少し気になる別ドメインのページの場合との区別は、特に分岐しているわけではなく、XHR処理の処理が別ドメインのために完了しないため、途中でa要素側のhrefタップが動作してページ遷移するというiPhone Safariの癖をうまく利用したTipのようです。

iUIは、JavaScriptやCSSや画像を特別に用意しなくても、iPhoneらしい、使いやすいWebページを構築してくれる便利なライブラリで、機能も豊富なのですが、ドキュメントがまだ作られていないため多少わかりづらい部分もまだあります。

下記の参考ページにさまざまなサイトに利用されているiUIの実例を見ることができますので、参考にしてみると良いと思います。

下記ページを見るときは、Safari3.1で、[設定]から[開発]メニューを出して、[ユーザーエージェント]で[iPhone]を選択したり3Gのユーザーエージェント Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 like Mac OS X; ja-jp) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5A345 Safari/525.20 を打ち込んでみると、多少わかりやすいかもしれません。また、ソースも確認できますのでお勧めです。

WebApps Powered by iUI
http://code.google.com/p/iui/wiki/PoweredBy

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！