事業モメンタムを生み出すプロダクト開発

Transcript

1. 事業モメンタムを⽣み出すプロダクト開発 1 ヶ⽉で AI FAX をリリースした開発アプローチ 2025-02-27 株式会社IVRy（アイブリー） 町永 隆 @macchiitaka
2. ⾃⼰紹介 • @macchiitaka • 2024年8⽉ IVRy に⼊社 • 主にWebフロントエンドの機能開発 町永 隆（Takashi Machinaga） 2 ソフトウェアエンジニア
3. IVRyとは？
4. 電話⾃動応答サービスIVRy 電話AI SaaS IVRy(アイブリー)は、 ⽉額2,980円からカスタム電話をカンタンに作成できるサービス。 全ての電話業務を誰でもすぐにAIを使って効率化できます
5. 今⽇は電話の話はしません
6. AI FAXの話をします
7. AI FAXとは？ 初期費⽤/設備費⽤ゼロ、⽉額2,980円から利⽤可能な、 AIでFAXを⾃動⽂字起こし(OCR)できるクラウドFAXです。
8. ビジネス上のFAXを取り巻く現状 「ファクシミリの利⽤調査結果」を公開 〜5割を超える⽅が⽇常の業務フローの中でファクスを利⽤〜 「ファクシミリの利⽤調査結果」を公開 〜5割を超える⽅が⽇常の業務フローの中でファクスを利⽤〜 あなたはお勤め先で⽂書や画像を送ったり受けたりするために ファクス（ファクシミリ）を使⽤していますか？ 業種別のファクスの使⽤有無（単位=％） 法⼈コミュニケーションではFAXは根強く残っており、40.1％が「勤務先でFAXを使⽤している」業界の業務慣習 や相⼿⽅のITリテラシーによるチャネル依存が⾼く、業界によっては50%を超える使⽤状況が続いています。
9. FAX業務において⽣じる課題 コスト⾯での負担だけでなく、デジタルデータになっていないことで送受信場所の制 約や受取時‧受注対応時のヒューマンエラーの温床にもなっています。 外出先やリモート ワーク先ではFAX が⾒れない‧返信 できない インク‧⽤紙の ⼊れ替えや 詰まった時の故障 対応に⼿がかかる 受け取ったものが ⾒つからず対応が 漏れる/後から探す のも⼀苦労 FAXで届いた内容 を⼈がパソコンに 毎回転記しており ミスが起きる
10. 2024年11⽉、AI FAXリリース
11. 初期開発をしてました
12. 僕とAI FAXの出会い
13. ⼊社して1ヶ⽉のある⽇の会話 同僚「FAXプロジェクト、フロントエンドエンジニア探してるんだって〜」 町永「へぇ〜、チンチロに勝ったらやりますよ（ノリ）」 🎲 🎲 🎲
14. 🎲 チンチロ • チンチロは3個のサイコロを使って役で勝敗を決める⽇本の伝統的な遊び • Slackで「チンチロ」と打つとカスタムレスポンスが返ってくる
15. 🎲 チンチロ
16. 🎲 チンチロ
17. 🎲 チンチロ
18. 🎲 チンチロ
19. ほなやるか☺
20. ところで
21. なぜエンジニアを探してた？
22. 嬉しいことにプロダクトが できる前にお客様が AI FAXのご要望をいただいた
23. “10⽉頭に間に合えば”
24. “10⽉頭に間に合えば” ※ このとき9⽉2⽇
25. ほ、ほなやるか…☺
26. 開発スタート！
27. 開発中に⼤事にしていたこと
28. • スケジュール不安は正直ある • それでも、だからこそ、開発を楽しむ！ • ⽂化祭 • みんなが盛り上げてくれる ◦ 毎⽇の進捗を Slack で共有 ▪ めっちゃリアクションもらえる ◦ All Handsで進捗やリリース予告 ▪ 「待ってましたー！」「⾰命だ」 • 本来チーム開発は楽しい！ 開発を楽しむ
29. • 開発中から絶対にいいプロダクトになると確信があった • でもPMF前のプロダクトには違いない... • だからチームのメンバーに知ってもらい、期待してもらいたい • 広めてくれる⼈、売ってくれる⼈がいればこそ、次の開発のチャンスができる • もっといいプロダクトにできる • 開発の⽂脈で期待値調整という場合は、下げるパターンが多い • モメンタムを作るためにはときに期待値を上げることも⼤事 プロダクトの期待値を上げる
30. 具体的にどんな開発してたの？
31. 設計の⼀部をお⾒せします！
32. FAX送信機能
33. FAX送信機能 CPaaS IVRy サーバー ブラウザ PDF JPEG PNG PDF FAX ブラウザからPDFや画像をFAXとして送信する機能。複数ファイル送信可。
34. FAX送信機能 CPaaS IVRy サーバー ブラウザ PDF FAX どこでPDFを ⽣成する？ PDF JPEG PNG ブラウザからPDFや画像をFAXとして送信する機能。複数ファイル送信可。
35. ブラウザでPDFを⽣成してます
36. なぜブラウザで⽣成？ • ブラウザで⽣成したほうがシンプルにUXがいい ◦ 送信前にプレビューを表⽰したい ◦ 画像のリサイズや回転をプレビューに反映したい ◦ PDFのファイルサイズをアップロード前に知りたい • 開発機能を最⼩にしたい ◦ サーバーサイドで⽣成する場合、⾮同期で処理のためのキューや結果の通 知など必要な機能が増える • リソース効率を最⼤化したい ◦ できるだけ並列で開発したいがチームの成熟度が低い
37. どうやって変換してるの？
38. PDF⽣成フロー
39. PDF⽣成フロー
40. ファイルをキューに追加 • フォームに取り込まれたファイルは 拡張⼦とファイルの中⾝を確認して バリデーション • すべてオンメモリのキューに追加 • ファイルの並び順を保持するため • キューからひとつずつ取り出して後 続の処理を実⾏
41. すべて画像のURL形式に変換
42. PDF⽣成フロー
43. • ファイルオブジェクトだとアプリ内 で取り回しづらい • オブジェクトURL参照に変換し て、 URL⽂字列形式で保持 • URL.createObjectURL() 画像をオブジェクトURL参照に変換
44. PDF⽣成フロー
45. • PDF.js を利⽤し1ページずつ画像に変換 ◦ Firefox PDF リーダー • Web Worker で並列処理 • OffscreenCanvas で Canvas に描画 • Canvas から Blob に変換 • 画像はオブジェクトURL参照 PDFを画像に変換
46. 画像の加⼯
47. PDF⽣成フロー
48. • FAXの仕様に合わせて画像を変換 • スマホの写真はFAXの仕様に対して⼤きい • CPaaSが⾃動で縮⼩してくれるが過度に縮⼩する • 解像度は⾼い⽅がOCRの精度が⾼い • Blob (JPEG) を指定 サイズ、縦横⽐、向きを変換
49. PDF⽣成フロー
50. すべてのファイルを送信画像に変換 • キューが空になるまでファイルから送信画像への変換を繰り返す
51. PDF⽣成フロー
52. PDFファイルを⽣成 • jspdfを利⽤してPDFのBlobを⽣成 • Web Workerで処理 • 画像がPNGの場合、処理がJPEGの10倍 遅い • オブジェクトURLをUIスレッドに返却
53. PDF⽣成フロー
54. PDFファイルを複製 • UIスレッドでPDFを複製してからWeb Workerを停⽌する • オブジェクトURLは⽣成したスレッドが停⽌すると参照できなくなる • PDFファイル完成
55. 無事送信成功！🎉
56. もっと仕様⼩さくできたんじゃない？
57. 限られた時間で⾮機能要件に どれだけこだわれるかが腕の⾒せどころ
58. UIはUXにこだわった⽅が 絶対楽しい
59. まとめ • チームで開発を楽しむ。本来チーム開発は楽しい • みんなに期待してもらう。事業もプロダクトも期待されると好循環が回る • 限られた時間で⾮機能要件にどれだけこだわることができるかが腕の⾒せどころ
60. 事業開発の才能がなくても「どこまでやれば」新規事業は⽴ち上がるのか https://note.com/r_takayanagi/n/nc50b34be36a5 チンチロに勝ったらAI FAXが完成した話 https://note.com/kikuivry/n/n779add0c78bb Re: チンチロに負けて AI FAX を開発した話 https://note.com/macchiitaka_ivry/n/n2eb787aae62a ほかのメンバー視点
61. 電話、FAX以外にも⽔⾯下で プロダクトたくさん作ってます！
62. フロントエンド周りで 改善したいこともたくさんあります！
63. https://ivry-jp.notion.site/IVRy-127eea80adae801397a4e4d7ea74e291