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
電話を切らさない技術 電話自動応答サービスを支える フロントエンド
Search
sagawa / barometrica
November 23, 2024
Technology
2
2.9k
電話を切らさない技術 電話自動応答サービスを支える フロントエンド
2024/11/23
JSConf.jp 2024
https://jsconf.jp/2024/talk/ivry/
こちらで登壇した際の資料です。
sagawa / barometrica
November 23, 2024
Tweet
Share
More Decks by sagawa / barometrica
See All by sagawa / barometrica
無理のない旗振りのコツ -ししとうLT #3 -
barometrica
3
260
Other Decks in Technology
See All in Technology
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
130
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
130
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
530
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
180
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
160
エンジニアが加速させるプロダクトディスカバリー 〜最速で価値ある機能を見つける方法〜 / product discovery accelerated by engineers
rince
4
530
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
690
2025-02-21 ゆるSRE勉強会 Enhancing SRE Using AI
yoshiiryo1
1
450
わたしのOSS活動
kazupon
2
330
Amazon Aurora のバージョンアップ手法について
smt7174
1
110
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
250
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
1.5k
Featured
See All Featured
Optimizing for Happiness
mojombo
376
70k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
The Cult of Friendly URLs
andyhume
78
6.2k
Thoughts on Productivity
jonyablonski
69
4.5k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Site-Speed That Sticks
csswizardry
4
400
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Unsuck your backbone
ammeep
669
57k
Building an army of robots
kneath
303
45k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Transcript
電話を切らさない技術 電話⾃動応答サービスを⽀える フロントエンド JSConf.jp 2024, 2024-11-23 佐川 善彦
⾃⼰紹介 佐川 善彦(さがわ よしひこ) Software Engineer クライミング‧DJ 趣味 2013 メーカーに新卒⼊社、産業機器を設計
2019 SWエンジニアに転向、受託開発 2023 IVRyに⼊社、Frontend主軸に⾃社開発 @barometrica
オフィスに壁とDJ機材、あります!
さて、突然ですが
ブラウザから電話をかけたことがある⼈ ✋
ブラウザから電話をかけたことがある⼈ ✋
今⽇はブラウザ通話を⽀える フロントエンドについてお話します
話すこと アーキテクチャ React / Next.js … 話さないこと PJマネジメント WebRTC …
⽬次 1. IVRy について 2. ブラウザ通話について 3. ブラウザ通話を⽀えるフロントエンド 4. IVRy
のこれから
IVRy について
電話⾃動応答サービス IVRy • ⽉額2,980円から電話の⾃動応答ルールを簡単に作成 • 全ての電話業務を誰でもすぐにAIを使って効率化
IVRyが向き合う課題 電話はいまでも最重要連絡⼿段
IVRyが向き合う課題 電話を当たり前に取れない時代
IVRyが提供するサービス 電話業務を⾃動化‧効率化 ダイヤルプッシュと AI の対話をハイブリッドで設定
IVRyが提供するサービス 様々なサービスを提供していますが …
IVRyが提供するサービス 今⽇はブラウザ通話について話します …
ブラウザ通話について
ブラウザ通話とは ブラウザ上で電話の受発信を可能にするサービス • 電話をかける発信、電話を受ける受信のいずれもブラウザで可能 • インターネット回線を通じて電話をすることができる「IP電話」により 実現されるサービス • 050番号のほか、市外局番(0ABJ番号)でも通話することが可能
IVRy でのシステム構成 Twilio と⾃社サーバを介して受発信
ブラウザ通話のフロー ブラウザで受電する場合
事前接続 受電時の フロー ブラウザ通話のフロー ブラウザで受電する場合
電話のプロダクトとして⼤事なこと 「電話はつながって当たり前」 を提供すること
電話のプロダクトとして⼤事なこと 「電話はつながって当たり前」 を提供すること ブラウザ通話もつながって当然 のはずなのですが‧‧‧ ↓
• 過去の通話履歴の参照など、通話中に画⾯操作したいケースは多い ブラウザ通話の失敗談 失敗談①:画⾯遷移で通話が切れる
ブラウザ通話の失敗談 失敗談②:店舗切り替えで通話が切れる • IVRy は⼀つのアカウントで別の店舗に切り替えることができる • 切替時に店舗情報を⼀度初期化する必要があるが、 このときに通話も切れてしまっていた
電話のプロダクトとして⼤事なこと 「ブラウザ通話もつながって当たり前」 を提供し続けるための⼯夫が必要
ブラウザ通話を⽀えるフロントエンド
ブラウザ通話を⽀えるフロントエンド:アーキテクチャ Next.js:Pages Router + SSG AWS S3 + CloudFront でホスティング‧配信
‧Pages Router ‧SSG ‧ブラウザ通話可能なページは いずれもSPA
ブラウザ−Twilio 間の接続を維持することが重要 ブラウザ通話をつながって当たり前にするには? • うっかり切れてしまうことのないように、構造的に維持したい ◦ → Layout Pattern を利⽤
ブラウザ通話を⽀えるフロントエンド:接続の維持 • 複数ページにまたがる共通コンポーネントを Layout として切り出し • ページごとに Layout 指定 •
同じ Layout の画⾯に遷移する際、 共通コンポーネントを再レンダリングさせない Layout Pattern Header Page1 Header Page2 Header Page3
ブラウザ通話を⽀えるフロントエンド:接続の維持 export function Layout({ children }) { return ( <>
<Header /> <main>{children}</main> </> ) } components/Layout.tsx export function Page1() { return ... } Page.getLayout = function getLayout(page) { return <Layout>{page}</Layout> } pages/page1.tsx Header Page1 Layout Layout Pattern
ブラウザ通話を⽀えるフロントエンド:接続の維持 • Layout に切り出すことでページ操作による通話処理への影響を排除 ◦ 各画⾯の開発時の通話処理への考慮事項も削減 • ブラウザ通話の使⽤可否も Layout の呼び分けで対応可能に
Layout に通話処理を切り出して接続状態を保持 Page1 Page2 Page3 CallConainer ‧通話処理 ‧接続保持 ‧... CallConainer ‧通話処理 ‧接続保持 ‧... CallConainer ‧通話処理 ‧接続保持 ‧...
ブラウザ通話を⽀えるフロントエンド:接続の維持 Page1 pages/page1.tsx components/LayoutForCall.tsx export function LayoutForCall({ children }) {
return ( <CallContainer> {children} </CallContainer> ) } export function HogePage() { return ... } HogePage.getLayout = function getLayout(page) { return <LayoutForCall>{page}</LayoutForCall> } LayoutForCall CallConainer ‧通話処理 ‧接続保持 ‧... Layout に通話処理を切り出して接続状態を保持
• 複雑さの要因 ◦ 外部サービス(Twilio)の SDK が React ⽤に作られていない ◦ 保持すべき状態の数が多い
• 複雑さによるリスク ◦ 何か不具合があった場合の影響範囲の特定が難化 ◦ 開発の属⼈化 ◦ 機能改善の速度低下 ブラウザ通話を⽀えるフロントエンド:メンテナンス 通話ロジックは複雑になりやすい 保守性を担保したい : 凝集性‧結合性を守りたい
ブラウザ通話を⽀えるフロントエンド:メンテナンス features ディレクトリに通話ロジックを集約 • ただディレクトリに集約しただけでは意図しない形で使われる危険性あり ◦ → Linter のカスタムルールで凝集性‧結合性を担保 .
├── src │ ├── features │ │ ├── call │ │ │ ├── index.ts │ │ │ ├── components │ │ │ │ ├── CallContainer │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── hooks.ts
ブラウザ通話を⽀えるフロントエンド:メンテナンス Linter で意図しない外部アクセスを制限 const generateFeatureAccessRules = () => fs .readdirSync(path.join(__dirname,
'src', 'features'), { withFileTypes: true, }) .filter((dirent) => dirent.isDirectory()) .flatMap((dirent) => [ { module: `src/features/${dirent.name}/**/*`, allowReferenceFrom: [], allowSameModule: true, }, { module: `src/features/${dirent.name}/index.[jt]s{,x}`, allowReferenceFrom: [''], }, ]) .eslintrc.js • 指定したコンポーネントのみ利⽤できるようにして保守性担保 export { CallContainer } from './components/CallContainer' export { CallConfirmModal } from './components/CallConfirmModal' ... features/call/index.ts features ディレクトリ直下の index.ts で export したもののみ ディレクトリ外から参照可
IVRy のこれから
• 正式リリースから4年、プロダクト規模も開発陣も拡⼤の⼀途 • エンジニアの数は3年で 2名から34名へ • 導⼊業界は 94/99 業界に拡⼤ =
解決したい課題も拡⼤ ◦ → これから①:フロントエンド基盤改善 ◦ → これから②:新機能開発 IVRy の現状 IVRy は急拡⼤のまっただ中 ※⽇本標準産業分類(令和5年)の中分類99業種をもとに計測
IVRy のこれから • リファクタリング ◦ 歴史的経緯による「割れ窓」を直していきたい ◦ 誰でもフロントエンドを触りやすい環境にしていきたい • ⾃動テスト
◦ ⼈⼒の QA に頼っている状況 ◦ ブラウザ通話の振る舞いも⾃動でテストしていきたい • パフォーマンス ◦ 最近だとウェブフォント最適化とか • アクセシビリティ • デザインシステム • … これから①:フロントエンド基盤改善
IVRy のこれから これから②:新機能開発 通話相⼿ ⼀次受け+保留 転送先 • 例1: 保留転送 ◦
さらに複雑化する通話ロジックを いかにシンプルに保つか? ◦ 保留時のUXはどうあるべきか? • 例2: FAX ◦ 「FAXの当たり前」を ブラウザでどう提供するか? ◦ 当たり前をどう超えていくか? FAX相⼿
まとめ • ブラウザ通話で⼤事なこと ◦ 「つながって当たり前」を提供すること • ブラウザ通話を⽀えるフロントエンド ◦ Layout に通話処理を切り出すことで
画⾯操作の影響なく接続を維持することが可能に ◦ 複雑な通話ロジックを features ディレクトリに集約、 また Linter によるアクセス制御で構造的に保守性を担保 • IVRy のこれから ◦ 急拡⼤に伴い新機能開発‧基盤整備などやっていき!
【宣伝1】エンジニア忘年 LT 会、やります!
【宣伝2】企業ブース、出してます! AI ⾃動応答などぜひご体験ください!! ノベルティーもあります!! 3F 301 Track B
We are Hiring !!! 詳しい採⽤情報はこちら https://www.notion.so/ivry-jp/IVRy-b30395752c 7c4a448f1520576dc55778