フロントエンド全然詳しくない人がElectron+React+ReduxでExactTargetのGUIツールを作ったお話

1. ElectronでExactTargetの
GUIツールを作ってみた話
株式会社ウフル 田実 誠

2. Who Am I?
名前：田実 誠
所属：ウフルの人
DUGのイベント参加回数＝登壇回数
Github：tzmfreedom
Twitter：@tzm_freedom
Blog：http://freedom-man.com/blog/

3. ExactTarget（Marketing
Cloud）に触ったことあるひとー？

4. ExactTarget（Marketing Cloud）とは？
Salesforceのマーケティングツール
→顧客に対するマーケティングをマルチチャネルで手動／自動で行うことが出来るツール
・手動／自動でメール、モバイルPush通知、SMS、LINEメッセージ等の手段を使って
顧客に対してマーケティングを行うことが可能。
・顧客に対して属性情報を持たせることで、セグメンテーション（誰に送るのか）、パーソナライズ
（何を送るのか）の設定がノンコーディングで実現可能。
・Salesforce(SFA/CRM)ではカバーできなかったマーケティング部分の機能を担う。

5. Marketing CloudをJapanで導入する上での辛み
・日本品質ではないところが多い
→不具合っぽい挙動もちょいちょい有る
→非公開な仕様が多い
・WebUIがSPAっぽく書かれているけど、一部URIが変わらない画面遷移が有り、
リロードするたびに操作のやり直しをしなければならなかったり、総じて操作性が悪い。ローディングも遅
い（サーバーは北米にある？）
・リファレンス以外で、日本語の記事がほぼ無い。かといって英語の記事もあまり無い。
→書けば、日本語でのファースト記事になりうる。
・各設定の環境間のコピーが出来ない（テスト環境⇔本番環境の移行が出来ない）
※Sandbox環境はあるものの、あまり機能しないらしい
→今回はこの課題に着目してツールを作ってみました

6. 利用技術・ツール
・Electron：フロントエンド技術でデスクトップアプリを作るツール
・React：JSフレームワーク（Analytics Cloudでも利用されているらしい）
・Redux：Fluxフレームワーク（Reactのstateを管理する）
・Material-UI：React用マテリアルデザインフレームワーク
・Gulp：フロントエンドのタスクを自動化
・Babel：ES6やJSXの記法で書いたコードをES5にトランスパイル
・FuelSDK-Node：ExactTargetのnode.js用のSDK

7. Electronとは？
・Webの技術でデスクトップアプリを作れるツール
・Chromiumをベースに動いている
・ワンソースでクロスプラットフォームに対応するアプリを作れる！系のフレームワーク
・モバイルアプリで言うところのWebViewなハイブリッドアプリというイメージ
・パッケージ化されたものは普通にHTML, JS, CSS一式が入る。
→クライアント側で中身を改変することも可能。
・Visual Studio Code、Kobito for Windows、Atom、Slackが利用事例

8. Electron関連のオススメ記事
[入門系記事]
・Electronでアプリケーションを作ってみよう
http://qiita.com/Quramy/items/a4be32769366cfe55778
[Gulpfile/React version]
・ぼくのかんがえたさいきょうのElectron
http://qiita.com/Quramy/items/90d61ff37ca1b95a7f6d
[Salesforce向け]
・ElectronでReact/Salesforceなデスクトップアプリを作ってみた
http://info.skyvisualeditor.com/blog/2016/160208_001566.php
・ElectronでSalesforce1をネイティブアプリ化できるか？
http://qiita.com/a_kuratani/items/f1cd6b02381cfb7e0381

9. 真面目なDEMO
1. コピー元にログイン
2. データエクステンション（RDBでいうところのテーブル）のFETCH
3. 対象のデータエクステンションを選択
4. コピー先にログイン
5. デプロイ！
作ったもの↓
https://github.com/tzmfreedom/ET_Tool/releases

10. 作ってみた感想
・ワンソースでクロスプラットフォームで動くネイティブ作れるのは楽
・クライアント側でソースコード改変できるのも緩くて良い感じ
・メニューの設定を誤るとコピペできなくなる等、Electron独自のハマりどころがある
・Qiita等でElectron関連記事はちょくちょく見られるものの、そこまで多くない
・開発者ツールでネットワークのデバッグが出来ない？のが辛かった
・node_modulesやbower_componentsはそのまま配布物に含まれるため、そのままだとパッ
ケージの容量が大きくなりがち（特にWindows版パッケージ）
→Browserifyで不要なファイルを削除して、その後minify（圧縮）すれば容量削減できるらし
い。

11. 反省点
・Salesforceなんだから、CSSフレームワークとしてはSLDSとか使うべきだったかも
・Salesforceなんだから、ReactじゃなくてLightning Outとか使うべきだったかも
（まぁでもAnalytics CloudもlightningじゃなくてReact使ってるから良いよね♪）

12. Electronを使って良いツールを
ガンガン作っていきましょう！

13. ご清聴ありがとうございました！