AngularJS でのモバイルフロントエンド開発

2014/9/30

本資料は『 IT エンジニア勉強会 ~ Engineer’s Learning Vesper 』（ http://learningvesper.doorkeeper.jp）での発表資料です。

発表後に構成をすこし修正しました。

AngularJS でのモバイルフロントエンド開発自己紹介

@h_ku_su

hiroyuki.kusu

hkusu

hkusu

AngularJS でのモバイルフロントエンド開発AngularJS について

AngularJS とは

•Google 製の JavaScript フレームワーク

•MV* - MVC （ Model 、 View 、 Controller ） - MVVM （ Model 、 View 、 ViewModel ） - .. とにかく好きに使え？ということらしい

• フルスタック - 機能は豊富だが、いわゆる「 AngularJS way 」 - 単純に HTML のエレメント操作なら Knockout.js や Vue.js の方がシンプルで扱いやすいと思う

AngularJS でのモバイルフロントエンド開発AngularJS について

モバイルで AngularJS を使うメリット

• 純粋にフレームワークとしてのメリット - コード量の削減、多人数での開発 - 機能が豊富 - コード量的に中規模までは耐えうる - 大規模になると性能の問題がでてくる（後述）

• 他の CSS フレームワークと組み合わせてアプリっぽく - Onsen UI 、 ionic 、 Famo.us 、 etc.. - これらは AngularJS ベースの開発を想定

AngularJS でのモバイルフロントエンド開発AngularJS について

モバイルで AngularJS を使うメリット

• なにより Web の技術 でアプリケーションが作れる - JavaScript/CSS/HTML - よって 1 ソースで iOS/Android 両対応 - Cordova/PhoneGap を使えばネィティブアプリ化 やスマホ OS の機能を利用することも可能 - ただし現時点では、ネィティブアプリほどの UX ( ユーザーエクスペリエンス ) は実現できない

•SPA （シングル•ページ•アプリケーション） - ページ全体でなく変更分だけ更新 - モバイルなので通信量は抑える必要があるため - 普通の JavaScript でもできるが、やりやすい

AngularJS でのモバイルフロントエンド開発AngularJS について

SPA( シングル•ページ•アプリケーション )

index.html

ダウンロードされたロジックファイルが端末側で動作。

従来のようにユーザアクション毎にHTML 丸ごと取得はしない

サーバ

ユーザアクション

HTML やJSON( 差分のみ )

変更分のみ取得

AngularJS でのモバイルフロントエンド開発AngularJS について

もっと大きな話（マイクロサービス？）

ネィティブアプリ、

ブラウザ

クライアント

サーバ

マルチデバイス化

API

機能は SaaS などでAPI で提供される

こういう時代に、 AngularJS は向いている、かもしれない。

AngularJS でのモバイルフロントエンド開発

利用するモバイル向け CSS フレームワークについて

現時点で完成度が高いのは、この２つ。

◆Onsen UI

◆ionic

2 つとも SPA 構成にも対応している。ロジックも AngularJSで書ける。

あまり見た目を気にしないなら、 Twitter Bootstrap などでも。

AngularJS について

AngularJS でのモバイルフロントエンド開発モバイル利用でのポイント

モバイルで利用するなら通信頻度 / 量に注意する

① ファイルの数と容量を減らす

② ブラウザに読み込んだものは使い回す

③ 遅延ロード ( 必要になったらロード )

④ 体感

⑤ ネットワーク

考え方としては、大きく下記の５つ

AngularJS でのモバイルフロントエンド開発

通信頻度 / 量のチューニング〜①ファイルの数と容量を減らす〜

•JavaScript/CSS ファイル群のファイル圧縮 (minify) 、ファイ ル結合 (concat) - Grunt もしくは gulp 等のタスクランナーで - 場合によっては HTML ファイルも。ただ AngularJS では そこまでやらなくてよいかも （ angular-ui-router 等で遅延ロードされるため）

• 画像ファイルの最適化 ( 縦横サイズ、容量 ) - もしくは CSS スプライトや SVG を利用

• ファイル郡の gzip 圧縮 - WEB サーバが Apache であれば mod_deflate 等

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

AngularJS でのモバイルフロントエンド開発

通信頻度 / 量のチューニング〜②ブラウザに読み込んだものは使い回す〜•JavaScript/CSS/HTML/ 画像 / 連携 API のブラウザキャッシュ - HTTP レスポンスヘッダの最適化 ( サーバ側 ) - Cache-Control ヘッダ、 Expires ヘッダ - ブラウザからの条件つきリクエストへの対応 ( サーバ側 ) - If-Modified-Since ヘッダ、 If-None-Match ヘッダ

