『AngularJSでのモバイルフロントエンド開発』というタイトルで発表してきた

はじめに

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 に限らずフロントエンドは） 通信頻度/量の削減 が不可欠です。

1. ファイルの数と容量を減らす
   • JavaScript/CSSファイル群の ファイル圧縮(minify) , ファイル結合(concat)
   • 画像ファイルの最適化(縦横サイズ、容量)
     • もしくは CSSスプライト を利用
   • ファイル郡の gzip 圧縮
2. ブラウザに読み込んだものは使い回す
   • JavaScript/CSS/HTML/画像/連携APIの ブラウザキャッシュ
     • HTTPレスポンスヘッダの最適化(サーバ側)
     • ブラウザからの条件つきリクエストへの対応(サーバ側)
   • メモリ(JavaScriptオブジェクト)
     • モデル をきちんと設計
     • AngularJSに限った話であれば、
       • HTMLは angular-ui-router の テンプレート機構 でメモリへキャッシュ
       • 外部APIは $httpサービス でメモリへキャッシュ
   • ..HTML5の Application Cache は使い勝手が悪い
3. 遅延ロード(必要になったらロード)
   • JavaScriptファイル群
     • RequireJS (ただし複雑度はあがる）
     • ただしファイル結合の恩恵を受けれなくなるので、都度判断
   • HTMLファイル群
     • angular-ui-router 等の テンプレート機構 で
   • CSSファイル群の遅延ロードは恐らく推奨されない
   • 画像の遅延ロード(ブラウザの表示領域にはいったら読み込む)
   • ページの作り方として、例えば商品が100件あったら5件づつ表示など
4. 体感
   • レスポンスを待ってる感が無い UIを考える
   • ユーザが気づかないうちにAPIを叩く
     • 先読み、非同期
5. ネットワーク
   • 静的リソース群なので 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)の学習方法
  • (知らなければ)まずJavaScriptについて知る
    • JavaScript 第6版
  • JavaScriptの周辺環境について知る
    • フロントエンドエンジニア養成読本
  • AngularJSの本体ソースと公式リファレンスを読む
    • https://github.com/angular/angular.js
    • http://docs.angularjs.org/api
  • Qiitaの投稿をみる
    • http://qiita.com/tags/angularjs
  • ともあれ、とにかく書く！作る！

おわりに

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

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

• 作品(モバイル向け) ⇒ http://hkusu.github.io/gp-kao-catalog/
• 応募作品の詳細 ⇒ https://5jcup.org/works/53b0e2ca43df3d6b87005186

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