1.
×
@mknkisk 2014/6/2
!
AngularJSを業務で使いたいけど今一歩踏み出せない方のための勉強会

2.
牧野 圭将
@mknkisk
!
2013年09月 ブラケット 入社
STORES.jp 開発全般
!
一番JS歴が浅いですが一番ヒマそう
だったので今ここにいます

3.
今日のおはなし
❖ STORES.jp と AngularJS
❖ Rails と AngularJS
❖ SEO対応
❖ Google Analytics
❖ リファクタ中のはなし
❖ かるいまとめ

4.
最短2分で、驚くほど簡単に
オンラインストアがつくれる
https://stores.jp

5.
x MARKET

6.
STORES.jp と AngularJS
ローンチ時点でAngularJSを採用 (2012/09)
当時は今ほど日本で注目を集めていなかった
情報も少なかった
いつから使ってる?

7.
STORES.jp と AngularJS
❖ ダッシュボード
(ストアオーナー管理画面)
!
❖ 各ストアのコンテンツ
(メインコンテンツ)
どこで使ってる?

8.
STORES.jp と AngularJS
アプリを見据えてサーバサイドは
APIとして使いたかった
どうしてAngularJS?

9.
STORES.jp と AngularJS
デザイン編集機能でリアルタイムに変更を反映するために
データバインディングが魅力的だった
どうしてAngularJS?

10.
STORES.jp と AngularJS
レイアウトやストア名などを
リアルタイムに反映
!
どんどん切り替わることで
デザインを楽しんでもらう
ストアデザイン編集機能

11.
STORES.jp と AngularJS
ng-modle
ng-style
ng-show

12.
STORES.jp と AngularJS
Rails, AngularJS とフルスタックのものを採用する
ことで学習すべき要素を明確にしたかった
どうしてAngularJS?

13.
Rails と AngularJS
❖ Railsを完全にAPIとしてフロントはAngularJSに任せる
❖ RailsのViewに使いたいところだけ適応する
Rails, AngularJS で調べていくと
2タイプの構成を見かけると思います

14.
Rails と AngularJS
❖ RailsのViewに使いたいところだけ適応する
❖ Railsのlayoutで共通部分をレンダリングしている(初回)
❖ 動的に変更する箇所に <ng-view> を設置してルーティング
❖ 必ずしもAngularJSが必要でない部分では使ってない
SEOなど考え試行錯誤した感じがある
STOERS.jp は今こっちです。完全分離はできていません

15.
Rails と AngularJS
構成の参考
mkwiatkowski/todo-rails4-angularjs
!
AngularJS本家がRailsとの連携の参考にあげていた
サンプルコード
現在も開発が進められており、今はこの構成に近い

16.
Google Analytics
SPAなのでGAのトラッキングコードを読む込むだけでは
各ページをトラッキングできません
!
routeが変わったのをトリガーにGAにURLを通知させました

17.
Google Analytics
// ga('send', 'pageview');
GAのトラッキングコードから以下を削除

18.
Google Analytics
$routeChangeSuccess を検知して
GAにトラッキング

19.
Angulartics
前述のGAトラッキングと同じことができるモジュール
http://luisfarzati.github.io/angulartics/
!
GA以外にも mixpanel や chartbeat もサポート
クリックイベント用のディレクティブも提供
※ui-router を使っているとうまく動作しない?

20.
SEO
_escaped_fragment_

21.
SEO
❖ PhantomJSで返すとレスポンスが遅い
❖ エラーが起きていてもわかりづらい
❖ GoogleのbotがJSを実行できるようになった?
❖ PhantomJSで返却したHTMLからさらにAngularJSを
実行されると目的のページを返せなくなるかも?

22.
SEO
❖ SEO対策は結構面倒
❖ SEOを重視しながらAngularJSを使うなら
ルーティングだけはRailsサイドにするのもありかも

23.
リファクタ中のはなし
❖ jQueryプラグインをAngularJSと一緒に使う
❖ $http -> Service
❖ Controllerを分ける (データの共有)

24.
ng-repeatの後に処理を走らせたい
サーバから商品情報を取得
ng-repeatで画像情報をループ
jQueryプラグインを適応

25.
ng-repeatの後に処理を走らせたい
サーバから商品情報を取得
ng-repeatで画像を描画
binding前に実行されるため適応されない

26.
ng-repeatの後に処理を走らせたい
サーバから商品情報を取得
ng-repeatで画像を描画
Controller内にView周りの
コードが混在してしまう

27.
ng-repeatの後に処理を走らせたい
サーバから商品情報を取得
ng-repeatで画像を描画
Directiveでラップして
Controllerから追い出した

28.
jQueryプラグインを使う前に
jQueryプラグインをカスタムディレクティブに
実装する前に以下を検討してみる
❖ AngularUI で実現できないか?
http://angular-ui.github.io/
❖ 公開されているディレクティブはないか?
http://ngmodules.org
❖ AngularJSで置き換えられないか?
参考: http://knightso.hateblo.jp/entry/2014/04/10/080207

29.
ANGULAR MODULES
❖ http://ngmodules.org
❖ AngularJSの各種モジュールのまとめ
❖ STORES.jp でも以下を採用
❖ angular-file-upload
❖ ngInfiniteScroll

30.
$http -> Service
❖ 処理をコントローラーに詰め込んでいくと
どんどんコントローラーが肥大化してしまう
!
❖ 処理上は問題ないが, テストがしにくい,
使い回しができないといった問題が発生してくる

31.
$http -> Service
商品一覧を取得する処理は
ダッシュボードでも各ストアでも共通で行われる
幾つかのコントローラーに同じような処理が書かれていた
Serviceに切り出して共通化する

32.
$http -> Service

33.
AngularJSの学習
JS初心者の自分がAngularJSの学習に参考にしたもの
❖ ドットインストール
❖ 公式チュートリアル
!
公式チュートリアルまでだと敷居は低く感じる (イケル！って思える)
!
ディレクティブやサービス, ファクトリーを作り始めたあたりから独特の
ルールで一気に敷居が上がる

34.
AngularJSの学習
最近参考にさせて頂いてるサイト
❖ AngularJS Ninja
❖ http://angularjsninja.com/
❖ js STUDIO (日本語リファレンス)
❖ http://js.studio-kingdom.com/angularjs
❖ AngularJSアプリケーション開発ガイド
❖ O Reilly本 (v1.2.16)

35.
まとめ
❖ 少ないコードで実装できている
❖ 学習対象はAngularJSのみで明確だった
❖ 実際にサービスで使ってみるとハマりどころは多い
❖ コントローラーは太らせない
❖ 面倒臭がらなければ結果的にハッピーになれる
❖ SEO対策は面倒。重要度が高い場合は素直に
サーバサイドMVCの方がいいかも

36.
ありがとうございました