差分

このページの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で音声認識アプリ(ボイスレコーダー) ======
 以下の本を衝動買いしたところ、<wrap hi>Web Speech API</wrap>というWEBブラウザChromeで動作する簡単音声認識システムがあることを知りました。
@@ 行 20: / 行 20: @@
   -スタートボタンを押して、マイクに話しかけると、話しかけた内容が文字で表示される
   -ストップボタンで文字おこし中止
-  -将来的には、文字におこしたテキストを、Firebase Firestoreに保存し、メモ一覧を表示し、編集、削除できるようにしたい
+  -文字におこしたテキストを、Firebase Firestoreに保存し、メモ一覧を表示し、検索、削除できる
 今回は、以下のコードを参考にさせていただきました。
@@ 行 30: / 行 30: @@
 できたもの
-{{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190103-095959.png}}
+{{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190106-010227.png}}
-デモサイト
+デモサイト1
+https://csb-71yznl2zwq.netlify.com/
+デモサイト2
 <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>
@@ 行 51: / 行 54: @@
 <code>
 CodeSandbox
+Firebase Firestore
 Vue 2.5.2
 Vuetify
+firebase
+moment
 </code>
@@ 行 203: / 行 209: @@
 {{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190103-062012.png}}
 ===== 音声認識結果を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
@@ 行 219: / 行 225: @@
 ==== CodeSandboxでFirebaseを使用できるようにDependencyの追加とindex.htmlとsrc/main.jsの編集 ====
-  -Dependencyで、Vuetifyとfirebaseとvuefire 2.0.0-alpha.6を追加
+  -Dependencyで、さらに、firebaseを追加
   -index.htmlの編集（不要かも？）
   -src/main.jsの編集（こちらに、FirebaseのAPIキーなどをコピペします）
@@ 行 291: / 行 297: @@
 {{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190103-095459.png}}
-誤認識などで、テキストフィールドに表示された内容を変更すると、変更内容はアップロードするテキストには反映されます。
+誤認識などで、テキストフィールドに表示された内容を変更したいときは、テキストを編集後にSAVEボタンをクリックすれば、変更内容はアップロードするテキストに反映されます。
 ==== リストをVuetifyのData tablesで表示 ====
@@ 行 347: / 行 353: @@
   -<script>で、data: function() {return {}} 内に、pagination: {sortBy: 'id', descending: true,}のように記載する。
+===== Vuetifyのdata tableで検索（フィルタ） =====
+Vuetifyのdata tableでは、検索（フィルタリング）はかなり簡単に行うことができます。
+<template>内に、以下を追加。
+特に、<v-data-table :search="search" > がポイントです。
+<code>
+ <v-card>
+    <v-card-title>
+      List
+      <v-spacer></v-spacer>
+      <v-text-field
+        v-model="search"
+        append-icon="search"
+        label="Search"
+        single-line
+        hide-details
+      ></v-text-field>
+          </v-card-title>
+            <v-data-table
+              :headers="headers"
+              :items="notes"
+              :pagination.sync="pagination"
+              :search="search"
+              class="elevation-1"
+            >
+ 　　　　(略)
+              <v-alert slot="no-results" :value="true" color="error" icon="warning">
+                Your search for "{{ search }}" found no results.
+              </v-alert>
+            </v-data-table>
+ </v-card>
+<code>
+さらに、<script>内に、以下を追加
+<code>
+data: function() {
+    return {
+      search: '',   // ←これを追加！！
+    }
+}
+</code>
+{{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190105-181410.png}}
+===== Vuetifyのdata tableで削除ボタン =====
+<scipt>のdata:のheaders: []内の最後に以下を追加
+<code>
+        {
+          text: '削除',
+          value: 'name',
+          sortable: false
+        }
+</code>
+{{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190105-183257.png}}
+getNotes()内の、array.pushの中に、idも追加するように編集。（後で、idを用いて、Firestore内のデータを削除するため。）
+{{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190105-185501.png}}
+<template>内に、削除ボタンを追加（deleteItem関数を設置）
+{{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190105-185731.png}}
+<script>のmethods内に、deleteItem関数を定義
+<code>
+    deleteItem: function(item) {
+      const index = this.notes.indexOf(item)
+      console.log(index);
+      //const obj = this.notes[this.index]
+      //console.log(obj);
+      const id = this.notes[index].id;
+      console.log(id);
+      console.log(this.notes)
+      db.collection("recognitions").doc(id).delete();
+      this.getNotes();
+    }
+</code>
+（ちなみに、data内の、index: 0 は削除しました。）
+{{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190106-004937.png}}
+これで、メモの検索と削除ができるようになりました。
 以上となります。
@@ 行 412: / 行 500: @@
 年05月09日に更新
 Cloud Firestore with Vue.jsで簡単なメモアプリを実装する
+===== Vuetifyのdata tableに関するリンク =====
+https://qiita.com/nobu-maple/items/f0322bc99dce2d8eda40
+@nobu-maple
+年12月18日に更新
+STEP05：Laravel5.7 + Vue2.5 で Vuetifyのダイアログを使ってユーザ情報を更新
+https://qiita.com/d-yosh/items/9299389b32c496a9b64c
+@d-yosh
+年03月16日に更新
+Vuetify.jsのData tablesでフィルタリングを行う
+https://medium.freecodecamp.org/how-to-build-a-real-time-editable-data-table-in-vue-js-46b7f0b11684
+How to build a real-time editable data table in Vue.js
+Peter Mbanugo
+Jun 23, 2018