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

Slide 1

Slide 1 text

事業モメンタムを⽣み出すプロダクト開発 1 ヶ⽉で AI FAX をリリースした開発アプローチ 2025-02-27 株式会社IVRy（アイブリー）町永隆 @macchiitaka

Slide 2

Slide 2 text

⾃⼰紹介 ● @macchiitaka ● 2024年8⽉ IVRy に⼊社 ● 主にWebフロントエンドの機能開発町永隆（Takashi Machinaga） 2 ソフトウェアエンジニア

Slide 3

Slide 3 text

IVRyとは？

Slide 4

Slide 4 text

電話⾃動応答サービスIVRy 電話AI SaaS IVRy(アイブリー)は、⽉額2,980円からカスタム電話をカンタンに作成できるサービス。全ての電話業務を誰でもすぐにAIを使って効率化できます

Slide 5

Slide 5 text

今⽇は電話の話はしません

Slide 6

Slide 6 text

AI FAXの話をします

Slide 7

Slide 7 text

AI FAXとは？初期費⽤/設備費⽤ゼロ、⽉額2,980円から利⽤可能な、 AIでFAXを⾃動⽂字起こし(OCR)できるクラウドFAXです。

Slide 8

Slide 8 text

ビジネス上のFAXを取り巻く現状「ファクシミリの利⽤調査結果」を公開〜5割を超える⽅が⽇常の業務フローの中でファクスを利⽤〜「ファクシミリの利⽤調査結果」を公開〜5割を超える⽅が⽇常の業務フローの中でファクスを利⽤〜あなたはお勤め先で⽂書や画像を送ったり受けたりするためにファクス（ファクシミリ）を使⽤していますか？業種別のファクスの使⽤有無（単位=％）法⼈コミュニケーションではFAXは根強く残っており、40.1％が「勤務先でFAXを使⽤している」業界の業務慣習や相⼿⽅のITリテラシーによるチャネル依存が⾼く、業界によっては50%を超える使⽤状況が続いています。

Slide 9

Slide 9 text

FAX業務において⽣じる課題コスト⾯での負担だけでなく、デジタルデータになっていないことで送受信場所の制約や受取時‧受注対応時のヒューマンエラーの温床にもなっています。外出先やリモートワーク先ではFAX が⾒れない‧返信できないインク‧⽤紙の⼊れ替えや詰まった時の故障対応に⼿がかかる受け取ったものが⾒つからず対応が漏れる/後から探すのも⼀苦労 FAXで届いた内容を⼈がパソコンに毎回転記しておりミスが起きる

Slide 10

Slide 10 text

2024年11⽉、AI FAXリリース

Slide 11

Slide 11 text

初期開発をしてました

Slide 12

Slide 12 text

僕とAI FAXの出会い

Slide 13

Slide 13 text

⼊社して1ヶ⽉のある⽇の会話同僚「FAXプロジェクト、フロントエンドエンジニア探してるんだって〜」町永「へぇ〜、チンチロに勝ったらやりますよ（ノリ）」 🎲 🎲 🎲

Slide 14

Slide 14 text

🎲 チンチロ ● チンチロは3個のサイコロを使って役で勝敗を決める⽇本の伝統的な遊び ● Slackで「チンチロ」と打つとカスタムレスポンスが返ってくる

Slide 15

Slide 15 text

🎲 チンチロ

Slide 16

Slide 16 text

🎲 チンチロ

Slide 17

Slide 17 text

🎲 チンチロ

Slide 18

Slide 18 text

🎲 チンチロ

Slide 19

Slide 19 text

ほなやるか☺

Slide 20

Slide 20 text

ところで

Slide 21

Slide 21 text

なぜエンジニアを探してた？

Slide 22

Slide 22 text

嬉しいことにプロダクトができる前にお客様が AI FAXのご要望をいただいた

Slide 23

Slide 23 text

“10⽉頭に間に合えば”

Slide 24

Slide 24 text

“10⽉頭に間に合えば” ※ このとき9⽉2⽇

Slide 25

Slide 25 text

ほ、ほなやるか…☺

Slide 26

Slide 26 text

開発スタート！

Slide 27

Slide 27 text

開発中に⼤事にしていたこと

Slide 28

Slide 28 text

● スケジュール不安は正直ある ● それでも、だからこそ、開発を楽しむ！ ● ⽂化祭 ● みんなが盛り上げてくれる ○ 毎⽇の進捗を Slack で共有 ■ めっちゃリアクションもらえる ○ All Handsで進捗やリリース予告 ■ 「待ってましたー！」「⾰命だ」 ● 本来チーム開発は楽しい！開発を楽しむ

Slide 29

Slide 29 text

● 開発中から絶対にいいプロダクトになると確信があった ● でもPMF前のプロダクトには違いない... ● だからチームのメンバーに知ってもらい、期待してもらいたい ● 広めてくれる⼈、売ってくれる⼈がいればこそ、次の開発のチャンスができる ● もっといいプロダクトにできる ● 開発の⽂脈で期待値調整という場合は、下げるパターンが多い ● モメンタムを作るためにはときに期待値を上げることも⼤事プロダクトの期待値を上げる

