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