フィードバックを送信
Web Content API Basics
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、 こちら までご連絡ください。

GraphQLを使用したWebコンテンツAPIの基本

Liferay DXP GraphQLサービスを使用すると、サイト上の構造化コンテンツの作成、取得、更新、削除を行うことで、Webコンテンツを管理できます。 構造化コンテンツとは、定義された構造に従い、記事間の一貫性を確保したウェブコンテンツ記事のこと。

注

Web コンテンツ テンプレート を使用して構造化コンテンツをレンダリングすることはできますが、構造化コンテンツを作成するためにテンプレートは必須ではありません。

より高度な例については、 高度な Web コンテンツ API を参照してください。 Liferay DXP で GraphQL を使い始めるには、 GraphQL API の利用 を参照してください。

環境のセットアップ

新しいLiferay インスタンスを起動し、以下を実行します。

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.132-ga132

http://localhost:8080 で Liferay にサインインしてください。 メールアドレス test@liferay.com とパスワード test を使用してください。 プロンプトが表示されたら、パスワードを learnに変更します。

次に、以下の手順に従います。

  1. Web Content API の基本 ファイルをダウンロードして解凍します。

    curl https://resources.learn.liferay.com/examples/liferay-r4h9.zip -O

    unzip liferay-r4h9.zip
    注

    これらのスクリプトは基本認証を使用し、テスト用に設計されています。 本番のLiferay DXP環境では、基本認証を使用しないでください。

  2. 以下の手順で環境をセットアップします。

    1. 使用するサービスの特定
    2. サイトIDを特定します。
    3. ユーザーインターフェースに構造を作成する
    4. ユーザーインターフェースで記事を作成する

利用するサービスを特定する

Liferay DXP Headless Delivery API の以下のサービスを使用して、Web コンテンツを管理します。

  • 記事用の構造化コンテンツ。
  • 構造のためのコンテンツ構造。
  • テンプレート用の ContentTemplate。

