12.vue.jsとwebspeechapiで音声認識アプリ:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
12.vue.jsとwebspeechapiで音声認識アプリ:index.html [2019/01/03] – [リストをVuetifyのData tablesで表示] adash333 | 12.vue.jsとwebspeechapiで音声認識アプリ:index.html [2019/05/11] (現在) – [方針をたてる] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
- | ====== Vue.jsとWebSpeechAPIで音声認識アプリ ====== | + | ====== Vue.jsとWebSpeechAPIとFirestoreで音声認識アプリ(ボイスレコーダー) |
以下の本を衝動買いしたところ、< | 以下の本を衝動買いしたところ、< | ||
行 20: | 行 20: | ||
-スタートボタンを押して、マイクに話しかけると、話しかけた内容が文字で表示される | -スタートボタンを押して、マイクに話しかけると、話しかけた内容が文字で表示される | ||
-ストップボタンで文字おこし中止 | -ストップボタンで文字おこし中止 | ||
- | -将来的には、文字におこしたテキストを、Firebase Firestoreに保存し、メモ一覧を表示し、編集、削除できるようにしたい | + | -文字におこしたテキストを、Firebase Firestoreに保存し、メモ一覧を表示し、検索、削除できる |
今回は、以下のコードを参考にさせていただきました。 | 今回は、以下のコードを参考にさせていただきました。 | ||
行 30: | 行 30: | ||
できたもの | できたもの | ||
- | {{: | + | {{: |
- | デモサイト | + | デモサイト1 |
+ | https:// | ||
+ | |||
+ | デモサイト2 | ||
< | < | ||
<iframe src=" | <iframe src=" | ||
行 51: | 行 54: | ||
< | < | ||
CodeSandbox | CodeSandbox | ||
+ | Firebase Firestore | ||
Vue 2.5.2 | Vue 2.5.2 | ||
Vuetify | Vuetify | ||
+ | firebase | ||
+ | moment | ||
</ | </ | ||
行 203: | 行 209: | ||
{{: | {{: | ||
===== 音声認識結果をFirebtase(Firestore)に保存する ===== | ===== 音声認識結果をFirebtase(Firestore)に保存する ===== | ||
- | ここからはオプションです。 | + | |
http:// | http:// | ||
行 219: | 行 225: | ||
==== CodeSandboxでFirebaseを使用できるようにDependencyの追加とindex.htmlとsrc/ | ==== CodeSandboxでFirebaseを使用できるようにDependencyの追加とindex.htmlとsrc/ | ||
- | -Dependencyで、Vuetifyとfirebaseとvuefire 2.0.0-alpha.6を追加 | + | -Dependencyで、さらに、firebaseを追加 |
-index.htmlの編集(不要かも?) | -index.htmlの編集(不要かも?) | ||
-src/ | -src/ | ||
行 291: | 行 297: | ||
{{: | {{: | ||
- | 誤認識などで、テキストフィールドに表示された内容を変更すると、変更内容はアップロードするテキストには反映されます。 | + | 誤認識などで、テキストフィールドに表示された内容を変更したいときは、テキストを編集後にSAVEボタンをクリックすれば、変更内容はアップロードするテキストに反映されます。 |
==== リストをVuetifyのData tablesで表示 ==== | ==== リストをVuetifyのData tablesで表示 ==== | ||
行 347: | 行 353: | ||
-< | -< | ||
+ | ===== Vuetifyのdata tableで検索(フィルタ) ===== | ||
+ | Vuetifyのdata tableでは、検索(フィルタリング)はかなり簡単に行うことができます。 | ||
+ | |||
+ | < | ||
+ | 特に、< | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | List | ||
+ | < | ||
+ | < | ||
+ | v-model=" | ||
+ | append-icon=" | ||
+ | label=" | ||
+ | single-line | ||
+ | hide-details | ||
+ | ></ | ||
+ | </ | ||
+ | < | ||
+ | : | ||
+ | : | ||
+ | : | ||
+ | : | ||
+ | class=" | ||
+ | > | ||
+ | | ||
+ | <v-alert slot=" | ||
+ | Your search for "{{ search }}" found no results. | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | さらに、< | ||
+ | < | ||
+ | data: function() { | ||
+ | return { | ||
+ | search: '', | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== Vuetifyのdata tableで削除ボタン ===== | ||
+ | |||
+ | < | ||
+ | < | ||
+ | { | ||
+ | text: ' | ||
+ | value: ' | ||
+ | sortable: false | ||
+ | } | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | getNotes()内の、array.pushの中に、idも追加するように編集。(後で、idを用いて、Firestore内のデータを削除するため。) | ||
+ | |||
+ | {{: | ||
+ | |||
+ | < | ||
+ | |||
+ | {{: | ||
+ | |||
+ | < | ||
+ | < | ||
+ | deleteItem: function(item) { | ||
+ | const index = this.notes.indexOf(item) | ||
+ | console.log(index); | ||
+ | //const obj = this.notes[this.index] | ||
+ | // | ||
+ | const id = this.notes[index].id; | ||
+ | console.log(id); | ||
+ | console.log(this.notes) | ||
+ | db.collection(" | ||
+ | this.getNotes(); | ||
+ | } | ||
+ | </ | ||
+ | (ちなみに、data内の、index: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | これで、メモの検索と削除ができるようになりました。 | ||
以上となります。 | 以上となります。 | ||
行 412: | 行 500: | ||
2018年05月09日に更新 | 2018年05月09日に更新 | ||
Cloud Firestore with Vue.jsで簡単なメモアプリを実装する | Cloud Firestore with Vue.jsで簡単なメモアプリを実装する | ||
+ | |||
+ | ===== Vuetifyのdata tableに関するリンク ===== | ||
+ | https:// | ||
+ | @nobu-maple | ||
+ | 2018年12月18日に更新 | ||
+ | STEP05:Laravel5.7 + Vue2.5 で Vuetifyのダイアログを使ってユーザ情報を更新 | ||
+ | |||
+ | https:// | ||
+ | @d-yosh | ||
+ | 2018年03月16日に更新 | ||
+ | Vuetify.jsのData tablesでフィルタリングを行う | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | https:// | ||
+ | How to build a real-time editable data table in Vue.js | ||
+ | Peter Mbanugo | ||
+ | Jun 23, 2018 | ||
+ | |||
+ | |||
+ | |||
+ | |||
12.vue.jsとwebspeechapiで音声認識アプリ/index.html.1546505710.txt.gz · 最終更新: 2019/01/03 by adash333