ここだけCMS API ドキュメント

API 概要

ここだけCMS APIを使用すると、JavaScriptを使って非同期にコンテンツを取得できます。 埋め込みコードとは異なり、より柔軟にデータを表示できます。

認証

すべてのAPIリクエストには、APIキーとAPIシークレットが必要です。 これらは、リクエストヘッダーに含める必要があります。

X-API-KEY: your_api_key
X-API-SECRET: your_api_secret

ベースURL

https://kokocms.strixsoft.net/api/v1

レスポンス形式

すべてのレスポンスはJSON形式で返されます。成功した場合は、dataキーにデータが含まれます。 ページネーションがある場合は、metaキーにページネーション情報が含まれます。

{
  "data": [...],
  "meta": {
    "current_page": 1,
    "last_page": 5,
    "per_page": 10,
    "total": 50
  }
}

エラーが発生した場合は、errorキーにエラーメッセージが含まれます。

{
  "error": "認証情報が不足しています",
  "message": "X-API-KEY と X-API-SECRET ヘッダーが必要です"
}

エンドポイント

{
  "data": [
    {
      "id": 1,
      "title": "新商品発売のお知らせ",
      "content": "新商品が発売されました。...",
      "published_at": "2025-05-15T00:00:00.000000Z",
      "status": "published",
      "category_id": 2,
      "category": {
        "id": 2,
        "name": "お知らせ"
      },
      "tags": [
        {
          "id": 1,
          "name": "新着",
          "slug": "new",
          "color": "#10b981"
        },
        {
          "id": 3,
          "name": "おすすめ",
          "slug": "recommended",
          "color": "#3b82f6"
        }
      ]
    },
    ...
  ],
  "meta": {
    "current_page": 1,
    "last_page": 3,
    "per_page": 10,
    "total": 25
  }
}

{
  "data": {
    "id": 1,
    "title": "新商品発売のお知らせ",
    "content": "新商品が発売されました。詳細は以下の通りです...",
    "published_at": "2025-05-15T00:00:00.000000Z",
    "status": "published",
    "category_id": 2,
    "category": {
      "id": 2,
      "name": "お知らせ"
    },
    "tags": [
      {
        "id": 1,
        "name": "新着",
        "slug": "new",
        "color": "#10b981"
      },
      {
        "id": 3,
        "name": "おすすめ",
        "slug": "recommended",
        "color": "#3b82f6"
      }
    ]
  }
}

{
  "data": [
    {
      "id": 1,
      "title": "商品A",
      "description": "商品Aの説明...",
      "price": 1000,
      "published_at": "2025-05-15T00:00:00.000000Z",
      "status": "published",
      "category_id": 3,
      "category": {
        "id": 3,
        "name": "カテゴリーA"
      },
      "tags": [
        {
          "id": 2,
          "name": "人気",
          "slug": "popular",
          "color": "#f59e0b"
        }
      ],
      "images": [
        {
          "id": 1,
          "file_path": "products/image1.jpg",
          "is_main": true
        }
      ]
    },
    ...
  ],
  "meta": {
    "current_page": 1,
    "last_page": 2,
    "per_page": 10,
    "total": 15
  }
}

{
  "data": {
    "id": 1,
    "title": "商品A",
    "description": "商品Aの詳細な説明...",
    "price": 1000,
    "published_at": "2025-05-15T00:00:00.000000Z",
    "status": "published",
    "category_id": 3,
    "category": {
      "id": 3,
      "name": "カテゴリーA"
    },
    "tags": [
      {
        "id": 2,
        "name": "人気",
        "slug": "popular",
        "color": "#f59e0b"
      },
      {
        "id": 3,
        "name": "おすすめ",
        "slug": "recommended",
        "color": "#3b82f6"
      }
    ],
    "images": [
      {
        "id": 1,
        "file_path": "products/image1.jpg",
        "is_main": true
      },
      {
        "id": 2,
        "file_path": "products/image2.jpg",
        "is_main": false
      }
    ]
  }
}

{
  "data": [
    {
      "id": 1,
      "name": "お知らせ",
      "type": "news",
      "sort_order": 1
    },
    {
      "id": 2,
      "name": "イベント",
      "type": "news",
      "sort_order": 2
    },
    {
      "id": 3,
      "name": "カテゴリーA",
      "type": "product",
      "sort_order": 1
    }
  ]
}

{
  "data": [
    {
      "id": 1,
      "name": "新着",
      "slug": "new",
      "color": "#10b981",
      "sort_order": 1,
      "news_count": 5,
      "product_count": 3
    },
    {
      "id": 2,
      "name": "人気",
      "slug": "popular",
      "color": "#f59e0b",
      "sort_order": 2,
      "news_count": 8,
      "product_count": 12
    },
    {
      "id": 3,
      "name": "おすすめ",
      "slug": "recommended",
      "color": "#3b82f6",
      "sort_order": 3,
      "news_count": 3,
      "product_count": 7
    }
  ]
}

