ElectronでExactTargetのGUIツールを作ってみた話

株式会社ウフル 田実 誠

Who Am I?

名前：田実 誠

所属：ウフルの人

DUGのイベント参加回数＝登壇回数

Github：tzmfreedomTwitter：@tzm_freedomBlog：http://freedom-man.com/blog/

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

ExactTarget（Marketing Cloud）とは？

Salesforceのマーケティングツール→顧客に対するマーケティングをマルチチャネルで手動／自動で行うことが出来るツール

・手動／自動でメール、モバイルPush通知、SMS、LINEメッセージ等の手段を使って顧客に対してマーケティングを行うことが可能。

・顧客に対して属性情報を持たせることで、セグメンテーション（誰に送るのか）、パーソナライズ（何を送るのか）の設定がノンコーディングで実現可能。

・Salesforce(SFA/CRM)ではカバーできなかったマーケティング部分の機能を担う。

Marketing CloudをJapanで導入する上での辛み

・日本品質ではないところが多い→不具合っぽい挙動もちょいちょい有る→非公開な仕様が多い

・WebUIがSPAっぽく書かれているけど、一部URIが変わらない画面遷移が有り、リロードするたびに操作のやり直しをしなければならなかったり、総じて操作性が悪い。ローディングも遅い（サーバーは北米にある？）

・リファレンス以外で、日本語の記事がほぼ無い。かといって英語の記事もあまり無い。→書けば、日本語でのファースト記事になりうる。

・各設定の環境間のコピーが出来ない（テスト環境⇔本番環境の移行が出来ない）※Sandbox環境はあるものの、あまり機能しないらしい→今回はこの課題に着目してツールを作ってみました

利用技術・ツール

・Electron：フロントエンド技術でデスクトップアプリを作るツール

・React：JSフレームワーク（Analytics Cloudでも利用されているらしい）

・Redux：Fluxフレームワーク（Reactのstateを管理する）

・Material-UI：React用マテリアルデザインフレームワーク

・Gulp：フロントエンドのタスクを自動化

・Babel：ES6やJSXの記法で書いたコードをES5にトランスパイル

・FuelSDK-Node：ExactTargetのnode.js用のSDK

Electronとは？

・Webの技術でデスクトップアプリを作れるツール

・Chromiumをベースに動いている

・ワンソースでクロスプラットフォームに対応するアプリを作れる！系のフレームワーク

・モバイルアプリで言うところのWebViewなハイブリッドアプリというイメージ

・パッケージ化されたものは普通にHTML, JS, CSS一式が入る。→クライアント側で中身を改変することも可能。

・Visual Studio Code、Kobito for Windows、Atom、Slackが利用事例

Electron関連のオススメ記事[入門系記事]・Electronでアプリケーションを作ってみようhttp://qiita.com/Quramy/items/a4be32769366cfe55778

[Gulpfile/React version]・ぼくのかんがえたさいきょうのElectronhttp://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

真面目なDEMO

1. コピー元にログイン

2. データエクステンション（RDBでいうところのテーブル）のFETCH

3. 対象のデータエクステンションを選択

4. コピー先にログイン

5. デプロイ！

作ったもの↓https://github.com/tzmfreedom/ET_Tool/releases

作ってみた感想

・ワンソースでクロスプラットフォームで動くネイティブ作れるのは楽

・クライアント側でソースコード改変できるのも緩くて良い感じ

・メニューの設定を誤るとコピペできなくなる等、Electron独自のハマりどころがある

・Qiita等でElectron関連記事はちょくちょく見られるものの、そこまで多くない

・開発者ツールでネットワークのデバッグが出来ない？のが辛かった

・node_modulesやbower_componentsはそのまま配布物に含まれるため、そのままだとパッケージの容量が大きくなりがち（特にWindows版パッケージ）→Browserifyで不要なファイルを削除して、その後minify（圧縮）すれば容量削減できるらしい。

反省点

・Salesforceなんだから、CSSフレームワークとしてはSLDSとか使うべきだったかも

・Salesforceなんだから、ReactじゃなくてLightning Outとか使うべきだったかも（まぁでもAnalytics CloudもlightningじゃなくてReact使ってるから良いよね♪）

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

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