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

x MARKET

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

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

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

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

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

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

STORES.jp と AngularJS Rails, AngularJS とフルスタックのものを採用する  ことで学習すべき要素を明確にしたかったどうして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 _escaped_fragment_

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

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

ng-repeatの後に処理を走らせたいサーバから商品情報を取得 ng-repeatで画像を描画 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に切り出して共通化する

$http -> 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

by Keisuke Makino, Web Developer at Bracket Inc

on Jun 03, 2014

Statistics

Views

Actions

2 Embeds 15

Accessibility

Categories

Upload Details

Usage Rights

Report content

STORES.jp x AngularJS Presentation Transcript