iPad向けのサイトを作るときに役立つ知識いろいろin development

 
date:2011.02.17   posted by:fujii
 

こんにちは、藤井です。

今回は社内でiPad向けのサイトを作るときに役立つ知識をまとめてみました。

まず基本的なところは既に何人かの方がまとめてくださっているので、そちらを参照してください。
http://designblog.ecstudio.jp/htmlcss/ipad-lets-begin-optimize.html
http://designblog.ecstudio.jp/tutorial/easy-speed-up.html

そのほか、iPadサイトを作るときの注意点には以下のようなものがあります。
—————————–

○アニメーション
jQueryなどのアニメーション機能でも問題なく動くが、並列的に動かしたい場合はCSS3のアニメーションがストレスなく動くとのこと
http://www.parkerfox.co.uk/labs/css-webkit-animation-jquery-stress-test.html

○スクリプトの再帰を避ける
スタックのオーバーフローが発生してエラーが起こる
http://www.nczonline.net/blog/2009/05/19/javascript-stack-overflow-error/
※IE7 (1,789回まで) Firefox3 (3,000回まで) Chrome1 (21,837回まで) Opera 9.62 (10,000回まで) Safari 3.2 (500回まで)

○コンセプトよりも設計が大事。
もっとも重要な点になります。
スペックの問題もあるし、ブラウザ自体が独自の仕様であるため、PCサイトと同じように扱えるとおもうと大変な目にあう。

○メモリから削除
destroy(mootools)やremove(jquery)などの関数をつかって、使わないデータはメモリから排除する。
でないとあっという間に使用容量を超えて落ちる

○かたむきをチェック
window.onorientationchangeを使う

○ボタン
マウスオーバーが使えないので、ボタンはボタンとしてしっかりわかる形にしておく。
(Appleから素材が提供されています。http://developer.apple.com/library/safari/#samplecode/iPhoneButtons/Introduction/Intro.html

○横表示と縦表示でCSSを切り替えることができる
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”css/style.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”css/style2.css”>

○metaデータを設置
<meta name=”viewport” content=”width=1024, user-scalable=no” />
みたいな感じで、iPad用にちゃんと設定しておく。

○特定桁の数字の羅列は電話番号と解釈されてリンクが貼られるので、それを防止するためheadに以下を入れる
<meta name=”format-detection” content=”telephone=no”/>

○入力フォーム間のフォーカス移動は、調べた限りでは不可
・例えば1つ目のフォームに2桁の数字を入力したら2つ目のフォームに自動フォーカス、という動作はできない

—————————–

またiPadは無線通信環境なうえメモリ容量も貧弱なのでサイトの高速化・軽量化が必要になります。(高速・軽量が望ましいのはiPad用のwebに限った話ではありませんが)
実際、具体的なサイズは不明ですが、容量が大きくなりすぎると落ちたり画像表示が途中で止まってしまう現象が確認されています。
以下、それらの対策のために。
—————————–

○CSS Sprites
推奨というか必須。

○DSNルックアップを避ける
なるだけ同一サーバ内に。ただし最近のブラウザではDSN Prefetchなどの技術を搭載していたりするのでその辺は一応考慮ということで。

○リクエストを減らす
画像に関してはCSS Spritesを使うなどなるだけ少なくする工夫をする。
またスプラッシュ画面を設置する場合には、下層ページなどで必ず使われる画像のリクエストを先に送っておいてストックしておくなども有効。(負担の分散化)

○データの圧縮
データは画像、CSS、JSなどあらゆる部分で圧縮する。ただ管理が大変になるので圧縮前のバックアップは必ずとっておくこと。
・圧縮サイト
http://compressor.ebiene.de/
http://yui.2clics.net/ (←圧縮をかけた後、さらにこのサイトで圧縮をかけるとサイズが減少する場合がある)

○Expiresヘッダーを使う
再訪問時にすでに取得した画像についてはリクエストを送らないようにするなど。またファイルの更新は以下のように、querystringなどで管理する。
例)http://queryexample.jp/js/example.js?ud=2011021701

○CDNを使う(推奨)
サーバまでの距離の手助け用。
グローバルなサイトであれば推奨しておいたほうがいいかも。

—————————–

 
Copyright © TheDesignium inc. powered by WordPress & mootools.
Relative Keyword|none