最近話題のヘッドレスCMS「microCMS」を使って、　画像一覧サイトを作ってみた

今回は、Nuxt.js+microCMS+Firebaseを使って、私が撮った写真の画像一覧サイトを作りました。

作ったもの

picture

使用技術
・Nuxt.js
・microCMS
・Firebase

ヘッドレスCMSとは

参考記事 ↓

What is a headless CMS

ヘッドレスCMSとは、従来のCMS(wordpress等)とは違い、バックエンドに特化したCMSであり、APIを介することで、web、iOSアプリ、Androidアプリ、スマートスピーカーなど、様々なデバイスにコンテンツを配信することができます。また、コンテンツをAPIから取得することができるため、必要なコンテンツを取得し、表示させたい箇所に表示させることが可能です。

microCMS

参考記事 ↓

microCMS｜APIベースの日本製ヘッドレスCMS

microCMSはヘッドレスCMSと呼ばれる新しいタイプのCMSです。
開発者も編集者も様々な制約から解放され、素早くPDCAを回すことができます。エンジニアは、手軽にAPIの作成からコンテンツの作成・管理を行うことが出来ます。
管理画面はシンプルなUIで見やすいです！

次はいよいよ実装に入ります！

実装手順

1,microCMSの使い方
2,Nuxt.jsのプロジェクトを作成
3,Nuxt.jsでデータの表示部分を実装
4,Firebase Hostingでデプロイして公開

1,microCMSの使い方

アカウント作成、サービス情報の入力は下記からアクセスして済ませてください。

microCMS｜APIベースの日本製ヘッドレスCMS

APIの新規作成

サイドバーのコンテンツの右側にある＋ボタンを押してください。
次に、API名とエンドポイントを入力。

APIの型を選択します。
今回は、リスト形式を使います。

フィールドの作成

フィールドを作成します。
今回使ったフィールドは画像、テキスト(撮影場所)、テキスト(日付)になります。ここは必要に応じて変えてください。

フィールドの種類はこの画面で選択します。

コンテンツの追加

実際に、画像、テキスト(撮影場所)、テキスト(日付)を追加してみましょう！右上の＋追加ボタンを押してください。

画像、撮影場所(テキスト)、日付(テキスト)を適当にいれて投稿してみてください！

タブからコンテンツ管理を選択すると、先程投稿したコンテンツが追加されているのがわかります。

・上部のタブからAPIリファレンスを選択
・X-API-KEYの表示ボタンを押してAPI-KEYを確認してください
・試してみるボタンを押すとレスポンス形式と、リクエスト先の確認ができます

microCMSの使い方の説明は以上になります。

2,Nuxt.jsのプロジェクトを作成

下記コマンドを実行してください(npxの場合)

npx create-nuxt-app test-project    

実行するといくつか質問されます。

? Project name (test-project)

プロジェクト名を入力してください。(必要に応じて変えてください)

? Project description (My sweet Nuxt.js project)

プロジェクトの説明文を入力してください。(必要に応じて変えてください)

? Author name (test)

作成者を入力してください。(必要に応じて変えてください)

? Choose the package manager (Use arrow keys)
Yarn
Npm

ここではNpmを選択します。

? Choose UI framework
❯ None
 Ant Design Vue
 Bootstrap Vue
 Buefy
 Bulma
 Element
 Framevuerk
 iView
 Tachyons
 Tailwind CSS
 Vuetify.js

UI フレームワークを選択します。今回はNoneを選択しますが後からでも導入できます！

? Choose custom server framework (Use arrow keys)
❯ None (Recommended)
 AdonisJs
 Express
 Fastify
 Feathers
 hapi
 Koa
 Micro

バックエンド側のフレームワークを選択します。今回はクライアント側をnuxtで作るのでnoneを選択してください。

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios
◯ Progressive Web App (PWA) Support
◯ DotEnv

モジュールを選択します。microCMSで作成したコンテンツをaxiosを使って取得しNuxtに表示するので、Axiosを選択します。

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint

リントするツールを選択します。ESLintを選択してください。

? Choose test framework (Use arrow keys)
❯ None
 Jest
 AVA

