Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
© Geniee, Inc. MAJINを支える フロントエンド技術 2017年11月2日 R&D本部 マーケティングオートメーション開発部 張 志鋒 & 孫 星越
© Geniee, Inc. プロフィール  張 志鋒（チョウ シホウ） • 前職はUnity UIライブラリやHTML5 WebGLゲームエンジンなどを開発 • 2016年にジーニーに入社してすぐMAJINの立ち上げに携わる • 現在はMA...
© Geniee, Inc. 3 アジェンダ MAJINの紹介 MAJINにおけるフロントエンド 活用事例 まとめ
© Geniee, Inc. MAJINの紹介 4
© Geniee, Inc. 5 MAJINの全体概要 顧客に合わせてマーケティングプロセスを効率化・可視化・自動化 リードナーチャリング & リードクオリフィケーションリードジェネレーション 一般的なCRM・MAツール × 広告運用 名刺管理...
© Geniee, Inc. MAJINにおける フロントエンド 6
© Geniee, Inc. MAJINのフロントエンドとJavaScript  MAJIN管理画面 • 主に「フロントエンド」と呼ばれる部分 • ES6 + Vue.js  Tracker (MAJIN追跡のタグ) • お客様のサイトに埋...
© 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 Gatew...
© Geniee, Inc. Vue.jsを選んだ理由  使い方が簡単、学習コストが低い • 勉強会１時間程で始められる  初めから少しづつ適用していける（Progressive framework） • 最初はシナリオ機能から導入した •...
© Geniee, Inc. MAJINフロントエンドの課題  高機能なシナリオとコンテンツ • メール、エントリーフォーム、LINEメッセージ、Webプッシュ、Appプッシュなど • 一つの画面でMAJINの自動化機能を集約したシナリオ •...
© Geniee, Inc. 活用事例 11
© Geniee, Inc. 活用事例・その一：シナリオとVuex  シナリオの課題 • 一つの画面で大量の状態を管理するのが難しい 12 Vuexを活用
© Geniee, Inc.  Vueの状態管理 活用事例・その一：シナリオとVuex 13 Vue.js Components <parent> <child> <child>
© Geniee, Inc. 活用事例・その一：シナリオとVuex  Vuexとは • Vue.jsアプリケーションのための状態管理パターン+ライブラリ 14 ノード追加、更新など ノード名などの設定 ノード間の枝など ノード設定画面 全体編...
© Geniee, Inc. 活用事例・その一：シナリオとVuex  Undo/Redoの実装が容易に 15 [] [ SendMail{} ] [ SendMail{From: xxx@geniee.co.jp} ] 送信ノードを追加 「送...
© Geniee, Inc. 活用事例・その二：自作プラグインでVue.jsをカスタマイズ  様々なVue.jsのプラグインがあるが、どうしても不足がある  既存システムから移行する時に、旧機能を吸収したい 16 プラグインを自分で作る S...
© Geniee, Inc. 活用事例・その二：自作プラグインでVue.jsをカスタマイズ 17
© Geniee, Inc. 活用事例・その二：自作プラグインでVue.jsをカスタマイズ 18  スクリプトでプラグインを使用  テンプレートで使用 他に権限管理、APIリソース管理、バリデーションなどにも 自作プラグインが活躍している
© Geniee, Inc. 活用事例・その三：TypeScript & Yeomanによる効率向上  開発規模の拡大と伴い、ES6の他、型チェックの需要性が高まる 19 TypeScript導入
© Geniee, Inc. 活用事例・その三：TypeScript & Yeomanによる効率向上  TypeScript導入して型チェックを行う • TypeScript ~= 型チェックのあるES6 • ES6と完全に互換性があるので導...
© Geniee, Inc. 活用事例・その三：TypeScript & Yeomanによる効率向上  Before vs After 21 Before After
© Geniee, Inc. 活用事例・その三：TypeScript & Yeomanによる効率向上  ただし、コンポーネントの作成がやはりめんどくさい  老舗のYeomanで効率向上 • Yeomanのyoでコンポーネントを自動作成 22
© Geniee, Inc. 活用事例・その三：TypeScript & Yeomanによる効率向上  生成例  他にvuexのgetters/mutationsなども自動生成可能 23 DummyComponent.ts.ejs app/...
© Geniee, Inc. まとめ 24
© Geniee, Inc. まとめ  MAJINとMAJINのフロントエンドを紹介した  MAJINのフロントエンドの課題とその解決案を紹介した • 高機能なシナリオとコンテンツ → Vuex活用 • 既存機能とのギャップを埋める → 独...
Upcoming SlideShare
Loading in …5
×

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

8,749 views

Published on

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

Published in: Engineering
no profile picture user
  • Dating direct: ❤❤❤ http://bit.ly/2Q98JRS ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2Q98JRS ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS/FILE INTO AVAILABLE FORMAT - (Unlimited) ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes Christian, Classics, Comics, Contemporary, Cookbooks, Art, Biography, Business, Chick Lit, Children's, Manga, Memoir, Music, Science, Science Fiction, Self Help, History, Horror, Humor And Comedy, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

  • Be the first to like this

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を選んだ理由  使い方が簡単、学習コストが低い • 勉強会１時間程で始められる  初めから少しづつ適用していける（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

×