open-clothes.org

インデックステンプレート1枚でiPhone対応サイトを作る方法

春田です。お久しぶりです。
先日、このサイトを一部iPhoneに対応させたのでその方法を紹介します。
MovableTypeのインデックステンプレートを1つ作るだけなので、とても簡単です。

http://www.open-clothes.org/ipn/

ページ構成

ページ構成は以下のようにします。

トップページ[1. トップページ]
- 最新のエントリ 3件
   → [2]へリンク
- トップレベルカテゴリ一覧
   → [3]へリンク
- アクセスマップ
   → [4]へリンク

[2. 個別エントリページ]
(最新3件のみページを用意)

[3. カテゴリアーカイブページ]
(トップレベルカテゴリ毎にページを用意)
- 記事の詳細ページはPC版

[4. アクセスマップ]
- 所在地、マップ、アクセス方法など、基本、PC版のHTMLをコピペ

---

作り方

ライブラリの読み込み

jQuery Mobileという便利なライブラリがありますので、これを利用します。 ファイルをダウンロードして自分のサーバにアップする必要はなく、headタグ内に以下の3行を書けばOKです。

以下、jQuery Mobileのルールに則ってマークアップしていきます。

ページの単位

<dev data-role="page"> ～ </div> がページの単位になります。
今回の構成では以下のようにページが並んでいます。


ページ間の移動はページ内リンクと同じ要領で<a href="#access">アクセスマップ</a> というリンクで <div id="access" data-role="page"> ～ </div> へ移動できます。個別エントリページ、カテゴリアーカイブページには、idに<mt:EntryID />、<mt:CategoryID />を使いページを識別できるようにします。

ヘッダー・フッターの表示

ヘッダーのブロックにはdata-role="header"をつけるといいようです。 data-role="header"要素内にclass="ui-btn-right"で右側にボタンが置けます。class="ui-btn-left"で左。 h1の中身が長いと「有限会社オープンクロ・・・」などとなるので短く「Open-Clothes」にしました。 フッターのブロックにはdata-role="footer"を指定します。 ちなみにコンテンツ部分はdata-role="content"です。

リストの表示

ulにはdata-role="listview"を指定します。liにdata-role="list-divider"と指定すると見出しぽく表示されます。

コピペ用 インデックステンプレート

以上を踏まえて作ったテンプレートををgistに置いておきます。このサイトで使ってるものです。 ヘッダー、フッターとアクセスマップの内容を変えるだけで他のサイトでも使えると思いますのでよかったらどうぞ。
※ 全ページiPhone用の画面を用意するには別のアーカイブテンプレートを作る必要があります

https://gist.github.com/723118#file_ipn.tmpl.html

参考にしたサイト:
jQuery Mobileの使い方と挙動のまとめ その１ - アークウェブシステム開発SandBox

---