WebコンテンツAPIの詳細設定
Liferay DXP RESTサービスを使用すると、サイトの構造化コンテンツを作成・管理することができます。 構造化コンテンツとは、Webコンテンツストラクチャーを使用する Webコンテンツ です。 ストラクチャーは、Webコンテンツの記事に含まれる作成者、概要、内容などの情報を定義します。 ストラクチャーにより、必要な情報がコンテンツにすべて含まれるようになります。 ストラクチャーの詳細については、 Webコンテンツストラクチャーを理解する をご覧ください。
ここでは、いくつかの cURL コードサンプルとともに、ビルド済みのLiferay DXP Dockerイメージを使って、ストラクチャーと構造化コンテンツについて学習していきます。 Liferay DXPでのREST APIの使用については、 RESTサービスの使用 をご覧ください。
Web Content API の紹介については、 WebコンテンツAPIの基本 を参照。
環境のセットアップ
新しいLiferay DXPインスタンスを起動し、以下を実行します。
docker run -it -m 8g -p 8080:8080 liferay/dxp:2024.q1.1。
メールアドレス test@liferay.com とパスワード test を使用して、http://localhost:8080でLiferayにサインインしてください。 プロンプトが表示されたら、パスワードを learn に変更します。
次に、 サンプルプロジェクト をダウンロードして解凍します:
curl https://resources.learn.liferay.com/dxp/latest/en/content-authoring-and-management/web-content/developer-guide/liferay-m7b2.zip -O
unzip liferay-m7b2.zip
これらのスクリプトは基本認証を使用し、テスト用に設計されています。 本番のLiferay DXP環境では、基本認証を使用しないでください。
サイトIDを特定します。
-
サイトメニュー()を開き、 設定 → サイト設定 に進みます。
-
[プラットフォーム]セクション下で、 [サイト設定] をクリックします。 Liferay DXPバージョン7.3以前の場合は、 一般 タブをクリックします。
-
[Site ID]の下でサイト識別子を見つけます。
Liferay DXPに画像を追加する
ここでは、画像を含むさまざまなコンテンツフィールドを含むWebコンテンツの記事を扱います。 サンプルのWebコンテンツ記事にこれらの画像を追加するには、次の手順に従います。
- サイトメニュー()を開き、 コンテンツとデータ → ドキュメントとメディア に移動します。
- 追加 ボタン(![Add](../../../images/icon-add.png))をクリックし、 複数ファイルのアップロード を選択します。
- サンプルプロジェクトフォルダ から
foo.png
、bar.png
、goo.png
の画像をドロップエリアにドラッグ&ドロップします。 - [公開] をクリックします。
あるいは、Document_POST_ToSite.sh
スクリプトを使用して、REST API の Document
サービスを使用して各画像を個別に投稿することもできます。
curl \
-F "file=@${1}" \
-H "Content-Type: multipart/form-data" \
-X POST \
"http://localhost:8080/o/headless-delivery/v1.0/sites/${2}/documents" \
-u "test@liferay.com:learn"
この例では、画像ファイルの相対パスとサイトIDをパラメータとして、foo.png
画像を投稿します:
メソッド | サービス | エンドポイント |
---|---|---|
GET | Document | /v1.0/sites/${2}/documents |
./Document_POST_ImageToSite.sh "../images/foo.png" 20125
パラメーター # | 説明 |
---|---|
$1 | ファイルへの相対パス |
$2 | siteId |
JSON出力には、id
フィールドに画像の識別子が含まれる:
{
...
"encodingFormat" : "image/png",
"externalReferenceCode" : "44339",
"fileExtension" : "png",
"id" : 44339,
...
"title" : "foo.png"
}
REST APIを使ったドキュメントの操作については、 ドキュメントAPIの基本 を参照してください。
サンプルストラクチャーの作成
REST API を使用してプログラムで Web コンテンツ構造を作成することはできません。
-
サイトメニュー()を開き、 コンテンツ&データ → ウェブコンテンツ に移動します。
-
構造 タブを選択し、 追加 ボタン() をクリックします。
-
以下の内容で、新しいWebコンテンツストラクチャーを作成します。
- 名前フー
- フィールド(この順番):テキスト
、
画像、
日付、
単一選択`。
-
[Single Selection]フィールドには、これらの値を使用します。
- 最初のオプション値:
Foo
- 第2オプション値:
Goo
- 最初のオプション値:
-
各ストラクチャー項目をクリックし、そのフィールド参照値を更新します(下表参照)。 フィールド参照値は、サイドバーの[Advanced]セクションにあります。
-
[Save]をクリックします。
項目 | 新規フィールド参照値 |
---|---|
テキストボックス | TextReference |
画像 | ImageReference |
日付 | DateReference |
選択 | SingleSelectionReference |
詳細は、 ストラクチャーの作成 を参照してください。
サンプルテンプレートの作成
REST API を使用してプログラムで Web コンテンツ テンプレートを作成することはできません。
構造の image
フィールドを含むウェブコンテンツテンプレートを作成する:
-
サイトメニュー()を開き、 コンテンツ&データ → ウェブコンテンツ に移動します。
-
Templates タブを選択し、 Add ボタン() をクリックします。
-
テンプレート名に Foo と入力してください。
-
Propertiesサイドパネルから、Structureフィールドの隣にある Add ボタン() をクリックする。
-
、前のセクション 。
-
FreeMarker エディタに含まれるデフォルトの
<#-- -->
ブロックコメントを削除する。 -
サイドバーで、 要素() をクリックします。
-
フィールド」グループで、「テキスト」、「画像」、「日付」、「単一選択」フィールドをクリックしてテンプレートに追加します。 FreeMarkerエディターで、各フィールドが新しい行で始まることを確認します。
-
[Save]をクリックします。
構造の image
フィールドを除いた 2 番目の Web コンテンツ・テンプレートを作成します:
-
Templatesタブで Actions ボタン() をクリックし、 Copy を選択します。
-
テンプレート名を Goo に更新し、 コピー をクリックします。
-
テンプレートタブで、新しい Goo テンプレートをクリックします。
-
テンプレートエディターで、FreeMarkerスクリプトから画像情報
<#if (ImageReference.getData())></#if>
を削除します。 -
[Save]をクリックします。
詳しくは、 Webコンテンツテンプレートの作成 を参照してください。
WebコンテンツストラクチャーIDの取得
既存のすべてのサイト構造を返すには、ContentStructures_GET_FromSite.sh
スクリプトを使用します。 このスクリプトは GET
HTTP メソッドと Site Id パラメータを持つ ContentStructure
サービスを使用する。
メソッド | サービス | エンドポイント |
---|---|---|
GET | ContentStructure | /v1.0/sites/${1}/content-structures |
./ContentStructures_GET_FromSite.sh 20125
パラメーター # | 説明 |
---|---|
$1 | siteId |
このコードはスクリプトのJSON出力を示しており、ウェブコンテンツ構造 id
("id" : 43563
) と name
("name" : "Foo"
) を特定することができます。 contentStructureFields
セクションではStructureフィールドについて説明する。 この構造体には TextReference
、ImageReference
、DateReference
、SingleSelectionReference
という4つのフィールドがあります。
{
"actions" : { },
"facets" : [ ],
"items" : [ {
"availableLanguages" : [ "en-US" ],
"contentStructureFields" : [ {
"dataType" : "string",
"inputControl" : "text",
"label" : "Text",
"localizable" : true,
"multiple" : false,
"name" : "TextReference",
"nestedContentStructureFields" : [ ],
"options" : [ ],
"predefinedValue" : "",
"repeatable" : false,
"required" : false,
"showLabel" : true
}, {
"dataType" : "image",
"label" : "Image",
"localizable" : true,
"multiple" : false,
"name" : "ImageReference",
"nestedContentStructureFields" : [ ],
"options" : [ ],
"predefinedValue" : "{}",
"repeatable" : false,
"required" : false,
"showLabel" : true
}, {
"dataType" : "date",
"label" : "Date",
"localizable" : true,
"multiple" : false,
"name" : "DateReference",
"nestedContentStructureFields" : [ ],
"options" : [ ],
"predefinedValue" : "",
"repeatable" : false,
"required" : false,
"showLabel" : true
}, {
"dataType" : "string",
"inputControl" : "radio",
"label" : "Single Selection",
"localizable" : true,
"multiple" : false,
"name" : "SingleSelectionReference",
"nestedContentStructureFields" : [ ],
"options" : [ {
"label" : "Foo",
"value" : "Option13142925"
}, {
"label" : "Goo",
"value" : "Option50805674"
} ],
"predefinedValue" : "[]",
"repeatable" : false,
"required" : false,
"showLabel" : true
} ],
"creator" : {
"additionalName" : "",
"contentType" : "UserAccount",
"familyName" : "Bowman",
"givenName" : "David",
"id" : 20129,
"name" : "David Bowman"
},
"dateCreated" : "2021-08-25T07:52:46Z",
"dateModified" : "2021-08-25T08:01:58Z",
"description" : "",
"id" : 43563,
"name" : "Foo",
"siteId" : 20125
} ],
"lastPage" : 1,
"page" : 1,
"pageSize" : 20,
"totalCount" : 1
}
画像IDの取得
の前に に投稿した画像の ID を取得するには、Documents_GET_FromSite.sh
スクリプトを使用します。 このスクリプトは GET
HTTP メソッドと Site Id パラメータを持つ Document
サービスを使用する。
メソッド | サービス | エンドポイント |
---|---|---|
GET | Document | /v1.0/sites/${1}/documents |
./Documents_GET_FromSite.sh 20125
パラメーター # | 説明 |
---|---|
$1 | siteId |
Webコンテンツテンプレートの取得
サイトのすべてのテンプレートを取得するには、ContentTemplates_GET_FromSite
スクリプトを使用します。 このスクリプトは ContentTemplate
サービスを GET
HTTP メソッドと Site Id パラメータで使用する。
メソッド | サービス | エンドポイント |
---|---|---|
GET | ContentTemplate | /v1.0/sites/${1}/content-templates |
./ContentTemplates_GET_FromSite.sh 20125
パラメーター # | 説明 |
---|---|
$1 | siteId |
以下は、このスクリプトからのJSON出力です。 以下の情報を参照してください:
- このJSON出力には2つの異なるテンプレートがある:name":“Foo”
と
“name”:“Goo”`です。 - contentStructureId`フィールドはテンプレートにリンクされているWebコンテンツ構造を示します。
templateScript
はprogrammingLanguage
で指定された言語のスクリプトを含む。 この例では、FreeMarkerが言語となります。Foo
テンプレートのtemplateScript
フィールドには、<#if (ImageReference.getData())></#if>で参照されている画像フィールドが含まれている。 Goo
テンプレートのtemplateScript
フィールドには、この参照は含まれていません。
{
"actions" : {
"get" : {
"method" : "GET",
"href" : "http://localhost:8080/o/headless-delivery/v1.0/sites/20125/content-templates"
}
},
"facets" : [ ],
"items" : [ {
"actions" : {
"get" : {
"method" : "GET",
"href" : "http://localhost:8080/o/headless-delivery/v1.0/sites/20125/content-templates/{contentTemplateId}"
}
},
"availableLanguages" : [ "en-US" ],
"contentStructureId" : 43563,
"creator" : {
"additionalName" : "",
"contentType" : "UserAccount",
"familyName" : "Bowman",
"givenName" : "David",
"id" : 20129,
"name" : "David Bowman"
},
"dateCreated" : "2021-08-25T13:39:20Z",
"dateModified" : "2021-08-25T13:39:20Z",
"description" : "",
"id" : "43823",
"name" : "Foo",
"programmingLanguage" : "ftl",
"siteId" : 20125,
"templateScript" : "<#if (TextReference.getData())??>\n\t${TextReference.getData()}\n</#if>\n<#if (ImageReference.getData())?? && ImageReference.getData() != \"\">\n\t<img alt=\"${ImageReference.getAttribute(\"alt\")}\" data-fileentryid=\"${ImageReference.getAttribute(\"fileEntryId\")}\" src=\"${ImageReference.getData()}\" />\n</#if>\n<#assign DateReference_Data = getterUtil.getString(DateReference.getData())>\n\n<#if validator.isNotNull(DateReference_Data)>\n\t<#assign DateReference_DateObj = dateUtil.parseDate(\"yyyy-MM-dd\", DateReference_Data, locale)>\n\n\t${dateUtil.getDate(DateReference_DateObj, \"dd MMM yyyy - HH:mm:ss\", locale)}\n</#if>\n<#if (SingleSelectionReference.getData())??>\n\t${SingleSelectionReference.getData()}\n</#if>"
}, {
"actions" : {
"get" : {
"method" : "GET",
"href" : "http://localhost:8080/o/headless-delivery/v1.0/sites/20125/content-templates/{contentTemplateId}"
}
},
"availableLanguages" : [ "en-US" ],
"contentStructureId" : 43563,
"creator" : {
"additionalName" : "",
"contentType" : "UserAccount",
"familyName" : "Bowman",
"givenName" : "David",
"id" : 20129,
"name" : "David Bowman"
},
"dateCreated" : "2021-08-26T10:10:22Z",
"dateModified" : "2021-08-26T14:08:53Z",
"description" : "",
"id" : "44177",
"name" : "Goo",
"programmingLanguage" : "ftl",
"siteId" : 20125,
"templateScript" : "<#if (TextReference.getData())??>\n\t${TextReference.getData()}\n</#if>\n<#assign DateReference_Data = getterUtil.getString(DateReference.getData())>\n\n<#if validator.isNotNull(DateReference_Data)>\n\t<#assign DateReference_DateObj = dateUtil.parseDate(\"yyyy-MM-dd\", DateReference_Data, locale)>\n\n\t${dateUtil.getDate(DateReference_DateObj, \"dd MMM yyyy - HH:mm:ss\", locale)}\n</#if>\n<#if (SingleSelectionReference.getData())??>\n\t${SingleSelectionReference.getData()}\n</#if>"
} ],
"lastPage" : 1,
"page" : 1,
"pageSize" : 20,
"totalCount" : 2
}
IDによるWebコンテンツテンプレートの取得
上記の スクリプトは、サイトのすべてのWebコンテンツテンプレートを収集しますが、そのIDを参照することで特定のテンプレートに関する情報を取得することができます。 このためには、ContentTemplate_GET_ById.sh
cURLスクリプトを使用する。 このスクリプトは、サイトIDとテンプレートIDのパラメーターを使用します。
メソッド | サービス | エンドポイント |
---|---|---|
GET | ContentTemplate | /v1.0/sites/${1}/content-templates/${2} |
./ContentTemplate_GET_ById.sh 20125 43823
パラメーター # | 説明 |
---|---|
$1 | siteId |
$2 | テンプレート id |
Webコンテンツの記事を投稿する
この StructuredContent_POST_ToSite.sh
cURL スクリプトは、POST
HTTP メソッドと の前に作成したサンプル構造体を使用して、新しい Web コンテンツ記事を作成します。 このスクリプトでは、 サイトID 、ストラクチャーID、 foo.pngの 画像ID をパラメーターとして使用しています。
メソッド | サービス | エンドポイント |
---|---|---|
PUT | StructuredContent | /v1.0/sites/{siteId}/structured-contents |
./StructuredContent_POST_ToSite.sh 20125 43563 43795
cURLスクリプトのパラメーター:
パラメーター # | 説明 |
---|---|
$1 | siteId |
$2 | contentStructureId |
$3 | 画像 id |
Liferay DXP で新しい Web コンテンツ記事を見つけるには、 Site Menu() を開き、 Content & Data → Web Content に進みます。
以下は、このスクリプトからのJSON出力です。 スクリプトは以下を投稿します。
- “タイトル” : “エイブル”`という新しいウェブコンテンツ記事
- 記事の本文を定義する4つの
contentFields
値:TextReference
に含まれる文字列。ImageReference
の画像。DateReference
の日付情報。SingleSelectionReference
のラジオボタンコントロール。
{
"actions" : {
...
},
"availableLanguages" : [ "en-US" ],
"contentFields" : [ {
"contentFieldValue" : {
"data" : "This text describes Foo."
},
"dataType" : "string",
"inputControl" : "text",
"label" : "Text",
"name" : "TextReference",
"nestedContentFields" : [ ],
"repeatable" : false
}, {
"contentFieldValue" : {
"image" : {
"contentType" : "Document",
"contentUrl" : "/documents/20125/0/foo.png/50956e56-9571-8f73-ae6e-9fca20fe0e3a?t=1629897455431",
"description" : "This text describes Foo's image.",
"encodingFormat" : "image/png",
"fileExtension" : "png",
"id" : 43795,
"sizeInBytes" : 6232,
"title" : "Foo"
}
},
"dataType" : "image",
"label" : "Image",
"name" : "ImageReference",
"nestedContentFields" : [ ],
"repeatable" : false
}, {
"contentFieldValue" : {
"data" : "2021-08-30T00:00:00Z"
},
"dataType" : "date",
"label" : "Date",
"name" : "DateReference",
"nestedContentFields" : [ ],
"repeatable" : false
}, {
"contentFieldValue" : {
"data" : "Foo"
},
"dataType" : "string",
"inputControl" : "radio",
"label" : "Single Selection",
"name" : "SingleSelectionReference",
"nestedContentFields" : [ ],
"repeatable" : false
} ],
"contentStructureId" : 43563,
"creator" : {
"additionalName" : "",
"contentType" : "UserAccount",
"familyName" : "Bowman",
"givenName" : "David",
"id" : 20129,
"name" : "David Bowman"
},
"customFields" : [ ],
"dateCreated" : "2021-08-26T06:14:06Z",
"dateModified" : "2021-08-26T06:14:06Z",
"datePublished" : "2021-08-26T06:14:00Z",
"description" : "",
"externalReferenceCode" : "43847",
"friendlyUrlPath" : "able",
"id" : 43849,
"key" : "43847",
"keywords" : [ ],
"numberOfComments" : 0,
"relatedContents" : [ ],
"renderedContents" : [ {
"contentTemplateId" : "43823",
"contentTemplateName" : "Foo",
"markedAsDefault" : true,
"renderedContentURL" : "http://localhost:8080/o/headless-delivery/v1.0/structured-contents/43849/rendered-content/43823"
}, {
"contentTemplateId" : "43868",
"contentTemplateName" : "Goo",
"markedAsDefault" : false,
"renderedContentURL" : "http://localhost:8080/o/headless-delivery/v1.0/structured-contents/44060/rendered-content/43868"
} ],
"siteId" : 20125,
"subscribed" : false,
"taxonomyCategoryBriefs" : [ ],
"title" : "Able",
"uuid" : "01ace059-814a-132d-d46d-21737ef2ec53"
}
特定のテンプレートでレンダリングされたWebコンテンツの記事を取得する
Webコンテンツの記事は、特定のテンプレートにリンクされているわけではありません。 テンプレートは、Webコンテンツのレンダリング方法を定義するもので、同じWebコンテンツに異なるテンプレートを使用することができます。 詳細については、 Webコンテンツストラクチャーを理解する をご覧ください。
ウェブコンテンツの記事は特定のテンプレートにリンクされていないので、新しい記事を POST
するときにテンプレートを指定することはできません (HTTP の POST
メソッドはテンプレートを記述する renderedContents
セクションを無視します)。
スクリプト ./StructuredContentRendered_GET_ById.sh
は、選択したウェブコンテンツとテンプレートを使ってウェブコンテンツをレンダリングします。 このスクリプトは StructuredContent
サービスの GET
HTTP メソッドを使用する。
メソッド | サービス | エンドポイント |
---|---|---|
PUT | StructuredContent | /v1.0/structured-contents/${1}/rendered-content/${2} |
./StructuredContentRendered_GET_ById.sh 43849 43868
以下は、image
フィールドを持つテンプレートを使用したスクリプトの出力です:
Foo<picture data-fileentryid="43795"><source media="(max-width:300px)" srcset="http://localhost:8080/o/adaptive-media/image/43795/Thumbnail-300x300/foo.png?t=1629897455431, /o/adaptive-media/image/43795/Preview-1000x0/foo.png?t=1629897455431 2x" /><source media="(max-width:600px) and (min-width:300px)" srcset="http://localhost:8080/o/adaptive-media/image/43795/Preview-1000x0/foo.png?t=1629897455431" /><img alt="Foo alt-image description" data-fileentryid="43795" src="http://localhost:8080/documents/20125/0/foo.png/50956e56-9571-8f73-ae6e-9fca20fe0e3a?t=1629897455431" /></picture>30 Aug 2021 - 00:00:00Option1314292
その代わりに image
フィールドなしで Web Content Template を指定した場合、<picture></picture>
の情報は出力にレンダリングされません。 以下は、image
フィールドのないテンプレートを使用したスクリプトの出力です:
./StructuredContentRendered_GET_ById.sh 43849 43823
Foo30 Aug 2021 - 00:00:00Option13142925
cURLスクリプトのパラメーター:
パラメーター # | 説明 |
---|---|
$1 | 構造化コンテンツ id |
$2 | contentTemplateId |
Webコンテンツの記事を配置する
HTTP メソッド PUT
を StructuredContent
サービスとともに使って、オリジナルの Web コンテンツ情報を置き換える。 StructuredContent_PUT_ById
スクリプトは Web Content と Structure の識別子を使用して、記事の名前をBaker
に、記事の内容をBar
からGoo
に置き換えます。
メソッド | サービス | エンドポイント |
---|---|---|
PUT | StructuredContent | /v1.0/structured-contents/{structuredContentId} |
./StructuredContent_PUT_ById.sh 43849 43563 43805
cURLスクリプトのパラメーター:
パラメーター # | 説明 |
---|---|
$1 | 構造化コンテンツ id |
$2 | contentStructureId |
$3 | 画像 id |