11.vue.jsとfirebaseで画像アップローダー:index.html
差分
このページの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で画像アップローダー ====== | ====== 11.Vue.jsとFirebaseで画像アップローダー ====== | ||
- | 作成中 | ||
- | ===== 方針をたてる ===== | + | Vue.jsとFirebaseを用いて、画像アップローダーを作ってみたいと思います。 |
+ | FirebaseのCloud Firestorageに複数の画像を保存します。しかし、直接その一覧をとってくることができないため、画像を保存する段階で、あらかじめ、Firestoreに画像のアドレスを保存しておく必要があるため、ややこしいコードになっています。 | ||
- | 作成中 | + | ===== 2019/ |
+ | < | ||
+ | →動くようになりましたが、vuefireとVuetifyを勉強しなおす必要がありそうです。たった1年で、すぐにプログラムが動かなくなってしまうのは、かなりへこみます。 | ||
+ | https:// | ||
+ | @mugi_chan_tea | ||
+ | 2019年06月22日に投稿 | ||
+ | Vuefireが無いエラー【Vue.jsとfirebaseの環境構築】 | ||
+ | < | ||
+ | import { firestorePlugin } from ' | ||
+ | |||
+ | Vue.use(firestorePlugin) | ||
+ | </ | ||
+ | |||
+ | https:// | ||
+ | @rerere0101 | ||
+ | 2019年04月18日に更新 | ||
+ | Vuetifyを使ってToDoアプリをちょっとかっこよくする | ||
+ | |||
+ | https:// | ||
+ | さらに、上記サイトを参考にしてmain.jsに以下を追加したら動きました。 | ||
+ | |||
+ | < | ||
+ | const vuetifyOptions = { } | ||
+ | Vue.use(Vuetify) | ||
+ | |||
+ | new Vue({ | ||
+ | el: '# | ||
+ | vuetify: new Vuetify(vuetifyOptions) | ||
+ | }) | ||
+ | </ | ||
+ | |||
+ | Vuetifyのツールバー(ヘッダー)が、 | ||
+ | < | ||
+ | から、 | ||
+ | < | ||
+ | に変更に。 | ||
+ | |||
+ | |||
+ | ===== 方針をたてる ===== | ||
+ | -画像をアップロードできる | ||
+ | -アップロードした画像の一覧が表示される | ||
+ | -画像ファイルはFirebase Cloud Storageに保存 | ||
+ | -画像ファイルのアドレスはFirebase Firestoreに保存し、画像のアドレス一覧はそちらからとってくる | ||
今回は、以下のコードを参考にさせていただきました。 | 今回は、以下のコードを参考にさせていただきました。 | ||
行 16: | 行 58: | ||
https:// | https:// | ||
+ | |||
+ | |||
+ | ソースコード | ||
+ | https:// | ||
+ | |||
+ | 作ったもの | ||
+ | {{: | ||
+ | |||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
+ | |||
+ | 現在、firebaseの方でwriteできないように設定しています。 | ||
+ | |||
+ | |||
==== 0.用意するもの(開発環境) ==== | ==== 0.用意するもの(開発環境) ==== | ||
< | < | ||
行 30: | 行 87: | ||
CodeSandbox | CodeSandbox | ||
Firebase (Cloud Firestore, Cloud Storage) | Firebase (Cloud Firestore, Cloud Storage) | ||
+ | |||
Vue 2.5.2 | Vue 2.5.2 | ||
Vuetify | Vuetify | ||
firebase | firebase | ||
+ | vuefire 2.0.0-alpha.6 | ||
</ | </ | ||
行 68: | 行 127: | ||
< | < | ||
- | https:// | + | <script src="https:// |
</ | </ | ||
行 79: | 行 138: | ||
< | < | ||
data: { | data: { | ||
- | photo: null, | + | |
- | photo_url: null | + | |
}, | }, | ||
</ | </ | ||
行 207: | 行 265: | ||
2017-11-12 | 2017-11-12 | ||
AngularFireでRealtime DatabaseからCloud Firestoreに変更した | AngularFireでRealtime DatabaseからCloud Firestoreに変更した | ||
+ | |||
+ | https:// | ||
+ | グラミング | ||
+ | 【解説編】Cloud Firestore(Firebase)とVue.jsを利用して1時間でチャットサービスを作ろう | ||
+ | | ||
+ | |||
+ | ===== Firestoreからの警告 ===== | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | →結局よくわからかなった。 | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | 上記サイトによると、以下でよいらしい!!! | ||
+ | < | ||
+ | db.collection(' | ||
+ | timestamp: Date.now() | ||
+ | }) | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | |||
11.vue.jsとfirebaseで画像アップローダー/index.html.1546340338.txt.gz · 最終更新: 2019/01/01 by adash333