はじめに
iPhoneに機種変更してからiPhoneでPC用サイトを閲覧することが劇的に増えました。iPhoneでPCサイトを見ていると、ページによっては文字が小さかったり、見にくかったりすることがあります。
株式会社はてなが運営する「はてなブックマーク」には、iPhone専用のページがあり、iPhoneで閲覧すると、とても奇麗に表示されます。これからiPhoneが普及するにつれて、このようなiPhone用のWebページが増えていくものと予想されます。
そこで今回は、iUIというライブラリで静的なiPhone用Webページを作ってみました。
iUIのダウンロードとライブラリの設置
1.以下のサイトのFeatured downloads:からファイルをダウンロードします。
2.ダウロードしたファイルを解凍し、サイトに設置します。
3.サイトに設置する場合は、以下のようにjsファイルとcssファイルを読み込みます。
<link rel="stylesheet" type="text/css" href="./iui-0.31/iui/iui.css" /> <script type="text/javascript" src="./iui-0.31/iui/iui.js" charset="shift_jis"></script>
iPhone用にビューポートの指定を行う
iPhoneではウインドウのことをビューポートと呼びます。
iPhoneでは、PCでいういわゆるウインドウの代わりに、ビューポート(view port)という言葉が使われています。
ビューポートは、 簡単に言うとコンテンツ領域のことですが、iPhone版SafariにはPCのようにユーザーがサイズを変えたりスクロールバーなどで操作するウインドウがなく、 代わりにビューポートをジェスチャで操作することでコンテンツ内をズームインして移動するといった捕らえ方をします。
iPhone 3G用のWebページを作る1 - [JavaScript]All About
iPhone用にビューポートの指定を行うには、以下のようにwidthを320で指定します。initial-scaleは、ビューポートの拡大率。user-scalableは、ユーザがディスプレイをタップした際に、拡大することを許可するかどうかを指定します。
<meta name="viewport" content="width=320; initial-scale=1.0;user-scalable=1;">
iUIで作る静的Webページ
単純なページ間をリンクによって遷移するだけのページを作ってみました。ページ内遷移と別ページへの移動、新規ウインドウでの別ページの表示という3種類のリンクを用意してみました。
- デモページ(iPhone用)
ポイントは、以下のコードです。
<li><a href="#home2">iPhone(同一ページへの移動)</a></li> <li><a href="page2.html" target="_self">iPhone 3G(別ページへの移動)</a></li> <li><a href="page2.html" target="_blank">iPhone 3G(新規ウインドウ)</a></li>
iUIでは、ulタグが1ページを表します。ulタグ配下に、aタグを配置することで、自動的にリンクのマークが表示されます。
同一ページ内への遷移は、href属性に、ulタグのidを指定します。これにより、同一ページ内へのリンクを表現することができます。
以下のサイトに、iUIにおけるHTMLタグの書き方が詳しく書かれていますので、参考にしてください。
2010.08.16追記
コメント欄での指摘を受け、サンプルコードを修正しました。
サンプルコード(メインページ)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=320; initial-scale=1.0;user-scalable=1;"> <link rel="stylesheet" type="text/css" href="./iui-0.31/iui/iui.css" /> <script type="text/javascript" src="./iui-0.31/iui/iui.js" charset="shift_jis"></script> </head> <body> <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> </div> <ul id="home" title="目次" selected="true"> <li>iPhone(アイフォーン)は、アップル社製のスマートフォンである。オリジナルのモデルは2007年1月に発表され、最新モデルのiPhone 4は2010年6月に発売された。</li> <li><a href="#home2">iPhone 3G(同一ページへの移動)</a></li> <li><a href="page2.html" target="_self">iPhone 3G(別ページへの移動)</a></li> <li><a href="page2.html" target="_blank">iPhone 3G(新規ウインドウ)</a></li> </ul> <ul id="home2" title="iPhone3Gとは" selected="false"> <li>2007年1月9日に発表され、同年6月29日にアメリカ合衆国にて発売された。なお、初代iPhoneはクワッドバンドGSM端末であり、日本、韓国などの通信方式にGSMを採用していない国では使用できないため、これらの地域では初代iPhoneは販売されていない。 初めて携帯電話にiPod機能を搭載し、iTunesに搭載されているCover Flowを標準で搭載した。なお、初代iPhoneが発売された頃、Cover Flowは現行のiPodシリーズには搭載されていなかった。カラーはシルバーのみ、容量は発売当初は4GBと8GBの2通りだったが、後に16GBモデルが用意され、同時に4GBは販売を終了した。 </li> </ul> </body> </html>
サンプルコード(リンク先ページ)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=320; initial-scale=1.0;user-scalable=1;"> <link rel="stylesheet" type="text/css" href="./iui-0.31/iui/iui.css" /> <script type="text/javascript" src="./iui-0.31/iui/iui.js" charset="shift_jis"></script> <body> <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="main.html#home1">目次</a> </div> <ul id="home3" title="iPhone3Gとは" selected="true"> <li>2007年1月9日に発表され、同年6月29日にアメリカ合衆国にて発売された。なお、初代iPhoneはクワッドバンドGSM端末であり、日本、韓国などの通信方式にGSMを採用していない国では使用できないため、これらの地域では初代iPhoneは販売されていない。 初めて携帯電話にiPod機能を搭載し、iTunesに搭載されているCover Flowを標準で搭載した。なお、初代iPhoneが発売された頃、Cover Flowは現行のiPodシリーズには搭載されていなかった。カラーはシルバーのみ、容量は発売当初は4GBと8GBの2通りだったが、後に16GBモデルが用意され、同時に4GBは販売を終了した。 </li> </ul> </div> </body> </html>