Firebase
はじめに Firebase の Realtime Database から情報を取得し、 Nuxt.js の v-for で表示させた。 初回はうまく読み込みのだが、新しくデータを追加し、.on メソッドで呼び出したとき、今までのデータが１から呼び出され、過去のデータが２重に書き込まれた。 …
はじめに 別記事にて記載したが、Firebase の Realtime Database にpush() した場合、自動でIDが付与される。 saite-name-rtdb ├ user-id ├ -謎の文字列 ├ today ├ 0: "HELLO" └ 1: "GOODBYE" ├ -謎の文字列 ├ today ├ 0: "HELLO" └ 1: "GOODBYE" こんな感じ…
はじめに Firebase の Realtime Database で ログインしたユーザーが投稿できる仕組みを作成している。 ログイン、push() を用いユーザー投稿まではできた。 が、その際に生成されるJSON で思い通りにいかない点があった。 意図しない文字列が ユーザー投稿…
はじめに 過去記事でNuxt.js と Firebase の Realtime Database にデータを保存する処理を記載した。 >Nuxt.js でFirebase にデータを保存する ただ複数要素を保存する方法がわからなかった。 厳密にいえば、変動するデータ数の保存の仕方が不明だったので、…
前提 Firebase 側の設定を完了しておくこと。 >Firebase 側の設定について Nuxt.js 側の設定 コード <div class="form"> <input type="text" v-model="hoge"> <button @click="saveContent(hoge)">保存</button> </div> <script> import firebase from "~/plugins/firebase.js"; // △ https://blog-progblog-web.hatenablog.com/entry/2021/01/10/173554 の記事を…
データベース設定の手順 サイドバーの Realtime Database を選択する。 データベースを作成する を選択する。 Realtime Database のロケーション はデフォルト 米国 のまま。 セキュリティルールは ロックモード を選択する。 Realtime Database > ルールを…
前提 Nuxt.js と Firebase でログインシステムを構築しておく。 上記ログインシステムの構築方法は別記事にて記載している。 上記システムの仕組み まずは大枠 index.vue でコンポーネント（ログイン前） Hello.vue を表示する。 Hello.vue に組み込まれたGo…
前提 Nuxt.js と Firebase でログインシステムを構築しておく。 上記ログインシステムの構築方法は別記事にて記載している。 コード <template> <div > <h1>GOOD BYE</h1> <span>{{ user.displayName }}</span> <button @click="logout">ログアウト</button> </div> </template> <script> import firebase from "~/plugins/firebase.js"; export default { prop…
前提 Nuxt.js と Firebase でログインシステムを構築しておく。 上記ログインシステムの構築方法は別記事にて記載している。 概要 前提でやったこと まずは大枠 index.vue にHello.vue を表示する。 Hello.vue に組み込まれたGoogleログイン ボタンをクリッ…
前提 Nuxt.js と Firebase Googleアカウントログインの仕組みを作成しておく。 仕組みの作り方は別記事にて。 コンポーネントの構成 大枠 index.vue コンポーネント（ログイン前） Hello.vue コンポーネント（ログイン後） Goodbye.vue 仕組みを言語化 まず…
Firebase でログイン設定をする手順 対象のFirebase console にアクセスする。 ［ Authentication ］ タブに移動する。 ［ ログイン方法を設定 ］ をクリックする。 ［ ログイン プロバイダ ］ のGoogle をクリックし［ 有効にする ］をクリックする。 プロ…
前提条件 事前にNuxt.jsのプロジェクトを作成しておく必要がある。*1 まずは Firebase をインストールする npm install firebase --save Firebase CLI をインストールする npm install -g firebase-tools 上記コマンドを使用し、Firebase CLI をインストール…
Firebase でプロジェクトを作成 Firebase へアクセスする [ プロジェクトを作成 ] ボタンをクリックする プロジェクト名を決める（プロジェクト名は管理画面上の名称になる） プロジェクトID*1が動的に決まるが、変更もOK Firebase の規約にチェックを入れ、…
