【eLV勉強会】AngularJSでのモバイルフロントエンド開発

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を使うメリット
•純粋にフレームワークとしてのメリット
- コード量の削減、多人数での開発
- 機能が豊富
- コード量的に中規模までは耐えうる
- 大規模になると性能の問題がでてくる（後述）
•他のCSSフレームワークと組み合わせてアプリっぽく
- Onsen UI、ionic、Famo.us、etc..
- これらはAngularJS ベースの開発を想定

モバイルでAngularJSを使うメリット
•なによりWebの技術でアプリケーションが作れる
- JavaScript/CSS/HTML
- よって1ソースでiOS/Android 両対応
- Cordova/PhoneGapを使えばネィティブアプリ化
やスマホOSの機能を利用することも可能
- ただし現時点では、ネィティブアプリほどのUX
(ユーザーエクスペリエンス)は実現できない
•SPA（シングル•ページ•アプリケーション）
- ページ全体でなく変更分だけ更新
- モバイルなので通信量は抑える必要があるため
- 普通のJavaScript でもできるが、やりやすい

SPA(シングル•ページ•アプリケーション)
index.html
ダウンロードされたロジック
ファイルが端末側で動作。
従来のようにユーザアクション毎に
HTML丸ごと取得はしない
サーバ
ユーザアクション
HTMLや
JSON(差分のみ)
変更分のみ取得

もっと大きな話（マイクロサービス？）
クライアント
ネィティブ
アプリ、
ブラウザ
サーバ
マルチデバイス化
API
機能はSaaSなどで
APIで提供される
こういう時代に、
AngularJS は向いている、
かもしれない。

AngularJSでのモバイルフロントエンド開発
AngularJSについて
利用するモバイル向けCSSフレームワークについて
現時点で完成度が高いのは、この２つ。
◆Onsen UI
◆ionic
2つともSPA構成にも対応している。ロジックもAngularJSで
書ける。
あまり見た目を気にしないなら、Twitter Bootstrap などでも。

モバイル利用でのポイントAngularJSでのモバイルフロントエンド開発
モバイルで利用するなら通信頻度/量に注意する
考え方としては、大きく下記の５つ
① ファイルの数と容量を減らす
② ブラウザに読み込んだものは使い回す
③ 遅延ロード(必要になったらロード)
④ 体感
⑤ ネットワーク

モバイル利用でのポイント
通信頻度/量のチューニング
〜①ファイルの数と容量を減らす〜
•JavaScript/CSSファイル群のファイル圧縮(minify)、ファイ
ル結合(concat)
- Grunt もしくはgulp 等のタスクランナーで
- 場合によってはHTMLファイルも。ただAngularJS では
そこまでやらなくてよいかも
（angular-ui-router等で遅延ロードされるため）
•画像ファイルの最適化(縦横サイズ、容量)
- もしくはCSSスプライトやSVGを利用
•ファイル郡のgzip圧縮
- WEBサーバがApacheであればmod_deflate 等

〜②ブラウザに読み込んだものは使い回す〜
•JavaScript/CSS/HTML/画像/連携APIのブラウザキャッシュ
- HTTPレスポンスヘッダの最適化(サーバ側)
- Cache-Controlヘッダ、Expiresヘッダ
- ブラウザからの条件つきリクエストへの対応(サーバ側)
- If-Modified-Sinceヘッダ、If-None-Matchヘッダ
•メモリ
- 何度もAPIを叩かないでいいように、きちんとモデル設計
をしてJavaScriptオブジェクトに
- 永続的なものはWEBストレージへ
•HTML5のApplication Cache はちょっと使い勝手が悪い
- オフラインでの動作目的でないなら、見送った方がよい

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

〜③遅延ロード(必要になったらロード)〜
•JavaScriptファイル群の遅延ロード
- RequireJSを使う（ただし複雑度はあがる）
•HTMLファイル群の遅延ロード
- angular-ui-router 等のテンプレート機構を使う
•画像の遅延ロード
- ブラウザの表示領域にはいったら読み込む
•ページ内のリストの遅延ロード
- 例えば商品一覧ページで100件を表示する場合、
ブラウザで見える5件だけ表示する、など
- スクロールしたら次の5件を読み込み

