フィードバックを送信
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 コンテンツ 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 ヘッドレス配信 API の次のサービスを使用して、Web コンテンツを管理します。

  • 記事の StructuredContent 。
  • 構造体の ContentStructure 。
  • テンプレートの ContentTemplate 。

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

サイトIDの特定

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

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

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

注

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

基本的な Web コンテンツ構造を使用する代わりに、新しいものを作成します。

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

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

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

  4. 右側に表示されるコンテキスト メニューで、 詳細設定 タブを選択し、 フィールド参照 を コンテンツに変更します。

  5. [保存]をクリックします。

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

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

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

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

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

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

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

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

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

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

  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 サービスを呼び出す例です。

Webコンテンツ記事の取得

前のステップ のスクリプトはサイトのすべての記事を返しますが、 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
      }
   }
}

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

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"
               }
               ]
            }
         ]
         }
      }
   }
}

Webコンテンツ構造の取得

特定の構造の 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"
            }
         ]
         }
      }
   }
}

Webコンテンツ記事の投稿

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

  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"
            }
            }
         ]
      }
   }
}

Webコンテンツ記事のパッチ適用

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"
            }
         }
         ]
      }
   }
}

Webコンテンツ記事の削除

記事を削除するには、 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サイトの Web コンテンツ フォルダーを一覧表示します。
HeadlessDelivery_v1_0.structuredContentFolder: StructuredContentFolder特定のWebコンテンツフォルダの詳細を取得します
MutationHeadlessDelivery_v1_0.createSiteStructuredContentFolder: StructuredContentFolder新しい Web コンテンツ フォルダーをサイトに追加します。
MutationHeadlessDelivery_v1_0.createStructuredContentFolderStructuredContentFolder: StructuredContentFolder既存のフォルダに新しいWebコンテンツフォルダを追加します
MutationHeadlessDelivery_v1_0.patchStructuredContentFolder: StructuredContentFolderWeb コンテンツ フォルダー内の特定のフィールドを更新します。
MutationHeadlessDelivery_v1_0.updateStructuredContentFolder: StructuredContentFolderWeb コンテンツ フォルダーを新しいデータに置き換えます。
MutationHeadlessDelivery_v1_0.deleteStructuredContentFolder: BooleanWeb コンテンツ フォルダーを削除します。
MutationHeadlessDelivery_v1_0.createStructuredContentFolderStructuredContent: StructuredContent既存のフォルダーに新しい Web コンテンツ記事を追加します。
重要

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