Tweet
Tweet

Slide 1

Slide 1 text

writer.appを⽀える技術 五⼗川 洋平 (POPCORN) 2018.07.21 上越TechMeetup#2 

Slide 2

Slide 2 text

⾃⼰紹介 • 五⼗川 洋平（イソップ）
 - 上越TechMeetup主催
 - 上越市在住のフリーランスエンジニア • 趣味：ヨーヨー、バス釣り • Twitter：@yuhiisk • イソップブログ（http://blog.yuhiisk.com）

Slide 3

Slide 3 text

writer.app

Slide 4

Slide 4 text

間に合いませんでした… (ヽ´ω`)

Slide 5

Slide 5 text

だが⾔わせてくれ • 開発の経緯

Slide 6

Slide 6 text

だが⾔わせてくれ • 開発の経緯 • 開発技術の紹介

Slide 7

Slide 7 text

だが⾔わせてくれ • 開発の経緯 • 開発技術の紹介 • 今後の野望

Slide 8

Slide 8 text

事の発端 • ⾳声⽂字起こしは地道で不⽑な作業。
 （想像以上に時間がかかる）

Slide 9

Slide 9 text

事の発端 • ⾳声⽂字起こしは地道で不⽑な作業。
 （想像以上に時間がかかる） • 解決できる便利なアプリがない。

Slide 10

Slide 10 text

事の発端 • ⾳声⽂字起こしは地道で不⽑な作業。
 （想像以上に時間がかかる） • 解決できる便利なアプリがない。 • じゃあちょっと作りますか。

Slide 11

Slide 11 text

プロトタイプ期

Slide 12

Slide 12 text

Twitterでの反応

Slide 13

Slide 13 text

Twitterでの反応

Slide 14

Slide 14 text

Twitterでの反応

Slide 15

Slide 15 text

SPA移⾏期

Slide 16

Slide 16 text

裏技による⾃動⽂字起こし https://note.mu/yriica/n/n3050888696ab

Slide 17

Slide 17 text

• writer.appとSoundflower（Mac）を組み合わせて
 ⾃動で⽂字起こしができる。 裏技による⾃動⽂字起こし

Slide 18

Slide 18 text

本腰⼊れてアップデート期

Slide 19

Slide 19 text

• 外部のアプリケーションを使わない。 本当の⾃動化を実現する（WIP）

Slide 20

Slide 20 text

• 外部のアプリケーションを使わない。 • 操作をもっと簡単に。 本当の⾃動化を実現する（WIP）

Slide 21

Slide 21 text

• 外部のアプリケーションを使わない。 • 操作をもっと簡単に。 • もっと使いやすく。 本当の⾃動化を実現する（WIP）

Slide 22

Slide 22 text

開発版デモ

Slide 23

Slide 23 text

主な機能 • ⾳声ファイル再⽣での⽂字起こし

Slide 24

Slide 24 text

主な機能 • ⾳声ファイル再⽣での⽂字起こし • マイク⼊⼒による⽂字起こし

Slide 25

Slide 25 text

主な機能 • ⾳声ファイル再⽣での⽂字起こし • マイク⼊⼒による⽂字起こし • アップロードした⾳声ファイルの⾃動⽂字起こし

Slide 26

Slide 26 text

主な機能 • ⾳声ファイル再⽣での⽂字起こし • マイク⼊⼒による⽂字起こし • アップロードした⾳声ファイルの⾃動⽂字起こし • ドキュメントの保存

Slide 27

Slide 27 text

Google Speech-to-Text

Slide 28

Slide 28 text

Google Speech APIによる⾳声認識

Slide 29

Slide 29 text

Google Speech APIによる⾳声認識 • ブラウザAPI以上の精度を期待。

Slide 30

Slide 30 text

Google Speech APIによる⾳声認識 • ブラウザAPI以上の精度を期待。 • 環境に左右されない。

Slide 31

Slide 31 text

Google Speech APIによる⾳声認識 • ブラウザAPI以上の精度を期待。 • 環境に左右されない。 • 公開されているため現実的な選択。

Slide 32

Slide 32 text

Google Speech APIによる⾳声認識 ストリーミング

Slide 33

Slide 33 text

ストリーミングでの⾳声認識 • navigator.mediaDevices.getUserMedia

Slide 34

Slide 34 text

ストリーミングでの⾳声認識 • navigator.mediaDevices.getUserMedia • Web Audio API

Slide 35

Slide 35 text

ストリーミングでの⾳声認識 • navigator.mediaDevices.getUserMedia • Web Audio API • Websocket （VMインスタンスを利⽤）

Slide 36

Slide 36 text

Google Speech APIによる⾳声認識 ⾳声ファイルをアップロード

Slide 37

Slide 37 text

⾳声ファイルからの⾳声認識 • Cloud Storage （ ≒ AWS S3）

Slide 38

Slide 38 text

⾳声ファイルからの⾳声認識 • Cloud Storage （ ≒ AWS S3） • Compute Engine （ ≒ AWS EC2）

Slide 39

Slide 39 text

これまでは • Web Speech API

Slide 40

Slide 40 text

これまでは • Web Speech API • Chromeのみ（Firefoxは開発フラグをONにすれば）

Slide 41

Slide 41 text

Firebaseで開発を加速

Slide 42

Slide 42 text

Firebaseで開発を加速 • サイトデータのホスティング • ユーザー認証 • リアルタイムデータベース（NoSQL） • Google Cloud Platformとの統合, etc

Slide 43

Slide 43 text

Firebaseで開発を加速 Storage Functions Application

Slide 44

Slide 44 text

Firebaseで開発を加速 Storage Functions Application

Slide 45

Slide 45 text

Firebaseで開発を加速 Storage Functions Application

Slide 46

Slide 46 text

Firebaseで開発を加速 Storage Functions Application

Slide 47

Slide 47 text

Firebaseで開発を加速 Speech To Text Compute Engine Storage

Slide 48

Slide 48 text

Firebaseで開発を加速 Speech To Text Compute Engine Storage

Slide 49

Slide 49 text

Firebaseで開発を加速 Speech To Text Compute Engine Storage

Slide 50

Slide 50 text

Firebaseで開発を加速 Speech To Text Compute Engine Storage Firebase Cloud Messagingで
 完了を通知

Slide 51

Slide 51 text

Firebaseで開発を加速 • Notification API（ブラウザ）

Slide 52

Slide 52 text

有料化に伴う決済処理

Slide 53

Slide 53 text

• オンライン決済サービス （https://stripe.com/jp） 
 有料化に伴う決済処理

Slide 54

Slide 54 text

• オンライン決済サービス （https://stripe.com/jp） • クレジットカード決済に対応
 （VISA / Master/ JCB / AMEX / Diners / Apple Pay） 有料化に伴う決済処理

Slide 55

Slide 55 text

• オンライン決済サービス （https://stripe.com/jp） • クレジットカード決済に対応
 （VISA / Master/ JCB / AMEX / Diners / Apple Pay） • アカウント登録不要 有料化に伴う決済処理

Slide 56

Slide 56 text

• オンライン決済サービス （https://stripe.com/jp） • クレジットカード決済に対応
 （VISA / Master/ JCB / AMEX / Diners / Apple Pay） • アカウント登録不要 • 定期課⾦・従量課⾦ 有料化に伴う決済処理

Slide 57

Slide 57 text

• デベロッパーファースト
 （curl, Ruby, Python, PHP, Java, Node, Go, .NET） 有料化に伴う決済処理

Slide 58

Slide 58 text

有料化に伴う決済処理

Slide 59

Slide 59 text

• デベロッパーファースト
 （curl, Ruby, Python, PHP, Java, Node, Go, .NET） • 開発モードがある 有料化に伴う決済処理

Slide 60

Slide 60 text

• デベロッパーファースト
 （curl, Ruby, Python, PHP, Java, Node, Go, .NET） • 開発モードがある • ⽇本のカスタマーサポート 有料化に伴う決済処理

Slide 61

Slide 61 text

有料化に伴う決済処理

Slide 62

Slide 62 text

有料化に伴う決済処理 ① Plans

Slide 63

Slide 63 text

有料化に伴う決済処理 ① Plans ② Customer

Slide 64

Slide 64 text

有料化に伴う決済処理 ① Plans ② Customer ③ Subscription

Slide 65

Slide 65 text

有料化に伴う決済処理 ① Plans ② Customer ③ Subscription ※めっちゃ使えます

Slide 66

Slide 66 text

今後の野望

Slide 67

Slide 67 text

• ⽂字起こし機能の強化 今後の野望

Slide 68

Slide 68 text

• ⽂字起こし機能の強化 • 画像から⽂字起こし • 精度の向上 今後の野望

Slide 69

Slide 69 text

• ⽂字起こし機能の強化 • 画像から⽂字起こし • 精度の向上 • キャッシュ、オフライン対応 今後の野望

Slide 70

Slide 70 text

• ⽂字起こし機能の強化 • 画像から⽂字起こし • 精度の向上 • キャッシュ、オフライン対応 • 最終的に統合アプリケーションを⽬指す 今後の野望

Slide 71

Slide 71 text

アップデートリリースをお待ち下さい