Slide 30

Slide 30 text

具体的にどんな開発してたの？

Slide 31

Slide 31 text

設計の⼀部をお⾒せします！

Slide 32

Slide 32 text

FAX送信機能

Slide 33

Slide 33 text

FAX送信機能 CPaaS IVRy サーバーブラウザ PDF JPEG PNG PDF FAX ブラウザからPDFや画像をFAXとして送信する機能。複数ファイル送信可。

Slide 34

Slide 34 text

FAX送信機能 CPaaS IVRy サーバーブラウザ PDF FAX どこでPDFを⽣成する？ PDF JPEG PNG ブラウザからPDFや画像をFAXとして送信する機能。複数ファイル送信可。

Slide 35

Slide 35 text

ブラウザでPDFを⽣成してます

Slide 36

Slide 36 text

なぜブラウザで⽣成？ ● ブラウザで⽣成したほうがシンプルにUXがいい ○ 送信前にプレビューを表⽰したい ○ 画像のリサイズや回転をプレビューに反映したい ○ PDFのファイルサイズをアップロード前に知りたい ● 開発機能を最⼩にしたい ○ サーバーサイドで⽣成する場合、⾮同期で処理のためのキューや結果の通知など必要な機能が増える ● リソース効率を最⼤化したい ○ できるだけ並列で開発したいがチームの成熟度が低い

Slide 37

Slide 37 text

どうやって変換してるの？

Slide 38

Slide 38 text

PDF⽣成フロー

Slide 39

Slide 39 text

PDF⽣成フロー

Slide 40

Slide 40 text

ファイルをキューに追加 ● フォームに取り込まれたファイルは拡張⼦とファイルの中⾝を確認してバリデーション ● すべてオンメモリのキューに追加 ● ファイルの並び順を保持するため ● キューからひとつずつ取り出して後続の処理を実⾏

Slide 41

Slide 41 text

すべて画像のURL形式に変換

Slide 42

Slide 42 text

PDF⽣成フロー

Slide 43

Slide 43 text

● ファイルオブジェクトだとアプリ内で取り回しづらい ● オブジェクトURL参照に変換して、 URL⽂字列形式で保持 ● URL.createObjectURL() 画像をオブジェクトURL参照に変換

Slide 44

Slide 44 text

PDF⽣成フロー

Slide 45

Slide 45 text

● PDF.js を利⽤し1ページずつ画像に変換 ○ Firefox PDF リーダー ● Web Worker で並列処理 ● OﬀscreenCanvas で Canvas に描画 ● Canvas から Blob に変換 ● 画像はオブジェクトURL参照 PDFを画像に変換

Slide 46

Slide 46 text

画像の加⼯

Slide 47

Slide 47 text

PDF⽣成フロー

Slide 48

Slide 48 text

● FAXの仕様に合わせて画像を変換 ● スマホの写真はFAXの仕様に対して⼤きい ● CPaaSが⾃動で縮⼩してくれるが過度に縮⼩する ● 解像度は⾼い⽅がOCRの精度が⾼い ● Blob (JPEG) を指定サイズ、縦横⽐、向きを変換

Slide 49

Slide 49 text

PDF⽣成フロー

Slide 50

Slide 50 text

すべてのファイルを送信画像に変換 ● キューが空になるまでファイルから送信画像への変換を繰り返す

Slide 51

Slide 51 text

PDF⽣成フロー

Slide 52

Slide 52 text

PDFファイルを⽣成 ● jspdfを利⽤してPDFのBlobを⽣成 ● Web Workerで処理 ● 画像がPNGの場合、処理がJPEGの10倍遅い ● オブジェクトURLをUIスレッドに返却

Slide 53

Slide 53 text

PDF⽣成フロー

Slide 54

Slide 54 text

PDFファイルを複製 ● UIスレッドでPDFを複製してからWeb Workerを停⽌する ● オブジェクトURLは⽣成したスレッドが停⽌すると参照できなくなる ● PDFファイル完成

Slide 55

Slide 55 text

無事送信成功！🎉

Slide 56

Slide 56 text

もっと仕様⼩さくできたんじゃない？

Slide 57

Slide 57 text

限られた時間で⾮機能要件にどれだけこだわれるかが腕の⾒せどころ

Slide 58

Slide 58 text

UIはUXにこだわった⽅が絶対楽しい

Slide 59

Slide 59 text

まとめ ● チームで開発を楽しむ。本来チーム開発は楽しい ● みんなに期待してもらう。事業もプロダクトも期待されると好循環が回る ● 限られた時間で⾮機能要件にどれだけこだわることができるかが腕の⾒せどころ

Slide 60

Slide 60 text

事業開発の才能がなくても「どこまでやれば」新規事業は⽴ち上がるのか 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 ほかのメンバー視点

Slide 61

Slide 61 text

電話、FAX以外にも⽔⾯下でプロダクトたくさん作ってます！

Slide 62

Slide 62 text

フロントエンド周りで改善したいこともたくさんあります！

Slide 63

Slide 63 text

https://ivry-jp.notion.site/IVRy-127eea80adae801397a4e4d7ea74e291