STORES.jp x AngularJS

×
@mknkisk 2014/6/2

!
AngularJSを業務で使いたいけど今一歩踏み出せない方のための勉強会

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

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

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

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

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

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

デザイン編集機能でリアルタイムに変更を反映するために
データバインディングが魅力的だった

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

ng-modle
ng-style
ng-show

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

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

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

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

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

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

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

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

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

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

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

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

ng-repeatで画像を描画
binding前に実行されるため適応されない

Controller内にView周りの
コードが混在してしまう

Directiveでラップして
Controllerから追い出した

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

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

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

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

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

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

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

ありがとうございました

STORES.jp x AngularJS

More Related Content

What's hot (20)

Similar to STORES.jp x AngularJS (6)

STORES.jp x AngularJS