差分

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

--- 11.vue.jsとfirebaseで画像アップローダー:index.html [2019/01/01] – [方針をたてる] 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>
+に変更に。
 ===== 方針をたてる =====
@@ 行 19: / 行 61: @@
 ソースコード
 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できないように設定しています。
@@ 行 42: / 行 87: @@
 CodeSandbox
 Firebase (Cloud Firestore, Cloud Storage)
 Vue 2.5.2
 Vuetify
 firebase
+vuefire 2.0.0-alpha.6
 </code>
@@ 行 80: / 行 127: @@
 <html>
-https://gist.github.com/adash333/ce1bfe3a37314508daa0093afdc3a665
+<script src="https://gist.github.com/adash333/ce1bfe3a37314508daa0093afdc3a665.js"></script>
 </html>
@@ 行 91: / 行 138: @@
 <code>
 data: {
-    photo: null,
-    photo_url: null
 },
 </code>
@@ 行 225: / 行 271: @@
 年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>