Tagged ‘iPod touch’

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専用端末にちょうどいい。
悪いところ
・文章を読むのは問題無いが新聞・雑誌・コミックを読むには画面が小さすぎる。
・実際使うアプリはそんなに無い。
・十字キーが無いのでゲーム機としては劣る。
・本当に欲しい機能は普通の携帯に大体入ってる。
・宮崎駿に「自慰行為をしているようで気色悪い」と言われる。

今更なiPod touch 8G


ウチにもようやくAppleの風が吹いてきた。
昨晩のデンマーク戦の為、熟睡してるところに宅急便がやってきた。
先日注文していたiPod touch 8Gの整備済み品がようやく届いた。注文してから3日で届いたが注文中に代金回収業者のサーバーが落ちてたり、コンビニ払いの端末(ロッピー)の使い方が分からなかったので2回コンビニに行かなくてはならなかったりして手間取った。
届いた箱を振るとガラガラなっている、空けてみると箱in箱で梱包材が入って無かった。ちょっと不安になったが、開封してみると、問題無く起動した。整備済み品=中古と思っていたけど新品の様に梱包されていて中古には見えなかった。ヤフオクの中古(世代を無視して)で12000円位が相場なので14800円で限りなく新品に近いiPod touchが入手できるのはお買い得な気がする。
すぐにiOS4にしてしまったので前のバージョンの事はよく分からない。N-06Aと比べるとびっくりするぐらい快適なUI(ユーザーインターフェース)で雰囲気で操作できる。第三世代iPod touch 8Gは他の容量のモノと違い中身は第二世代iPod touch 8Gと同じで非力でiOS4になってもマルチタスクもできない。9月には第4世代の発表があるらしいがコンテンツの確認するのには十分だ。
iPod touch 8Gはマイクが無いのでskype出来ないと思い込んでいたがマイクを買ったらできるらしい、あと充電するのが面倒なのでクレードルも欲しいし、保護フィルムも欲しい、こうなるとアプリ開発にMacが欲しくなってくる。
これがAppleの罠か・・・