はじめに

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をベースとし、また現時点で完成度が高いのは2つ
- Onsen UI
- ionic

モバイル利用でのポイント

① 通信頻度/量のチューニング

モバイル環境で 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ファイル群
  - RequireJS (ただし複雑度はあがる）
  - ただしファイル結合の恩恵を受けれなくなるので、都度判断
- HTMLファイル群
  - angular-ui-router 等の テンプレート機構 で
- CSSファイル群の遅延ロードは恐らく推奨されない
- 画像の遅延ロード(ブラウザの表示領域にはいったら読み込む)
- ページの作り方として、例えば商品が100件あったら5件づつ表示など
体感
- レスポンスを待ってる感が無い UIを考える
- ユーザが気づかないうちにAPIを叩く
  - 先読み、非同期
ネットワーク
- 静的リソース群なので CDN (Contents Delivery Network) を利用するのがお手軽。
  - AWS でいえば CroudFront
- 接続コネクションの keepalive

② そのほかチューニング項目

通信まわり以外でも、下記を気にする必要がある。

動作速度
描写速度
メモリ利用量

③ セキュリティ対策

ソースはブラウザ側なので 全て解読される 前提で
- 中間者による改竄を防ぐなら全てSSLページで
- 重要な処理は、やはりサーバ側にAPIを用意する必要ある
フロントエンドで考えるべきは大きく３つ
1. DOM Based XSS (Cross Site Scripting)
2. CSRF (Cross Site Request Forgeries)
3. 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アプリケーション開発ガイド
- AngularJSリファレンス
AngularJS(JavaScript)の学習方法

おわりに

導入の際にどのような点に注意するべきかが伝われば幸いです。

また、以前に『HTML5 Japan Cup 2014』というイベント向けに、個人で AngularJS と Onsen UI で作成したものが下記にあります。ライトなものですが、宜しければ参考にしてください。

今のところ、こういうライトなものだったら十分に使えるんじゃないかな、と思います。
（もちろんヘビーなものも、ちゃんと作ればいけるとは思います。）