チュートリアル3: Kantan CMSコンテンツとウェブサイトの統合

ウェブサイトとコンテンツコレクションの両方を作成したので、次はそれらを接続する時です。このチュートリアルでは、MCP（Model Context Protocol）を使用してKantan CMSコンテンツをウェブサイトと統合し、CMSからコンテンツを自動的に取得する動的ウェブサイトを作成する方法をご案内します。

前提条件

このチュートリアルを始める前に、以下を確認してください：

MCP機能を備えた任意のAIコードエディタ（Cline、Cursorなど）
システムにインストールされたGit
設定済みのGitHubアカウント
チュートリアル1からのウェブサイトプロジェクト
チュートリアル2からのブログコレクション

APIアクセスの取得

ステップ1: APIキーを生成する

Kantan CMSダッシュボードで設定 > APIキーに移動します
**「APIキーを生成」**をクリックします
APIキーをコピーして安全に保存します - 統合に必要になります

MCP統合のセットアップ

ステップ1: MCPツールをダウンロードする

Kantan CMS MCPリポジトリをクローンまたはダウンロードします：
bash
```
git clone https://github.com/kantan-cms/kantan-cms-mcp.git
```
リポジトリを保存した絶対パスをメモします

ステップ2: MCP設定を構成する

AIエディタの要件に従ってMCP設定を構成します。Clineユーザーの場合、設定は次のようになります：

json

{
  "mcpServers": {
    "kantan-cms-instruction": {
      "command": "python",
      "args": ["<kantan-cms-mcpへの絶対パス>/main.py"],
      "disabled": false,
      "env": {
        "PROJECT_ID": "<プロジェクトID>",
        "CMS_API_KEY": "<APIキー>"
      }
    }
  }
}

プレースホルダーを置き換えてください：

<kantan-cms-mcpへの絶対パス>: ダウンロードしたMCPリポジトリへのフルパス
<プロジェクトID>: Kantan CMSプロジェクトID
<APIキー>: 先ほど生成したAPIキー

ステップ3: MCPインストールを確認する

MCP設定後、AIエディタを再起動します
Kantan CMS MCPサーバーが認識され実行されていることを確認します
特定のセットアップの詳細についてはエディタのヘルプドキュメントを参照してください

統合スクリプトの作成

ステップ1: AIエディタを開く

MCPが有効なAIコードエディタを開きます
ウェブサイトプロジェクトを読み込みます
Kantan CMS MCPがアクティブで接続されていることを確認します

ステップ2: 統合スクリプトを生成する

AIエディタで次のプロンプトを使用して統合スクリプトを作成します：

Kantan CMSをこのプロジェクトと統合し、結果のウェブサイトをKantan CMSにアップロードする`build.sh`という名前のスクリプトを作成してください。

スクリプトには以下の機能が必要です：
- CMSからコンテンツを取得する
- フォームを変更してデータをCMSに送信する
- ウェブサイトをCMSにアップロードする

以下の情報は、Kantan CMSのコレクションとそれに対応するディレクトリを表しています：

-----
カテゴリ: <コレクション名>
コレクションID: <コレクションID>
ターゲットディレクトリ: <ターゲットディレクトリ>

[必要に応じて追加のコレクションを追加]
-----

フォームについては、以下はどのコレクションがどのフォームに対応するかを表しています：
------
カテゴリ: <コレクション名>
コレクションID: <コレクションID>
ターゲットフォーム: <ターゲットフォーム要素>
------

プロンプトをカスタマイズしてください：

<コレクション名>を実際のコレクション名に置き換えます
<コレクションID>をKantan CMSからのコレクションIDに置き換えます
<ターゲットディレクトリ>をコンテンツをウェブサイトのどこに表示させたいかに置き換えます
<ターゲットフォーム要素>を各コレクションに送信する特定のフォームに置き換えます

ステップ3: スクリプトを確認してテストする

生成されたbuild.shスクリプトを確認します
必要なすべての機能が含まれていることを確認します：
- CMSコンテンツを取得するためのAPI呼び出し
- ウェブサイトファイルへのコンテンツ統合
- CMS送信のためのフォーム変更
- Kantan CMSへのアップロード機能
必要な調整を行います

ステップ4: ビルドスクリプトを実行する

スクリプトを実行可能にします：chmod +x build.sh
スクリプトを実行します：./build.sh
エラーや問題がないか出力を監視します

統合の確認

ステップ1: Kantan CMSを確認する

Kantan CMSダッシュボードに移動します
ホスティング > プレビューに移動します
ウェブサイトがコレクションからのコンテンツを表示していることを確認します
フォームが適切に接続され、データをCMSに送信することを確認します

ステップ2: 動的コンテンツをテストする

CMSで新しいブログ投稿を追加します
ビルドスクリプトを再度実行します
新しいコンテンツがウェブサイトに表示されることを確認します
フォーム送信をテストして、CMSに新しいレコードが作成されることを確認します

APIドキュメントへのアクセス

高度なカスタマイズとトラブルシューティングのために：

Kantan CMSダッシュボードに移動します
コレクションメニューに移動します
各コレクションには独自のAPIドキュメントが利用可能です
このドキュメントを使用して統合をさらにカスタマイズします

一般的な統合パターン

ブログ統合

ブログコレクションからブログ投稿を取得する
各投稿の静的ページを生成する
投稿リストのあるインデックスページを作成する
多数の投稿のためのページネーションを追加する

フォーム統合

コンタクトコレクションにレコードを作成するコンタクトフォーム
購読者コレクションに追加するニュースレターサインアップ
ブログ投稿コレクションにリンクするコメントシステム

コンテンツ管理

CMSを通じて管理されるアバウトページコンテンツ
CMSを通じて更新されるホームページのヒーローセクション
コレクションを通じて制御されるナビゲーション項目

トラブルシューティング

一般的な問題と解決策：

APIキーの問題: APIキーが正しく、適切な権限を持っていることを確認します
MCP接続の問題: MCP設定を確認し、エディタを再起動します
ビルドスクリプトのエラー: スクリプトログを確認し、すべての依存関係がインストールされていることを確認します
コンテンツが更新されない: ビルドスクリプトがAPIから最新のコンテンツを取得していることを確認します

次のステップ

おめでとうございます！これで、Kantan CMSコンテンツと自動的に統合する動的ウェブサイトができました。次のチュートリアルでは、GitHub Actionsを使用してこのプロセス全体を自動化し、コンテンツやコードに変更を加えるたびにウェブサイトが自動的に更新されるようにします。

チュートリアル3: Kantan CMSコンテンツとウェブサイトの統合 ​

前提条件 ​

APIアクセスの取得 ​

ステップ1: APIキーを生成する ​

MCP統合のセットアップ ​

ステップ1: MCPツールをダウンロードする ​

ステップ2: MCP設定を構成する ​

ステップ3: MCPインストールを確認する ​

統合スクリプトの作成 ​

ステップ1: AIエディタを開く ​

ステップ2: 統合スクリプトを生成する ​

ステップ3: スクリプトを確認してテストする ​

ステップ4: ビルドスクリプトを実行する ​

統合の確認 ​

ステップ1: Kantan CMSを確認する ​

ステップ2: 動的コンテンツをテストする ​

APIドキュメントへのアクセス ​

一般的な統合パターン ​

ブログ統合 ​

フォーム統合 ​

コンテンツ管理 ​

トラブルシューティング ​

次のステップ ​