writer.appを支える技術

Transcript

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

2. ⾃⼰紹介 • 五⼗川 洋平（イソップ）
 - 上越TechMeetup主催
 - 上越市在住のフリーランスエンジニア • 趣味：ヨーヨー、バス釣り

   • Twitter：@yuhiisk • イソップブログ（http://blog.yuhiisk.com）

3. writer.app

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

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

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

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

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

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

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

11. プロトタイプ期

12. Twitterでの反応

13. Twitterでの反応

14. Twitterでの反応

15. SPA移⾏期

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

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

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

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

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

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

22. 開発版デモ

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

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

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

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

27. Google Speech-to-Text

28. Google Speech APIによる⾳声認識

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

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

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

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

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

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

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

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

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

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

    Engine （ ≒ AWS EC2）

39. これまでは • Web Speech API

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

41. Firebaseで開発を加速

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

    Platformとの統合, etc

43. Firebaseで開発を加速 Storage Functions Application

44. Firebaseで開発を加速 Storage Functions Application

45. Firebaseで開発を加速 Storage Functions Application

46. Firebaseで開発を加速 Storage Functions Application

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

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

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

50. Firebaseで開発を加速 Speech To Text Compute Engine Storage Firebase Cloud Messagingで


    完了を通知

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

52. 有料化に伴う決済処理

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

54. • オンライン決済サービス （https://stripe.com/jp） • クレジットカード決済に対応
 （VISA / Master/ JCB /

    AMEX / Diners / Apple Pay） 有料化に伴う決済処理

55. • オンライン決済サービス （https://stripe.com/jp） • クレジットカード決済に対応
 （VISA / Master/ JCB /

    AMEX / Diners / Apple Pay） • アカウント登録不要 有料化に伴う決済処理

56. • オンライン決済サービス （https://stripe.com/jp） • クレジットカード決済に対応
 （VISA / Master/ JCB /

    AMEX / Diners / Apple Pay） • アカウント登録不要 • 定期課⾦・従量課⾦ 有料化に伴う決済処理

57. • デベロッパーファースト
 （curl, Ruby, Python, PHP, Java, Node, Go, .NET）

    有料化に伴う決済処理

58. 有料化に伴う決済処理

59. • デベロッパーファースト
 （curl, Ruby, Python, PHP, Java, Node, Go, .NET）

    • 開発モードがある 有料化に伴う決済処理

60. • デベロッパーファースト
 （curl, Ruby, Python, PHP, Java, Node, Go, .NET）

    • 開発モードがある • ⽇本のカスタマーサポート 有料化に伴う決済処理

61. 有料化に伴う決済処理

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

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

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

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

66. 今後の野望

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

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

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

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

    今後の野望

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