iPhone専用サイトを秒殺で作る【iuiは便利】
エンジニアのよく口にする言葉で、「そんなの秒殺ですよ。」というのがありますが、iPhone専用サイトを作る事は、それに該当するのでしょうか？
押忍番は、手っ取り早くサービスを立ち上げたかった為に、iuiのライブラリを使う事にしました。
これは、googleさんが公開しているiPhoneサイトを作るためのライブラリです。こちらの画面右側からダウンロードできます。
これを所定のフォルダに展開しまして（押忍番はdocumentrootの直下で展開）、htmlのヘッダ部で取り込むようにします。
押忍番は、手っ取り早くサービスを立ち上げたかった為に、iuiのライブラリを使う事にしました。
これは、googleさんが公開しているiPhoneサイトを作るためのライブラリです。こちらの画面右側からダウンロードできます。
これを所定のフォルダに展開しまして（押忍番はdocumentrootの直下で展開）、htmlのヘッダ部で取り込むようにします。
<link rel="stylesheet" href="http://osuban.jp/iphone/iui/iui.css" type="text/css" />
<script type="application/x-javascript" src="http://osuban.jp/iphone/iui/iui.js"></script>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
htmlファイル中にスタイルシートとjavascriptファイルを取り込むわけですね。これで準備は完了です。
で以下はbody部です。
で以下はbody部です。
1:<body>
2:<div class="toolbar">
3: <h1 id="pageTitle"></h1>
4: <a id="backButton" class="button" href="#"></a>
5:</div>
6:<!-- メインページ -->
7:<ul id="home" title="押忍番" selected="true">
8: <li><a href="#new">新着アプリ一覧へ</a></li>
9: <li><a href="#sale">セールアプリ一覧へ</a></li>
10: <li>あなたの為に作ります押忍番！ご要望お待ちしております！</li>
11:</ul>
12:<!-- ウェブ新着アプリページ -->
13:<ul id="new" title="新着アプリ">
14: <li><a taget="self" href="http://osuban.jp/iphone/newcommer.php?tdate=0">今日の新着アプリ</a></li>
15: <li><a taget="self" href="http://osuban.jp/iphone/newcommer.php?tdate=1">昨日の新着アプリ</a></li>
16: <li><a taget="self" href="http://osuban.jp/iphone/newcommer.php?tdate=2">一昨日の新着アプリ</a></li>
17:</ul>
18:<!-- セールアプリページ -->
19:<ul id="sale" title="セールアプリ">
20: <li class="group">ジャンルで検索</li>
21: <li><a href="http://osuban.jp/iphone/sale.php?sno=0">全て</a></li>
22: <li><a href="http://osuban.jp/iphone/sale.php?sno=1">ゲーム</a></li>
23: <li><a href="http://localhost/sale.php?sno=1">ゲーム</a></li>
24: <li><a href="http://osuban.jp/iphone/sale.php?sno=2">エンターテインメント</a></li>
25: <li><a href="http://osuban.jp/iphone/sale.php?sno=3">スポーツ</a></li>
26: <li><a href="http://osuban.jp/iphone/sale.php?sno=4">ソーシャルネットワーキング</a></li>
27: <li><a href="http://osuban.jp/iphone/sale.php?sno=5">ナビゲーション</a></li>
28: <li><a href="http://osuban.jp/iphone/sale.php?sno=6">ニュース</a></li>
29: <li><a href="http://osuban.jp/iphone/sale.php?sno=7">ビジネス</a></li>
30: <li><a href="http://osuban.jp/iphone/sale.php?sno=8">ファイナンス</a></li>
31: <li><a href="http://osuban.jp/iphone/sale.php?sno=9">ミュージック</a></li>
32: <li><a href="http://osuban.jp/iphone/sale.php?sno=10">メディカル</a></li>
33: <li><a href="http://osuban.jp/iphone/sale.php?sno=11">ユーティリティ</a></li>
34: <li><a href="http://osuban.jp/iphone/sale.php?sno=12">ライフスタイル</a></li>
35: <li><a href="http://osuban.jp/iphone/sale.php?sno=13">レファレンス</a></li>
36: <li><a href="http://osuban.jp/iphone/sale.php?sno=14">仕事効率化</a></li>
37: <li><a href="http://osuban.jp/iphone/sale.php?sno=15">健康&フィットネス</a></li>
38: <li><a href="http://osuban.jp/iphone/sale.php?sno=16">写真</a></li>
39: <li><a href="http://osuban.jp/iphone/sale.php?sno=17">天気</a></li>
40: <li><a href="http://osuban.jp/iphone/sale.php?sno=18">教育</a></li>
41: <li><a href="http://osuban.jp/iphone/sale.php?sno=19">旅行</a></li>
42: <li><a href="http://osuban.jp/iphone/sale.php?sno=20">電子書籍</a></li>
43: <li class="group">ジャンル以外で検索</li>
44: <li><a href="http://osuban.jp/iphone/sale.php?sno=21">今日の</a></li>
45: <li><a href="http://osuban.jp/iphone/sale.php?sno=22">昨日の</a></li>
46: <li><a href="http://osuban.jp/iphone/sale.php?sno=23">無料</a></li>
47:</ul>
48:</body>
なんとこのhtml１枚でiPhone専用ページ３頁分に相当します。
 |
 |
 |
驚きますね。では一つづつ見ていきましょう。 Continue reading »