スマホサイトから学ぶPCサイト制作

「スマホ対応でjavascript, HTML5はどう使う？」というセミナーに参加。個人的にはスマートフォン向けサイトにおける制作時の注意点が、PCサイトでは見落とされていることに気づき大変勉強になりました。

スマホでjavascriptを使用する際はセキュリティにも注意

XSS、HTMLタグエスケープ処理など

リクエスト、ファイルサイズを意識して無駄を省く

便利ツール
・CSS Sprite Generator
スプライトしたい画像をzipで送るとスプライト画像を生成してくれる。
いろいろ設定も可
・YUI Cmpressor
・Google Closure Compiler
cssやjavascriptのタブ、空白、コメントなど削除しファイルサイズを圧縮してくれる

javascriptの効率的な処理で実行速度をあげる

・DOM、レンダリングはまとめて最後に処理する
・ユーザーの操作ミスなどによるxhrの連射には、直前のXmlリクエストをキャンセルする処理をする。request.abort()
・体感速度をあげるため、表示速度のボトルネックになる処理は非同期にする。
　DOM ContentLoad　（レンダリングが終わってから実行する）

セキュリティや表示速度など、PCサイトよりシビアに考慮しなくてはならないという点は勉強になりました。

その他
Flashはこれからどうなるか？
これまで通りFlashで開発しても変換ツールで対応できる。
これからはHTML5＋Javascript

調べるワード
リファクタリング
Google Apps Script