::iPod touch の Safari に最適化したウェブサイトを作成する方法 -iPod touch Hacks !-

TAGS

コラム (1602) , iPhone3G (272) , アプリ (221) , トレンドキーワード (215) , アクセサリ (213) , Hack (189) , Jailbreak (184) , 対応ウェブサービス (108) , AppStore (94) , iPhone (83) , iPad (74) , iPhone3GS (65) , 関連サイト (54) , ハードケース (41) , iPhone4 (38) , アクセスランキング (38) , 機能・仕様 (29) , 不具合 (27) , アダルト (27) , iTunes (25) , 裏技 (25) , エミュレータ (19) , Pwnage (18) , ビデオ (17) , ソフトウェア (16) , WWDC2010 (15) , 壁紙 (14) , ヘッドフォン (14) , リポジトリ (14) , Wi-Fi (14) , 充電器 (13) , 自動車 (13) , 懸賞 (13) , 操作方法 (12) , 楽器 (11) , WWDC2008 (11) , WWDC2009 (11) , スピーカー (10) , サイトについて (10) , シリコンケース (10) , FX (9) , 歌詞 (9) , ホルダー (8) , デベロッパ (8) , LetsRock (8) , ワイヤレス (8) , トランスミッター (7) , 書籍 (7) , Wi-Fiスポット (6) , AppSnapp (6) , レビュー (6) , bookmarklet (5) , 掲載情報 (5) , touchFree (5) , 保護フィルム (5) , 設定 (5) , 音楽 (5) , YouTube (5) , Twitter (4) , 非搭載 (4) , 容量 (4) , ディスプレイ (4) , 動作環境 (4) , レザーケース (3) , Safari (3) , サービス&サポート (3) , リッピング (3) , 付属品 (2) , ニコニコ動画 (2) , マルチタッチ (2) , サイズ (2) , 重量 (2) , 電源 (2) , システム条件 (2) , 再生時間 (2) , メニュー (2) , DVD (2) , アプリケーション動作表 (1) , 加速度センサー (1) , 初期状態 (1) , OS (1) , アンビエントライトセンサー (1) , Macworld2009 (1) , 操作名称 (1) , 整備済製品 (1) , 周波数特性 (1) , 取り扱い方法 (1) , 価格 (1) , オーディオフォーマット (1) , 辞書 (1) , 多言語キーボード (1) , 計算機 (1) , 出入力 (1) , ポッドキャスト (1) , メニュー言語 (1) , AppleRemote (1) , ビデオフォーマット (1) , デュアルブート (1) , Leopard (1) , Parallels (1) , バッテリー (1) ,

OHERS

ADMIN

管理者ページ

ARCHIVES

201008 (1)
201007 (33)
201006 (72)
201005 (28)
201004 (28)
201003 (39)
201002 (18)
201001 (51)
200912 (64)
200911 (46)
200910 (55)
200909 (59)
200908 (22)
200907 (28)
200906 (63)
200905 (16)
200904 (21)
200903 (35)
200902 (24)
200901 (37)
200812 (48)
200811 (39)
200810 (49)
200809 (57)
200808 (87)
200807 (96)
200806 (104)
200805 (78)
200804 (76)
200803 (108)
200802 (66)
200801 (48)
200712 (76)
200711 (96)
200710 (100)
200709 (82)

iPod touch の Safari に最適化したウェブサイトを作成する方法

→ iPod touch Hacks ! 最新記事
→ iPad に関連する記事
→ iPad 対応のアクセサリ
NEW! 地震情報のまとめサイト

iPod touch や iPhone に搭載されているインターネットブラウザ Safari は、少しばかり特殊な表示・操作方法がありますので、ウェブサイトを対応させておく必要があります。

もちろん、 iPod touch Hacks ! でも対策しているのですが、その方法を公開します。

このエントリーのきっかけとなったのは、「とにかく何事も挑戦だ -初心者のiPhoneサイト制作記-」。 iPod touch を所有していないにもかかわらず、がんばっておられます。作成した iPhone サイトは以下のサイト。

mac!!mac!!mac!! for OS X : testdrive

また、「mac!!mac!!mac!! for OS X : testdrive」を試すでは、その iPhone サイトを検証するといった内容の記事で、丁寧に写真付で解説されています。

iPod touch Hacks !（当サイト）もオープンする直前に同じような不具合に苦戦しましたので、かなりの共感があります。ちなみに、 iPod touch Hacks ! では、以下のような最適化の方法を使用しています。

ウェブサイトは HTML と CSS でデザインされていますので、 CSS にてウェブサイトの全体の横幅を 320px に指定します。さらに、ヘッダー（ head ）部分内に、

<meta name="viewport" content="width=320, user-scalable=yes" />

と記述。初期設定での viewport は 980px になっていますので、 320px と指定することで、 320px で作成したウェブサイトを画面いっぱいに表示するという設定にしています。

また、 user-scalable を yes にすることで、ピンチアウト・ピンチインにも対応させています。拡大・縮小させたくない場合は no にしておくと良いでしょうね。

これで、ブログという外観を維持しながら、 iPod touch や iPhone に搭載されている Safari に最適化させているわけです。

また、iPod touch（ iPhone ）向けのウェブサイトを作成する際には、以下のウェブサイトが参考になると思います。

ウェブサイトを iPhone/iPod touch 対応にする最も簡単な方法
iPhone向けWebアプリケーションとコンテンツの最適化

検証時に役に立つ iPhone シミュレーター iPhony を利用すると、ある程度まではデザインすることが可能です。iPod touch や iPhone と比較すると、完全に同表示というわけではありませんのでアシカラズ。

Marketcircle: iPhoney

[関連ページ]
iPod touch に最適化されたウェブサイトのテンプレート iUI
最新版ラピッドウィーバーには iPhone や iPod touch の Safari に最適なテンプレートが追加

城咲仁のモテる男養成講座

アプリ一覧 / エミュレータ一覧

<<iPod touch の情報がまとめられている 2 大 Wiki サイト | iPod touch に関連するトレンドキーワード 2007/11/18 >>

(2007-11-18 10:23:23)

Apple Store / 楽天市場 / Amazon（アマゾン）

▲