September 30

iPhone向けにWebサイトを最適化する

先週に「iPhoneでも見やすいサイトを作ろう」というのを書きましたが
Apple Developer Connnectionにも詳しい説明がありました

指先で操作するというのは、マウスのような精度を期待出来ないので
その辺を考慮する必要があります

リンクの密度も制限されます
ココなんか×ですね
それにカット、ペースト、ドラッグアンドドロップ、およびテキスト選択などはできません

そして最初の規則としてweb標準に従うこととあります

読み進めていて「あぁ iPhoneって電話だったんだ!」
とあらためて思い出させてくれたのが電話番号へのリンクです

<a href="tel:000-1234-5678">000-1234-5678</a>と括りますが

<a>タグで括らなくても電話番号の形式になっていれば自動的に電話リンクに変換されるので、それを避ける為には<span>要素で番号を分割する必要があるそうです

やはり電話ですもの

そして残念ながらFlashやJavaは使用出来ません
他にも以下の物はサポートされていません
 
 » window.showModalDialog()
 » Mouse-overイベント
 » hoverスタイル
 » ツールチップ
 » プラグインのインストール
 » カスタムのx.509証明書


そういえばAppleのサイトも最近リニューアルしましたが
iPhoneやiPod touch向けにしたって事でしょうね

トップにならんだナビが太くなったなと思っていましたが
指でタッチしやすいようにと考えられていたんですね
ソースを見てみると

<meta name="viewport" content="width=1024">というのがあります

以前にもあったかどうかは不明ですが他のサイトではあまり見かけません

viewportについては
「iPhoneのビューポート向けにコンテンツを配置する」の欄に説明がありますが
Webページのコンテンツの配置やテキストの折り返し位置を決める矩形の領域の事だそうで、やはりiPhoneのスクリーンを意識してのmetaタグだとおもいます

ここまで書いてきてAppleのようなサイトを作ればiPhoneでもOKだという事に気づいた


いま迄cssを触るときはFirefoxで確認しながら
出来上がってから、Safariでも一応確認という手順でしたが

これからはSafariも無視出来なくなってきたなとヒシヒしと感じている筆者でした。


Apple Developer Connection
    iPhone向けWebアプリケーションとコンテンツの最適化

posted by nei at 05:58 | Mac
Retweet!
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。