モバイル対応にあたり、こういうことを考慮した方が良いというメモ。
モバイル対応
- METAタグ
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- PC等も対応するならBootstrapいれる(レスポンシブ)
- タッチイベントの最適化とスワイプ対応
- ngTouchを導入
- 必要あらば UIライブラリ導入
- ionic、onsen ui など。この2つはそれ自体が AngularJSベース
- 遅延読み込み(画像の Lazy Load)を導入
- AngularJSのファイルサイズが大きいことへの対応
- minifyする .. Gruntで
- gzipで圧縮
- 手作業で圧縮 and .htaccess等で振り分け
- または Grunt で
- または mod_deflateなど(Apacheモジュール)
- 端末側にキャッシュさせる
- HTTPレスポンスの Cache-Control ヘッダ、Expires ヘッダ
- CDNを使う(AWSでいうと CroudFront)
他まとめ
AngularJSを使う理由や今後の展望、また学習するにあたっての参考サイトなど諸々について、Qiitaに過去に書いたもの含めてスライドにまとめました。よろしければ参考にしてください。
【ABC2014Spring資料】AngularJSでWEBアプリ開発
また下記はスライドにも書いてありますが、これから学習を始めようとする方は参考にするといいんじゃないかな、というサイトや書籍です(書籍はまだまだ少ないですね)。
- 参考URL(公式系)
- 参考URL(学習)
- 参考書籍
- WEB+DB vol.79 特集
- はじめてのAnglarJS(http://www.amazon.co.jp/dp/4777518086)