Tagged ‘ipad’

iPhone対応サイト制作のまとめ

まず、iPod touch(iPhoneも同じ)のSafariの問題点
・Flashが使えない。
・オンマウスで情報を表示する事が出来ない。
・専用に作られていないとクリックミスが多い。
・大きいページはよく落ちる(ホームに戻ってしまう)
・大きいページは動作が読み込みに時間がかかり、動作がもっさりする。
・フォームからファイルがアップできない。
・jQueryを使ったドラッグ&ドロップをしようとするとスクロールしてしまう。(専用にスクリプトを書けば回避できる)

cssやjavascriptが効いてるのでそこそこ見れるが普通の PCサイトをパソコンの様に見れるという訳では無く、Flashが使える分PSPなどのゲーム機の方がマシに思える。
結局、画面が小さいので専用ページは携帯サイト用のものを元に一回り大きく作る感じが効率的で、色々と複雑な事をしたいならアプリを作る方がいい。

■フォント
iPod touch、iPhone 3Gは日本語フォントが「ヒラギノ角ゴシック ProN」 のみだったがiPadには「ヒラギノ明朝 ProN 」が追加されたらしい
。等幅フォントを使いたいときは「font-family:monospace;」
font-family : ‘HiraMinProN-W3’ ;
font-family : ‘HiraMinProN-W6’ ;

■横幅
iPod touch・iPhone 3G
ポートレート(縦向き):320px
ランドスケープ(横向き):480px
iPhone4
ポートレート(縦向き):640px
ランドスケープ(横向き):960px
iPad
ポートレート(縦向き):768px
ランドスケープ(横向き):1024px

■電話番号を勝手にリンクにしてしまう
「-」(ハイフン)を含む数値をSarfariが勝手に電話番号としてリンクしてしまうので下記を記述して、その機能を抑制する。
<meta name="format-detection" content="telephone=no">

■回転させると文字が大きくなる
画面方向の切り替え時にSarfariが勝手に文字サイズを調整してしまうので、CSSを使ってその機能を抑制する。
body {-webkit-text-size-adjust: none;}

■スクロール
「overflow:scroll」が効かない。
http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3
これは、拡大して二本指でなぞるとなんとかスクロール出来ない事はない。

■アイコン
iPod touch、iPhone 3G、iPhone4、iPadのWebClipアイコンは
以前(iOS1時代)は60x60pxで作成し、iPhoneで自動に57x57pxに変換されるのがキレイとされてましたがiOS2以降は57x57pxで作成する方がキレイに表示できる様になりました。
それがiPhone4、iPadの出現で今までのサイズだとボケボケになってしまうようになりました。
各端末のアイコンサイズは
iPod touch・iPhone 3G:57x57px
iPhone4:114x114px
iPad:72x72px
とまちまちです。
ただ大きい場合は縮小され、角を丸めたり、ライティングしたりしてくれるので大きい方が良くなりました。
実際、どんなサイズがいいのかというと、当のAppleは129x129pxなのでこれに合わせて作成した方が無難かと思われます。

uda2はiPhoneに対応してます。

ブログに書いたつもりだったんですが、uda2のトップページをiPhone(iPod touch)対応版を用意しています。
iPod touchを入手してすぐに作ったので約一月前になります。
iPod touchを弄ってて気づいたのは携帯サイトに対応してるサイトと比べるとiPhoneに対応したサイトが圧倒的に少ない。
殆どは縮小されたパソコン版のWEBサイトを見る事になる。当然クリックしにくいし、拡大すると一部しか見えないので読みづらい。
(拡大表示時にスクロールするのに誤ってクリックしてしまったりしてイライラしてたが、これは二本指でスクロールすると解決される)
携帯対応サイトがあるならiPhoneとiPod touchはそっちに飛ばしてくれた方がマシな気がする。
iPhone対応サイトは色々な問題があり、実際は「WEBもなんとか見れる(かも)」程度でガンダム00の劇場版はWEBでも十分可能なコンテンツなのにわざわざアプリとして配布している。企業はiPhone対応サイトを作るぐらいならアプリを作るという選択をしてるのかもしれない(ユーザーにとってもアプリをGETして得した気分になる)。ただ、そうなるとAndroid携帯に対応したいとき別途アプリが必要になる。
Android携帯を持っていないので正確な事は言えないがモダンブラウザだろうからiPhone対応サイトでもそこそこ見れそうな気がするのでAndroid携帯がそこそこシェアを延ばしてくれればスマートフォン対応サイトとして生きてくるかと思う。

iPod touchを一月ばかり使った感想
いいところ
・アプリが続々と出て期待感がもてる。
・UIが優れてるので意味なく触りたくなる。
・音楽プレイヤーで歌詞が表示されるのにいいサイズ。
・Youtubeを見るのにいいサイズ。
・Twitter専用端末にちょうどいい。
悪いところ
・文章を読むのは問題無いが新聞・雑誌・コミックを読むには画面が小さすぎる。
・実際使うアプリはそんなに無い。
・十字キーが無いのでゲーム機としては劣る。
・本当に欲しい機能は普通の携帯に大体入ってる。
・宮崎駿に「自慰行為をしているようで気色悪い」と言われる。

docomoの2010年夏モデルとiPad


機能と価格で選ぶドコモ携帯にdocomoの2010年夏モデルを掲載した。
昨日、iPadが発売され結構なお祭り騒ぎだったようだがdocomoの新機種は至って普通な感じ、メーカーも様子見で抑えたラインナップなのかただ飽和状態なのか分からないが、もうちょっと攻めた製品が見たかった。
サービス面は殆ど追加が無かったが個人的には「i Bodymo」が欲しいけどその為に買い替えるほどの機能では無い。

iPadも毎日パソコンの前にいる仕事をしてるオレには今のところ魅力的に感じない、iPhoneの様にパソコン版と解像度が極端に違えば専用のページを作るのに検証用として欲しい所だけど、iPadの場合、Flashを無くすとかボタンを押しやすくするぐらいの配慮は必要かと思うが専用のページを作る程ではない。
ただ、今回はiPhoneの成功の後なので、iPhoneの時の様に「当たるかどうか怪しい端末」ではなく「当たるのがある程度確約された端末」なので開発者も多く参入するだろうし、WEBもiPad向けに最適化されたページを作るサイトが結構出てきそう。