2020.03.16
【初心者向け】完全未経験からTwilio(Twilio Flex)でモダンな開発を始めるまで
ポスト
はじめに
皆さま、こんにちは。
テラスカイに入社して、もう少しで3年目になる上川です。
自分は入社してから1年ほどSalesforce開発に携わり、去年の9月くらいからTwilioの開発をはじめました。
お恥ずかしながら、正直それまではTwilioの名前も全く知りませんでした。
初めて聞いたときは、名前が似てるので「何かTwitterのサービスかな？」ぐらいに思っていたほどの自分ですが、Twilioの開発をはじめてからどんな事を勉強したのかをお伝えたしたいと思います。
・ Twilioに興味がある方
・ ReactやNode.jsなどを用いたモダンなフロントエンドやバックエンドの開発に興味がある方
・ コンタクトセンター構築に興味がある方
ぜひ、このような方々のご参考にしていただければ嬉しいです。
テラスカイに入社して、もう少しで3年目になる上川です。
自分は入社してから1年ほどSalesforce開発に携わり、去年の9月くらいからTwilioの開発をはじめました。
お恥ずかしながら、正直それまではTwilioの名前も全く知りませんでした。
初めて聞いたときは、名前が似てるので「何かTwitterのサービスかな？」ぐらいに思っていたほどの自分ですが、Twilioの開発をはじめてからどんな事を勉強したのかをお伝えたしたいと思います。
・ Twilioに興味がある方
・ ReactやNode.jsなどを用いたモダンなフロントエンドやバックエンドの開発に興味がある方
・ コンタクトセンター構築に興味がある方
ぜひ、このような方々のご参考にしていただければ嬉しいです。
未経験ってどんなレベル？
入社してからSalesforceの開発を主にしていたので、技術要素としてはApexとVisualfoce、あとは多少のHtmlとCSS、たまにjavascriptかjQueryを数行書いてDOM操作を少しだけするといった感じです。
どちらかというとサーバーサイドよりですので、Reactを用いたモダンなフロントエンドの開発は完全未経験ですし、JavaScriptの標準規格であるES2015(ES6)って何それ？？という状態でした。
どちらかというとサーバーサイドよりですので、Reactを用いたモダンなフロントエンドの開発は完全未経験ですし、JavaScriptの標準規格であるES2015(ES6)って何それ？？という状態でした。
またコールセンター周りの技術要素である、SIPやPBXなども全くの未経験でした。
つまり、Twilio周りについて何も知らなかったのですが、技術的に面白そうだったのでとりあえず気合いと勢いだけでTwilioの世界に飛び込んで行きました。
Twilio Flexの紹介
今回はこちらのTwilio Flexという次世代クラウド型コンタクトセンターをカスタマイズするために学ぶべき技術について書きたいと思います。
以下はTwilioのYoutubeチャンネルに投稿されているTwilio Flexの紹介動画になります。
Twilio Flexの概要が分かる動画となっていますので、是非一度ご覧ください。
以下はTwilioのYoutubeチャンネルに投稿されているTwilio Flexの紹介動画になります。
Twilio Flexの概要が分かる動画となっていますので、是非一度ご覧ください。
Getting Started with Twilio Flex
via
www.youtube.com
未経験からデモ作成までにやったこと
今回はTwilio Flexのデモを一通り自力で作れるレベルまでにやる事を想定しています。
自分は実際にこの順番にやった訳ではないのですが、改めて見てやった方がよい順に記載します。
自分は実際にこの順番にやった訳ではないのですが、改めて見てやった方がよい順に記載します。
Twilioを学ぶ
Twilio Flex - Twilio
このドキュメントのGet started with FlexからTwilio Flexを学ぶのがよいでしょう。ここで基本的なTwilio Flexカスタマイズの流れは学べるかと思います。
自分の場合は、Twilioの研修に2回参加しました。
1回目はサンフランシスコにある本社で実施された4日間の研修です。
ここでは、「Twilioの全体的なサービス概要」「実際にAPIを触ってみる」「Twilio Flexの簡単なカスタマイズ」などを学びました。
2回目は日本で行われたTwilio Flexの3日間の研修です。
ここでは、Twilio Flexのデータ構造やWFOでのダッシュボード作成、SalsefoceにTwilil FlexをCTIとして組み込む方法を学びました。
1回目はサンフランシスコにある本社で実施された4日間の研修です。
ここでは、「Twilioの全体的なサービス概要」「実際にAPIを触ってみる」「Twilio Flexの簡単なカスタマイズ」などを学びました。
2回目は日本で行われたTwilio Flexの3日間の研修です。
ここでは、Twilio Flexのデータ構造やWFOでのダッシュボード作成、SalsefoceにTwilil FlexをCTIとして組み込む方法を学びました。
JavaScript(ES6以降)を覚える
Twilioの開発においてJavaScriptはとても大事です！
Twilio FlexはReactで開発しますし、Twilio FunctionはNode.jsのみのサポートです。
Twilioのドキュメントでは他の言語もサポートされていますが、サンプルコードなどはほとんどJavaScriptで書かれているので、覚えておいた方がいいでしょう。
Twilio FlexはReactで開発しますし、Twilio FunctionはNode.jsのみのサポートです。
Twilioのドキュメントでは他の言語もサポートされていますが、サンプルコードなどはほとんどJavaScriptで書かれているので、覚えておいた方がいいでしょう。
16: Topics of JavaScript/ES6-ES8 - p5.js Tutorial
via
www.youtube.com
JavaScript/ES6-ES8が学べるチュートリアル動画
海外のYouTuberの人で、面白く授業してくれるので飽きないです。
自分はこれを見て学びました。
JavaScript Primer - 迷わないための入門サイト #jsprimer
JavaScriptの基本的な書き方からアプリケーションの作成などのユースケースを学ぶための入門サイトです。
自分はJavaScriptの勉強を終えた後に見つけましたが、結構良さそうです。まずはこのサイトでJavaScriptの基礎を固めるのがよいかと思います。
React / Reduxを覚える
Twilio Flexをカスタマイズする際にゴリゴリ、Reactで開発します。
ReactとはFacebookが作成した、UIのパーツを作ったりコンポーネント単位で状態を持ったりできる、JavaScriptのフレームワークです。
ReduxはReactが扱うUIの状態を切り離して、別の専用のStoreで管理するためのフレームワークです。
実運用に耐えうる設計をする上でReduxも必須になるかと思います。
ReactとはFacebookが作成した、UIのパーツを作ったりコンポーネント単位で状態を持ったりできる、JavaScriptのフレームワークです。
ReduxはReactが扱うUIの状態を切り離して、別の専用のStoreで管理するためのフレームワークです。
実運用に耐えうる設計をする上でReduxも必須になるかと思います。
React Redux Tutorial for Beginners: The Definitive Guide (2020)
Looking forward to learn Redux? This is the simplest React Redux tutorial I wish I had when I started learning. Come over and learn Redux with me!
Reduxのシンプルな構成のチュートリアルで分かりやすいです。
特にRedux middlewareの部分でRedux ThunkやRedux Sagaの部分が分かりやすかったです。
特にRedux middlewareの部分でRedux ThunkやRedux Sagaの部分が分かりやすかったです。
最短で学ぶReactとReduxの基礎から実践まで | Udemy
近年急速にJavaScript開発のスタンダードとなりつつあるReact.jsとReduxをゼロからコードを書きながら学べます。基本的な考え方から実用に耐え得るリファクタリングまでカバーしているので、すぐにでも実践で使えるようになります。
React + Reduxが学べるTrelloのクローンチュートリアル
上記のReduxチュートリアルよりも少し難し目で、簡単な構成を学んだ後にちょうどいいレベルかと思います。
あとは、react-beautiful-dndでコンポーネントのドラッグアンドドロップが学べるので楽しいです。
あとは、react-beautiful-dndでコンポーネントのドラッグアンドドロップが学べるので楽しいです。
Let's Create a Trello Clone with React + Redux // Part 1 - Project Setup and Folder Structure
via
www.youtube.com
Node.jsを覚える
Twilioでは基本的にサーバーサイド側はNode.jsで開発していきます。
Node.jsはサーバーサイドでJavaScriptを実行できるようにしてくれるものです。
Twilio FunctionではNode.jsのみしかサポートしていませんし、TwilioのサンプルコードではNode.jsで書かれていることが多いです。WebSocketなどのリアルタイム通信を実現する上で相性がいいです。
モダンなJavaScriptが書ければそこまでキャッチアップに苦労はしないと思いますので覚えておきましょう。
Node.jsはサーバーサイドでJavaScriptを実行できるようにしてくれるものです。
Twilio FunctionではNode.jsのみしかサポートしていませんし、TwilioのサンプルコードではNode.jsで書かれていることが多いです。WebSocketなどのリアルタイム通信を実現する上で相性がいいです。
モダンなJavaScriptが書ければそこまでキャッチアップに苦労はしないと思いますので覚えておきましょう。
その他
ここから先は特に順不同ですが、今後のTwilio Flex開発で必要になりそうなものを紹介します。
参考にしてください。
参考にしてください。
React Hooks
React Hooksを使うことで今までのReactよりも簡潔にコードをかけるようになります。
Twilio Flexの開発ではReactのバージョン16.5.2までのみサポートしているみたいなので執筆時点ではHooksが使えません。ただし、今後使えるようになるかもしれませんので、勉強しておいて損はないです。
参考URL
https://github.com/twilio/flex-plugin-builder/tree/master/packages/flex-plugin#react-versions
Twilio Flexの開発ではReactのバージョン16.5.2までのみサポートしているみたいなので執筆時点ではHooksが使えません。ただし、今後使えるようになるかもしれませんので、勉強しておいて損はないです。
参考URL
https://github.com/twilio/flex-plugin-builder/tree/master/packages/flex-plugin#react-versions
React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！ | Udemy
Vue.js Firebase Docker Gatsby などを抑え、なんと受講生の37.2%が次に学びたいと注目度の高い React Hooks 。複雑な状態管理をシンプルに且つ美しく実装するためのフロントエンド開発手法を身につけよう！
Full Stack Open 2019
Open online course on Javascript based modern web development by University of Helsinki and Houston Inc..
これは結構色んなところで良いと聞いて、Part3まではやってみました。
React は Hooks 前提で、Express.js × MongoDB さらに Jest を使ったテスト、Redux、GraphQL などのコンテンツもあり、全部やったら力はつきそうです。
React は Hooks 前提で、Express.js × MongoDB さらに Jest を使ったテスト、Redux、GraphQL などのコンテンツもあり、全部やったら力はつきそうです。
TypeScript
TypeScriptは、静的型付き言語です。特徴としては、ほとんどの言語機能をJavaScriptから継承していることです。TypeScriptのコードはJavaScriptに変換され、最終的にJavaScriptエンジンで実行されます。TypeScriptはJavaScriptの良いところを残しつつ、使いにくかったところを修正したJavaScriptの進化版みたいな感じです。特に大規模な開発になった時に効果を発揮するかと思います。
Using TypeScript with the Twilio Flex Agent UI Sample - Perficient Blogs
Twilio FlexでTypeScriptを試してみた記事
りあクト！ TypeScriptで始めるつらくないReact開発 第2版
ほとんどすべてのコードが TypeScript で書かれているのも特徴です。React を使う際に必要となる言語の知識や関数型プログラミングの考え方から、コンポーネントの原理、ルーティング、そして初心者にとって最大の難関となる Redux (Redux Sagaなど)までを解説しています。
りあクト！ TypeScriptで極める現場のReact開発
好評を博した React の本格的入門書『りあクト！ TypeScriptで始めるつらくないReact開発』の続編です。
「React 開発で綺麗な設計、綺麗なコード」というテーマはそのままに、ステップアップ編となる今作では、プロのエンジニアがチーム開発の現場で使える React の考え方や開発ツール、テスト方法（Jest,スナップショット,E2E）などを紹介しています。
Material-UI
Twilio Flexの標準のコンポーネントではMaterial-UIがいくつか使われています。
そのため、カスタマイズする際に新たにフルスクラッチで作らずに、React UI フレームワークであるMaterial-UIを使用してコンポーネントを作ることが勧められています。
そのため、カスタマイズする際に新たにフルスクラッチで作らずに、React UI フレームワークであるMaterial-UIを使用してコンポーネントを作ることが勧められています。
Installation - Material-UI
Install Material-UI, the world's most popular React UI framework.
Creating & Styling Custom Components - Twilio
Not every component you build needs to start from scratch. Existing React component libraries can help you use components that have already been built with browser compatibility, responsive screen sizes, and accessibility in mind. Internally, flex-ui leverages material-ui for many of its components. You can similarly use Material to create components that start with a similar style to Flex's existing layout.
GCP/Azure /AWS
Twilioでは他のクラウドサービスと連携することでさまざまな機能を実現できます。
例えば、電話を文字起こしするためにGCPやAWSなどのAPIと連携することができます。
また声紋認証などはAzureのAPIを使用することで実現可能かと思います。
例えば、電話を文字起こしするためにGCPやAWSなどのAPIと連携することができます。
また声紋認証などはAzureのAPIを使用することで実現可能かと思います。
Live Transcribing Phone Calls using Twilio Media Streams and Google Speech-to-Text - Twilio
Live Transcription of Phone Calls using Twilio Media Streams and Google Speech-to-Text with Node.js
Speaker Recognition API | Microsoft Azure
Azure の Speaker Recognition API では、音声を使用した声による認証や承認が可能です。デモをオンラインで試して、仕組みをご覧ください。
英語の勉強
Twilioで開発する際に英語は必須ではないのですが、ある程度できた方がよいかと思います。基本的に情報は英語ベースですし、Twilio社（日本支社以外）とのやり取りは英語になります。Google翻訳をどんどん使えばよいと思いますが、英語への抵抗感は少ないに越したことはないでしょう。
開発に詰まったときは？
Twilioの開発における情報は、現状あまり多くはありません。
英語の記事ならまだしも、日本語の情報はすごく少ないです。
なので、基本的には公式のドキュメントやTwilioのブログを参照しながら開発をします。
ただし、それでも開発に詰まってしまう場面に遭遇します。
そんな時にどうすればいいのかを以下に記載します。
英語の記事ならまだしも、日本語の情報はすごく少ないです。
なので、基本的には公式のドキュメントやTwilioのブログを参照しながら開発をします。
ただし、それでも開発に詰まってしまう場面に遭遇します。
そんな時にどうすればいいのかを以下に記載します。
Git HubのIssueに書き込んで直接質問する
こちらはvideo-quickstart-androidを試した際に分からないことがあったので、作成者であるTwilio社の海外のエンジニアに直接聞いてみました。返信は早いので、困ったら直接Twilioのエンジニアに聞いてみるのをお勧めします。
写真提供:The shared screen does not appear well from Chrome · Issue #473 · twilio/video-quickstart-android · GitHub
stackoverflowで質問をする
twilio-flexのタグあるのでここで質問できます。
自分は実際にしたことはないのですが、いくつかTwilio社の方が回答してくれていたりします。
自分は実際にしたことはないのですが、いくつかTwilio社の方が回答してくれていたりします。
Newest 'twilio-flex' Questions - Stack Overflow
twilio-flexのタグ
最後に
今回はTwilioの中でも自分が最近触っているTwilio Flexに関して学ぶべき技術要素を書きました。
特にモダンなJavaScriptについて未経験ですと結構色々と学ぶべきことが多くあります。
Twilio Flexをカスタマイズするには、まずは『ES6以降のJavaScriptを学ぶ、Twilio Flexのチュートリアルを行う、Reactの簡単なチュートリアルを行う』のが良いかと思います。
今回は取り上げませんでしたが、他にもさまざまな技術要素があります。例えば、既存のコールセンター構築に関する技術や、Twilio VideoではWeb RTCといった技術が使われていたり、Send Gridが提供しているメールなど扱う技術は多岐に渡ります。
色んな技術を触ってみたいエンジニアとってTwilioでの開発は魅力的のものではないでしょうか。
今後もキャッチアップしつつ情報発信をしていきたいと思います。
特にモダンなJavaScriptについて未経験ですと結構色々と学ぶべきことが多くあります。
Twilio Flexをカスタマイズするには、まずは『ES6以降のJavaScriptを学ぶ、Twilio Flexのチュートリアルを行う、Reactの簡単なチュートリアルを行う』のが良いかと思います。
今回は取り上げませんでしたが、他にもさまざまな技術要素があります。例えば、既存のコールセンター構築に関する技術や、Twilio VideoではWeb RTCといった技術が使われていたり、Send Gridが提供しているメールなど扱う技術は多岐に渡ります。
色んな技術を触ってみたいエンジニアとってTwilioでの開発は魅力的のものではないでしょうか。
今後もキャッチアップしつつ情報発信をしていきたいと思います。
Twilio | SMS、音声、LINEと繋がるコミュニケーションAPI | 株式会社テラスカイ
Twilioは電話やテキストメッセージ、FAX、Eメール、チャット、ビデオ通話など、さまざまな通信手段をAPI経由で利用できるコミュニケーションプラットフォームです。Twilio導入の際は、ぜひご検討ください。
64 件
