12.vue.jsとwebspeechapiで音声認識アプリ:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
12.vue.jsとwebspeechapiで音声認識アプリ:index.html [2019/01/04] – [リストをVuetifyのData tablesで表示] adash333 | 12.vue.jsとwebspeechapiで音声認識アプリ:index.html [2019/05/11] (現在) – [方針をたてる] adash333 | ||
---|---|---|---|
行 20: | 行 20: | ||
-スタートボタンを押して、マイクに話しかけると、話しかけた内容が文字で表示される | -スタートボタンを押して、マイクに話しかけると、話しかけた内容が文字で表示される | ||
-ストップボタンで文字おこし中止 | -ストップボタンで文字おこし中止 | ||
- | -将来的には、文字におこしたテキストを、Firebase Firestoreに保存し、メモ一覧を表示し、編集、削除できるようにしたい | + | -文字におこしたテキストを、Firebase Firestoreに保存し、メモ一覧を表示し、検索、削除できる |
今回は、以下のコードを参考にさせていただきました。 | 今回は、以下のコードを参考にさせていただきました。 | ||
行 30: | 行 30: | ||
できたもの | できたもの | ||
- | {{: | + | {{: |
- | デモサイト | + | デモサイト1 |
+ | https:// | ||
+ | |||
+ | デモサイト2 | ||
< | < | ||
<iframe src=" | <iframe src=" | ||
行 56: | 行 59: | ||
Vuetify | Vuetify | ||
firebase | firebase | ||
+ | moment | ||
</ | </ | ||
行 205: | 行 209: | ||
{{: | {{: | ||
===== 音声認識結果をFirebtase(Firestore)に保存する ===== | ===== 音声認識結果をFirebtase(Firestore)に保存する ===== | ||
- | ここからはオプションです。 | + | |
http:// | http:// | ||
行 221: | 行 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/ | ||
行 293: | 行 297: | ||
{{: | {{: | ||
- | 誤認識などで、テキストフィールドに表示された内容を変更すると、変更内容はアップロードするテキストには反映されます。 | + | 誤認識などで、テキストフィールドに表示された内容を変更したいときは、テキストを編集後にSAVEボタンをクリックすれば、変更内容はアップロードするテキストに反映されます。 |
==== リストをVuetifyのData tablesで表示 ==== | ==== リストをVuetifyのData tablesで表示 ==== | ||
行 349: | 行 353: | ||
-< | -< | ||
- | ===== Vuetifyのdata tableで検索と削除ボタン ===== | + | ===== 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: | ||
+ | {{: | ||
+ | これで、メモの検索と削除ができるようになりました。 | ||
以上となります。 | 以上となります。 |
12.vue.jsとwebspeechapiで音声認識アプリ/index.html.1546572450.txt.gz · 最終更新: 2019/01/04 by adash333