Firestoreのデータからブログを表示する
WordPressブログをNuxt＋Firebaseに移行するシリーズ。 WordPressに存在する記事データの必要な情報は全てFirestoreに同期させたので、次はいよいよ表示。 現在のブログ表示で行っていることを、Firestoreからデータを取得するクエリに置き換えていきます。 前回も書きましたが、そもそもブログごとに必要・不必要な部分がたくさんあるので難しいんですよね。 ルーティング自体は書きますが、JSONデータをどう扱うかは完全に個々のブログのデザインの話になるので。
初期設定
Firebaseの初期設定やNuxtとの連携の話はもういろいろなところにあると思うのでざっくり。yarn add firebase する ダッシュボードから「アプリを追加」でWEBアプリを追加 表示されるJS情報をplugin/firebase.ts ファイルに入れてnuxtで読み込むimport firebase from 'firebase/app'import 'firebase/firestore'if (!firebase.apps.length) { const config = { apiKey: process.env.firebaseApiKey, authDomain: process.env.firebaseAuthDomain, databaseURL: process.env.firebaseDatabaseURL, projectId: process.env.firebaseProjectId, storageBucket: process.env.firebaseStorageBucket, messagingSenderId: process.env.firebaseMessagingSenderId } firebase.initializeApp(config)}export default firebase ここでは@nuxt/dotenvを使って環境変数化していますが、面倒な方は表示されるIDなどを直接書いてもそんなに問題はないと思います。（そもそもCDNでも使える設計なので公開情報のはず） 加えて、今後GitHubからFirebase Hostingへの自動デプロイを行うためには.env をGitHubに上げる必要も出てくるので、あまり意味がなくなる可能性もあります。気休めみたいなものです。 ストアから情報を呼び出す際は、このプラグインで初期化されたfirebaseを呼び出すので、 import firebase from '~/plugins/firebase'const db = firebase.firestore() みたいになります。 このDBに対しての具体的な操作は、Firebaseのドキュメントを見ればわかります。 Cloud Firestore を使ってみる | Firebase これ以降はdbの定義などは省いて書いていきます。コンテンツ
「WordPressサイトからURLを変えることなく移行」するためには、各アーカイブページを表示する必要があります。ルーティング
WordPressに存在する主要なページは以下の通り。| ページ名 | URL |
|---|---|
| トップページ（記事一覧） | / |
| 記事 | /archives/{post_id} |
| カテゴリーアーカイブ | /category/{category_slug} |
| タグアーカイブ | /tag/{tag_slug} |
| 年別・月別・日別アーカイブ | /archives/date/{year}/{month}/{day} |
| 固定ページ | /{page_slug} |
年別/月別/日別だけ面倒ですが、WordPressのルーティングを再現するのは意外と簡単なのです。 というわけで作るページはこんな感じです。意外と少ないですね。トップページ
まずメインの記事部分はこんな感じで取得してきます。import firebase from '~/plugins/firebase'const db = firebase.firestore()export const state = () => ({ posts: []})export const mutations = { SET_POSTS: (state, ...