サービスと連携する

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

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

モバイルアプリも同じバックエンドにそのままつながります。データを保存し、会員を受け入れ、自分のものだけを見せるという処理は、Web でもアプリでも変わりません。アプリと Web が一つのバックエンドを一緒に使う完成サンプルはランニング記録サービスで最初から最後まで見られます。

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

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

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

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

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

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

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

左側のメニューで Delivery Access Tokens を押してください。
一覧の右上にある Create を押してください。Create Delivery Access Token 画面が開きます。
Name 欄に Tech Blog Web を入力してください。
SpaceRole で先ほど作成した Article Read-Only を選んでください。
Allowed referrers は最初の値である No restriction をそのままにしておいてください。リストにアドレスを書いておくと、そのアドレスから来たリクエストだけが通過するため、あとで Tech Blog サイトのアドレスが決まったときに、このトークンをそのサイトだけで使うように絞れます。
画面右上の Create ボタンを押して発行してください。

Create Delivery Access Token 画面。Name 欄に「Tech Blog Web」を入力し、SpaceRole で「Article Read-Only」を選び、Allowed referrers は「No restriction」で、右上に Create ボタンがあります

発行を終えると、そのトークンの詳細画面に移ります。Basic information の Token 欄にトークンの値が入っていて、欄の左にあるコピーボタンを押すと値がコピーされます。この画面にもう一度入れば、値をいつでも改めてコピーできます。ただし、この値は秘密なので、安全な場所に保管してください。この値は訪問者のブラウザにまで露出する可能性があるため、上記のように読み取り専用の SpaceRole で範囲を絞っておくことが重要です。

Delivery Access Token と Allowed referrers の設定に関する詳しい内容はトークンで扱います。

記事データを取得する

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

Authorization: Bearer <Delivery Access Token>

API	Method	Path	Params
CDA	GET	`/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 に招待し、役割を分けて一緒にコンテンツを管理します。