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

1 2 3
  • 印刷する
  • ブックマークする
  • 携帯に送る
  • ブログに書く

あわせて読みたい

この記事の担当ガイド

写真

高橋 登史朗

Javascriptをはじめ、Ajax、jQueryの著書多数のガイドが、何かと最近騒がれているJa…

続きを読む

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

人気Javascriptランキング

Powered by 価格.com

デジタル関連コミュニティ

北欧好きが、愛用の北欧モノを見せ合うコミュニティ

メルマガ登録

【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。

ショッピングカタログ

All About ウェブマガジン

女性向け

雨が楽しくなる!レイングッズ15

男性向け

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

All About モバイル

QRコード

All Aboutがケータイで読める!

オススメ記事をメールでチェック

知識・経験を生かして、記事を書いてみませんか?