Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

MAJINを支えるフロントエンド技術

7 745 vues

Publié le

弊社が2016年にリリースしたマーケティング支援ツール「MAJIN」におけるVue.jsなどのフロントエンド技術の紹介や事例について語ります。

Publié dans : Ingénierie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

MAJINを支えるフロントエンド技術

  1. 1. © Geniee, Inc. MAJINを支える フロントエンド技術 2017年11月2日 R&D本部 マーケティングオートメーション開発部 張 志鋒 & 孫 星越
  2. 2. © Geniee, Inc. プロフィール  張 志鋒(チョウ シホウ) • 前職はUnity UIライブラリやHTML5 WebGLゲームエンジンなどを開発 • 2016年にジーニーに入社してすぐMAJINの立ち上げに携わる • 現在はMAJINの基盤技術の開発を主に担当  孫 星越(ソン セイエツ) • 2015年大学院を卒業後に新卒としてジーニーに入社 • DMPチームでデータの可視化と集計の開発を経験 • MAを立ち上げる際に携わる • 現在はMAのアプリケーション開発を主に担当する 2
  3. 3. © Geniee, Inc. 3 アジェンダ MAJINの紹介 MAJINにおけるフロントエンド 活用事例 まとめ
  4. 4. © Geniee, Inc. MAJINの紹介 4
  5. 5. © Geniee, Inc. 5 MAJINの全体概要 顧客に合わせてマーケティングプロセスを効率化・可視化・自動化 リードナーチャリング & リードクオリフィケーションリードジェネレーション 一般的なCRM・MAツール × 広告運用 名刺管理・IP分析 顧客の動きと状態を可視化し、適切なアクションを適切なタイミングで実施 不良リードへの工数削減、優良リードに注力 課 題 認 知 情 報 収 集 比 較 検 討 受 注
  6. 6. © Geniee, Inc. MAJINにおける フロントエンド 6
  7. 7. © Geniee, Inc. MAJINのフロントエンドとJavaScript  MAJIN管理画面 • 主に「フロントエンド」と呼ばれる部分 • ES6 + Vue.js  Tracker (MAJIN追跡のタグ) • お客様のサイトに埋められる行動追跡スクリプト • 最近ボットなどの機能を実装するため、管理画面と同じJSコードベースに移行した  Webスクレイピング • Headless Chromeを使用し外部データ連携などでブラウザの行為をシミュレート • ES6がHeadless Chromeとの親和性が高い  End2Endテスト • Webスクレイピングと共通する技術を使用、ES6を採用 • Mochaが使いやすい 7 今回説明する部分
  8. 8. © Geniee, Inc. MAJINのフロントエンドの変遷:APIファースト 8 PHP 7 + Symfony 3 Vue.js 1.x DB API twig PHP API Vue.js 2.x DB Public API Gateway Internal API After (microservices) Before (monolith)
  9. 9. © Geniee, Inc. Vue.jsを選んだ理由  使い方が簡単、学習コストが低い • 勉強会1時間程で始められる  初めから少しづつ適用していける(Progressive framework) • 最初はシナリオ機能から導入した • 使える人が増えれば増えるほど、Vue.jsに統一することが可能となった  MVVM(Model-view-viewmodel)であること • 大規模なシングルページアプリケーションに不可欠  コミュニティが活発、将来性がある 9
  10. 10. © Geniee, Inc. MAJINフロントエンドの課題  高機能なシナリオとコンテンツ • メール、エントリーフォーム、LINEメッセージ、Webプッシュ、Appプッシュなど • 一つの画面でMAJINの自動化機能を集約したシナリオ • 一つの状態マネージャーで十数種類のノードの追加、更新や操作履歴を記録できる  技術的負債が残っている  需要多様化 & 機能複雑化 & 規模巨大化 10
  11. 11. © Geniee, Inc. 活用事例 11
  12. 12. © Geniee, Inc. 活用事例・その一:シナリオとVuex  シナリオの課題 • 一つの画面で大量の状態を管理するのが難しい 12 Vuexを活用
  13. 13. © Geniee, Inc.  Vueの状態管理 活用事例・その一:シナリオとVuex 13 Vue.js Components <parent> <child> <child>
  14. 14. © Geniee, Inc. 活用事例・その一:シナリオとVuex  Vuexとは • Vue.jsアプリケーションのための状態管理パターン+ライブラリ 14 ノード追加、更新など ノード名などの設定 ノード間の枝など ノード設定画面 全体編集画面 Vue.js Components <parent> <child> <child>
  15. 15. © Geniee, Inc. 活用事例・その一:シナリオとVuex  Undo/Redoの実装が容易に 15 [] [ SendMail{} ] [ SendMail{From: xxx@geniee.co.jp} ] 送信ノードを追加 「送信者」を設定 Action State undo redo 1 2 3
  16. 16. © Geniee, Inc. 活用事例・その二:自作プラグインでVue.jsをカスタマイズ  様々なVue.jsのプラグインがあるが、どうしても不足がある  既存システムから移行する時に、旧機能を吸収したい 16 プラグインを自分で作る Symfony3のi18nの翻訳Yamlファイルを Vue.jsで使うプラグインで説明する
  17. 17. © Geniee, Inc. 活用事例・その二:自作プラグインでVue.jsをカスタマイズ 17
  18. 18. © Geniee, Inc. 活用事例・その二:自作プラグインでVue.jsをカスタマイズ 18  スクリプトでプラグインを使用  テンプレートで使用 他に権限管理、APIリソース管理、バリデーションなどにも 自作プラグインが活躍している
  19. 19. © Geniee, Inc. 活用事例・その三:TypeScript & Yeomanによる効率向上  開発規模の拡大と伴い、ES6の他、型チェックの需要性が高まる 19 TypeScript導入
  20. 20. © Geniee, Inc. 活用事例・その三:TypeScript & Yeomanによる効率向上  TypeScript導入して型チェックを行う • TypeScript ~= 型チェックのあるES6 • ES6と完全に互換性があるので導入が簡単  VuePropertyDecoratorでVue.jsをTypeScriptで簡単に書ける 20
  21. 21. © Geniee, Inc. 活用事例・その三:TypeScript & Yeomanによる効率向上  Before vs After 21 Before After
  22. 22. © Geniee, Inc. 活用事例・その三:TypeScript & Yeomanによる効率向上  ただし、コンポーネントの作成がやはりめんどくさい  老舗のYeomanで効率向上 • Yeomanのyoでコンポーネントを自動作成 22
  23. 23. © Geniee, Inc. 活用事例・その三:TypeScript & Yeomanによる効率向上  生成例  他にvuexのgetters/mutationsなども自動生成可能 23 DummyComponent.ts.ejs app/popup/EditorView.vue
  24. 24. © Geniee, Inc. まとめ 24
  25. 25. © Geniee, Inc. まとめ  MAJINとMAJINのフロントエンドを紹介した  MAJINのフロントエンドの課題とその解決案を紹介した • 高機能なシナリオとコンテンツ → Vuex活用 • 既存機能とのギャップを埋める → 独自プラグイン開発 • 需要多様化 & 機能複雑化 & 規模巨大化 → TypeScriptとYeomonを導入  今後に • 一部のAPIをGraphQLに移行する • TypeScript化を推進 • End2Endテストカバレッジ向上 25

×