【eLV勉強会】AngularJSでのモバイルフロントエンド開発

4,171 views

Published on

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

Published in: Technology

【eLV勉強会】AngularJSでのモバイルフロントエンド開発

  1. 1. AngularJS での モバイルフロントエンド開発 2014/9/30 本資料は『ITエンジニア勉強会~ Engineer’s Learning Vesper』 (http://learningvesper.doorkeeper.jp)での発表資料です。 発表後に構成をすこし修正しました。
  2. 2. 自己紹介AngularJSでのモバイルフロントエンド開発 @h_ku_su hiroyuki.kusu hkusu hkusu
  3. 3. AngularJSについてAngularJSでのモバイルフロントエンド開発 AngularJSとは •Google製のJavaScript フレームワーク •MV* - MVC(Model、View、Controller) - MVVM(Model、View、ViewModel) - ..とにかく好きに使え?ということらしい •フルスタック - 機能は豊富だが、いわゆる「AngularJS way」 - 単純にHTMLのエレメント操作ならKnockout.js やVue.js の方がシンプルで扱いやすいと思う
  4. 4. AngularJSについてAngularJSでのモバイルフロントエンド開発 モバイルでAngularJSを使うメリット •純粋にフレームワークとしてのメリット - コード量の削減、多人数での開発 - 機能が豊富 - コード量的に中規模までは耐えうる - 大規模になると性能の問題がでてくる(後述) •他のCSSフレームワークと組み合わせてアプリっぽく - Onsen UI、ionic、Famo.us、etc.. - これらはAngularJS ベースの開発を想定
  5. 5. AngularJSについてAngularJSでのモバイルフロントエンド開発 モバイルでAngularJSを使うメリット •なによりWebの技術でアプリケーションが作れる - JavaScript/CSS/HTML - よって1ソースでiOS/Android 両対応 - Cordova/PhoneGapを使えばネィティブアプリ化 やスマホOSの機能を利用することも可能 - ただし現時点では、ネィティブアプリほどのUX (ユーザーエクスペリエンス)は実現できない •SPA(シングル•ページ•アプリケーション) - ページ全体でなく変更分だけ更新 - モバイルなので通信量は抑える必要があるため - 普通のJavaScript でもできるが、やりやすい
  6. 6. AngularJSについてAngularJSでのモバイルフロントエンド開発 SPA(シングル•ページ•アプリケーション) index.html ダウンロードされたロジック ファイルが端末側で動作。 従来のようにユーザアクション毎に HTML丸ごと取得はしない サーバ ユーザアクション HTMLや JSON(差分のみ) 変更分のみ取得
  7. 7. AngularJSについてAngularJSでのモバイルフロントエンド開発 もっと大きな話(マイクロサービス?) クライアント ネィティブ アプリ、 ブラウザ サーバ マルチデバイス化 API 機能はSaaSなどで APIで提供される こういう時代に、 AngularJS は向いている、 かもしれない。
  8. 8. AngularJSでのモバイルフロントエンド開発 AngularJSについて 利用するモバイル向けCSSフレームワークについて 現時点で完成度が高いのは、この2つ。 ◆Onsen UI ◆ionic 2つともSPA構成にも対応している。ロジックもAngularJSで 書ける。 あまり見た目を気にしないなら、Twitter Bootstrap などでも。
  9. 9. モバイル利用でのポイントAngularJSでのモバイルフロントエンド開発 モバイルで利用するなら通信頻度/量に注意する 考え方としては、大きく下記の5つ ① ファイルの数と容量を減らす ② ブラウザに読み込んだものは使い回す ③ 遅延ロード(必要になったらロード) ④ 体感 ⑤ ネットワーク
  10. 10. AngularJSでのモバイルフロントエンド開発 モバイル利用でのポイント 通信頻度/量のチューニング 〜①ファイルの数と容量を減らす〜 •JavaScript/CSSファイル群のファイル圧縮(minify)、ファイ ル結合(concat) - Grunt もしくはgulp 等のタスクランナーで - 場合によってはHTMLファイルも。ただAngularJS では そこまでやらなくてよいかも (angular-ui-router等で遅延ロードされるため) •画像ファイルの最適化(縦横サイズ、容量) - もしくはCSSスプライトやSVGを利用 •ファイル郡のgzip圧縮 - WEBサーバがApacheであればmod_deflate 等
  11. 11. AngularJSでのモバイルフロントエンド開発 モバイル利用でのポイント 通信頻度/量のチューニング 〜②ブラウザに読み込んだものは使い回す〜 •JavaScript/CSS/HTML/画像/連携APIのブラウザキャッシュ - HTTPレスポンスヘッダの最適化(サーバ側) - Cache-Controlヘッダ、Expiresヘッダ - ブラウザからの条件つきリクエストへの対応(サーバ側) - If-Modified-Sinceヘッダ、If-None-Matchヘッダ •メモリ - 何度もAPIを叩かないでいいように、きちんとモデル設計 をしてJavaScriptオブジェクトに - 永続的なものはWEBストレージへ •HTML5のApplication Cache はちょっと使い勝手が悪い - オフラインでの動作目的でないなら、見送った方がよい
  12. 12. AngularJSでのモバイルフロントエンド開発 モバイル利用でのポイント •AngularJSに限った話であれば、HTMLはangular-ui-router、 外部の連携APIは$http サービスでメモリへキャッシュ できる
  13. 13. AngularJSでのモバイルフロントエンド開発 モバイル利用でのポイント 通信頻度/量のチューニング 〜③遅延ロード(必要になったらロード)〜 •JavaScriptファイル群の遅延ロード - RequireJSを使う(ただし複雑度はあがる) •HTMLファイル群の遅延ロード - angular-ui-router 等のテンプレート機構を使う •画像の遅延ロード - ブラウザの表示領域にはいったら読み込む •ページ内のリストの遅延ロード - 例えば商品一覧ページで100件を表示する場合、 ブラウザで見える5件だけ表示する、など - スクロールしたら次の5件を読み込み
  14. 14. AngularJSでのモバイルフロントエンド開発 モバイル利用でのポイント •ちなみにCSSファイル群の遅延ロードは恐らく推奨されない - CSS設計の複雑度があがる - 遅延ロードするぐらいなら、ファイルの圧縮、結合を した方がよいと思われる •JavaScript郡、HTMLファイル群の遅延ロードは、ファイル 結合の恩恵を受けれないということでもあるので、どちら が良いかは比較検討する
  15. 15. AngularJSでのモバイルフロントエンド開発 モバイル利用でのポイント 通信頻度/量のチューニング 〜④体感〜 •レスポンスを待ってる感が無いユーザインタフェース •先読みや、非同期での取得 (ただ複雑にはなる。)
  16. 16. AngularJSでのモバイルフロントエンド開発 モバイル利用でのポイント 通信頻度/量のチューニング 〜⑤ネットワーク〜 •JavaScript/CSS/HTML/画像ファイル群、および連携する APIを「端末から近い」「応答が早い」場所から配信する。 - 国内だけなら、それほど気にしなくて良いかも。 •具体的には、CDN(Contents Delivery Network)を利用 する。 - AWS でいえばCroudFront - 静的リソースが中心になるので、CDNに載せやすい •可能であれば接続コネクションのkeepalive
  17. 17. AngularJSでのモバイルフロントエンド開発 モバイル利用でのポイント そのほかチューニング項目 •動作速度 •描写速度 •メモリ利用量 これらをChrome のディベロッパーツールや他の計測 サービスを用いてチューニングしていく。
  18. 18. AngularJSでのモバイルフロントエンド開発 モバイル利用でのポイント セキュリティについて •ソースはブラウザ側なので、全て解読される前提で考える - 中間者による改竄を防ぐなら全てSSLページで - 重要な処理は、やはりサーバ側にAPIを用意する必要ある • フロントエンドで考えるべきは大きく3つ - DOM Based XSS(Cross Site Scripting) - CSRF(Cross Site Request Forgeries) - CSP(Content Security Policy) •ただフロントエンドについて、AngularJSは、だいたいデ フォルトで機能を備えているような感じはある。
  19. 19. AngularJSでのモバイルフロントエンド開発 モバイル利用でのポイント SEOについて •クローラがJavaScriptを解釈しないため - ただ解釈するようになった、という説もある •必要あらばPhantomJS 等でサーバ側でコンテンツを 書き出す •SNS(Facebookなど)でシェアされた際のOGPも、必要あらば 動的に生成する
  20. 20. AngularJSでのモバイルフロントエンド開発 モバイル利用でのポイント ほか •必要あらば、メンテナンスモードやバージョンアップ機能 (運営側でアプリケーションを更新したい場合にブラウザ を強制リロードさせる)を設ける - 単純にメモリ上のJavaScriptオブジェクトだけでなく、 ブラウザへのファイルキャッシュやブラウザのストレージ も対象 •ブラウザバックやボタン2度押し、ボタン連打への対応 •非対応ブラウザでの挙動を明確に(下位は切るのが楽) •実機テストをしっかりと
  21. 21. 感想AngularJSでのモバイルフロントエンド開発 AngularJSを使ってみて •きちんとMV*構成を設計すれば、テスト(コード)が楽 (ちなみにテストコードは必須と考えた方がよい) •モデル/サービスをきちんと設計しないと、色んなところ で同じようなものを作る羽目になる •モバイルで大規模なものには今のところ向かないと思う (前述のファイル容量や性能の問題) •CSSフレームワークはなるべくカスタマイズしない方が良い - フレームワークの枠を越えると、とたんに複雑になる •Androidは作り方や端末によってはもっさりするかも - 特にネィティブアプリのWebView 経由は注意(重い)
  22. 22. 始めてみる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
  23. 23. AngularJSでのモバイルフロントエンド開発 始めてみる ① 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
  24. 24. AngularJSでのモバイルフロントエンド開発 始めてみる ③ Yeoman とAngularJSの雛型ジェネレータをインストール $ npm install -g yo grunt-cli bower $ npm install -g generator-angular ④ ディレクトリを作ってジェネレータを起動 $ mkdir hoge $ cd hoge $ yo angular --minsafe
  25. 25. AngularJSでのモバイルフロントエンド開発 始めてみる ⑤ 適当に質問に答える
  26. 26. AngularJSでのモバイルフロントエンド開発 始めてみる ⑥ 雛型のファイル郡が展開される
  27. 27. AngularJSでのモバイルフロントエンド開発 始めてみる ⑦ 動作確認(ローカルサーバ起動) $ grunt serve
  28. 28. ほかAngularJSでのモバイルフロントエンド開発 alt(代替)系の言語の利用 記述量が減るのでおすすめ。 ◆JavaScript → CoffeeScript ◆CSS → SASS ◆HTML → Haml gemコマンドでインストールできます。 $ gem install coffee-script $ gem install sass $ gem install haml ただしSASS とHaml については、デザイナーさんと要相談。
  29. 29. ほかAngularJSでのモバイルフロントエンド開発 IDE WebStorm が使いやすい。Gitとの連携もできる ただし有償($48〜)。一ヶ月間のお試し期間あり。 その他の候補としてはSublime Text など。
  30. 30. ほかAngularJSでのモバイルフロントエンド開発 AngularJSの書籍 Amazonで買えます。日本語!
  31. 31. ほか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 •ともあれ、とにかく書く!作る!
  32. 32. ほか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
  33. 33. ほかAngularJSでのモバイルフロントエンド開発 モバイル対応が強化される?
  34. 34. ゆめみについてAngularJSでのモバイルフロントエンド開発 エンジニア(フロントエンド/サーバ)募集! デザイナー/WEB制作者募集! 世界中で使われるO2Oサービスの実現 ネイルブック https://itunes.apple.com/jp/app/id432831907

×