「draflint」は「microCMS + Vercel」でのデプロイを想定していますが、 CodeSandbox 上で動作させている場合でも CMS として microCMS を利用できます。
「microCMS + CodeSandbox」では表示が少し遅くなりますが、文章チェック処理のカスタマイズ(プリセットの変更等)をクラウドサービスだけで試すことも可能です。
必要な設定項目の値
- PREVIEW SECRET: プレビューモードを開始するときに microCMS と(CodeSandbox で稼働している)draftlint 間で利用される PSK です。とくに書式等はありませんので、事前に適当な文字列を決めておいてください。
- その他: 手順を進めていく中で必要な値が決まっていきます。後の手順で利用する値については「控えておきます」と記述があります。
Container Sandbox の作成
「CodeSandbox で試す」の手順でサンドボックスを作成し、ブラウザーペインに表示されている URL を控えておきます(microCMS の「画面プレビュー」の設定で使います)。
microCMS の設定
microCMS のアカウントが必要です(登録方法などはネットで調べれば出てきます)。
サービスの登録
サイトを構成するためのサービスを登録します。登録したらサービスの URL と GET API 用の KEY を控えておきます(Container Sandbox の環境変数設定で使います)。
API の登録
draftlint では pages と docs API が必要です。スキーマは以下からそれぞれダウンロードできます(API 登録の最後の画面でインポートできます)。
- pages: api_pages.json
- docs: api_docs.json
画面プレビューの設定
各 API それぞれの設定で「画面プレビュー」を以下のように設定します。
- https://<Container Sandbox のブラウザーペインの URL>/api/enter-preview/<API 名>?slug={CONTENTID}&draftKey={DRAFTKEY}&previewSecret=<冒頭で決めた PREVIEW SECRET>
コンテンツの追加
pages API にコンテンツ ID がhome docs about のコンテンツ、docs API に何か 1 つコンテンツが必要となります。
Container Sandbox の設定
CodeSandbox の IDE から「Server Control Panel」を開き、以下の環境変数を設定します。この設定により Container Sandbox は microCMS からデータを取得し、サイトのコンテンツとして表示するようになります。
API_BASE_URL: microCMS へサービスを登録したときに控えておいた URL です(末尾の/は必須です)GET_API_KEY: microCMS へサービスを登録したときに控えておいた API KEY ですPREVIEW_SECRET: 冒頭で決めた PREVIEW SECRET ですDISABLE_MOCK_CLIENT:trueを指定します
試してみる
ここまでの設定で「文章チェック処理」を実際に試すことをできる環境が整いました。docsAPI にコンテンツを追加し「画面プレビュー」ボタンをクリックすると新しいタブが開き、プレビューと共にチェック結果が表示されます。
なお、Container Sandbox はしばらく操作していないと停止状態になります。停止状態のときに「画面プレビュー」を開始すると以下のような画面が表示されますが、そのまま待っていれば通常の画面が表示されます。
その他
CodeSandbox 上でルールをカスタマイズした場合、「ソースコードは他のユーザーから閲覧できる状態」となるので注意してください(allowlist に追加した単語等が見えてしまいます)。