内容へ移動
サルでもわかるWEBプログラミング
フリーソフトのみでホームページ作成
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
index.html
»
13.vue.jsとfirebaseで認証つきボイスレコーダー
トレース:
13.vue.jsとfirebaseで認証つきボイスレコーダー:index.html
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 13.Vue.jsとWeb Speech ApiとFirebaseで認証つきボイスレコーダー(簡易議事録) ====== 今回は、前回の<wrap hi>[[12.vue.jsとwebspeechapiで音声認識アプリ:|12.vue.jsとwebspeechapiで音声認識アプリ:]]</wrap>に、Google認証を加えて、さらに、Google認証したIDごとにボイスレコーダー(簡易議事録)として機能するように変更したいと思います。 以下の本と、その[[https://github.com/nabettu/firestore-manual|Firestore 移行マニュアル]]を参考にさせて頂きました。この本は、Vue.jsを初めて学ぶ人に非常にお勧めです。 <html> <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07HXMHQQK&linkId=2676690c66ac2be60e3b288d6c87b766"></iframe> </html> ===== 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 <html> <iframe src="https://codesandbox.io/embed/zz65m3qyl4" 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> </html> ===== 0.用意するもの(開発環境) ===== <code> パソコン Chrome(くろーむ、WEBブラウザの一つ) GitHubアカウント作成済み(無料) Googleアカウント作成済み(無料) </code> パソコンは、Windowsパソコンでも、Macでも、かまいませんが、私の場合はWindows 10 Proとなります。今回は、Web Speech APIを利用するため、アプリを利用する人にもChromeは必須です。Internet Exploler、Safari、Firefox、Edgeなどではうまく動かないそうです。 今回利用するもの <code> CodeSandbox Firebase Firestore Vue 2.5.2 Vuetify firebase moment </code> ===== 新規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}} *ルールの中身を、以下のように変更して、「公開」をクリック <code> service cloud.firestore { match /databases/{database}/documents { match /memos/{user_id} { allow read, write: if request.auth.uid == user_id; } } } </code> (変更前) {{: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できるように設定しています。 この後、さらに以下のように変更しました。 <code> 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; } } } </code> {{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190110-095722.png}} ===== FirebaseでGoogle認証の有効化とドメイン追加 ===== CodesandboxでFirebase認証を行う場合は、Firebaseで、 Authentication > ルール > ドメインの追加 で、承認済みドメインに、codesandbox.io を追加する必要があります。 デフォルトでは、localhostと、そのfirebaseアプリのドメインが承認済みになっています。 <wrap hi>CodeSandbox、now、やNetlifyなどでアプリを公開する場合は、firebaseアプリの設定でドメイン追加を忘れないようにする</wrap>必要があります。 {{: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アプリの作成 ===== 前回の<wrap hi>[[12.vue.jsとwebspeechapiで音声認識アプリ:|12.vue.jsとwebspeechapiで音声認識アプリ:]]</wrap>のコードを変更して、 *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}} <code> vuetify firebase moment </code> {{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-234519.png}} *index.htmlとsrc/main.jsの編集し、Vuetifyを利用できるようにします。 <html> <script src="https://gist.github.com/adash333/da3a661686d2c9484c420c2a61709ce0.js"></script> </html> {{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190109-004030.png}} ===== src/App.vueにVuetifyのテンプレートをコピペ ===== src/App.vueに、以下をコピペします。 <html> <script src="https://gist.github.com/adash333/9ce50ce8af30f0a214f2372820da1c13.js"></script> </html> (変更前) {{: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を新規作成し、以下のコードをコピペします。 <html> <script src="https://gist.github.com/adash333/16be43f8504c65f817f9233128520442.js"></script> </html> {{: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()関数は、<script>内のmethods: {}の中に定義します。 src/components/Home.vue {{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190109-212623.png}} ログイン状態のチェックは、src/App.vueで行い、<script>内の、created: function() {}の中に記載します。 src/App.vue {{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190109-213028.png}} なお、google認証時に、Googleからuserというデータ(認証した人の名前などのデータ)をuserDataに格納しています。App.vue(親コンポーネント)からMemo.vue(子コンポーネント)にuserDataを渡すために、App.vueの<template>内に、 <Memo :user="userData"> と記載します。Memo.vue(子コンポーネント)で:userを受け取るときには、Memo.vueの<script>内で、 props: ["user"], として受け取ります。 src/components/Memo.vue {{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190109-213807.png}} (作成中、、、) ===== 実行してみる ===== {{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190110-100325.png}} {{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190110-100421.png}} {{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190110-100507.png}} うまくいっているようです。必ずしも音声入力しなくても、普通のメモとしても利用できます。 ===== ソースコード ===== ソースコード https://codesandbox.io/s/zz65m3qyl4 できたもの {{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190110-095407.png}} デモサイト https://zz65m3qyl4.codesandbox.io <html> <iframe src="https://codesandbox.io/embed/zz65m3qyl4" 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> </html> ===== 気になること ===== 前回の<wrap hi>[[12.vue.jsとwebspeechapiで音声認識アプリ:|12.vue.jsとwebspeechapiで音声認識アプリ:]]</wrap>までのコードをコピペしようと思ったのですが、やり方がわかりませんでした。結局、データを1個追加したり削除するたびに、ローカルのnotesデータ(オブジェクト、連想配列)を更新して、そのnotesデータ全てを、Firestoreにアップロードしたり、ダウンロードしたりするコードになってしまいました。テキストなのでまあよいかもしれませんが、データ通信量が莫大になってしまうのが気になりますが、解決方法がわかりません。 ===== 今回写経した本 ===== Vue.js初めての方に非常にお勧めです。読みながら手を動かしてアプリが動くことを実感できて楽しいです。 <html> <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07HXMHQQK&linkId=2676690c66ac2be60e3b288d6c87b766"></iframe> </html>
13.vue.jsとfirebaseで認証つきボイスレコーダー/index.html.txt
· 最終更新: 2019/05/11 by
adash333
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