====== 13.Vue.jsとWeb Speech ApiとFirebaseで認証つきボイスレコーダー(簡易議事録) ======
今回は、前回の[[12.vue.jsとwebspeechapiで音声認識アプリ:|12.vue.jsとwebspeechapiで音声認識アプリ:]]に、Google認証を加えて、さらに、Google認証したIDごとにボイスレコーダー(簡易議事録)として機能するように変更したいと思います。
以下の本と、その[[https://github.com/nabettu/firestore-manual|Firestore 移行マニュアル]]を参考にさせて頂きました。この本は、Vue.jsを初めて学ぶ人に非常にお勧めです。
===== Web Speech APIを使ったアプリはChromeでのみ動作します =====
Internet ExplorerやSafariでは動作しません。
このアプリの音声認識機能を利用するためには、パソコンでも、スマホでも、Chromeをインストールする必要があります。
===== 方針をたてる =====
-マイクのついた端末で、Chromeでアプリを開いてもらうことが前提
-Google認証されたユーザーのみログイン可能(Googleアカウントを持っていれば誰でもログイン可能)
-ログイン後、スタートボタンを押して、マイクに話しかけると、話しかけた内容が文字で表示される
-ストップボタンで文字おこし中止
-文字におこしたテキストを編集可能
-編集後、Firebase Firestoreに保存し、メモ一覧を表示し、検索、削除できる
-各テキストは、各ユーザーのみが自分のテキストを閲覧、削除できる
今回は、以下のコードを参考にさせていただきました。
https://github.com/nabettu/firestore-manual
ソースコード
https://codesandbox.io/s/zz65m3qyl4
できたもの
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190110-095407.png}}
デモサイト1 (Firebase認証を用いる場合は、デプロイ先のアドレスを、FirebaseのAuthenticationで『認証済みドメイン』に登録する必要があります。)
https://csb-zz65m3qyl4.netlify.com/
デモサイト2
https://zz65m3qyl4.codesandbox.io
===== 0.用意するもの（開発環境） =====
パソコン
Chrome（くろーむ、WEBブラウザの一つ）
GitHubアカウント作成済み（無料）
Googleアカウント作成済み（無料）
パソコンは、Windowsパソコンでも、Macでも、かまいませんが、私の場合はWindows 10 Proとなります。今回は、Web Speech APIを利用するため、アプリを利用する人にもChromeは必須です。Internet Exploler、Safari、Firefox、Edgeなどではうまく動かないそうです。
今回利用するもの
CodeSandbox
Firebase Firestore
Vue 2.5.2
Vuetify
firebase
moment
===== 新規Firebaseアプリの作成とFirestoreルールの設定 =====
[[09.emailとpasswordでパスワード制限:index.html|09.emailとpasswordでパスワード制限]]と同様に、https://console.firebase.google.comから、Firebaseアプリを作成し、apiキーなどをメモ帳などに保存しておきます。
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-173615.png}}
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-173657.png}}
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-173814.png}}
*var config以下の設定をコピーしておきます
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-173924.png}}
*Database > Cloud Firestoreの「データベースの作成」をクリック
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-174038.png}}
*有効にする をクリック
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-174241.png}}
*ルール をクリック
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-174434.png}}
*ルールの中身を、以下のように変更して、「公開」をクリック
service cloud.firestore {
match /databases/{database}/documents {
match /memos/{user_id} {
allow read, write: if request.auth.uid == user_id;
}
}
}
（変更前）
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-174933.png}}
（変更後）
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-175139.png}}
*以下のようになります。
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-175222.png}}
これは、Firestore内の、/memos/フォルダ内で、認証された各ユーザーが、{user_id}/フォルダ内のデータを閲覧read, 編集writeできるように設定しています。
この後、さらに以下のように変更しました。
service cloud.firestore {
match /databases/{database}/documents {
match /recognitions/{user_id} {
allow read, write: if request.auth.uid == user_id;
}
match /notes/{user_id} {
allow read, write: if request.auth.uid == user_id;
}
}
}
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190110-095722.png}}
===== FirebaseでGoogle認証の有効化とドメイン追加 =====
CodesandboxでFirebase認証を行う場合は、Firebaseで、
Authentication ＞ ルール ＞ ドメインの追加
で、承認済みドメインに、codesandbox.io を追加する必要があります。
デフォルトでは、localhostと、そのfirebaseアプリのドメインが承認済みになっています。
CodeSandbox、now、やNetlifyなどでアプリを公開する場合は、firebaseアプリの設定でドメイン追加を忘れないようにする必要があります。
{{:08.googleアカウントでのログイン機能:pasted:20181216-104655.png}}
*Authentication > ログイン方法を設定 をクリック
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-180745.png}}
*Google をクリックし
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-180830.png}}
*有効にする をONにして、プロジェクトのサポートメールを選択して、保存 をクリック
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-181049.png}}
*ドメインの追加 をクリックして、
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-181200.png}}
*codesandbox.io (できればサブドメインまで入力が望ましい)と入力して、追加 をクリック
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-181250.png}}
*以下のようになります
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-181344.png}}
===== Codesandboxで新規Vue.jsアプリの作成 =====
前回の[[12.vue.jsとwebspeechapiで音声認識アプリ:|12.vue.jsとwebspeechapiで音声認識アプリ:]]のコードを変更して、
*Google認証でログイン
*Googleアカウントに応じて、Firebase（Firestore）に保存
できるようにしたいと思います。
*[[https://codesandbox.io/|CodeSandbox]]でVueアプリを新規作成
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-233553.png}}
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-233624.png}}
*Dependencyで、以下を追加
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-233725.png}}
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-233941.png}}
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-234032.png}}
vuetify
firebase
moment
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-234519.png}}
*index.htmlとsrc/main.jsの編集し、Vuetifyを利用できるようにします。
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190109-004030.png}}
===== src/App.vueにVuetifyのテンプレートをコピペ =====
src/App.vueに、以下をコピペします。
（変更前）
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190109-165946.png}}
（変更後）
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190109-170134.png}}
===== src/components/Home.vueとsrc/components/Memo.vueの作成と、src/App.vueの編集によるログインの有無による表示するコンポーネントの切り替え機能の実装 =====
最初に、ログイン機能を実装します。
ログイン機能は、実装が一番楽な、Google認証とします。
src/components/Home.vueとsrc/components/Memo.vueを新規作成し、以下のコードをコピペします。
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190109-174042.png}}
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190109-174315.png}}
src/App.vueの編集し、isLoginがtrue or falseで、Home.vueとMemo.vueの表示を分けます。
{{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190109-212004.png}}
===== ログイン関数googleLoginの実装と、ローディング表示の実装 =====
Home.vueでおログインボタンをクリックしたときに、googleLogin()関数が実行されて、google認証されるように設定します。
googleLogin()関数は、