20180529umekitaforceハンズオン資料となります。

1. 株式会社鈴木商店 山田真也
Umekita Force × Twilio
ハンズオン
2018.05.29

2. 名前：山田真也
所属：Umekita Force
職種：営業
SF歴：７年
FB: https://www.facebook.com/yamada.shinya0917
資格：
自己紹介

3. 会社紹介

4. 目次
1. 概要
2. Twilio編
3. Salesforce編
4. まとめ

5. 1:概要

6. 1:概要
取引先責任者の電話を使って、
TwilioAPIを呼び出しSMSを送信

7. 1:概要
Lightningアクションを利用し、Ligthningコンポー
ネントからTwilioAPIの呼び出しを行う。

8. デモ

9. 2:Twilio編

10. やること
1. アカウント作成(ログイン情報、携帯番号の登録、SMS確認)
2. プロジェクトの作成
3. 電話番号の購入
4. ACCOUNT SID 、AUTH TOKENの確認
▼作成動画
https://youtu.be/rNiaLjnhlB4

11. 2-1.アカウント作成
● https://twilio.kddi-web.com からサインアップ
● アカウント作成
● 携帯番号登録、確認コードの登録

12. 2-2.プロジェクトの作成
● プロジェクトの作成

13. 2-3.電話番号の購入
● https://jp.twilio.com/console/phone-numbers/search
● SMS、MMSにチェックをつけて検索
● 購入した番号は後で利用するのでメモ帳に保存
※無料トライアルで送信先として指定できるのは登録に使った携帯番号のみとなります。

14. 2-4.ACCOUNTSID,AUTHTOKENの確認
● ホーム画面から、アカウントSID、AUTHTOKENをメモ帳に保存

15. 3:Salesforce編

16. やること
1. ドメイン設定
2. AppExchangeのインストール
3. カスタム設定（ACCOUNT SID、AUTH TOKEN）
4. リモートサイト設定
5. Lightningコンポーネント作成
6. Lightningアクション作成
7. Lightningコンポーネントの設置

17. 3-0.developer環境の設定
● https://developer.salesforce.com/signup

18. 3-1.私のドメイン設定
● Lightningコンポーネントを利用するため、私のドメイン設を行う
● ドメイン準備完了のメールが届くので反映
※反映に時間がかかるので事前に設定を行う

19. 3-2.AppExchangeのインストール
● https://jp.twilio.com/docs/libraries/salesforce
● 上記サイトのセルフビルドパッケージからインストール
● URLを直接変更する場合は以下
https://xxxxxxx/packagingSetupUI/ipLanding.app?apvId=04ti0000000XkE0
※間違って別組織にインストールしないように注意

20. 3-3.カスタム設定
● Twilio Configの Manageをクリックし以下を登録
● Name : 任意
● AccountSid :Twilioで発行したACCOUNT SID
● Auth Token:Twilioで発行したAUTH TOKEN

21. 3-4.リモートサイト設定
● 外部のAPIを許可するため、リモートサイトの登録を行う
● リモートサイト名：任意
● リモートサイトURL:https://api.twilio.com

22. 3-5.Lightningコンポーネントの作成
● https://goo.gl/QQe9Ud Trailheadからコピペ
● SendTwilioSMS.cmp :Lightning用UIを記述
● SendTwlioSMSController.js :初回アクセス、ボタンクリックなどのアクション実行時の処
理を記述
● SendTwlioSMSController.cls :Twlio APIの呼出しを記述
SendTwlioSMSController.cls 19行目を変更
'From' => '+12762121119',
'From' => '+Twilioで発行した番号',

23. 3-6.Lightningアクションの設定
● 取引先責任者のボタン、リンク、およびアクションからLightningア
クションの作成
● Lightningコンポーネント:c:SendTwilioSMS
● 表示ラベル：TwilioSMS
● 名前:TwilioSMS

24. 3-7.Lightningコンポーネントの設置
● 取引先責任者のページレイアウトからLightningアクションを追加
● Lightningアプリケーションビルダーに直接埋込も可能
※私のドメインを設定してないと、アプリケーションビルダーに埋込み不可能

25. 動作確認
twilioアカウント発行時に設定した電話番号を
+81 の形で登録し動作確認
※実際はApex側なりで +81の形式に変換するのが無難

26. まとめ

27. まとめ
● サードパーティが用意してるREST APIを利用することで、簡単に
外部サービスを呼出し、利用が可能（リモートサイト設定は必須）
● AppExchangeが用意されてることもあるので、うまく利用すれば実
装は簡単
● TwilioAPIを変えることで、電話などの実装も可能
● Classic環境でOn click Javascriptなどを利用して実装してる場合
は今回のような形で作り直すことでLightningにも対応が可能

28. おまけ
● もっと簡単にTwilio連携できるAppExchangeが出るみたいです。※
今回のハンズオンはできそう
● https://www.twilio.com/blog/2018/04/sign-up-for-the-twilio-for
-salesforce-preview.html

29. その他
● Alexa force という、Amazon Echoと簡単に繋げれるものもあった
りします。
https://blog.enree.co/2018/02/salesforce-amazon-echo-alexfor
ce-20.html
● AWSとの連携であれば以下が公式であります。
https://aws.amazon.com/jp/salesforce_japan/https://aws.amazo
n.com/jp/salesforce_japan/

30. 参考URL
● https://web.plus-idea.net/2017/01/twilio-sms-api-how-to/
● https://web.plus-idea.net/2017/01/salesforce-twilio-api-sms-messaging/
● https://jp.twilio.com/docs/libraries/salesforce
● https://trailhead.salesforce.com/ja/modules/lex_javascript_button_migration/units/java
script_buttons_to_lightning_actions
上記URLを参考に今回の資料作成いたしました。
先人の人に大感謝なのとTrailheadはいいコンテンツだなと思いました。

31. ご清聴
ありがとうございました。