テストフレームワークを選択します。Noneを選択してください。

? Choose rendering mode
 Universal (SSR)
❯ Single Page App

Nuxtのモードを選択します。今回は、簡単な一覧サイトですので、SEO面や初期表示の遅延の欠点がありますが、手軽に実装できるSPAを選択します。

これで、長かった質問責めは以上になります。
作成されたプロジェクトディレクトリがあるか、macのfinderで確認してみてください。ディレクトリ内に様々なディレクトリやファイルが生成されます。

これでNuxt.jsのインストールとプロジェクトディレクトリの作成が完了しました。

3,Nuxt.jsでデータの取得と表示部分を実装

実装ファイル → /pages/index.vue

データの取得箇所

<script>
import axios from 'axios'

export default {
 data () {
   return {
     items: ''
   }
 },
 head: {
   script: [
   ],
 }, 
 async asyncData () {
   const { data } = await axios.get('リクエストを投げるURL', {
     headers: { 'X-API-kEY': '◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯' }
   })
   return {
     items: data.contents
   }
 }
}
</script>

itemsにAPIで取得したデータが格納されるようにしています！
X-API-KEYにはmicroCMSで作成したコンテンツのAPIキーをいれてください。

表示部分の実装

<template>
 <div class="picture-container">
   <div class="ttl">
     <h1>PICTURE</h1>
   </div>
   <div class="item-cont">
     <div v-for="item in items" :key="item" class="picture-item">
       <div class="picture">
         <!-- picture_imgを取得する -->
         <img :src="item.picture_img.url" alt="">
       </div>
       <!-- picture_dateを取得する -->
       <p class="date" v-html="item.picture_date" />
       <p class="place">
         <!-- picture_areaを取得する -->
         {{ item.picture_area }}
       </p>
     </div>
   </div>
   <div class="footer">
     <p>Copyright &copy; picture All Rights Reserved.</p>
   </div>
 </div>
</template>

4,Firebase Hostingでデプロイして公開

Firebase | Google’s Mobile and Web App Development PlatformFirebase | Google’s Mobile and Web App Development Platform

こちらからアクセスして、Googleアカウントにログインしてください。

「Firebase プロジェクト」下の「プロジェクトを追加」を押してください。

1,プロジェクト名の入力
2,Googleアナリティクスの続行
3,プルダウンから、Default Account for Firebaseを選択

プロジェクト名から順に進めてください。

3つの手順を進めるとプロジェクトが作成され、自動的に管理画面に遷移します。

いよいよプロジェクトを公開します！

cd Nuxtプロジェクトまでのパス

ターミナル(私はITerm派です)を開きNuxtプロジェクトまで移動してください。

npm install -g firebase-tools

Firebaseパッケージをインストールします。

firebase login

firebaseにログインするコマンドを実行してください。

firebase init hosting

firebaseホスティングの初期設定を行います。

? What do you want to use as your public directory? (public)

公開ディレクトリはdistなので、distを入力してください。

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

シングルページアプリケーションとして公開するのでenterを押してください。

? File dist/index.html already exists. Overwrite? (y/N)

index.htmlが存在すればそれを上書きするかどうかを聞かれているので、Yesを入力してください。
finderからNuxtプロジェクトディレクトリ内を確認すると自動でfirebase.json,firebasercというファイルが作られます。

Firebaseによって自動生成されたdistディレクトリを削除します。

export default {
 mode: 'spa',
 /*
 ** Headers of the page
 */

nuxt.config.jsを開いて「mode: 'spa'」になっているか確認してください。
シングルページアプリケーションとして動かすための設定なので念の為確認を！

npm run build

nuxtプロジェクトをビルドします。

firebase deploy

firebaseに本番公開するコマンドを実行します。

これで本番公開されました！
（プロジェクト名.firebaseapp.com）にアクセスして動いているか確認してみてください！

まとめ

いかがだったでしょうか？
microCMSならサーバー管理が一切不要で、手軽にAPIの作成・管理ができます。また、シンプルなUIで使いやすいです。
newsや実績紹介などに使ってみてください！