セットアップからmicroCMSとの連携まで

この記事ではmicroCMSでのセットアップから、連携までの流れを詳しく紹介します。

なお、ローカル環境でmicroCMSと通信するためにはローカルサーバーが必要になります。
VSCodeの拡張機能「Live Server」を使用することで手軽にローカルサーバを立ち上げられるので、セットアップする前にインストールしておきましょう。

GitHubと連携する

microCMSテンプレートから「このテンプレートを利用」のボタンを押すとセットアップページに飛びます。
microCMSへのログイン もしくは ユーザ登録が必要になるので、事前に済ませておいてください。

ソースコードを取得するのにGitHubと連携をする必要があります。
連携する際に設定云々で色々聞かれますが、全てデフォルトでOKです。

新しく作るサービス情報を入力する

GitHubとの連携ができたら、サービス情報を入力していきます。

Git Scope

GitHubのユーザーを指定します。
GitHubと連携していれば選択できます。

リポジトリ名

好きな名称を半角英数字で入力します。
ここに入力した内容がそのままgitリポジトリ名（プロジェクトのソースコード）に登録されます。

そのため、サイト名やサービス名など分かりやすい名前にしておきましょう。

プライベートリポジトリとして作成する

チェックを入れて作成すると自分のGitHubのページからこのプロジェクトのソースコードが非公開になります。
特にクライアントサイトや機密情報があるようなサイトを作成する方はチェックを入れておきましょう。

プロジェクトをダウンロードして解凍する

作成ができたらリポジトリのリンクをクリックしてGitHubのページに進みます。

Codeという緑のボタンを押して、「Download ZIP」を選択し、好きな場所にファイルをダウンロードしてください。
Gitの操作に慣れている方でそのままgitでコードを管理したい方はgit cloneしてももちろん大丈夫です！

ダウンロードできたら解凍します。

ローカルサーバーを立ち上げる

フォルダごとVSCodeのアイコンに向かってドラッグ＆ドロップします。
うまくできれば下図のように左側にファイルツリーが表示された状態で開きます。

そして、この状態でLive Serverが入っていれば右下隅に「Go Live」というリンクが表示されるので、これを押せばローカルサーバが立ち上がります。

ローカルサーバが立ち上がっている間は「Port: 5500」の表記に変わり、コードの変更も自動でブラウザに反映されます。また、microCMSからデータを取得することが可能になります。

ローカルサーバを切りたい場合は、再度「Port:5500」を押すか、VSCodeごと閉じれば自動で切断されます。

microCMSとの連携

microCMSで編集した内容を表示するためには、microCMSのサービスIDとAPIキーを取得する必要があります。

セットアップ完了画面で取得できるようになっていますが、もし間違えて画面を閉じてしまったら、この後に紹介する方法で取得してみてください。

microcms.jsを作る

まずはプロジェクトを開いてassets > jsと進み、microcms.template.jsをコピーしてmicrocms.jsを作ります。

このmicrocms.jsにサービスIDとAPIキーを設定することで連携できます。

また、サービスIDとAPIキーはセキュリティの観点からできるだけ公にしないように気をつけてください。

サービスIDを取得する

microCMSの管理画面を開きます。

左上サービス名の横の設定アイコンから「サービスIDの変更」と進んだ画面にサービスIDが表示されています。
入力フォーム内の部分をコピーしましょう。

例：test.microcms.io なら test

APIキーを取得する

同じく管理画面で「1個のAPIキー」というメニューを押して表示された画面でAPIキーを取得できます。
コピーボタンを押すと簡単にコピーができます。

ファイルに設定する

サービスIDとAPIキーが取得できたらmicrocms.jsに設定しましょう。
設定例を載せておくので参考にしてみてください。

例
サービスID： test-cms
APIキー： Kv98dhv4rCrzeCbn78VLvEWke4AXApsjNclF

export const microcms = {
  SERVICE_ID: "test-cms",
  API_KEY: "Kv98dhv4rCrzeCbn78VLvEWke4AXApsjNclF",
};
          
            
          
        

設定は以上となります。
microCMSからコラムなどを入力して動作確認をしてみてください！