これらの API の詳細情報を表示するには、ブラウザを使用して Liferay API Explorer にアクセスしてください。 [server]:[port]/o/api (例: http://localhost:8080/o/api)。 詳細については、 REST サービスの利用 をお読みください。

サイトIDの特定

ログインすると、 はサイト ID を取得します。 このIDを複数のサービス呼び出しで使用してください。 この例では、ID は 20117 です。

ユーザーインターフェースでWebコンテンツ構造を作成する

記事を作成するには、構成が必要です。 ユーザーインターフェースで構造を指定せずに記事を作成すると、Liferay DXPはデフォルトの基本Webコンテンツ構造を使用します。

注

Liferay DXPのユーザーインターフェースでは、基本Webコンテンツ構造は表示されません。

基本ウェブコンテンツ構造を使用する代わりに、新しい構造を作成します。

  1. サイトメニュー (../../../images/icon-menu.png) を開き、 コンテンツ & データを展開し、 Web コンテンツ に移動します。

  2. 構造 タブを選択し、 新規をクリックします。

  3. 名前は Foo 構造 です。 右側のビルダーメニューで、 テキスト フィールドを選択し、フォーム領域にドラッグしてドロップします。

  4. 右側に開いたコンテキストメニューで、 詳細 タブを選択し、 フィールド参照 を コンテンツ に変更します。

  5. ［保存］をクリックします。

詳細については、 構造の作成 を参照してください。

ユーザーインターフェースでWebコンテンツ記事を作成する

これで、Foo構造に基づいて記事を作成できます。

  1. サイトメニュー (../../../images/icon-menu.png) を開き、 コンテンツ & データを展開し、 Web コンテンツ に移動します。

  2. Webコンテンツ タブで、 新規 をクリックし、 Foo構造 を選択します。

  3. 新しい名前として Foo Article と入力し、 公開 をクリックします。

詳細については、 Web コンテンツ記事の作成 を参照してください。

サイトからウェブコンテンツ記事を取得する

GraphQLサービスを使用して、サイトの記事一覧を取得します。 この操作を実行するには、Liferay API Explorerにアクセスしてください。

  1. Liferay API Explorer へ移動します。 http://[host]:[port]/o/api。

  2. 画面右上の GraphQL をクリックして、Liferay の GraphiQL ブラウザを開きます。

    Liferay API Explorer を介して、Liferay の GraphiQL ブラウザにアクセスしてください。

  3. 左側の列に次のクエリを追加し、 siteKey をサイト ID に置き換えて、 id、 key、 title、 friendlyUrlPath、および contentStructureId を取得します。 指定されたサイトの記事について:

    query {
   headlessDelivery_v1_0{
      structuredContents(siteKey: "20117") {
         items {
            id
            key
            title
            friendlyUrlPath
            contentStructureId
         }
      }
   }
}
    注

    GraphQLを使用すると、クエリ応答に必要なフィールドを指定できます。 これらの例に示されているクエリ／ミューテーションは、要件に合わせてフィールドを追加または削除することで調整できます。

  4. をクリックしてクエリを実行 をクリックします。 応答には、各項目の下に照会された情報が記載された記事項目のリストが含まれます。

    {
   "data": {
      "structuredContents": {
         "items": [
         {
            "id": 32147,
            "key": "32145",
            "title": "Foo",
            "friendlyUrlPath": "foo",
            "contentStructureId": 32122
         }
         ]
      }
   }
}

以下に、他のGraphQLサービスを呼び出す例を示します。

ウェブコンテンツ記事の入手

前のステップのスクリプトは、サイトのすべての記事を返しますが、structuredContent(structuredContentId)クエリーを使い、記事のIDを指定することで、特定の記事を取得することができます。

  1. 右上隅の GraphQL をクリックし、左列に次のクエリを追加し、 structuredContentId を構造 ID に置き換えて、 id、 title、 friendlyUrlPath、および contentStructureId に関する情報を取得します。:

    query {
   headlessDelivery_v1_0{
      structuredContent(structuredContentId: 32147) {
         id
         title
         friendlyUrlPath
         contentStructureId
      }
   }
}

  2. をクリックしてクエリを実行 をクリックします。 応答には、構造項目の照会情報が含まれます。

    {
   "data": {
      "structuredContent": {
         "id": 32147,
         "title": "Foo",
         "friendlyUrlPath": "foo",
         "contentStructureId": 32122
      }
   }
}

サイトからウェブコンテンツ構造を取得する

サイトの構造のリストを取得するには、 contentStructures クエリを使用します。

  1. 右上隅の GraphQL をクリックし、左側の列に次のクエリを追加し、 siteKey をサイト ID に置き換えます。

    query{
   headlessDelivery_v1_0 {
      contentStructures(siteKey: "20117") {
         items {
         id
         name
         contentStructureFields {
            name
            label
            dataType
         }
         }
      }
   }
}

  2. をクリックしてクエリを実行 をクリックします。 レスポンスでは、クエリで指定された内容が返されます。

    {
   "data": {
      "headlessDelivery_v1_0": {
         "contentStructures": {
         "items": [
            {
               "id": 32122,
               "name": "Foo",
               "contentStructureFields": [
               {
                  "name": "content",
                  "label": "Text",
                  "dataType": "string"
               }
               ]
            }
         ]
         }
      }
   }
}

ウェブコンテンツ構造の取得

パラメータとして特定の構造のIDを指定することで、 contentStructure クエリを使用して、その構造の説明を取得します。

  1. 右上隅の GraphQL をクリックし、左列に次のミューテーションを追加し、 siteKey をサイト ID に、 contentStructureId を、使用したい構造の ID に置き換えます。

    query{
   headlessDelivery_v1_0{
      contentStructure(contentStructureId: 32122){
         id
         name
         contentStructureFields{
            name
            label
            dataType
         }
      }
   }
}

  2. をクリックしてクエリを実行 をクリックします。 レスポンスでは、クエリで指定された内容が返されます。

    {
   "data": {
      "headlessDelivery_v1_0": {
         "contentStructure": {
         "id": 32122,
         "name": "Foo"
         "contentStructureFields": [
            {
               "name": "content",
               "label": "Text",
               "dataType": "string"
            }
         ]
         }
      }
   }
}

ウェブコンテンツ記事の投稿

createSiteStructuredContent ミューテーションを使用して、Foo 構造を使用して新しい記事を作成します。

  1. 右上隅の GraphQL をクリックし、左列に次のミューテーションを追加し、 siteKey をサイト ID に、 contentStructureId を、使用したい構造の ID に置き換えます。

    mutation {
   headlessDelivery_v1_0{
      createSiteStructuredContent(
         siteKey: "20117",
         structuredContent: {
            contentFields: [
            {
               name: "content",
               contentFieldValue: {
                  data: "Goo"
               }
            }
            ],
            contentStructureId: 32122,
            title: "Goo Article"
         }
      ) {
         id
         title
         contentFields {
            name
            contentFieldValue {
            data
            }
         }
      }
   }
}

  2. をクリックしてクエリを実行 をクリックします。 応答では、変異によって通知された内容が返されます。

    {
   "data": {
      "createSiteStructuredContent": {
         "id": 32205,
         "title": "Goo Article",
         "contentFields": [
            {
            "name": "content",
            "contentFieldValue": {
               "data": "Goo"
            }
            }
         ]
      }
   }
}

ウェブコンテンツ記事の修正

patchStructuredContent ミューテーションを使用して記事を更新します。 これは、構造化コンテンツ id を使用して、記事のコンテンツを ‘Goo' から ‘Foo' に更新します。

  1. 右上隅の GraphQL をクリックし、左列に次の変更を追加し、 structuredContentId を記事 ID に、 contentStructureId を、使用したい構造の ID に置き換えます。

    mutation {
   headlessDelivery_v1_0{
      patchStructuredContent(
      structuredContentId: 32215,
      structuredContent: {
         contentStructureId: 32122,
         title: "Updated Goo Article"
         contentFields: [
            {
            name: "content",
            contentFieldValue: {
               data: "Foo"
            }
            }
         ]
      }
            ) {
         id
         title
         contentFields {
            name
            contentFieldValue {
            data
            }
         }
      }
   }
}

  2. をクリックしてクエリを実行 をクリックします。 応答では、変異によって通知された内容が返されます。

    {
   "data": {
      "patchStructuredContent": {
         "id": 32215,
         "title": "Updated Goo Article",
         "contentFields": [
         {
            "name": "content",
            "contentFieldValue": {
               "data": "Foo"
            }
         }
         ]
      }
   }
}

ウェブコンテンツ記事を掲載する

updateStructuredContent ミューテーションを使用して、元の記事の情報を置き換えます。 これは、記事と構造の識別子を使用して、記事の名前と記事の内容を Foo から Bar に置き換えます。

  1. 右上隅の GraphQL をクリックし、左列に次の変更を追加し、 structuredContentId を記事 ID に、 contentStructureId を、使用したい構造の ID に置き換えます。

    mutation {
   headlessDelivery_v1_0{
      updateStructuredContent(
      structuredContentId: 32215,
      structuredContent: {
         contentStructureId: 32122,
         title: "Bar Article"
         contentFields: [
            {
            name: "content",
            contentFieldValue: {
               data: "Bar"
            }
            }
         ]
      }
            ) {
         id
         title
         contentFields {
            name
            contentFieldValue {
            data
            }
         }
      }
   }
}

  2. をクリックしてクエリを実行 をクリックします。 応答では、変異によって通知された内容が返されます。

    {
   "data": {
      "updateStructuredContent": {
         "id": 32215,
         "title": "Bar Article",
         "contentFields": [
         {
            "name": "content",
            "contentFieldValue": {
               "data": "Bar"
            }
         }
         ]
      }
   }
}

ウェブコンテンツ記事の削除

deleteStructuredContent ミューテーションを使用して記事を削除します。 記事の ID を使用して削除します。

重要

GraphQLの変異を使用して記事を削除すると、Liferay DXPのごみ箱を使用せずに永久に削除されます。

  1. 右上隅の GraphQL をクリックし、左列に次のミューテーションを追加し、 structuredContentId を次の記事に置き換えます。

    mutation {
   headlessDelivery_v1_0{
      deleteStructuredContent(structuredContentId: 32215)
   }
}

  2. をクリックしてクエリを実行 をクリックします。 レスポンスには、削除ステータスを示す値が返されます。

    {
   "data": {
      "deleteStructuredContent": true
   }
}

その他のWebコンテンツとWebコンテンツフォルダーのサービス

以下のクエリ/ミューテーションを使用して、 StructuredContent および StructuredContentFolder サービスをさらに利用します。

ファイルDescription
HeadlessDelivery_v1_0.structuredContentFolders: StructuredContentFolderPageサイトのウェブコンテンツフォルダを一覧表示します。
HeadlessDelivery_v1_0.structuredContentFolder: StructuredContentFolder特定のウェブコンテンツフォルダの詳細を取得します。
MutationHeadlessDelivery_v1_0.createSiteStructuredContentFolder: StructuredContentFolderサイトに新しいウェブコンテンツフォルダを追加します。
MutationHeadlessDelivery_v1_0.createStructuredContentFolderStructuredContentFolder: StructuredContentFolder既存のフォルダに新しいウェブコンテンツフォルダを追加します
MutationHeadlessDelivery_v1_0.patchStructuredContentFolder: StructuredContentFolderウェブコンテンツフォルダ内の特定のフィールドを更新します。
MutationHeadlessDelivery_v1_0.updateStructuredContentFolder: StructuredContentFolderウェブコンテンツフォルダを新しいデータに置き換えます。
MutationHeadlessDelivery_v1_0.deleteStructuredContentFolder: Booleanウェブコンテンツフォルダを削除します。
MutationHeadlessDelivery_v1_0.createStructuredContentFolderStructuredContent: StructuredContent既存のフォルダに新しいウェブコンテンツ記事を追加します。
重要

GraphQL ミューテーションを使用して Web コンテンツ フォルダーを削除すると、 Liferay DXP ごみ箱 を使用せずにフォルダーとそのコンテンツが完全に削除されます。

これらのエンドポイントを使用するには、

  1. クエリ/ミューテーション名を特定します。

    HeadlessDelivery_v1_0.structuredContentFolder では、StructuredContentFolder、 HeadlessDelivery_V1_0 は名前空間、 structuredContentFolder はクエリの名前、 StructuredContentFolder は返される型です。

    MutationHeadlessDelivery_v1_0.deleteStructuredContentFolder: Boolean、 Mutation は、これがミューテーションであることを示しています。

  2. GraphQL構文でクエリ/ミューテーションを使用します（1）。 HeadlessDelivery_v1_0.structuredContentFolder: StructuredContentFolderの場合、クエリは次のようになります。

    query {
   headlessDelivery_v1_0{
         structuredContentFolder(structuredContentFolderId: 32344){
      }
   }
}

    GraphQLスキーマエクスプローラー（3）を使用して、どの引数を使用するかを理解してください。

  3. 戻り値のフィールドを指定してください。

    query {
   headlessDelivery_v1_0{
         structuredContentFolder(structuredContentFolderId: 32344){
         id
         name
         creator {
            id
            name
         }
         dateCreated
      }
   }
}

  4. クエリの実行 をクリックしてクエリ/ミューテーションを実行します。 応答（2）は、要求されたフィールドを返す必要があります。

    {
   "data": {
      "headlessDelivery_v1_0": {
         "structuredContentFolder": {
         "id": 32344,
         "name": "folder",
         "creator": {
            "id": 20123,
            "name": "Portal Administrator"
         },
         "dateCreated": "2024-11-05T12:20:56Z"
         }
      }
   }
}

    GraphiQLブラウザを使用して、GraphQLクエリ/ミューテーションの探索、作成、実行を行います。

Capability:
Content Management System
Resource Type:
Official Documentation
Feature:
API Development
Web Content and Structures
Deployment Approach:
Liferay PaaS
Liferay SaaS
Liferay Self-Hosted