エラーコード

サンプルコード

APIを簡単に使用するためのJavaScriptライブラリを提供しています。 以下のコードをあなたのWebサイトに追加してください。

1. ライブラリを読み込む

<script src="https://kokocms.strixsoft.net/js/headless-cms-client.js"></script>

2. クライアントを初期化する

const client = new HeadlessCMSClient('YOUR_API_KEY', 'YOUR_API_SECRET');

3. データを取得して表示する

// お知らせ一覧を取得
client.fetchNews({ limit: 5 })
  .then(response => {
    const newsItems = response.data;
    const newsContainer = document.getElementById('news-container');
    
    newsItems.forEach(news => {
      const newsElement = document.createElement('div');
      newsElement.innerHTML = `
        <h3>${news.title}</h3>
        <p>${news.published_at}</p>
        <a href="#" onclick="showNewsDetail(${news.id})">詳細を見る</a>
      `;
      newsContainer.appendChild(newsElement);
    });
  })
  .catch(error => console.error('Error fetching news:', error));

// お知らせ詳細を取得
function showNewsDetail(id) {
  client.fetchNewsDetail(id)
    .then(response => {
      const news = response.data;
      const detailContainer = document.getElementById('news-detail');
      
      detailContainer.innerHTML = `
        <h2>${news.title}</h2>
        <p>${news.published_at}</p>
        <div>${news.content}</div>
      `;
      
      // 詳細表示エリアを表示
      detailContainer.style.display = 'block';
    })
    .catch(error => console.error('Error fetching news detail:', error));
}

4. 商品データを取得して表示する

// 商品一覧を取得
client.fetchProducts({ limit: 6, category_id: 3 })
  .then(response => {
    const products = response.data;
    const productsContainer = document.getElementById('products-container');
    
    products.forEach(product => {
      const productElement = document.createElement('div');
      
      // メイン画像のURLを取得
      const mainImage = product.images.find(img => img.is_main) || product.images[0];
      const imageUrl = mainImage ? `https://kokocms.strixsoft.net/storage/${mainImage.file_path}` : 'デフォルト画像のURL';
      
      productElement.innerHTML = `
        <div class="product-card">
          <img src="${imageUrl}" alt="${product.title}" class="product-image">
          <h3>${product.title}</h3>
          <p class="price">¥${product.price.toLocaleString()}</p>
          <button onclick="showProductDetail(${product.id})">詳細を見る</button>
        </div>
      `;
      
      productsContainer.appendChild(productElement);
    });
  })
  .catch(error => console.error('Error fetching products:', error));

5. タグを使ってフィルタリングする

// タグ一覧を取得
client.fetchTags({ include_counts: true })
  .then(response => {
    const tags = response.data;
    const tagsContainer = document.getElementById('tags-container');
    
    tags.forEach(tag => {
      const tagElement = document.createElement('span');
      tagElement.className = 'tag';
      tagElement.style.backgroundColor = tag.color || '#3b82f6';
      tagElement.style.color = 'white';
      tagElement.style.padding = '4px 8px';
      tagElement.style.margin = '2px';
      tagElement.style.borderRadius = '4px';
      tagElement.style.cursor = 'pointer';
      tagElement.textContent = `${tag.name} (${tag.news_count + tag.product_count})`;
      
      // クリックでフィルタリング
      tagElement.onclick = () => filterByTag(tag.slug);
      
      tagsContainer.appendChild(tagElement);
    });
  })
  .catch(error => console.error('Error fetching tags:', error));

// タグでお知らせをフィルタリング
function filterByTag(tagSlug) {
  client.fetchNews({ tag: tagSlug, limit: 10 })
    .then(response => {
      const newsItems = response.data;
      const newsContainer = document.getElementById('news-container');
      
      newsContainer.innerHTML = ''; // クリア
      
      newsItems.forEach(news => {
        const newsElement = document.createElement('div');
        
        // タグを表示
        let tagsHtml = '';
        if (news.tags && news.tags.length > 0) {
          tagsHtml = '<div class="tags">';
          news.tags.forEach(tag => {
            tagsHtml += `<span style="background-color: ${tag.color}; color: white; padding: 2px 6px; border-radius: 3px; font-size: 12px; margin-right: 4px;">${tag.name}</span>`;
          });
          tagsHtml += '</div>';
        }
        
        newsElement.innerHTML = `
          <h3>${news.title}</h3>
          ${tagsHtml}
          <p>${news.published_at}</p>
        `;
        newsContainer.appendChild(newsElement);
      });
    })
    .catch(error => console.error('Error filtering news:', error));
}

// タグIDでフィルタリングすることも可能
client.fetchProducts({ tag_id: 2, limit: 10 })
  .then(response => {
    console.log('タグID 2の商品:', response.data);
  });