Skip to content

Kantan CMSとのAPI統合

概要

Kantan CMSは、コンテンツを外部アプリケーション、ウェブサイト、またはサービスと統合できる堅牢なAPI機能を提供します。これにより、Kantan CMSコレクションから直接コンテンツを取得する動的ウェブサイトを構築し、ヘッドレスCMSワークフローを作成できます。

API統合は特に以下の用途に役立ちます:

  • ビルド時にコンテンツを取得する必要がある静的サイトジェネレーター
  • 動的にコンテンツを取得するシングルページアプリケーション(SPA)
  • コンテンツにアクセスする必要があるモバイルアプリケーション
  • 他のサービスやプラットフォームとのカスタム統合

前提条件

Kantan CMS APIと統合する前に、以下を確認してください:

  • コレクションとコンテンツを持つKantan CMSプロジェクト
  • マークダウンやその他のコンテンツを保存するアプリケーションのディレクトリ構造(例:docs/*.md
  • ウェブサイトを構築する場合は、静的サイト生成(SSG)またはサーバーサイドレンダリング(SSR)機能

APIアクセスの設定

APIキーの生成

  1. Kantan CMSプロジェクトの設定 > APIキーに移動します
  2. 「新しいAPIキーを生成」をクリックします
  3. キーの名前を入力します(例:「ウェブサイト統合」)
  4. キーに適切な権限を選択します
  5. 生成されたAPIキーを安全な場所に保存します
    • 重要: APIキーはパスワードのように扱ってください。クライアントサイドのコードで公開しないでください。

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

Kantan CMSの各コレクションには独自のAPIエンドポイントとドキュメントがあります:

  1. プロジェクト内の任意のコレクションに移動します
  2. コレクションオプションの「APIドキュメント」をクリックします
  3. APIドキュメントには以下が表示されます:
    • コレクションで利用可能なエンドポイント
    • 必要なパラメータ
    • 認証方法
    • レスポンス形式
    • リクエストとレスポンスの例

APIリクエストの作成

認証

すべてのAPIリクエストにはAPIキーを使用した認証が必要です。リクエストヘッダーに含めてください:

javascript
const headers = {
  'Authorization': 'Bearer YOUR_API_KEY',
  'Content-Type': 'application/json'
};

一般的なエンドポイント

各コレクションには特定のエンドポイントがありますが、最も一般的に使用されるものは以下の通りです:

  • GET /api/collections/{collection_id}/records - コレクション内のすべてのレコードをリスト表示
  • GET /api/collections/{collection_id}/records/{record_id} - 特定のレコードを取得
  • GET /api/collections/{collection_id}/schema - コレクションのスキーマを取得

例:ブログ投稿の取得

javascript
// fetch APIを使用した例
async function fetchBlogPosts() {
  const response = await fetch('https://api.kantan-cms.com/api/collections/your-collection-id/records', {
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY'
    }
  });
  
  const data = await response.json();
  return data.records;
}

APIに関する詳細情報は、https://api-dev.kantan-cms.com/v1/api/redocを参照してください。

統合のヒント

統合のためのAIアシスタントの使用

Kantan CMS APIドキュメントは、統合に必要なすべての情報を提供しています。以下のことができます:

  1. 「APIドキュメント」セクションからAPIドキュメントをコピーする
  2. 統合要件と一緒にAIアシスタントに提供する
  3. 特定のユースケースに必要なコードを生成するようAIに依頼する

このアプローチは、特に一般的なフレームワークや言語での統合プロセスを大幅に迅速化できます。

ベストプラクティス

  • 適切な場合はAPIレスポンスをキャッシュしてAPIコールを減らす
  • APIリクエスト失敗に対するエラー処理を実装する
  • 大きなコレクションを取得する際はページネーションを使用する
  • 利用可能な場合はクエリパラメータを使用してサーバー上でデータをフィルタリングする
  • APIキーを安全に保管し、定期的にローテーションする
  • リアルタイム更新にはWebhooksを検討する(サポートされている場合)

一般的な統合パターン

静的サイト生成

Next.js、Gatsby、Hugoなどの静的サイトジェネレーターの場合:

  1. ビルドプロセス中にコンテンツを取得する
  2. コンテンツを必要な形式に変換する
  3. 静的HTMLページを生成する
  4. 静的サイトをデプロイする

動的コンテンツ取得

シングルページアプリケーションや動的ウェブサイトの場合:

  1. クライアントサイドまたはサーバーサイドのAPIコールを実装する
  2. 適切な場合はレスポンスをキャッシュする
  3. 取得中のコンテンツのローディング状態を実装する
  4. APIレスポンスに基づいて動的にコンテンツをレンダリングする

トラブルシューティング

API統合で問題が発生した場合:

  1. APIキーが有効で正しい権限を持っていることを確認する
  2. 正しいエンドポイントとパラメータを使用していることを確認する
  3. エラーメッセージについてAPIレスポンスを調べる
  4. リクエストヘッダーが適切にフォーマットされていることを確認する
  5. ブラウザからリクエストを行う場合はCORS問題を確認する
  6. Kantan CMS APIサーバーへのネットワーク接続を確認する

問題が解決しない場合は、統合の詳細と発生している特定のエラーについてKantan CMSサポートに連絡してください。

TechMO LLC.