Nuxt + TypeScript + GraphCMS でブログサイトを作る_04
前回までで Nuxt + TypeScript の基本的なセッティングを終え、簡単な ToDo アプリを作って nuxt-typed-vuex プラグインの使い方を確認しました。
今回は GraphCMS の設定を行っていきます。
GraphCMS とは
詳しい説明は他のサイトに譲りますが、簡単に言うとこれから作るブログサイトの記事を保存するサービスです。ブログの記述は GraphCMS のウェブサイト上で行い、保存した記事データはフロントエンドからリクエストを送ることで受け取ることができます。
GraphCMS のアカウント作成
GraphCMS のサイトから Sign Up で新規アカウント作成ページへ行きます。
Facebook, Github, Google もしくはメールアドレスでアカウントを作成します。
いくつかプリセットのテンプレートが存在するので、今回はちょうど良さそうな名前の Blog Starter を選択します。
GraphCMS 上で使うプロジェクト名を入力し、地図で Asia (Tokyo) (東京リージョン) を選択したら Create Project をクリックします。
次のページでは利用するプランを聞かれますが、ここでは無料プランを選択します。
あとはしばらく時間を置くとダッシュボードへ遷移するので待ちましょう。
※ エラーなのか自動遷移しないことがありました。3~4分経っても画面が変わらないときはリロードしてみたらうまくいくかもしれません。
GraphCMS のスキーマ設定
スキーマとは
スキーマとは、一つのカテゴリに含まれる項目の組み合わせのようなものです。
カテゴリとは、例えば「著者」「記事」です。
カテゴリに含まれる項目とは、「著者」というカテゴリ内であれば「名前」「メールアドレス」「著者の書いた記事」などが該当します。
「記事」というカテゴリ内であれば「タイトル」「投稿日」「最終更新日」「アイキャッチ画像」「著者名」などです。
モデルの設定
上で書いたカテゴリを GraphCMS ではモデルと呼びます。ここでは記事のモデルを作っていきます。モデル名は Post です。
左のサイドメニューで菱餅みたいなアイコンをクリックするとスキーマページへ遷移します。するとすでに Post の Model が存在しているのが分かります。テンプレートから自動で作ってくれているのでこれを使いましょう。
今回は最小限の実装で済むように、以下のフィールドを削除して使います。削除したいフィールドにカーソルをもっていくと赤いボタンで Delete Field という表示が出るのでそれをクリックします。
- Slug (記事の URL に任意の文字列を設定する目的だが不要。)
- Excerpt (記事から文字を抜粋して一覧の表示時に見せる目的だが不要。)
- Author (記事の著者名。今回は自分一人が管理者なのでそもそもいらない。)
- Tag (実装めんどくさいから消す。)
もう一点、これは好みですが Content がリッチエディタだと使いづらいのでマークダウン記法で書けるように以下の手順で設定します。
Contentフィールドを削除する。- 右のフィールドリストから
Markdownを選択する。 - フィールド名を
Contentにして決定。
これらを終えたら、Title、Date、Cover Image、Content、Author が残ると思うのでこれで OK です。
では早速記事を書いてみます。
コンテンツを作成
サイドメニューで、先ほどの菱餅アイコンの下に Content を示すアイコンがあるので、それをクリックして遷移します。
Post モデルを選択しページが変わるとすでにいくつかコンテンツが入っていることが分かります。テンプレート選択した際に作られたダミーデータです。では新たにコンテンツを加えてみましょう。
項目を入力
Title、Date、Cover Image、Content を入力しました。
Author の入力をしようとしますが、ちょっと入力の勝手が違いますね。ここでは Author を選択するか、新しく Author を作成するかの二択があります。
これは Author モデルと紐付いているため、作成された Author のコンテンツを選択する形式となるためです。ここでは Select Author をクリックしてダミーデータとして登録されているものを使いましょう。
右上の Save and publish ボタンを押してコンテンツ作成を完了させます。
API Playground でデータの確認
この後、フロントエンドから API リクエストで記事データを取得するわけですが、GraphCMS がどのようにデータを返すかを確認してみます。
Post のコンテンツ一覧の上部の三点リーダーをクリックして Preview in Playground を選択すると API のプレビューページへ遷移します。
遷移したページの左側にあるのが GraphQL のリクエストクエリの記法です。ページ中央にある再生ボタンみたいなのをクリックすると右側にデータが JSON で返ってきます。
今回はここまで。
