Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Twilio Liftoff for Japan part 1: Twilio入門 / Twilio Liftoff Japan Part 1: get started with Twilio

Neri78
April 14, 2021

Twilio Liftoff for Japan part 1: Twilio入門 / Twilio Liftoff Japan Part 1: get started with Twilio

Neri78

April 14, 2021
Tweet

More Decks by Neri78

Other Decks in Technology

Transcript

  1. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. 自己紹介 池原 大然 Developer Evangelist @ Twilio Email: [email protected] Twitter/Twitch/GitHub: “Neri78” Twitch Twitter GitHub
  2. © 2020 TWILIO INC. ALL RIGHTS RESERVED. Liftoffとは? 1 2

    3 Twilio アプリケーションの 開発 スケーラビリティ Twilio入門
  3. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. Twilioコンソール https://www.twilio.com/console
  4. © 2020 TWILIO INC. ALL RIGHTS RESERVED. Twilioとやりとりを行う方法 主に3つの方法を紹介 TwiML

    Twilioへの命令構文 webhook Twilioから発生する コールバックリクエスト API コール コードでTwilioの サービスを呼び出し </> API
  5. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. TwiMLとは?
  6. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. TwiML Twilio Markup Language 「動詞」と「名詞」 XML構文 Twilioの動作を指定 Twilio独自のタグを定義 音声またはメッセージの応答 TwiMLを使って構築できる
  7. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. TwiMLの一例 • 「こんにちは世界」を再生 <?xml version="1.0" encoding="UTF-8"?> <Response> <Say language="ja-jp">こんにちは世界</Say> </Response>
  8. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. TwiMLの一例 • 指定したmp3ファイルを 再生 <?xml version="1.0" encoding="UTF-8"?> <Response> <Play>https://api.twilio.com/cowbael.mp3</Play> </Response>
  9. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. TwiMLの一例 • 連続で指定できる <?xml version="1.0" encoding="UTF-8"?> <Response> <Say language="ja-jp">こんにちは世界</Say> <Play>https://api.twilio.com/cowbael.mp3</Play> </Response> 音声用TwiML - https://jp.twilio.com/docs/voice/twiml メッセージ用TwiML - https://jp.twilio.com/docs/sms/twiml
  10. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. TwiMLを書いてみましょう! https://twilio.com/console/twiml-bins
  11. © 2020 TWILIO INC. ALL RIGHTS RESERVED. TwiMLをTwilioに伝える方法 Web Server

    API webhookを使用 APIコールの パラメーターとして TwiML Bins Twilioが提供する サーバーレス ソリューション
  12. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. webhookとは?
  13. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. webhook 音声着信 Twilioから リクエストを送信 Twilioが提供する電話番号 例: 050-xxxx-xxx
  14. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. 音声着信 Twilioから リクエストを送信 Twilioが提供する電話番号 例: 050-xxxx-xxx アプリケーションの 応答 (TwiML) <?xml version="1.0" encoding="UTF-8"?> <Response> <Say language="ja-jp">こんにちは世界</Say> </Response> TwiMLをもとに 応答 “こんにちは世界”
  15. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. webhookに応答(固定のTwiMLを応答) app.all('/voice', (req, res, next) => { res.contentType("application/xml"); const response = '<Response><Say language="ja-jp"> こんにちは世界。XMLを直接コードから返しています </Say></Response>'; res.send(twiml.toString()); })
  16. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. webhookに応答(コードでTwiMLを構築) const twilio = require('twilio'); // ...省略 app.all('/voice-dynamic', (req, res, next) => { res.contentType("application/xml"); const twiml = new twilio.twiml.VoiceResponse(); twiml.say( { language: 'ja-JP'}, "今日は世界。コードで構築できると楽ですよね。"); res.send(twiml.toString()); })
  17. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. アプリケーションから音声通話を発信 const twilio = require('twilio')( process.env.ACCOUNT_SID, process.env.AUTH_TOKEN ); twilio.calls.create({ from : process.env.TWILIO_NUMBER, to: process.env.MY_NUMBER, twiml: '<Response><Say language="ja-JP">こんにちは世界。アプリから通話しています。/Say></Response>' }).then (call => console.log(call.sid));
  18. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. Webアプリを テストするには?
  19. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. ngrok https://ngrok.com/
  20. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. webhookリソース https://www.twilio.com/docs/glossary/what-is-a-webhook https://www.twilio.com/docs/usage/webhooks https://www.twilio.com/docs/usage/webhooks/getting-started-twilio-webhooks
  21. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. REST APIの使用
  22. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. https://api.twilio.com POST /2010-04-01/Accounts/$TWILIO_ACCOUNT_SID/Calls.json Authorization: 'Basic bGlmdG9mZg==' To=YOUR_NUMBER&From=TWILIO_NUMBER&Twiml=<Response><Say> HTTP/1.1 200 OK { "account_sid": $TWILIO_ACCOUNT_SID, "date_created": "Wed, 17 Mar 2021 03:00:00 +0000", ... }
  23. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. ヘルパーライブラリがサポートしている言語・フレームワーク
  24. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. Twilio REST APIガイド https://www.twilio.com/docs/usage/requests-to-twilio https://www.twilio.com/docs/libraries
  25. © 2020 TWILIO INC. ALL RIGHTS RESERVED. 次回予告 Part 2:

    Twilioアプリ開発 Q. 今回構築したアプリのセキュリティを担保するには?
  26. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. クロージング
  27. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. まずはここから! • トライアルアカウントを作成する方法 https://www.twilio.com/blog/how-to-create-twilio-account-jp
  28. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. リソース • Liftoffシリーズで使用しているサンプルコード https://github.com/neri78/twilio-liftoff-jp • Twilioハンズオンシリーズ https://github.com/neri78?tab=repositories&q=twilio+handson • 日本語Blog記事 https://www.twilio.com/blog/tag/japanese • Twitter: @twiliojapan • 営業へのお問い合わせ https://www.twilio.com/japan/help/sales