alt

先日、このブログをiPhoneからも閲覧できるようにしたので
この流れでホームページもiPhone専用サイトを構築してみます。
とはいっても、何も情報がないので
各SNS系のマイページへとばすためのリンクを設置するぐらいかな。
以下は制作過程をザックリと書き留めてます。


１．iPhone専用のサブドメインを用意する。
http://i.alt-scape.com/

２．iPhoneからトップページへ飛んできたときは
PHPかJSでユーザーエージェントの判定をして専用ページにリダイレクトさせる。

３．デバッグ（閲覧）環境の準備。
Safari（3.1以上）の「設定」→「詳細」タブ→「メニューバーに”開発”メニューを表示」にチェックして
メニューバーの「開発」→「ユーザーエージェント」→「iPhone」を選択すればＯＫ。
Firefoxの場合はアドオン『User Agent Switcher 』をインストールして
「ツール」→「Default User Agent」→「iPhone3.0」でＯＫ。

４．ページを制作するにあたっての準備。
iPhoneライクなUIを簡単作ることができるJSライブラリ「iUI」をダウンロード。
解凍してサンプルソースを元にすればそれっぽいものは簡単にできる。

５．こちらの実例も参考にしてとりあえずプロフィールと各サイトのマイページへのリンクでも貼っておく。
（アイコンはこちらからダウンロードして使用）

※サイトによってはiPhoneからのアクセスでも
モバイルサイトにリダイレクトしてくれるところはありますが、
大概はPCブラウザと同じページへ飛びます。

下記に関しては直接モバイル用のマイページに飛ばしてます。
YouTube
http://m.youtube.com/user/アカウント名
Last.fm
http://m.lastfm.jp/user/アカウント名
Flickr
http://m.flickr.com/#/photos/アカウント名


参考：
AndroidとiPhone両方対応するページ
http://d.hatena.ne.jp/haru-komugi/20090812/1250078548/
iPhone用のページが簡単に作れるiUI
http://allabout.co.jp/internet/javascript/closeup/CU20080725A/
Webアプリ開発環境としてのSafariを知ってますか？
http://www.atmarkit.co.jp/fjava/column/andoh/andoh40.html