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

Transcript

1. Twilio SDKをFlutterアプリに
   統合した話

   1
   みんなのマーケット株式会社

   エンジニア・リュウ

   

   View Slide

2. 2
   2021年頃、
   弊社が運営しているアプリ「店舗管理システ
   ム」をFlutterという技術へリプレースしまし
   た。
   

   View Slide

3. 3
   Flutter（フラッター）は、Googleによって開発されたフリーかつオープンソー
   スのUIのSDKである。
   単一のコードベースから、Android、iOS、Linux、macOS、Windows、
   Google Fuchsia向けのクロスプラットフォームアプリケーションを開発する
   ために利用される。
   -- Wikipedia
   Flutterとは？
   

   View Slide

4. 4
   Flutterを利用すると
   - iOS/Android両OS向けのアプリを一つのコード
   で作成できる
   - Hot Reloadによりスムーズなレイアウト構築が
   可能
   などの理由で、Flutterへのリプレースを決めました。
   しかし、リプレース作業を進める中で一つの課題に
   遭遇しました。
   

   View Slide

5. どんな課題があったのか
   5
   電話機能で使われているTwilioというサービスは
   Flutterをサポートしていない
   

   View Slide

6. 背景
   6
   ❏ Twilio公式ではFlutterアプリ向けのSDKを提供していない
   ❏ 送受信処理（APNS/FCM）はネイティブ側に実装されている
   ❏ Flutter側で電話機能を実装するのは未だにできない
   

   View Slide

7. 実現したいこと
   7
   ❏ Flutterで通話画面のUIを作りたい
   ❏ ネイティブ側のコードをそのまま使いまわしたい
   ❏ そのため、Flutter側でもネイティブ側の送受信処理を実行でき
   るようにしたい
   

   View Slide

8. どうやって解決したのか
   8
   MethodChannelを利用した
   Flutterには、MethodChannelというFlutter側とプラットフォーム側の相互通信を実
   現するためのAPIが用意されています。
   このAPIを使用することで、Flutter（Dart側）でもネイティブ（iOS/Android側）の通話
   処理を実行できるようになるのでは？
   

   View Slide

9. 9
   1. MethodChannelを作成し、通信チャンネルを確立します。
   2. invokeMethodを使用してネイティブ側のメソッドを非同期で呼
   び出します。この際、メソッド名とデータを引数として渡します。
   3. 受け取ったデータを解析し、対象の処理を実行します。その後、
   結果をEventChannelを介してDart側に返します。
   実装の流れ
   このように、MethodChannel経由でFlutterとネイティブ間のデータのやり取りが可能になりました。
   

   View Slide

10. 10
    MethodChannelを使用すると、Flutterアプリでもプラット
    フォーム固有の機能を利用できます。
    電話だけでなく、Bluetooth、加速度センサー、ストレージ
    やファイルアクセスなどの機能もこの方法で実装可能で
    す。
    Flutterで開発しようかと考えている方に、ご参考になれば
    幸いです。
    おわりに
    

    View Slide

11. 会社紹介

    11
    

    View Slide

12. 私たちのプロダクト
    生活の「困った」を解決できるプロが集まる
    プラットフォーム「くらしのマーケット」
    頼める出張サービスの種類
    事業者の数
    300種類以上！

    70,000事業者を突破！

    エアコンクリーニング、引越し、庭木剪定..などの生活関連サービス
    日本全国の事業者が登録、売上を伸ばしている
    12
    

    View Slide

13. 私たちのビジョン
    正直者が馬鹿を見ない世界を作る

    テスト前に必死で勉強したのに、先輩から過去問をもらっていた友達が自分よりいい成績を取った…
    

    会社のことを思って地味な仕事も引き受けてきたのに、上司に気に入られている同期が昇進した…
    

    

    世の中では、不条理なことが起きます。
    

    でも、悪賢い人が得をして、正直な人が損をする世界なんて嫌です。
    

    

    江戸時代の思想家、石田梅岩は「二重の利を取り、甘き毒を喰ひ、自死するようなこと多かるべし」
    

    つまり、悪賢い者には必ず報いがあると説きました。
    

    さらに「実の商人は、先も立ち、我も立つことを思うなり」とも表し、
    

    まず相手の利害を優先し、その結果として自身も利益を得ることが商人の本文だと説きました。
    

    

    私たちは、先も立ち、我も立つ、正直な人が報われる世の中を作ります。
    

    13
    

    View Slide

14. 私たちのミッション
    「人と人」が関わるサービスを、

    安心して取引できる仕組みを提供する

    私たちは、くらしのマーケットを通じて、
    

    世の中のあらゆるサービスをインターネットで安心して取引できる仕組みを提供していきます。
    

    インターネットでモノを買う時、みんなが楽天市場やAmazonを利用するように、
    

    サービスを買う時は、みんながくらしのマーケットを利用してくれる…そんな世界を目指します。
    

    

    多くのベンチャー企業が、自社の成長をアピールしますが、いちばん重要なことは、
    

    その会社がその時に「どれだけ成長しているか」ではなく、その会社が今後「どこまで成長できるか」です。
    

    

    みんなのマーケットは巨大な市場に挑んでいます。私たちと一緒に、大きく成長していきましょう。
    

    14
    

    View Slide

15. 書いた人
    2019年 モバイルエンジニアとして、みんなのマーケット入社

    2020～2021年 Flutterへのリプレースをリード

    現在はFlutter/iOS/Android全般の開発をしています。

    リュウ
    エンジニア
    15
    

    View Slide