差分

このページの2つのバージョン間の差分を表示します。

--- 13.vue.jsとfirebaseで認証つきボイスレコーダー:index.html [2019/01/08] – [src/App.vueにVuetifyのテンプレートをコピペ] adash333
+++ 13.vue.jsとfirebaseで認証つきボイスレコーダー:index.html [2019/05/11] (現在) – [方針をたてる] adash333
@@ 行 26: / 行 26: @@
 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>
@@ 行 82: / 行 99: @@
 これは、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認証の有効化とドメイン追加 =====
@@ 行 127: / 行 159: @@
 firebase
 moment
-vue-spinner
 </code>
 {{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted:20190108-234519.png}}
@@ 行 144: / 行 175: @@
 <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/App.vueの編集とsrc/Home.vueとsrc/Edit.vueの作成 =====
+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}}
-参考：https://exhikkii.hatenablog.com/entry/2018/08/07/003023
+===== ログイン関数googleLoginの実装と、ローディング表示の実装 =====
--08-07
+Home.vueでおログインボタンをクリックしたときに、googleLogin()関数が実行されて、google認証されるように設定します。
-Vueでloading indicatorを実装する
+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>内に、
-===== 新規Vue.jsアプリの作成と、前回の部分までのコードをコピペ =====
+<Memo :user="userData">
-前回の<wrap hi>[[12.vue.jsとwebspeechapiで音声認識アプリ:|12.vue.jsとwebspeechapiで音声認識アプリ:]]</wrap>までのコードをコピペします。
+と記載します。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初めての方に非常にお勧めです。読みながら手を動かしてアプリが動くことを実感できて楽しいです。