STORES.jp x AngularJS

9,598 views

Published on

「AngularJSを業務で使いたいけど今一歩踏み出せない方のための勉強会」発表資料です。

http://eventdots.jp/event/52461

Published in: Engineering
0 Comments
39 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,598
On SlideShare
0
From Embeds
0
Number of Embeds
3,141
Actions
Shares
0
Downloads
38
Comments
0
Likes
39
Embeds 0
No embeds

No notes for slide

STORES.jp x AngularJS

  1. 1. × @mknkisk 2014/6/2 ! AngularJSを業務で使いたいけど今一歩踏み出せない方のための勉強会
  2. 2. 牧野 圭将 @mknkisk ! 2013年09月 ブラケット 入社 STORES.jp 開発全般 ! 一番JS歴が浅いですが一番ヒマそう だったので今ここにいます
  3. 3. 今日のおはなし ❖ STORES.jp と AngularJS ❖ Rails と AngularJS ❖ SEO対応 ❖ Google Analytics ❖ リファクタ中のはなし ❖ かるいまとめ
  4. 4. 最短2分で、驚くほど簡単に オンラインストアがつくれる https://stores.jp
  5. 5. x MARKET
  6. 6. STORES.jp と AngularJS ローンチ時点でAngularJSを採用 (2012/09) 当時は今ほど日本で注目を集めていなかった 情報も少なかった いつから使ってる?
  7. 7. STORES.jp と AngularJS ❖ ダッシュボード 
 (ストアオーナー管理画面) ! ❖ 各ストアのコンテンツ
 (メインコンテンツ) どこで使ってる?
  8. 8. STORES.jp と AngularJS アプリを見据えてサーバサイドは APIとして使いたかった どうしてAngularJS?
  9. 9. STORES.jp と AngularJS デザイン編集機能でリアルタイムに変更を反映するために データバインディングが魅力的だった どうしてAngularJS?
  10. 10. STORES.jp と AngularJS レイアウトやストア名などを リアルタイムに反映 ! どんどん切り替わることで デザインを楽しんでもらう ストアデザイン編集機能
  11. 11. STORES.jp と AngularJS ng-modle ng-style ng-show
  12. 12. STORES.jp と AngularJS Rails, AngularJS とフルスタックのものを採用する
 ことで学習すべき要素を明確にしたかった どうしてAngularJS?
  13. 13. Rails と AngularJS ❖ Railsを完全にAPIとしてフロントはAngularJSに任せる ❖ RailsのViewに使いたいところだけ適応する Rails, AngularJS で調べていくと 2タイプの構成を見かけると思います
  14. 14. Rails と AngularJS ❖ RailsのViewに使いたいところだけ適応する ❖ Railsのlayoutで共通部分をレンダリングしている(初回) ❖ 動的に変更する箇所に <ng-view> を設置してルーティング ❖ 必ずしもAngularJSが必要でない部分では使ってない
 SEOなど考え試行錯誤した感じがある STOERS.jp は今こっちです。完全分離はできていません
  15. 15. Rails と AngularJS 構成の参考 mkwiatkowski/todo-rails4-angularjs ! AngularJS本家がRailsとの連携の参考にあげていた サンプルコード 現在も開発が進められており、今はこの構成に近い
  16. 16. Google Analytics SPAなのでGAのトラッキングコードを読む込むだけでは 各ページをトラッキングできません ! routeが変わったのをトリガーにGAにURLを通知させました
  17. 17. Google Analytics // ga('send', 'pageview'); GAのトラッキングコードから以下を削除
  18. 18. Google Analytics $routeChangeSuccess を検知して GAにトラッキング
  19. 19. Angulartics 前述のGAトラッキングと同じことができるモジュール http://luisfarzati.github.io/angulartics/ ! GA以外にも mixpanel や chartbeat もサポート クリックイベント用のディレクティブも提供 ※ui-router を使っているとうまく動作しない?
  20. 20. SEO _escaped_fragment_
  21. 21. SEO ❖ PhantomJSで返すとレスポンスが遅い ❖ エラーが起きていてもわかりづらい ❖ GoogleのbotがJSを実行できるようになった? ❖ PhantomJSで返却したHTMLからさらにAngularJSを
 実行されると目的のページを返せなくなるかも?
  22. 22. SEO ❖ SEO対策は結構面倒 ❖ SEOを重視しながらAngularJSを使うなら
 ルーティングだけはRailsサイドにするのもありかも
  23. 23. リファクタ中のはなし ❖ jQueryプラグインをAngularJSと一緒に使う ❖ $http -> Service ❖ Controllerを分ける (データの共有)
  24. 24. ng-repeatの後に処理を走らせたい サーバから商品情報を取得 ng-repeatで画像情報をループ jQueryプラグインを適応
  25. 25. ng-repeatの後に処理を走らせたい サーバから商品情報を取得 ng-repeatで画像を描画 binding前に実行されるため適応されない
  26. 26. ng-repeatの後に処理を走らせたい サーバから商品情報を取得 ng-repeatで画像を描画 Controller内にView周りの コードが混在してしまう
  27. 27. ng-repeatの後に処理を走らせたい サーバから商品情報を取得 ng-repeatで画像を描画 Directiveでラップして Controllerから追い出した
  28. 28. jQueryプラグインを使う前に jQueryプラグインをカスタムディレクティブに
 実装する前に以下を検討してみる ❖ AngularUI で実現できないか?
 http://angular-ui.github.io/ ❖ 公開されているディレクティブはないか?
 http://ngmodules.org ❖ AngularJSで置き換えられないか?
 参考: http://knightso.hateblo.jp/entry/2014/04/10/080207
  29. 29. ANGULAR MODULES ❖ http://ngmodules.org ❖ AngularJSの各種モジュールのまとめ ❖ STORES.jp でも以下を採用 ❖ angular-file-upload ❖ ngInfiniteScroll
  30. 30. $http -> Service ❖ 処理をコントローラーに詰め込んでいくと
 どんどんコントローラーが肥大化してしまう ! ❖ 処理上は問題ないが, テストがしにくい, 
 使い回しができないといった問題が発生してくる
  31. 31. $http -> Service 商品一覧を取得する処理は ダッシュボードでも各ストアでも共通で行われる 幾つかのコントローラーに同じような処理が書かれていた Serviceに切り出して共通化する
  32. 32. $http -> Service
  33. 33. AngularJSの学習 JS初心者の自分がAngularJSの学習に参考にしたもの ❖ ドットインストール ❖ 公式チュートリアル ! 公式チュートリアルまでだと敷居は低く感じる (イケル!って思える) ! ディレクティブやサービス, ファクトリーを作り始めたあたりから独特の ルールで一気に敷居が上がる
  34. 34. AngularJSの学習 最近参考にさせて頂いてるサイト ❖ AngularJS Ninja ❖ http://angularjsninja.com/ ❖ js STUDIO (日本語リファレンス) ❖ http://js.studio-kingdom.com/angularjs ❖ AngularJSアプリケーション開発ガイド ❖ O Reilly本 (v1.2.16)
  35. 35. まとめ ❖ 少ないコードで実装できている ❖ 学習対象はAngularJSのみで明確だった ❖ 実際にサービスで使ってみるとハマりどころは多い ❖ コントローラーは太らせない ❖ 面倒臭がらなければ結果的にハッピーになれる ❖ SEO対策は面倒。重要度が高い場合は素直に
 サーバサイドMVCの方がいいかも
  36. 36. ありがとうございました

×