iphone対応サイト制作まとめ
iphoneに表示最適化したサイトもかなりたくさん出てきていますが、iphone対応サイトの作り方を備忘録的にまとめたかったので途中までまとめてみた。もっと書きたい事あるけど、続きは追記しておこうかな。
iphone最適化とはヤフー検索が対応した事例でもある通り、すぐに情報を見つけられるように、よりページを軽く、そして操作性の良い、iphoneに特化した見せ方をする事を言います。iphoneは通常PCでの見え方をそのまま表示し、タップしたりピンチオープンして拡大させたりしながら使用しますが、PC表示だといらない情報が多く、特に検索だと、パッと探してパッと表示できるものであって欲しいですよね。使う人の利便性を考えた設計から成り立ってます。
と言うことで今回は、iphoneサイト制作の基本をまとめてみた。
基本
iphoneのブラウザはMobile Safari
ブラウザ: Safari2.x ベース
画面解像度(縦): w320xh356px (上80pxと下44px分を除く表示領域のみ)
画面解像度(横): w480xh208px (上80pxと下32px分を除く表示領域のみ)
iphoneUIに関わる基本的な動作用語
- タップ(PCのクリック)
- ダブルタップ(PCのダブルクリック)
- ピンチオープン、ピンチクローズ(拡大・縮小の機能)
- フリック(指でシャッシャッとスライドさせる機能)
- ドラッグ(PCのドラッグと同じ)
iphoneの判別法(01.htm)
- jsのuserAgentで判別する
- Apacheモジュールのmod_rewriteを使う
- css3のメディアクエリーを使う
viewport(02.htm)
iPhone用Safariは、PCにおけるブラウザのウィンドウサイズに該当するViewportという概念を持っている。
Safari mobileの独自機能で、ページの縦横サイズや拡大などできるか指定できる。
参考：Viewport [iPhone生活]
ホーム画面に仕様するアイコン
w57 h57のpng 「apple-touch-icon.png」でルートディレクトリに入れる。登録すると勝手に角丸、光沢、ドロップシャドウが加えられる。
「apple-touch-icon-precomposed.png」にすると光沢だけ取れる。
特別なページに大して特別な画像アイコンにしたい時は↓
フルスクリーンモード(iphoneOS2.1以降)(03.htm)
以下のメタを入れるとフルスクリーンモードになる。
フルスクリーンモードになる条件は、そのページがホーム画面からタップされた事である事。
apple-mobile-web-app-capableがyesの場合はフルスクリーンになる。デフォルトはno。apple-mobile-web-app-status-bar-styleはフルスクリーン時のステータスバーの設定。
iphoneらしいインターフェース
内蔵フォントについて
日本語は「ヒラギノ角ゴシックProN-W3」「ヒラギノ角ゴシックProN-W6」のみで明朝体は使えない
英語は16種
以下デフォルトおすすめ指定
Mobile Safariの自動フォントサイズの無効
viewportで指定してもiphoneの向きを変更した際、一部の文字列はフォントサイズが自動調整されてしまう。それを回避したい場合はCSSで指定する。
最適な行間
Mobile Safariでline-heghtを指定しない場合の行間は17.6px＝line-height:1.1なので、日本語でのデフォルト設定はやや読みにくい。おすすめは1.5。
ホーム画面風のUI
まずiphoneのホーム画面のようなhtmlを作成してみる。(04.htm)
読みこんだ時に自動的にアドレスバーが出ない位置に移動させ、コンテンツ部分の表示を大きくする方法
iphone本体の向きを変更にしてもアドレスバーが出ないようにするには、onOrientationChangeイベントを使う。
以上、jsを関数化、最適化したサンプル(05.htm)
エッジ・トゥ・エッジ・リスト
iphoneではお馴染みのリストメニュー
角丸長方形リスト
角丸の作り方
と、今日はここまで。
参考
インプレスジャパン
売り上げランキング: 147910
Trackback
RSS Feed
yujilog
2 Kommentare
1.
links for 2010-08-18 » HTML5 - schrieb am 19. 8月 2010 um 4:01 AM
[...] 雨のち晴れ » iphone対応サイト制作まとめ (tags: development iphone webdesign) [...]
2.
iPhoneサイトの作り方 - web.londoner25.net schrieb am 30. 8月 2010 um 11:36 AM
[...] 雨のち晴れ [...]