概要
Crew'sHubをHeadlessCMSとして使用することができます。
Vue.JS(Nuxt.JS)やReactなどのフレームワークと組み合わせることで、これまでのCMSでは実現が難しかった、柔軟なウェブサイトの運用が可能になります。
APIから取得出来るデータは、以下のとおりです。
ページタブ、共通タブ内の以下の項目（※見出し部分が水色の項目）
- ヘッダーデータ（タイトル、メタディスクリプション、OGP画像、カスタムヘッダー）
- 原稿フィールドデータ（HTML、テキスト、JSON、画像）を取得できます。
以下の情報は、APIから取得できません。
- サイト制作用のメモ
- サイト制作用のファイル
- 企画資料
- 仕様項目
- プロジェクトのメンバーに関する情報
API-keyについて
APIをリクエストする際には、API-keyも同時に送信する必要があります。
※API-keyは、プロジェクト（サイト）毎に付与される固有の値です。
API-keyの取得方法について
API-keyは、「仕様」タブで確認することが出来ます。
API-keyの送信方法
API-keyの送信方法は、以下の３通りあります。
- クエリパラメータに含める方法
- crewshub-Token ヘッダーとして送信する方法
- Authorization ヘッダーにBearerトークンとして送信する方法
以下に、axiosを使った例を提示します。
// クエリパラメータに含める
axios('https://api.crewshub.net/v1/pages?token=xx-api-key-xx&id=xxxx') // crewshub-Token ヘッダーとして送信する
axios.get('https://api.crewshub.net/v1/pages', {
headers: {
'crewshub-Token': 'xx-api-key-xx'
},
params: {
…
}
})
// Bearerトークンとして送信する
axios.get('https://api.crewshub.net/v1/pages', {
headers: {
Authorization: `Bearer xx-api-key-xx`
},
params: {
…
}
})
ページオブジェクトの取得
エンドポイント
２種類のエンドポイントがあります。
取得できるデータの範囲が異なりますので、用途に合わせて選択してください。
(A)ヘッダーのみを取得するエンドポイント
https://api.crewshub.net/v1/pages/headers
※メニューなどの用途に適した、軽量なデータを取得出来ます。
(B)原稿フィールドも含めて取得するエンドポイント
https://api.crewshub.net/v1/pages
引数
以下のいずれかのパラメータをひとつ指定する必要があります。
| id | idに一致するページを返します |
| path | pathに一致するページを返します |
| path_match | pathに一致するページ及び直下のページを返します |
| path_match_deep | pathに一致するページ及びpath以下のすべてのページを返します |
戻値
引数の条件にマッチしたすべてのページオブジェクトの配列を返却します。
※1件であっても配列データが返却されることにご注意ください。
{
pages: [
{ id: 'xxxx', type: 'page',,,, }, <== pageObject
{ id: 'xxxx', type: 'page',,,, } <== pageObject,
...
]
}
ページオブジェクト
| キー | 型 | 説明 | A | B | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| id | string | ページid | ○ | ○ | ||||||||||||
| type | string | オブジェクト種別（page：固定） | ○ | ○ | ||||||||||||
| path | string | パス | ○ | ○ | ||||||||||||
| title | string | タイトル | ○ | ○ | ||||||||||||
| description | string | メタディスクリプション | ○ | ○ | ||||||||||||
| custom_headrs | object | カスタムヘッダー | ○ | ○ | ||||||||||||
| fields | array | 原稿フィールド（配列）
|
× | ○ |
// ページオブジェクトの例
{
id: '5d6cd423f908500631159aa3',
type: 'page',
path: '/hoge/fuga',
title: 'タイトル',
description: 'メタディスクリプション',
custom_headers: {
aaa: 'aaaaa',
bbb: 'bbbbb',
…
…
},
fields: [
{
type: 'html',
title: '原稿1',
tag: 'item-1',
data: '<p>原稿</p>'
},
{
type: 'text',
…
…
}
]
}
呼び出し例
// idに一致するページを取得する例
axios.get('https://api.crewshub.net/v1/pages', {
headers: {
Authorization: `Bearer xx-api-key-xx`
},
params: {
id: '5d6cd423f908500631159aa3'
}
})
{
pages: [
{
id: '5d6cd423f908500631159aa3',
type: 'page',
path: '/hoge/fuga',
title: 'タイトル',
…
…
}
]
}
// pathに一致するページを取得する
axios.get('https://api.crewshub.net/v1/pages', {
headers: {
Authorization: `Bearer xx-api-key-xx`
},
params: {
path: '/hoge/fuga'
}
})
{
pages: [
{
id: '5d6cd423f908500631159aa3',
type: 'page',
path: '/hoge/fuga',
title: 'タイトル',
…
…
}
]
}
// pathに一致するページ及び直下のページを取得する
axios.get('https://api.crewshub.net/v1/pages', {
headers: {
Authorization: `Bearer xx-api-key-xx`
},
params: {
path_match: '/hoge/fuga'
}
})
{
pages: [
{
id: '5d6cd423f908500631159aa3',
type: 'page',
path: '/hoge/fuga',
title: 'タイトルA',
…
…
},
{
id: '5d6cd423f908500631159aa4',
type: 'page',
path: '/hoge/fuga/muga',
title: 'タイトルB',
…
…
},
{
id: '5d6cd423f908500631159aa5',
type: 'page',
path: '/hoge/fuga/hege',
title: 'タイトルC',
…
…
}
]
}
// pathに一致するページ及びpath以下のすべてのページを取得する
axios.get('https://api.crewshub.net/v1/pages', {
headers: {
Authorization: `Bearer xx-api-key-xx`
},
params: {
path_match_deep: '/hoge/fuga'
}
})
{
pages: [
{
id: '5d6cd423f908500631159aa3',
type: 'page',
path: '/hoge/fuga',
title: 'タイトルV',
…
…
},
{
id: '5d6cd423f908500631159aa4',
type: 'page',
path: '/hoge/fuga/muga',
title: 'タイトルW',
…
…
},
{
id: '5d6cd423f908500631159aa6',
type: 'page',
path: '/hoge/fuga/muga/gaga',
title: 'タイトルX',
…
…
},
{
id: '5d6cd423f908500631159aa0',
type: 'page',
path: '/hoge/fuga/hege',
title: 'タイトルY',
…
…
},
{
id: '5d6cd423f908500631159aa7',
type: 'page',
path: '/hoge/fuga/hege/giga',
title: 'タイトルZ',
…
…
}
]
}
共通オブジェクトの取得
エンドポイント
https://api.crewshub.net/v1/common
引数
なし。
戻値
共通フィールドオブジェクトを返却します。
{
common: { type: 'common', fields: [...] } <== commonObject
}
共通フィールドオブジェクト
| キー | 型 | 説明 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| type | string | オブジェクト種別（common：固定） | ||||||||||||
| fields | array | 原稿フィールド（配列）
|
例
axios.get('https://api.crewshub.net/v1/common', {
headers: {
Authorization: `Bearer xx-api-key-xx`
}
))
{
common: {
type: 'common',
fields: [
{
type: 'html',
title: '原稿1',
tag: 'item-1',
data: '<p>原稿</p>'
},
{
type: 'text',
…
…
}
]
}
}
取得できるデータの確認方法
実際にAPIから取得できるデータを確認することができます。
ページタブ、共通タブにある「JSON」ボタンをクリックします。
取得できるJSONデータが表示されます。