•ちなみにCSSファイル群の遅延ロードは恐らく推奨されない
- CSS設計の複雑度があがる
- 遅延ロードするぐらいなら、ファイルの圧縮、結合を
した方がよいと思われる
•JavaScript郡、HTMLファイル群の遅延ロードは、ファイル
結合の恩恵を受けれないということでもあるので、どちら
が良いかは比較検討する

〜④体感〜
•レスポンスを待ってる感が無いユーザインタフェース
•先読みや、非同期での取得
（ただ複雑にはなる。）

〜⑤ネットワーク〜
•JavaScript/CSS/HTML/画像ファイル群、および連携する
APIを「端末から近い」「応答が早い」場所から配信する。
- 国内だけなら、それほど気にしなくて良いかも。
•具体的には、CDN（Contents Delivery Network）を利用
する。
- AWS でいえばCroudFront
- 静的リソースが中心になるので、CDNに載せやすい
•可能であれば接続コネクションのkeepalive

そのほかチューニング項目
•動作速度
•描写速度
•メモリ利用量
これらをChrome のディベロッパーツールや他の計測
サービスを用いてチューニングしていく。

セキュリティについて
•ソースはブラウザ側なので、全て解読される前提で考える
- 中間者による改竄を防ぐなら全てSSLページで
- 重要な処理は、やはりサーバ側にAPIを用意する必要ある
• フロントエンドで考えるべきは大きく３つ
- DOM Based XSS（Cross Site Scripting）
- CSRF（Cross Site Request Forgeries）
- CSP（Content Security Policy）
•ただフロントエンドについて、AngularJSは、だいたいデ
フォルトで機能を備えているような感じはある。

SEOについて
•クローラがJavaScriptを解釈しないため
- ただ解釈するようになった、という説もある
•必要あらばPhantomJS 等でサーバ側でコンテンツを
書き出す
•SNS(Facebookなど)でシェアされた際のOGPも、必要あらば
動的に生成する

ほか
•必要あらば、メンテナンスモードやバージョンアップ機能
（運営側でアプリケーションを更新したい場合にブラウザ
を強制リロードさせる）を設ける
- 単純にメモリ上の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

始めてみる
① HomeBrew のインストール（はいってなければ）
$ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)”
※ 執筆時とコマンド内容が変わってるかもしれないので、公式ページ
（http://brew.sh/index_ja.html）も確認ください。
※ 事前にXcode のインストール（および起動して許諾への同意）が必要。
② Node.js のインストール（はいってなければ）
$ brew install node

始めてみる
③ Yeoman とAngularJSの雛型ジェネレータをインストール
$ npm install -g yo grunt-cli bower
$ npm install -g generator-angular
④ ディレクトリを作ってジェネレータを起動
$ mkdir hoge
$ cd hoge
$ yo angular --minsafe

始めてみる
⑤ 適当に質問に答える

始めてみる
⑥ 雛型のファイル郡が展開される

始めてみる
⑦ 動作確認（ローカルサーバ起動）
$ grunt serve

ほかAngularJSでのモバイルフロントエンド開発
alt(代替)系の言語の利用
記述量が減るのでおすすめ。
◆JavaScript → CoffeeScript
◆CSS → SASS
◆HTML → Haml
gemコマンドでインストールできます。
$ gem install coffee-script
$ gem install sass
$ gem install haml
ただしSASS とHaml については、デザイナーさんと要相談。

IDE
WebStorm が使いやすい。Gitとの連携もできる
ただし有償（$48〜）。一ヶ月間のお試し期間あり。
その他の候補としてはSublime Text など。

AngularJSの書籍
Amazonで買えます。日本語！

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 と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でのモバイルフロントエンド開発
エンジニア(フロントエンド/サーバ)募集！
デザイナー/WEB制作者募集！
世界中で使われるO2Oサービスの実現
ネイルブック
https://itunes.apple.com/jp/app/id432831907

【eLV勉強会】AngularJSでのモバイルフロントエンド開発

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie 【eLV勉強会】AngularJSでのモバイルフロントエンド開発

Ähnlich wie 【eLV勉強会】AngularJSでのモバイルフロントエンド開発 (20)

Mehr von Hiroyuki Kusu

Mehr von Hiroyuki Kusu (9)

【eLV勉強会】AngularJSでのモバイルフロントエンド開発