技術・Web access_time2019.05.05 02:29 update

WordPressからNuxt+Firebaseへの移行 ③ Firebaseの準備と記事の投稿

前回までのあらすじ

 Nuxt.jsで記事編集画面を作りましたが、送信する先がまだありません。

 記事を保存するデータベースをFirebaseに用意します。


Firebaseの基本設定

Nuxt.jsとFirebaseを使って簡単なWebサービスを作る<導入編>|東京のWeb制作会社|non-standard world株式会社

 Firebaseの初期設定については上記のページを参考にしてください。全部書いてあります。

 大まかにまとめるなら

  1. Firebaseのプロジェクトを作成
  2. npm install -g firebase-tools
  3. firebase login でログイン
  4. firebase init hosting でプロジェクトを選択

 という流れです。

Firebase側の初期設定


1556651077520

 Firestoreに移動し、

1556651129921

 テストモードで開始します。


 「コレクションの追加」を選択し、

1556651167691

 posts コレクションを作成。

1556816631479

 適当に中身を設定します。


Nuxt.jsにFirebaseの設定情報を追加

Nuxt で Firebase を使う (Cloud Firestore & Hosthing) – かもメモ

 こちらの記事を参考に、まず環境変数を導入します。

yarn add @nuxtjs/dotenv

 でモジュールをインストールし、

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/markdownit',
    '@nuxtjs/dotenv'
  ],

 dotenvを追記。

.env というファイルを作成し、中身はfirebaseコンソールの埋め込みコードをコピー。

FB_API_KEY = "***"
FB_AUTH_DOMAIN = "***"
FB_DATABASE_URL = "***"
FB_PROJECTID = "***"
FB_STORAGE_BUCKET = "***"
FB_MESSAGING_SENDER_ID = "***"

環境変数をブラウザ上でも参照できるよう、nuxt.config.js

  env: {
    FB_API_KEY: process.env.FB_API_KEY,
    FB_AUTH_DOMAIN: process.env.FB_AUTH_DOMAIN,
    FB_DATABASE_URL: process.env.FB_DATABASE_URL,
    FB_PROJECTID: process.env.FB_PROJECTID,
    FB_STORAGE_BUCKET: process.env.FB_STORAGE_BUCKET,
    FB_MESSAGING_SENDER_ID: process.env.FB_MESSAGING_SENDER_ID
  },

 と追記。


plugins/firebase.jsというファイルを作成し、

const firebase = require('firebase/app')
require('firebase/firestore')
require('firebase/storage')
// .env に設定した値を取得
const config = {
  apiKey: process.env.FB_API_KEY,
  authDomain: process.env.FB_AUTH_DOMAIN,
  databaseURL: process.env.FB_DATABASE_URL,
  projectId: process.env.FB_PROJECTID,
  storageBucket: process.env.FB_STORAGE_BUCKET,
  messagingSenderId: process.env.FB_MESSAGING_SENDER_ID
}
if (!firebase.apps.length) {
  firebase.initializeApp(config)
}
export default firebase


firebaseから記事データを取得する

Cloud Firestore を使ってみる | Firebase

 公式ドキュメントが非常に丁寧なので大体のことは書いてありますが……。

 まずyarn add firebaseでプロジェクトにfirebaseをインストールし、

 pages/admin/post/create.vueのscriptタグのすぐ下に、

import firebase from '~/plugins/firebase.js'
const db = firebase.firestore()

export defaultの中に

  mounted() {
    db.collection('posts')
      .orderBy('id', 'desc') // IDの大きい順に並べて
      .limit(1) // 最新の1件のみを
      .get() // 取得
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          console.log(doc.data())
        })
      })
  },

 ここで一度yarn devします。(ホットリロードだとnuxt.config.jsが更新されないので、一度停止してから再起動させます)

 正しく進んでいれば、ページ(/admin/create/)にアクセスした時点で

1556817463694

 このようにテストで登録したデータが取得されます。

 このpostsコレクションに登録した記事の中から、最新10件を取得したり、カテゴリーで絞り込みしたりして、表示していくわけです。

 ようやくちょっとだけブログのイメージが見えてきたのではないでしょうか。


firebaseに記事データを送信する

idを自動で割り振る

 idは最新のidにプラス1すれば良いということにします。WordPressでは投稿以外の画像などの数字も重複しないようになっていましたが、そのためのコレクションを作るのも面倒なので、単純に最新記事のIDにプラス1します。

 data() では仮のIDを設定し、

 data() {
    return {
      id: 0,

 mounted()で取得した数字に1を足して、

        querySnapshot.forEach(doc => {
          this.id = doc.data().id + 1
        })

  computedのpostの中に

id: this.id

 これでidが割り振られ、最初に登録した仮の記事と同じ情報が揃いました。

 ※ちなみにこのIDはfirebaseのデータ名となるIDにも使用します。ドキュメント名とIDを揃えておくと、絞り込みを使わずにIDで直接参照できるようになります。


送信ボタンをクリックした際にデータを送信

        <div class="button is-link" @click="submit()">
          送信
        </div>

 onclickにsubmit() イベントを追加し、methods

    submit() {
      db.collection('posts')
        .doc(String(this.post.id))
        .set(this.post)
    }

この状態で

1556820114841

 新規記事を入力し、「送信」をクリックします。

 firebaseのコンソールを確認すれば

1556820252385

 新たなドキュメントが追加され、

 新規作成ページをリロードすれば次に投稿するデータのIDは10000002となります。

 投稿するドキュメントのIDを自動割り振りではなく数字にしているのは、


総括

 インポートのことと画像のことを考えなければもうブログとしてアップできる状態になりました。

 どのブログでも行う手順として共通化できるのは正直ここまでというか、nuxtに慣れている人であればここからは大体自分でできてしまうのではないかという気がしますが、もう少し続けます。

 次は「画像をFirebase Storageにアップロードする」「カテゴリー・タグをFirebaseに保存する」です。

WordPressからNuxt+Firebaseへの移行 ③ Firebaseの準備と記事の投稿 への{{comments_list.length}}件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

*技術・Web* カテゴリーの最新記事