Vue TypeScript SpeechRecognitionAPIで作った議事録WEBアプリをNetlifyで公開した話
こんにちは江口です。
今回はネタでこんなWEBアプリ作ってみまし た。
frosty-pare-b67ea5.netlify.com
※後述しますが、PC Chromeでのみ確認可能です。私はmacOS Mojave 10.14.6のChrome version: 77.0.3865.120で確認しました。
「録音」ボタンを押すと、マイクを通して音声を認識・取得します。
取得された音声は文字に起こされ、textareaに表示されます。
議事録を自動で取ってくれるようなイメージです。
textareaに反映されるだけなので、手直しも出来ます。
▼イメージ図(伝われ!!)
動機
何かフロント触る学習ネタを探していると、SpeechRecognition APIを見つけて面白そうなので触ってみました。
developer.mozilla.org
開発環境
開発環境は以下です。
- @vue/cli 4.0.4
- "vue": "^2.6.10",
- "vue-class-component": "^7.0.2",
- "vue-property-decorator": "^8.1.0",
- "vue-router": "^3.0.6",
- "vuex": "^3.0.1"
- "typescript": "~3.5.3"
公開に利用したホスティングはNetlifyです。
www.netlify.com
ソースコードは以下です。
github.com
Githubと連携させており、今回はmasterリポジトリにpushするとbuuildが走ってdist以下がdeploy -> 公開される仕組みになってます。
こんな感じで、masterにpushした際にNetlify公開用のコマンドを指定します。
$npm run build することでdist下にパッケージングされた公開ファイルがbuildされるので、
そのファイルをdeployするという設定です。
ハマったこと
vue.config.jsは最初このような記述ですが
module.exports = {
lintOnSave: false
};公開モジュールのベースパスを指定しないとdist下のパスが解決できずに多くの方は画面が真っ白で表示されると思います。
なので、設定ファイルをこんな感じに直します。
module.exports = {
lintOnSave: false,
publicPath: './'
};publicPathは以下にある通り、cli v3.3以前までは「baseUrl」プロパティが使われていたようです。
今回は3.3以上なので、publicPathを使いました。
>`known as baseUrl before Vue CLI 3.3`
課題
ブラウザサポートはまだ厳しい
caniuse.com
SpeechRecognition APIはChrome以外厳しいです。。。
おわりに
試験的な機能とはいえ、音声の認識精度は悪くなかったので、以下のような改良をしてみようと思います。
- 校閲機能
- kuromoji.jsとか入れて、自然言語処理で分かち書きして、辞書と照らし合わせる？？
- 「て」「を」「に」「は」の自動修正・サジェスト
- 関係ないけど、「てをには」が間違っている文章見ると、脳内で修正して読み直すので中身が頭に入ってこないのは自分だけでしょうか？？
- マークダウン式に入力してくれる
- ClipBoardにコピーボタン
- 見た目マシにする
以上、ちょっとしたネタと検証の共有でした。
ありがとうございました。