• メモリ - 何度も API を叩かないでいいように、きちんとモデル設計 をして JavaScript オブジェクトに - 永続的なものは WEB ストレージへ

•HTML5 の Application Cache はちょっと使い勝手が悪い - オフラインでの動作目的でないなら、見送った方がよい

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

AngularJS でのモバイルフロントエンド開発

•AngularJS に限った話であれば、 HTML は angular-ui-router 、 外部の連携 API は $http サービスでメモリへキャッシュ できる

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

AngularJS でのモバイルフロントエンド開発

通信頻度 / 量のチューニング〜③遅延ロード ( 必要になったらロード ) 〜•JavaScript ファイル群の遅延ロード - RequireJS を使う（ただし複雑度はあがる）

•HTML ファイル群の遅延ロード - angular-ui-router 等のテンプレート機構を使う

• 画像の遅延ロード - ブラウザの表示領域にはいったら読み込む

• ページ内のリストの遅延ロード - 例えば商品一覧ページで 100 件を表示する場合、 ブラウザで見える 5 件だけ表示する、など - スクロールしたら次の 5 件を読み込み

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

AngularJS でのモバイルフロントエンド開発

• ちなみに CSS ファイル群の遅延ロードは恐らく推奨されない - CSS 設計の複雑度があがる - 遅延ロードするぐらいなら、ファイルの圧縮、結合を した方がよいと思われる

•JavaScript 郡、 HTML ファイル群の遅延ロードは、ファイル 結合の恩恵を受けれないということでもあるので、どちら が良いかは比較検討する

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

AngularJS でのモバイルフロントエンド開発

通信頻度 / 量のチューニング〜④体感〜

• レスポンスを待ってる感 が無いユーザインタフェース

• 先読みや、非同期での取得 （ただ複雑にはなる。）

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

AngularJS でのモバイルフロントエンド開発

通信頻度 / 量のチューニング〜⑤ネットワーク〜

•JavaScript/CSS/HTML/ 画像ファイル群、および連携する API を「端末から近い」「応答が早い」場所から配信する。 - 国内だけなら、それほど気にしなくて良いかも。

•具体的には、 CDN （ Contents Delivery Network ）を利用 する。 - AWS でいえば CroudFront - 静的リソースが中心になるので、 CDN に載せやすい

• 可能であれば接続コネクションの keepalive

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

AngularJS でのモバイルフロントエンド開発

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

• 動作速度

•描写速度

• メモリ利用量

これらを Chrome の ディベロッパーツールや他の計測サービスを用いてチューニングしていく。

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

AngularJS でのモバイルフロントエンド開発

セキュリティについて

• ソースはブラウザ側なので、全て解読される前提で考える - 中間者による改竄を防ぐなら全て SSL ページで - 重要な処理は、やはりサーバ側に API を用意する必要ある

• フロントエンドで考えるべきは大きく３つ - DOM Based XSS （ Cross Site Scripting ） - CSRF （ Cross Site Request Forgeries ） - CSP （ Content Security Policy ） • ただフロントエンドについて、 AngularJS は、だいたいデフォルトで機能を備えているような感じはある。

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

AngularJS でのモバイルフロントエンド開発

SEO について

• クローラが JavaScript を解釈しないため - ただ解釈するようになった、という説もある

• 必要あらば PhantomJS 等で サーバ側でコンテンツを 書き出す

•SNS(Facebook など ) でシェアされた際の OGP も、必要あらば 動的に生成する

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

AngularJS でのモバイルフロントエンド開発

ほか

• 必要あらば、メンテナンスモードやバージョンアップ機能 （運営側でアプリケーションを更新したい場合にブラウザ を強制リロードさせる）を設ける - 単純にメモリ上の JavaScriptオブジェクトだけでなく、 ブラウザへのファイルキャッシュやブラウザのストレージ も対象

• ブラウザバックやボタン 2 度押し、ボタン連打への対応

•非対応ブラウザでの挙動を明確に（下位は切るのが楽）

• 実機テストをしっかりと

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

AngularJS でのモバイルフロントエンド開発感想

AngularJS を使ってみて• きちんと MV* 構成を設計すれば、テスト ( コード ) が楽 ( ちなみにテストコードは必須と考えた方がよい )

• モデル / サービスをきちんと設計しないと、色んなところ で同じようなものを作る羽目になる

• モバイルで大規模なものには今のところ向かないと思う (前述のファイル容量や性能の問題 )

