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.

20180529 umekita force twilio_handson

188 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

20180529 umekita force twilio_handson

  1. 1. 株式会社鈴木商店 山田真也 Umekita Force × Twilio  ハンズオン 2018.05.29
  2. 2. 名前:山田真也 所属:Umekita Force 職種:営業 SF歴:7年 FB: https://www.facebook.com/yamada.shinya0917 資格: 自己紹介
  3. 3. 会社紹介
  4. 4. 目次 1. 概要 2. Twilio編 3. Salesforce編 4. まとめ
  5. 5. 1:概要
  6. 6. 1:概要 取引先責任者の電話を使って、 TwilioAPIを呼び出しSMSを送信
  7. 7. 1:概要 Lightningアクションを利用し、Ligthningコンポー ネントからTwilioAPIの呼び出しを行う。
  8. 8. デモ
  9. 9. 2:Twilio編
  10. 10. やること 1. アカウント作成(ログイン情報、携帯番号の登録、SMS確認) 2. プロジェクトの作成 3. 電話番号の購入 4. ACCOUNT SID 、AUTH TOKENの確認 ▼作成動画 https://youtu.be/rNiaLjnhlB4
  11. 11. 2-1.アカウント作成 ● https://twilio.kddi-web.com からサインアップ ● アカウント作成 ● 携帯番号登録、確認コードの登録
  12. 12. 2-2.プロジェクトの作成 ● プロジェクトの作成
  13. 13. 2-3.電話番号の購入 ● https://jp.twilio.com/console/phone-numbers/search ● SMS、MMSにチェックをつけて検索 ● 購入した番号は後で利用するのでメモ帳に保存 ※無料トライアルで送信先として指定できるのは登録に使った携帯番号のみとなります。
  14. 14. 2-4.ACCOUNTSID,AUTHTOKENの確認 ● ホーム画面から、アカウントSID、AUTHTOKENをメモ帳に保存
  15. 15. 3:Salesforce編
  16. 16. やること 1. ドメイン設定 2. AppExchangeのインストール 3. カスタム設定(ACCOUNT SID、AUTH TOKEN) 4. リモートサイト設定 5. Lightningコンポーネント作成 6. Lightningアクション作成 7. Lightningコンポーネントの設置
  17. 17. 3-0.developer環境の設定 ● https://developer.salesforce.com/signup
  18. 18. 3-1.私のドメイン設定 ● Lightningコンポーネントを利用するため、私のドメイン設を行う ● ドメイン準備完了のメールが届くので反映  ※反映に時間がかかるので事前に設定を行う
  19. 19. 3-2.AppExchangeのインストール ● https://jp.twilio.com/docs/libraries/salesforce ● 上記サイトのセルフビルドパッケージからインストール ● URLを直接変更する場合は以下 https://xxxxxxx/packagingSetupUI/ipLanding.app?apvId=04ti0000000XkE0 ※間違って別組織にインストールしないように注意
  20. 20. 3-3.カスタム設定 ● Twilio Configの Manageをクリックし以下を登録 ● Name : 任意 ● AccountSid :Twilioで発行したACCOUNT SID ● Auth Token:Twilioで発行したAUTH TOKEN
  21. 21. 3-4.リモートサイト設定 ● 外部のAPIを許可するため、リモートサイトの登録を行う ● リモートサイト名:任意 ● リモートサイトURL:https://api.twilio.com
  22. 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. 23. 3-6.Lightningアクションの設定 ● 取引先責任者のボタン、リンク、およびアクションからLightningア クションの作成 ● Lightningコンポーネント:c:SendTwilioSMS ● 表示ラベル:TwilioSMS ● 名前:TwilioSMS
  24. 24. 3-7.Lightningコンポーネントの設置 ● 取引先責任者のページレイアウトからLightningアクションを追加 ● Lightningアプリケーションビルダーに直接埋込も可能 ※私のドメインを設定してないと、アプリケーションビルダーに埋込み不可能
  25. 25. 動作確認 twilioアカウント発行時に設定した電話番号を +81 の形で登録し動作確認 ※実際はApex側なりで +81の形式に変換するのが無難
  26. 26. まとめ
  27. 27. まとめ ● サードパーティが用意してるREST APIを利用することで、簡単に 外部サービスを呼出し、利用が可能(リモートサイト設定は必須) ● AppExchangeが用意されてることもあるので、うまく利用すれば実 装は簡単 ● TwilioAPIを変えることで、電話などの実装も可能 ● Classic環境でOn click Javascriptなどを利用して実装してる場合 は今回のような形で作り直すことでLightningにも対応が可能
  28. 28. おまけ ● もっと簡単にTwilio連携できるAppExchangeが出るみたいです。※ 今回のハンズオンはできそう ● https://www.twilio.com/blog/2018/04/sign-up-for-the-twilio-for -salesforce-preview.html
  29. 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. 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. 31. ご清聴 ありがとうございました。

×