×

@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 と AngularJSng-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-file-upload

❖ ngInfiniteScroll

$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の方がいいかも

ありがとうございました