2020.03.16

【初心者向け】完全未経験からTwilio(Twilio Flex)でモダンな開発を始めるまで

  • このエントリーをはてなブックマークに追加
  • follow us in feedly
gettyimages (14917)

はじめに

皆さま、こんにちは。

テラスカイに入社して、もう少しで3年目になる上川です。

自分は入社してから1年ほどSalesforce開発に携わり、去年の9月くらいからTwilioの開発をはじめました。

お恥ずかしながら、正直それまではTwilioの名前も全く知りませんでした。
初めて聞いたときは、名前が似てるので「何かTwitterのサービスかな?」ぐらいに思っていたほどの自分ですが、Twilioの開発をはじめてからどんな事を勉強したのかをお伝えたしたいと思います。

・ Twilioに興味がある方
・ ReactやNode.jsなどを用いたモダンなフロントエンドやバックエンドの開発に興味がある方
・ コンタクトセンター構築に興味がある方


ぜひ、このような方々のご参考にしていただければ嬉しいです。

未経験ってどんなレベル?

入社してからSalesforceの開発を主にしていたので、技術要素としてはApexとVisualfoce、あとは多少のHtmlとCSS、たまにjavascriptかjQueryを数行書いてDOM操作を少しだけするといった感じです。

どちらかというとサーバーサイドよりですので、Reactを用いたモダンなフロントエンドの開発は完全未経験ですし、JavaScriptの標準規格であるES2015(ES6)って何それ??という状態でした。

またコールセンター周りの技術要素である、SIPやPBXなども全くの未経験でした。

つまり、Twilio周りについて何も知らなかったのですが、技術的に面白そうだったのでとりあえず気合いと勢いだけでTwilioの世界に飛び込んで行きました。

Twilio Flexの紹介

今回はこちらのTwilio Flexという次世代クラウド型コンタクトセンターをカスタマイズするために学ぶべき技術について書きたいと思います。
以下はTwilioのYoutubeチャンネルに投稿されているTwilio Flexの紹介動画になります。
Twilio Flexの概要が分かる動画となっていますので、是非一度ご覧ください。

Getting Started with Twilio Flex

未経験からデモ作成までにやったこと

今回はTwilio Flexのデモを一通り自力で作れるレベルまでにやる事を想定しています。
自分は実際にこの順番にやった訳ではないのですが、改めて見てやった方がよい順に記載します。

Twilioを学ぶ

自分の場合は、Twilioの研修に2回参加しました。

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で書かれているので、覚えておいた方がいいでしょう。

16: Topics of JavaScript/ES6-ES8 - p5.js Tutorial

JavaScript/ES6-ES8が学べるチュートリアル動画 海外のYouTuberの人で、面白く授業してくれるので飽きないです。 自分はこれを見て学びました。

React / Reduxを覚える

Twilio Flexをカスタマイズする際にゴリゴリ、Reactで開発します。
ReactとはFacebookが作成した、UIのパーツを作ったりコンポーネント単位で状態を持ったりできる、JavaScriptのフレームワークです。
ReduxはReactが扱うUIの状態を切り離して、別の専用のStoreで管理するためのフレームワークです。
実運用に耐えうる設計をする上でReduxも必須になるかと思います。

React + Reduxが学べるTrelloのクローンチュートリアル

上記のReduxチュートリアルよりも少し難し目で、簡単な構成を学んだ後にちょうどいいレベルかと思います。
あとは、react-beautiful-dndでコンポーネントのドラッグアンドドロップが学べるので楽しいです。

Let's Create a Trello Clone with React + Redux // Part 1 - Project Setup and Folder Structure

Node.jsを覚える

Twilioでは基本的にサーバーサイド側はNode.jsで開発していきます。
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

TypeScript

TypeScriptは、静的型付き言語です。特徴としては、ほとんどの言語機能をJavaScriptから継承していることです。TypeScriptのコードはJavaScriptに変換され、最終的にJavaScriptエンジンで実行されます。TypeScriptはJavaScriptの良いところを残しつつ、使いにくかったところを修正したJavaScriptの進化版みたいな感じです。特に大規模な開発になった時に効果を発揮するかと思います。

Material-UI

Twilio Flexの標準のコンポーネントではMaterial-UIがいくつか使われています。
そのため、カスタマイズする際に新たにフルスクラッチで作らずに、React UI フレームワークであるMaterial-UIを使用してコンポーネントを作ることが勧められています。

GCP/Azure /AWS

Twilioでは他のクラウドサービスと連携することでさまざまな機能を実現できます。
例えば、電話を文字起こしするためにGCPやAWSなどのAPIと連携することができます。
また声紋認証などはAzureのAPIを使用することで実現可能かと思います。

英語の勉強

Twilioで開発する際に英語は必須ではないのですが、ある程度できた方がよいかと思います。基本的に情報は英語ベースですし、Twilio社(日本支社以外)とのやり取りは英語になります。Google翻訳をどんどん使えばよいと思いますが、英語への抵抗感は少ないに越したことはないでしょう。

開発に詰まったときは?

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の中でも自分が最近触っているTwilio Flexに関して学ぶべき技術要素を書きました。
特にモダンなJavaScriptについて未経験ですと結構色々と学ぶべきことが多くあります。
Twilio Flexをカスタマイズするには、まずは『ES6以降のJavaScriptを学ぶ、Twilio Flexのチュートリアルを行う、Reactの簡単なチュートリアルを行う』のが良いかと思います。
今回は取り上げませんでしたが、他にもさまざまな技術要素があります。例えば、既存のコールセンター構築に関する技術や、Twilio VideoではWeb RTCといった技術が使われていたり、Send Gridが提供しているメールなど扱う技術は多岐に渡ります。
色んな技術を触ってみたいエンジニアとってTwilioでの開発は魅力的のものではないでしょうか。
今後もキャッチアップしつつ情報発信をしていきたいと思います。
64 件
     
  • banner
  • banner

関連する記事