サービスと連携する

最終更新: 2026年6月22日

前のステップで記事データを作成しました。次は、このデータを実際のユーザーに見せる番です。WEEGLOO はデータの保存と管理を担うため、これをどのようなサービスで見せるかは、作る人の選択に完全に委ねられています。Web アプリケーションとして作ることも、モバイルアプリへ広げることも、その両方を併用することもできます。重要なのは、WEEGLOO が提供する RESTful API でデータを取得し、好きな形で利用できるという点です。

今回の例では Tech Blog を Web サイトとして作ります。訪問者が Web ブラウザで記事を閲覧できるようにし、その画面(Front-end)はこちらで構成します。こうして作成した静的 Web ファイルは、WEEGLOO の Web Hosting 機能で配信できます。

読み取り専用トークンを発行する

WEEGLOO API を呼び出すには、認証用の Access Token が必要です。この例では、訪問者に記事を見せるための読み取り専用トークンである Delivery Access Token と、公開されたコンテンツを配信する API である CDA(Content Delivery API)を使います。

トークンを作成する前に、そのトークンがどのデータにアクセスできるかを SpaceRole で先に決める必要があります。セキュリティのため、先ほど作成した Article Content Type に対してのみ読み取り権限を与える SpaceRole を作ります。こうすることで、トークンは記事を読むこと以外には何もできなくなります。

  1. 左側のメニューで Roles & Permissions を押してください。
  2. Create を押し、役割の名前を入力してください。例: Article Read-Only
  3. ArticleContentContent TypeRead だけを許可してください。ほかの権限はオンにしません。
  4. Save で保存してください。

Article に読み取り権限のみを与えた SpaceRole の設定画面

SpaceRole の設定に関する詳しい内容は役割と権限で扱います。

次に、この SpaceRole を持つ Delivery Access Token を作ります。

  1. 左側のメニューで Delivery Access Tokens を押してください。
  2. Create を押し、トークンの名前を入力してください。例: Tech Blog Web
  3. Role で先ほど作成した Article Read-Only を選び、Save で保存してください。

発行されたトークンの値は、一度だけ安全に保管してください。この値は訪問者のブラウザにまで露出する可能性があるため、上記のように読み取り専用の SpaceRole で範囲を絞っておくことが重要です。

Article Read-Only の役割で発行した Delivery Access Token の画面。トークンの値は伏せられています

記事データを取得する

ここからは実際に記事を取得する API を呼び出します。認証は Authorization ヘッダーに Bearer 方式で、先ほど作成した Delivery Access Token の値を入れます。

Authorization: Bearer <Delivery Access Token>
APIMethodPathParams
CDAGET/v1/spaces/{spaceId}/content-types/{contentTypeId}/contents?order=-sys.createdAt,sys.id

この API は、特定の Space 内の Article Content の一覧を取得します。order オプションで新しい順の並べ替えを指定しており、include オプションを使えば、関連付けられたデータまで一緒に取得できます。

最初に呼び出したときは、何のデータも返らないことがあります。作成した Content がまだ発行(Publish)されていないためです。WEEGLOO は、作成中のデータと訪問者に見せるデータを区別するために、発行というステップを設けています。Content を発行したあとに改めて呼び出すと、記事が取得されます。

{
    "sys": { "type": "TotalPageResponse" },
    "limit": 15,
    "totalCount": 1,
    "items": [
        {
            "sys": {
                "id": "3trmXRkRjC1x4J9h2om4Qh41o7sejd",
                "type": "Content",
                "space": { "sys": { "id": "ep8f7qJY", "type": "Refer", "targetType": "Space" } },
                "contentType": { "sys": { "id": "3trmXRkRjC1x4J9h2om4QZv0jC58Nv", "type": "Refer", "targetType": "ContentType" } },
                "createdAt": "2026-06-21T15:38:22.630Z",
                "updatedAt": "2026-06-21T15:38:22.630Z",
                "revision": 1
            },
            "fields": {
                "title": "Building a Headless Blog with WEEGLOO",
                "body": "WEEGLOO lets you define your content structure once and deliver it anywhere through a REST API. In this post we model an Article, write our first entry, and fetch it from a web app, with no backend server to build or maintain.",
                "category": "Web"
            }
        }
    ],
    "links": {
        "self": "/v1/spaces/ep8f7qJY/content-types/3trmXRkRjC1x4J9h2om4QZv0jC58Nv/contents?order=-sys.createdAt,sys.id"
    }
}

API の詳しい使い方やオプションは API リファレンスで扱います。

多言語対応

もう一歩進めて、記事を複数の言語で提供してみます。WEEGLOO は、一つのコンテンツを複数の言語で管理できるよう Locale 機能を提供しています。

まず Locale の設定で新しい言語を追加します。ここでは Korean を追加し、値がないときに代わりに表示する Fallback 言語を English に設定します。Fallback とは、特定の言語に値がないときに代わりに表示する言語のことです。

そのあと先ほど作成した Content に移動すると、各 Field ごとに言語別の値を入力する欄ができているのがわかります。このようにして、同じ記事の内容を言語ごとに別々に管理します。ただし、この機能を使うには、Content Type で該当する Field の多言語オプションをあらかじめオンにしておく必要があります。

記事の Field に英語(en-US)と韓国語(ko-KR)の入力欄が並んで表示された様子

多言語対応に関する詳しい内容は多言語管理で扱います。

このように、一つのデータ構造で複数の言語に対応する Web サービスを作ることができます。基本的なコンテンツの取得から多言語処理まで終えたので、次のステップでは、複数の人が一緒にコンテンツを作成・管理する共同作業機能を見ていきます。

  • 共同作業する: 複数の人を Space に招待し、役割を分けて一緒にコンテンツを管理します。