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

1. © Geniee, Inc.
MAJINを支える
フロントエンド技術
2017年11月2日
R&D本部 マーケティングオートメーション開発部
張 志鋒 & 孫 星越

2. © Geniee, Inc.
プロフィール
 張 志鋒（チョウ シホウ）
• 前職はUnity UIライブラリやHTML5 WebGLゲームエンジンなどを開発
• 2016年にジーニーに入社してすぐMAJINの立ち上げに携わる
• 現在はMAJINの基盤技術の開発を主に担当
 孫 星越（ソン セイエツ）
• 2015年大学院を卒業後に新卒としてジーニーに入社
• DMPチームでデータの可視化と集計の開発を経験
• MAを立ち上げる際に携わる
• 現在はMAのアプリケーション開発を主に担当する
2

3. © Geniee, Inc. 3
アジェンダ
MAJINの紹介
MAJINにおけるフロントエンド
活用事例
まとめ

4. © Geniee, Inc.
MAJINの紹介
4

5. © Geniee, Inc. 5
MAJINの全体概要
顧客に合わせてマーケティングプロセスを効率化・可視化・自動化
リードナーチャリング & リードクオリフィケーションリードジェネレーション
一般的なCRM・MAツール
× 広告運用
名刺管理・IP分析
顧客の動きと状態を可視化し、適切なアクションを適切なタイミングで実施
不良リードへの工数削減、優良リードに注力
課
題
認
知
情
報
収
集
比
較
検
討
受
注

6. © Geniee, Inc.
MAJINにおける
フロントエンド
6

7. © Geniee, Inc.
MAJINのフロントエンドとJavaScript
 MAJIN管理画面
• 主に「フロントエンド」と呼ばれる部分
• ES6 + Vue.js
 Tracker (MAJIN追跡のタグ)
• お客様のサイトに埋められる行動追跡スクリプト
• 最近ボットなどの機能を実装するため、管理画面と同じJSコードベースに移行した
 Webスクレイピング
• Headless Chromeを使用し外部データ連携などでブラウザの行為をシミュレート
• ES6がHeadless Chromeとの親和性が高い
 End2Endテスト
• Webスクレイピングと共通する技術を使用、ES6を採用
• Mochaが使いやすい
7
今回説明する部分

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. © Geniee, Inc.
Vue.jsを選んだ理由
 使い方が簡単、学習コストが低い
• 勉強会１時間程で始められる
 初めから少しづつ適用していける（Progressive framework）
• 最初はシナリオ機能から導入した
• 使える人が増えれば増えるほど、Vue.jsに統一することが可能となった
 MVVM(Model-view-viewmodel)であること
• 大規模なシングルページアプリケーションに不可欠
 コミュニティが活発、将来性がある
9

10. © Geniee, Inc.
MAJINフロントエンドの課題
 高機能なシナリオとコンテンツ
• メール、エントリーフォーム、LINEメッセージ、Webプッシュ、Appプッシュなど
• 一つの画面でMAJINの自動化機能を集約したシナリオ
• 一つの状態マネージャーで十数種類のノードの追加、更新や操作履歴を記録できる
 技術的負債が残っている
 需要多様化 & 機能複雑化 & 規模巨大化
10

11. © Geniee, Inc.
活用事例
11

12. © Geniee, Inc.
活用事例・その一：シナリオとVuex
 シナリオの課題
• 一つの画面で大量の状態を管理するのが難しい
12
Vuexを活用

13. © Geniee, Inc.
 Vueの状態管理
活用事例・その一：シナリオとVuex
13
Vue.js Components
<parent>
<child> <child>

14. © Geniee, Inc.
活用事例・その一：シナリオとVuex
 Vuexとは
• Vue.jsアプリケーションのための状態管理パターン+ライブラリ
14
ノード追加、更新など
ノード名などの設定
ノード間の枝など
ノード設定画面
全体編集画面
Vue.js Components
<parent>
<child> <child>

15. © Geniee, Inc.
活用事例・その一：シナリオとVuex
 Undo/Redoの実装が容易に
15
[]
[ SendMail{} ]
[ SendMail{From: xxx@geniee.co.jp} ]
送信ノードを追加
「送信者」を設定
Action State
undo redo
1
2
3

16. © Geniee, Inc.
活用事例・その二：自作プラグインでVue.jsをカスタマイズ
 様々なVue.jsのプラグインがあるが、どうしても不足がある
 既存システムから移行する時に、旧機能を吸収したい
16
プラグインを自分で作る
Symfony3のi18nの翻訳Yamlファイルを
Vue.jsで使うプラグインで説明する

17. © Geniee, Inc.
活用事例・その二：自作プラグインでVue.jsをカスタマイズ
17

18. © Geniee, Inc.
活用事例・その二：自作プラグインでVue.jsをカスタマイズ
18
 スクリプトでプラグインを使用
 テンプレートで使用
他に権限管理、APIリソース管理、バリデーションなどにも
自作プラグインが活躍している

19. © Geniee, Inc.
活用事例・その三：TypeScript & Yeomanによる効率向上
 開発規模の拡大と伴い、ES6の他、型チェックの需要性が高まる
19
TypeScript導入

20. © Geniee, Inc.
活用事例・その三：TypeScript & Yeomanによる効率向上
 TypeScript導入して型チェックを行う
• TypeScript ~= 型チェックのあるES6
• ES6と完全に互換性があるので導入が簡単
 VuePropertyDecoratorでVue.jsをTypeScriptで簡単に書ける
20

21. © Geniee, Inc.
活用事例・その三：TypeScript & Yeomanによる効率向上
 Before vs After
21
Before After

22. © Geniee, Inc.
活用事例・その三：TypeScript & Yeomanによる効率向上
 ただし、コンポーネントの作成がやはりめんどくさい
 老舗のYeomanで効率向上
• Yeomanのyoでコンポーネントを自動作成
22

23. © Geniee, Inc.
活用事例・その三：TypeScript & Yeomanによる効率向上
 生成例
 他にvuexのgetters/mutationsなども自動生成可能
23
DummyComponent.ts.ejs app/popup/EditorView.vue

24. © Geniee, Inc.
まとめ
24

25. © Geniee, Inc.
まとめ
 MAJINとMAJINのフロントエンドを紹介した
 MAJINのフロントエンドの課題とその解決案を紹介した
• 高機能なシナリオとコンテンツ → Vuex活用
• 既存機能とのギャップを埋める → 独自プラグイン開発
• 需要多様化 & 機能複雑化 & 規模巨大化 → TypeScriptとYeomonを導入
 今後に
• 一部のAPIをGraphQLに移行する
• TypeScript化を推進
• End2Endテストカバレッジ向上
25