Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
お部屋探しアプリ「Canary」に Twilio API を使って アプリ内通話機能を実装した...
Search
BluAge Developers
October 08, 2022
Programming
0
1.1k
お部屋探しアプリ「Canary」に Twilio API を使って アプリ内通話機能を実装した話 / MagicPodでE2Eテストを実装した話
React Native Matsuri 2022 に登壇した際のスライドです。
BluAge Developers
October 08, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
PicoRuby on Rails
makicamel
2
120
GraphRAGの仕組みまるわかり
tosuri13
8
530
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
750
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
150
C++20 射影変換
faithandbrave
0
570
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
340
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
910
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
160
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
10k
5つのアンチパターンから学ぶLT設計
narihara
1
160
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Balancing Empowerment & Direction
lara
1
410
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Visualization
eitanlees
146
16k
Scaling GitHub
holman
459
140k
Code Reviewing Like a Champion
maltzj
524
40k
Raft: Consensus for Rubyists
vanstee
140
7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Designing Experiences People Love
moore
142
24k
Documentation Writing (for coders)
carmenintech
72
4.9k
Transcript
お部屋探しアプリ「Canary」に Twilio API を使って アプリ内通話機能を実装した話 MagicPodでE2Eテストを実装した話
自己紹介 • 中野 辰典 (Tatsunori Nakano) • 札幌在住 • 2021年12月
株式会社BluAge 入社 • ソフトウェアエンジニア • 最近ゴルフをはじめました
お部屋探しアプリ「Canary」にTwilio APIを使って アプリ内通話機能を実装した話
賃貸物件検索 カナリー(Canary)物件探しアプリ ★4.7とカテゴリ内で 最高評価!
改めてCanaryとは • お部屋探しアプリ • ユーザーはお問い合わせをする
お問い合わせ方法 もっとすぐに確認したい! というユーザーの声があった • 名前やメールアドレスを入力して送信 • 仲介会社からの連絡を待つ
電話問い合わせの機能を作りたい!
こういう機能を作りたい 物件画面の「電話でお問い合わせ」ボタンから不動産会社に直接電話で問い合わせできる
機能要件 • アプリ内から直接電話できるアプリ内通話であること • ユーザーの電話番号は仲介会社に知られないこと ◦ 個人情報の観点から ◦ 安心して問い合わせできるように •
ユーザーに通話料金が発生しないこと
どうやって実現するか
実現できそうなサービス • AdSiP • CallTracker • Twilio • Vonage Twilio
に決定 選定理由: コスト面が断トツによかった
Twilio 詳細 • 電話・SMS・ビデオ通信・チャットなどのさま ざまなコミュニケーションチャネルを APIとし て提供する CPaaS • Twilioのコード(≒API)を組み合わせてシス
テムに組み込むことで、最小限のコードで開 発可能 • iOS, Android, Web それぞれ対応 • 初期費用なし • 従量課金制
Programmable Voice • 音声通話を行うためのサービス • 電話の発着信、自動音声応答など電話に関 するあらゆる機能をプログラムでコントロー ルできる • 通話料は従量課金
Programmable Voice の利用料金 • 電話番号の維持費は1ヶ月110円 • 固定電話への発信: 5.5円/1分
実装
全体像 ユーザー 仲介会社 Canary サーバー 電話問い合わせ ※BluAge側で購入した電話番号に発信される 指示をリクエスト TwiML: 指定の番号に発信するよう命令
仲介会社に発信 ※BluAge側で購入した電話番号から発信される
TwiML とは リクエスト先の URLを指定 • TwiML ( Twilio Markup Language
) は電話(またはSMS)を受信したときに何をすべきかを Twilio に指示するために使用 できる命令のセットです。 • Twilio によって定義された特別なタグを含むXMLドキュメントです。 • 誰かが Twilio 番号の 1 つに電話をかけると、Twilio はその電話番号に関連付けられた URL にリクエストします。そして返 されたTwiML 命令を読み取り、指定の番号に発信、録音、メッセージを再生、などを判断します。 ※レスポンス例 XMLで命令が返される
アプリ側で必要な実装 ユーザー 電話問い合わせ ※BluAge側で購入した電話番号に発信される • 発信する • 電話を切る • ミュートにする
• スピーカーに切り替える • 「プルル・・」という発信音を出す • 「お繋ぎします」というアナウンスを出す • 相手が通話中の場合にアナウンスを流す etc…
React Native でどう実装するか
公式のSDK React Native用のSDKはない🥺
公式以外で検討したライブラリ: React Native Twilio Phone 有志が作っているライブラリ👀 https://www.npmjs.com/package/react-native-twilio-phone
公式が用意しているiOS, Android用のSDKを使ってネイティブモジュールで実装する (そしてまずiOSを先行してリリースすることに📱) 方針決定
voice-quickstart-ios / ObjcVoiceQuickstart Swift用がメインで用意されているが、Obj-Cの方が書き慣れているので ObjcVoiceQuickstart を参考に進めることに
ViewController をベースにネイティブモジュールの作成 ViewController に電話操作に関するメソッドが詰まっている ViewController を RCTTwilioModule としてネイティブモジュールにする
ViewController.m RCTTwilioModule.m 発信用の メソッド builder.params でリクエスト時に含めるパラメータを設定できる ここに仲介業者を特定できる情報を渡すことで、サーバー側で電話番号を指定した TwiMLを返せる ほぼそのまま使える
ユーザー 仲介会社 Canary サーバー builder.params で仲介会社情報を渡す params が渡される 発信用のTwiMLが返される 仲介会社に発信
※BluAge側で購入した電話番号から発信される A不動産だな 番号は03-xxxx-yyyyだ A不動産に電話しよ 発信の流れ
ViewController.m RCTTwilioModule.m ミュート 電話を切る スピーカー
作成したネイティブモジュールを使う 完成したネイティブモジュールを発信、通話中のコンポーネント内で使う
ViewController.m RCTTwilioModule.m 通話中を取得 通話中の場合に返される “Busy Here” をキャッチしたら ”sendEventWithName” でイベントを送る ※参考:
https://www.twilio.com/docs/api/errors/31486
NativeEventEmitter でイベントを拾う sendEventWithNameで送られたイベントはNativeEventEmitterで拾い、 「通話中」などのステータスを扱えるようにする
実際に動かしてみる
補足: Podfile Podfile に左の一文を追加する必要があります
補足: 暗号化されたアクセストークンの復号化用のネイティブモジュール Twilioに接続するにはアクセストークンが必要。 バックエンド側で生成し、セキュリティの観点から AES-CTRで暗号化してからアプリ側に返している。 アプリ側での複号化が必要になるが、JSでおこなうのはパ フォーマンス面に影響が出そうだったためネイティブモ ジュールを作成。 ※https://github.com/ywzqhl/imToken/blob/7d9ae8069ebc605f92d87b b81194d67a3772d7bd/imToken/ETHAES128.m
を参考に作成 ※https://github.com/tectiv3/react-native-aes というOSSがあったがCTR モードに非対応だったためお見送り
まとめ
まとめ • Twilioを使えばアプリ内通話機能を簡単に実装できる • 数ある電話サービスの中でもTwilioはコスパがいい • TwilioにはReact Native用のSDKは無いが、 iOS, Android用のSDKをネイティブモジュールとして扱う
ことで実装できる
MagicPodでE2Eテストを実装した話
MagicPod とは • ノーコードE2Eテスト自動化サービス • モバイルアプリテスト、ブラウザ(ウェブア プリ)テストの両方に対応 • 低コスト(¥39,800円/月〜) •
テスト実行回数 無制限
React NativeにおけるE2Eテストの選択肢と選定理由 • React Native公式ドキュメント ◦ Detox ◦ Appium https://reactnative.dev/docs/testing-overview#end-to-end-tests
• メンテコストを抑えたい • 今後エンジニア以外でも触れるようにしたい → ノーコード コストの比較 → MagicPod に決定 • ノーコード ◦ Autify ◦ MagicPod
テスト戦略
テスト戦略 ここのテストを頑張っていることが前提 💪 E2Eテストはクリティカルな箇所のみ、必要最低限にしてメンテコストを抑える 「検索」や「問い合わせ」など根幹となる機能のみをテスト
テスト作成
テスト作成手順: EAS Build EAS Build でビルドしたファイルをダウンロードする
テスト作成手順: MagicPodにアップロード MagicPod上で起動する
テスト作成手順: 検出した要素からシナリオを作成 要素をドラッグ&ドロップで簡単にシナリオを作成 要素を検出
テスト作成手順: さまざまな操作 画面操作 条件分岐 待機 変数 要素の確認 画面入力 etc…
テスト作成手順: 共有ステップ 「共有ステップ」を作成することで複数のシナリオで使いまわせる
テスト実行: すべてのシナリオを一括実行 複数のシナリオを一括実行。結果はメールでも届く
テスト実行: AIによる自動修正 予期せぬことで落ちそうになっても、AIによる自動修正が入ってくれる場合がある
実際に動かしてみる
まとめ
まとめ なによりE2Eテストを入れるだけで心理的にかなり楽になりますので、 工数がネックで導入に踏み切れていない場合、 ノーコードでコスパ最強のMagicPodはおすすめです • ブラウザ上でポチポチするだけでテスト作成で きるのは楽 • エンジニア以外でもメンテナンスできそう •
コスパがいい
さいごに
エンジニア積極採用中!! 不動産DX業界で急成長中のスタートアップ BluAgeで一緒に働きませんか?
エンジニア積極採用中!! YAMADA HLDGS.との総額約10億円の資本業務提携を締結 これまでにない新しいお部屋探しを作り上げていく仲間を募集中です! 出資 カナリーPFにおけるシナジー創出 出資 DX支援
エンジニア積極採用中!! Meetyでカジュアルにお話ししませんか?
エンジニア積極採用中!! Meetyでカジュアルにお話ししませんか?
ご清聴ありがとうございました