Twillio SDKをFlutterアプリに統合した話/twilio-in-flutter

引越しや庭木の剪定などの出張・訪問サービスのプラットフォーム「くらしのマーケット」を運営する、みんなのマーケット株式会社です。
今回は、FlutterとTwilio SDKの統合について解説しています。Flutterで開発しようかと考えている方に、ご参考になれば幸いです。

Transcript

1. Twilio SDKをFlutterアプリに 統合した話
 1 みんなのマーケット株式会社
 エンジニア・リュウ

2. 2 2021年頃、 弊社が運営しているアプリ「店舗管理システ ム」をFlutterという技術へリプレースしまし た。
3. 3 Flutter（フラッター）は、Googleによって開発されたフリーかつオープンソー スのUIのSDKである。 単一のコードベースから、Android、iOS、Linux、macOS、Windows、 Google Fuchsia向けのクロスプラットフォームアプリケーションを開発する ために利用される。 -- Wikipedia Flutterとは？
4. 4 Flutterを利用すると - iOS/Android両OS向けのアプリを一つのコード で作成できる - Hot Reloadによりスムーズなレイアウト構築が 可能 などの理由で、Flutterへのリプレースを決めました。 しかし、リプレース作業を進める中で一つの課題に 遭遇しました。
5. どんな課題があったのか 5 電話機能で使われているTwilioというサービスは Flutterをサポートしていない
6. 背景 6 ❏ Twilio公式ではFlutterアプリ向けのSDKを提供していない ❏ 送受信処理（APNS/FCM）はネイティブ側に実装されている ❏ Flutter側で電話機能を実装するのは未だにできない
7. 実現したいこと 7 ❏ Flutterで通話画面のUIを作りたい ❏ ネイティブ側のコードをそのまま使いまわしたい ❏ そのため、Flutter側でもネイティブ側の送受信処理を実行でき るようにしたい
8. どうやって解決したのか 8 MethodChannelを利用した Flutterには、MethodChannelというFlutter側とプラットフォーム側の相互通信を実 現するためのAPIが用意されています。 このAPIを使用することで、Flutter（Dart側）でもネイティブ（iOS/Android側）の通話 処理を実行できるようになるのでは？
9. 9 1. MethodChannelを作成し、通信チャンネルを確立します。 2. invokeMethodを使用してネイティブ側のメソッドを非同期で呼 び出します。この際、メソッド名とデータを引数として渡します。 3. 受け取ったデータを解析し、対象の処理を実行します。その後、 結果をEventChannelを介してDart側に返します。 実装の流れ このように、MethodChannel経由でFlutterとネイティブ間のデータのやり取りが可能になりました。
10. 10 MethodChannelを使用すると、Flutterアプリでもプラット フォーム固有の機能を利用できます。 電話だけでなく、Bluetooth、加速度センサー、ストレージ やファイルアクセスなどの機能もこの方法で実装可能で す。 Flutterで開発しようかと考えている方に、ご参考になれば 幸いです。 おわりに
11. 会社紹介
 11
12. 私たちのプロダクト 生活の「困った」を解決できるプロが集まる プラットフォーム「くらしのマーケット」 頼める出張サービスの種類 事業者の数 300種類以上！
 70,000事業者を突破！
 エアコンクリーニング、引越し、庭木剪定..などの生活関連サービス 日本全国の事業者が登録、売上を伸ばしている 12
13. 私たちのビジョン 正直者が馬鹿を見ない世界を作る
 テスト前に必死で勉強したのに、先輩から過去問をもらっていた友達が自分よりいい成績を取った… 
 会社のことを思って地味な仕事も引き受けてきたのに、上司に気に入られている同期が昇進した… 
 
 世の中では、不条理なことが起きます。 
 でも、悪賢い人が得をして、正直な人が損をする世界なんて嫌です。 
 
 江戸時代の思想家、石田梅岩は「二重の利を取り、甘き毒を喰ひ、自死するようなこと多かるべし」 
 つまり、悪賢い者には必ず報いがあると説きました。 
 さらに「実の商人は、先も立ち、我も立つことを思うなり」とも表し、 
 まず相手の利害を優先し、その結果として自身も利益を得ることが商人の本文だと説きました。 
 
 私たちは、先も立ち、我も立つ、正直な人が報われる世の中を作ります。 
 13
14. 私たちのミッション 「人と人」が関わるサービスを、
 安心して取引できる仕組みを提供する
 私たちは、くらしのマーケットを通じて、 
 世の中のあらゆるサービスをインターネットで安心して取引できる仕組みを提供していきます。 
 インターネットでモノを買う時、みんなが楽天市場やAmazonを利用するように、 
 サービスを買う時は、みんながくらしのマーケットを利用してくれる…そんな世界を目指します。 
 
 多くのベンチャー企業が、自社の成長をアピールしますが、いちばん重要なことは、 
 その会社がその時に「どれだけ成長しているか」ではなく、その会社が今後「どこまで成長できるか」です。 
 
 みんなのマーケットは巨大な市場に挑んでいます。私たちと一緒に、大きく成長していきましょう。 
 14
15. 書いた人 2019年 モバイルエンジニアとして、みんなのマーケット入社
 2020～2021年 Flutterへのリプレースをリード
 現在はFlutter/iOS/Android全般の開発をしています。
 リュウ エンジニア 15