差分

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

--- 11.vue.jsとfirebaseで画像アップローダー:index.html [2019/01/01] – [FirestoreからURLリストをダウンロード] adash333
+++ 11.vue.jsとfirebaseで画像アップローダー:index.html [2020/04/19] (現在) – [方針をたてる] adash333
@@ 行 1: / 行 1: @@
 ====== 11.Vue.jsとFirebaseで画像アップローダー ======
-作成中
-===== 方針をたてる =====
+Vue.jsとFirebaseを用いて、画像アップローダーを作ってみたいと思います。
+FirebaseのCloud Firestorageに複数の画像を保存します。しかし、直接その一覧をとってくることができないため、画像を保存する段階で、あらかじめ、Firestoreに画像のアドレスを保存しておく必要があるため、ややこしいコードになっています。
-作成中
+===== 2019/8/13時点、動きません。 =====
+<del>Vuefireのためか、Vuetifyのせいなのか、動きません。</del>
+→動くようになりましたが、vuefireとVuetifyを勉強しなおす必要がありそうです。たった1年で、すぐにプログラムが動かなくなってしまうのは、かなりへこみます。
+https://qiita.com/mugi_chan_tea/items/5726019da614ae322dd3
+@mugi_chan_tea
+年06月22日に投稿
+Vuefireが無いエラー【Vue.jsとfirebaseの環境構築】
+<code>
+import { firestorePlugin } from 'vuefire'
+Vue.use(firestorePlugin)
+</code>
+https://qiita.com/rerere0101/items/7c17f320a4583f1d2c2e
+@rerere0101
+年04月18日に更新
+Vuetifyを使ってToDoアプリをちょっとかっこよくする
+https://github.com/vuetifyjs/vuetify/issues/6895
+さらに、上記サイトを参考にしてmain.jsに以下を追加したら動きました。
+<code>
+const vuetifyOptions = { }
+Vue.use(Vuetify)
+new Vue({
+  el: '#app',
+  vuetify: new Vuetify(vuetifyOptions)
+})
+</code>
+Vuetifyのツールバー（ヘッダー）が、
+<v-toolbar color="indigo" dark fixed app></v-toolbar>
+から、
+<v-app-bar app color="indigo" dark></v-app-bar>
+に変更に。
+===== 方針をたてる =====
+  -画像をアップロードできる
+  -アップロードした画像の一覧が表示される
+  -画像ファイルはFirebase Cloud Storageに保存
+  -画像ファイルのアドレスはFirebase Firestoreに保存し、画像のアドレス一覧はそちらからとってくる
 今回は、以下のコードを参考にさせていただきました。
@@ 行 16: / 行 58: @@
 https://medium.com/vue-mastery/full-stack-vue-js-with-firestore-62e2fe2ec1f3
+ソースコード
+https://codesandbox.io/embed/219m6n7z3j
+作ったもの
+{{:11.vue.jsとfirebaseで画像アップローダー:pasted:20190102-001443.png}}
+<html>
+<iframe src="https://codesandbox.io/embed/219m6n7z3j" 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>
+現在、firebaseの方でwriteできないように設定しています。
 ==== 0.用意するもの（開発環境） ====
 <code>
@@ 行 30: / 行 87: @@
 CodeSandbox
 Firebase (Cloud Firestore, Cloud Storage)
 Vue 2.5.2
 Vuetify
 firebase
+vuefire 2.0.0-alpha.6
 </code>
@@ 行 40: / 行 99: @@
 {{:11.vue.jsとfirebaseで画像アップローダー:pasted:20181231-232643.png}}
-  *いつもの設定をコピーしておきます
+  *var config以下の設定をコピーしておきます
 {{:11.vue.jsとfirebaseで画像アップローダー:pasted:20181231-233848.png}}
   *Database > Cloud Firestoreの、「データベースを作成」をクリック
@@ 行 68: / 行 127: @@
 <html>
-https://gist.github.com/adash333/ce1bfe3a37314508daa0093afdc3a665
+<script src="https://gist.github.com/adash333/ce1bfe3a37314508daa0093afdc3a665.js"></script>
 </html>
@@ 行 79: / 行 138: @@
 <code>
 data: {
-    photo: null,
-    photo_url: null
 },
 </code>
@@ 行 200: / 行 258: @@
 https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja
 {{:11.vue.jsとfirebaseで画像アップローダー:pasted:20190101-132935.png}}
+Firebase Realtime Databaseでは、自動で付与されるIDが日付順になっていたのだが、Firestoreでは日付とは関係なくランダムとのこと。つまり、データをFirestoreに保存するときに、日付データも保存しないといけない。
+https://hi1280.hatenablog.com/entry/2017/11/12/155257
+-11-12
+AngularFireでRealtime DatabaseからCloud Firestoreに変更した
+https://blog.tplg.co.jp/2018/08/21/firebase-vuejs-chat-explanation/
+グラミング
+【解説編】Cloud Firestore(Firebase)とVue.jsを利用して1時間でチャットサービスを作ろう
+年8月21日
+===== Firestoreからの警告 =====
+https://qiita.com/teramotodaiki/items/b3592326579166003102
+{{:11.vue.jsとfirebaseで画像アップローダー:pasted:20190101-230900.png}}
+→結局よくわからかなった。
+https://www.katonobo.com/entry/cloudfirestore-timestamp
+{{:11.vue.jsとfirebaseで画像アップローダー:pasted:20190101-235432.png}}
+上記サイトによると、以下でよいらしい！！！
+<code>
+db.collection('comments').add({
+  timestamp: Date.now()
+})
+</code>