•CSS フレームワークはなるべくカスタマイズしない方が良い - フレームワークの枠を越えると、とたんに複雑になる

•Android は作り方や端末によってはもっさりするかも - 特にネィティブアプリの WebView 経由は注意（重い）

AngularJS でのモバイルフロントエンド開発始めてみる

開発環境の構築

• 手元の環境は Mac OS （ Mavericks ）が前提です。 Windows でも出来るかもしれないが、敷居があると思う。

•Yeoman を利用します。

• 今回は CSS フレームワークは Twitter Bootstrap を利用、構成は 一番 単純な例 で説明します。

ちなみに他の CSS フレームワークを導入する手順は、こちらに書きました。

■onsen ui （ AngularJS ベース）のアプリケーション開発環境を構築 http://qiita.com/hkusu/items/664d025eec9f316d7270 ■ionic （ AngularJS ベース）のアプリケーション開発環境を構築 http://qiita.com/hkusu/items/a9d5908ede11110acb88 ■Yeoman で AngularJS ＆ UI Bootstrap の開発環境構築 http://qiita.com/hkusu/items/7d748b55ba73cc8a3675

AngularJS でのモバイルフロントエンド開発

$ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)”

① HomeBrew のインストール（はいってなければ）

※ 執筆時とコマンド内容が変わってるかもしれないので、公式ページ （ http://brew.sh/index_ja.html）も確認ください。※ 事前に Xcode のインストール（および起動して許諾への同意）が必要。

$ brew install node

② Node.js のインストール（はいってなければ）

始めてみる

AngularJS でのモバイルフロントエンド開発

④ ディレクトリを作ってジェネレータを起動

$ mkdir hoge$ cd hoge$ yo angular --minsafe

③ Yeoman と AngularJS の雛型ジェネレータをインストール

$ npm install -g yo grunt-cli bower$ npm install -g generator-angular

始めてみる

AngularJS でのモバイルフロントエンド開発

⑤ 適当に質問に答える

始めてみる

AngularJS でのモバイルフロントエンド開発

⑥ 雛型のファイル郡が展開される

始めてみる

AngularJS でのモバイルフロントエンド開発

⑦ 動作確認（ローカルサーバ起動）

$ grunt serve

始めてみる

AngularJS でのモバイルフロントエンド開発ほか

alt( 代替 )系の言語の利用

記述量が減るのでおすすめ。

◆JavaScript → CoffeeScript◆CSS → SASS◆HTML → Haml

gem コマンドでインストールできます。

ただし SASS と Haml については、デザイナーさんと要相談。

$ gem install coffee-script$ gem install sass$ gem install haml

AngularJS でのモバイルフロントエンド開発ほか

IDE

WebStorm が使いやすい。 Git との連携もできる

ただし有償（ $48 〜）。一ヶ月間のお試し期間あり。その他の候補としては Sublime Text など。

AngularJS でのモバイルフロントエンド開発ほか

AngularJS の書籍

Amazon で買えます。日本語！

AngularJS でのモバイルフロントエンド開発ほか

AngularJS(JavaScript) の学習方法•(知らなければ ) まず JavaScript について知る ⇒ JavaScript 第 6版（ http://www.amazon.co.jp/dp/4873115736/）

•JavaScript の周辺環境について知る。これ ⇒

•AngularJS のソースと公式リファレンスを読む ⇒ https://github.com/angular/angular.js

⇒ http://docs.angularjs.org/api

•Qiita の投稿をみる（タグは AngularJS ） ⇒ http://qiita.com/tags/angularjs

• ともあれ、とにかく書く！作る！

AngularJS でのモバイルフロントエンド開発ほか

◆個人で AngularJS と Onsen UI で作ったもの

http://hkusu.github.io/gp-kao-catalog/

HTML5 の某イベントに向けて作成しました。 作品の詳細 ⇒ https://5jcup.org/works/53b0e2ca43df3d6b87005186

（ソースは GitHub にも置いてあります。）

◆こちらは 4月の Android のイベントで、 AngularJS に ついてライトニングトークした時の資料です。

http://www.slideshare.net/hiroyukikusu/abc2014-spring-ltangularjsweb

AngularJS でのモバイルフロントエンド開発ほか

モバイル対応が強化される？

AngularJS でのモバイルフロントエンド開発ゆめみについて

https://itunes.apple.com/jp/app/id432831907

エンジニア ( フロントエンド / サーバ )募集！デザイナー /WEB制作者 募集！

世界中で使われる O2O サービスの実現

ネイルブック