サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


12.vue.jsとwebspeechapiで音声認識アプリ:index.html


差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
12.vue.jsとwebspeechapiで音声認識アプリ:index.html [2019/01/05] – [Vuetifyのdata tableで削除ボタン] adash33312.vue.jsとwebspeechapiで音声認識アプリ:index.html [2019/05/11] (現在) – [方針をたてる] adash333
行 20: 行 20:
   -スタートボタンを押して、マイクに話しかけると、話しかけた内容が文字で表示される   -スタートボタンを押して、マイクに話しかけると、話しかけた内容が文字で表示される
   -ストップボタンで文字おこし中止   -ストップボタンで文字おこし中止
-  -将来的には、文字におこしたテキストを、Firebase Firestoreに保存し、メモ一覧を表示し、編集、削除できるようにしたい+  -文字におこしたテキストを、Firebase Firestoreに保存し、メモ一覧を表示し、検索、削除できる
  
 今回は、以下のコードを参考にさせていただきました。 今回は、以下のコードを参考にさせていただきました。
行 30: 行 30:
  
 できたもの できたもの
-{{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190103-095959.png}}+{{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190106-010227.png}}
  
-デモサイト+デモサイト
 +https://csb-71yznl2zwq.netlify.com/ 
 + 
 +デモサイト2
 <html> <html>
 <iframe src="https://codesandbox.io/embed/71yznl2zwq" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe> <iframe src="https://codesandbox.io/embed/71yznl2zwq" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
行 56: 行 59:
 Vuetify Vuetify
 firebase firebase
 +moment
 </code> </code>
  
行 205: 行 209:
 {{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190103-062012.png}} {{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190103-062012.png}}
 ===== 音声認識結果をFirebtase(Firestore)に保存する ===== ===== 音声認識結果をFirebtase(Firestore)に保存する =====
-ここからはオプションです。+
  
 http://i-doctor.sakura.ne.jp/web/doku.php?id=11.vue.js%E3%81%A8firebase%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%80%E3%83%BC:index.html#%E6%96%B0%E8%A6%8Ffirebase%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E4%BD%9C%E6%88%90 http://i-doctor.sakura.ne.jp/web/doku.php?id=11.vue.js%E3%81%A8firebase%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%80%E3%83%BC:index.html#%E6%96%B0%E8%A6%8Ffirebase%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E4%BD%9C%E6%88%90
行 221: 行 225:
 ==== CodeSandboxでFirebaseを使用できるようにDependencyの追加とindex.htmlとsrc/main.jsの編集 ==== ==== CodeSandboxでFirebaseを使用できるようにDependencyの追加とindex.htmlとsrc/main.jsの編集 ====
  
-  -Dependencyで、Vuetifyとfirebaseとvuefire 2.0.0-alpha.6を追加+  -Dependencyで、さらに、firebaseを追加
   -index.htmlの編集(不要かも?)   -index.htmlの編集(不要かも?)
   -src/main.jsの編集(こちらに、FirebaseのAPIキーなどをコピペします)   -src/main.jsの編集(こちらに、FirebaseのAPIキーなどをコピペします)
行 293: 行 297:
 {{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190103-095459.png}} {{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190103-095459.png}}
  
-誤認識などで、テキストフィールドに表示された内容を変更すると、変更内容はアップロードするテキストに反映されます。+誤認識などで、テキストフィールドに表示された内容を変更したいきは、テキストを編集後にSAVEボタンをクリックすれば、変更内容はアップロードするテキストに反映されます。
  
 ==== リストをVuetifyのData tablesで表示 ==== ==== リストをVuetifyのData tablesで表示 ====


12.vue.jsとwebspeechapiで音声認識アプリ/index.html.1546703415.txt.gz · 最終更新: 2019/01/05 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki