はじめに
ITエンジニア勉強会~ Engineer’s Learning Vesper という勉強会で 『AngularJSでのモバイルフロントエンド開発』 というタイトルの発表をしてきました。
スライドはこちら⇒http://www.slideshare.net/hiroyukikusu/elvangularjs
要約をこちらにも投稿します。スマホ用のWEBサイトに AngularJS の導入を検討されている方の参考になれば。
AngularJSとは
- Google製の JavaScript フレームワーク
- MV*（またはMVW)
- フルスタック
- 機能は豊富だが、いわゆる「AngularJS way」
モバイルでAngularJSを使うメリット
- 純粋にフレームワークとしてのメリットの享受
- コード量的に 中規模 までは耐えうる
- 大規模になると性能の問題がでてくる
- コード量的に 中規模 までは耐えうる
- 他の CSSフレームワーク と組み合わせてアプリっぽく
- Onsen UI、ionic、Famo.us
-
Webの技術 でアプリケーションが作れる
- 1ソースで iOS/Android 両対応
- ただし現時点ではネィティブアプリほどのUXは実現できない
-
SPA (シングル•ページ•アプリケーション)
- モバイルなので通信量は抑える必要があるため
利用するCSSフレームワーク
モバイル利用でのポイント
① 通信頻度/量のチューニング
モバイル環境で AngularJS を利用する際は（AngularJS に限らずフロントエンドは） 通信頻度/量の削減 が不可欠です。
-
ファイルの数と容量を減らす
- JavaScript/CSSファイル群の ファイル圧縮(minify) , ファイル結合(concat)
- 画像ファイルの最適化(縦横サイズ、容量)
- もしくは CSSスプライト を利用
- ファイル郡の gzip 圧縮
-
ブラウザに読み込んだものは使い回す
- JavaScript/CSS/HTML/画像/連携APIの ブラウザキャッシュ
- HTTPレスポンスヘッダの最適化(サーバ側)
- ブラウザからの条件つきリクエストへの対応(サーバ側)
- メモリ(JavaScriptオブジェクト)
- モデル をきちんと設計
- AngularJSに限った話であれば、
- HTMLは angular-ui-router の テンプレート機構 でメモリへキャッシュ
- 外部APIは $httpサービス でメモリへキャッシュ
- ..HTML5の Application Cache は使い勝手が悪い
- JavaScript/CSS/HTML/画像/連携APIの ブラウザキャッシュ
-
遅延ロード(必要になったらロード)
- JavaScriptファイル群
- RequireJS (ただし複雑度はあがる）
- ただしファイル結合の恩恵を受けれなくなるので、都度判断
- HTMLファイル群
- angular-ui-router 等の テンプレート機構 で
- CSSファイル群の遅延ロードは恐らく推奨されない
- 画像の遅延ロード(ブラウザの表示領域にはいったら読み込む)
- ページの作り方として、例えば商品が100件あったら5件づつ表示など
- JavaScriptファイル群
-
体感
- レスポンスを待ってる感が無い UIを考える
- ユーザが気づかないうちにAPIを叩く
- 先読み、非同期
-
ネットワーク
- 静的リソース群なので CDN (Contents Delivery Network) を利用するのがお手軽。
- AWS でいえば CroudFront
- 接続コネクションの keepalive
- 静的リソース群なので CDN (Contents Delivery Network) を利用するのがお手軽。
② そのほかチューニング項目
通信まわり以外でも、下記を気にする必要がある。
- 動作速度
- 描写速度
- メモリ利用量
③ セキュリティ対策
- ソースはブラウザ側なので 全て解読される 前提で
- 中間者による改竄を防ぐなら全てSSLページで
- 重要な処理は、やはりサーバ側にAPIを用意する必要ある
- フロントエンドで考えるべきは大きく３つ
- DOM Based XSS (Cross Site Scripting)
- CSRF (Cross Site Request Forgeries)
- CSP (Content Security Policy)
④ SEO
- クローラが JavaScriptを解釈しない？ かもなので注意
- つまり、JavaScriptで動的に描写したHTMLコンテンツを読ませることが出来ない
- 必要あらば PhantomJS 等のサーバ側JavaScriptでコンテンツ書き出し
⑤ ほか
- ちゃんとやるなら、例えばネィティアプリのように バージョンアップ通知 を表示する
- 運営側で新しいソースコードをブラウザ側へ反映したい場合
- メモリ系はブラウザをリロードさせればOKだが、ブラウザのファイルキャッシュやストレージも対象となるので、ちゃんとやるなら作り込みが必要かも
AngularJSを使ってみての感想
- きちんと MV*構成 を設計すれば、テスト(コード)が楽
- モデル/サービス をきちんと設計しないと、色んなところで同じようなものを作る羽目になる
- モバイルで 大規模なもの には今のところ向かないと思う
- 前述のファイル容量や性能の問題
-
CSSフレームワーク はなるべくカスタマイズしない方が良い
- フレームワークの枠を越えると、とたんに複雑になる
-
Android は作り方や端末によってはもっさりするかも
- 特にネィティブアプリの WebView 経由は注意
ほか
- Yeoman を使って環境構築
- alt(代替)系の言語の利用
- CoffeeScript、SASS、Haml
- ..まあここは、好みがあると思います
- IDE
- WebStorm が使いやすい
- AngularJSの書籍
- AngularJS(JavaScript)の学習方法
- (知らなければ)まずJavaScriptについて知る
- JavaScriptの周辺環境について知る
- AngularJSの本体ソースと公式リファレンスを読む
- Qiitaの投稿をみる
- ともあれ、とにかく書く！作る！
おわりに
導入の際にどのような点に注意するべきかが伝われば幸いです。
また、以前に『HTML5 Japan Cup 2014』というイベント向けに、個人で AngularJS と Onsen UI で作成したものが下記にあります。ライトなものですが、宜しければ参考にしてください。
- 作品(モバイル向け) ⇒ http://hkusu.github.io/gp-kao-catalog/
- 応募作品の詳細 ⇒ https://5jcup.org/works/53b0e2ca43df3d6b87005186
今のところ、こういうライトなものだったら十分に使えるんじゃないかな、と思います。
（もちろんヘビーなものも、ちゃんと作ればいけるとは思います。）