Headless APIによるリモートアプリケーション
7.4以降で利用可能
オブジェクトを作成して公開すると、ヘッドレス REST API が自動的に生成されます。 ここでは、これらのエンドポイントを統合して、シンプルなCRUD（作成、読み取り、更新、削除）リモートアプリケーションを作成する方法について説明します。
Liferay DXPのセットアップ
新しいLiferay DXPインスタンスを起動し、以下を実行します。
docker run -it -m 8g -p 8080:8080 liferay/dxp:2025.q1.6-lts
メールアドレス test@liferay.com とパスワード testを使用して、 http://localhost:8080 で Liferay にサインインします。 プロンプトが表示されたら、パスワードを learnに変更します。
次に、次の手順に従って、 /o/c/* URL パターンを デフォルト ポータル CORS 構成に追加します。
-
グローバル メニュー (
) を開き、 コントロール パネル タブをクリックして、 システム設定 → セキュリティ ツールに移動します。 -
［Portal Cross-Origin Resource Sharing (CORS)］タブで、 ［Default Portal CORS Configuration］をクリックしてください。
-
URL パターン を
/o/c/*値で追加し、 保存をクリックします。 これにより、すべてのオブジェクトAPI に対してCORSが有効になります。
CRUDアプリケーション用のオブジェクトの作成
-
グローバル メニュー (
) を開き、 コントロール パネル タブをクリックして、 オブジェクトに移動します。 -
追加 ボタン (
) をクリックし、次の値を入力します。項目 値 ラベル J4X7-オブジェクト 複数形のラベル J4X7-オブジェクト 名前 J4X7オブジェクト 注提供された React アプリケーションはこれらの値を使用します。
-
新しい オブジェクト ドラフトを選択し、 フィールド タブをクリックして、次の フィールドを追加します。
ラベル 項目名 種類 name name テキストボックス 説明 説明 テキストボックス -
詳細 タブをクリックし、 公開をクリックします。
CRUDアプリケーションのセットアップ
-
CRUD アプリケーションをダウンロードして解凍します。
curl https://resources.learn.liferay.com/examples/liferay-j4x7.zip -Ounzip liferay-j4x7.zipcd liferay-j4x7 -
node>とyarnがインストールされていることを確認します。 そうでない場合は、以下のコマンドを実行し、プロンプトに従います。./setup_tutorial.sh -
CRUDアプリケーションのフォルダに移動し、Reactサーバーを起動します。
cd j4x7-custom-elementyarn start起動したら、
localhost:3000にアクセスし、CRUDアプリケーションを表示します。 -
名前と説明を入力し、 追加 をクリックして、J4X7オブジェクトを追加します。 新しい項目が追加されました。
-
先ほど作成したJ4X7オブジェクトのID番号をメモしておいてください。 ID番号と新しい名前および説明を入力します。 パッチをクリックします。 項目は新しい名前と説明で更新されました。
-
ID番号を入力し、［削除］をクリックします。 項目が削除されました。
コードを調べる
サンプルのCRUDアプリケーションは、APIリクエストを含むファイルと、CRUD操作を処理するフォームを含むファイルの2つに分かれています。
リクエストの処理
Requests.jsファイルは、JavaScriptの組み込みの fetch()メソッドを使用しています。
getObjects() すべてのオブジェクトに対してGETリクエストを行います。
export const getObjects = () => {
return fetch(`http://localhost:8080/o/c/j4x7objects/`, {
headers: {
Authorization: 'Basic ' + btoa('test@liferay.com:learn'),
'Content-Type': 'application/json',
},
method: 'GET',
});
};
addObject()は、新しいオブジェクトの名前と説明を使用してPOSTリクエストを行います。
export const addObject = object => {
return fetch(`http://localhost:8080/o/c/j4x7objects/`, {
body: JSON.stringify({
description: object.description,
name: object.name,
}),
headers: {
Authorization: 'Basic ' + btoa('test@liferay.com:learn'),
'Content-Type': 'application/json',
},
method: 'POST',
});
};
patchObject()は、特定のオブジェクトIDと新しい名前および説明を使用したPATCHリクエストを行います。
export const patchObject = object => {
return fetch(`http://localhost:8080/o/c/j4x7objects/${object.id}`, {
body: JSON.stringify({
description: object.description,
name: object.name,
}),
headers: {
Authorization: 'Basic ' + btoa('test@liferay.com:learn'),
'Content-Type': 'application/json',
},
method: 'PATCH',
});
};
deleteObject()は、特定のオブジェクトIDを使用してDELETEリクエストを行います。
export const deleteObject = id => {
return fetch(`http://localhost:8080/o/c/j4x7objects/${id}`, {
headers: {
Authorization: 'Basic ' + btoa('test@liferay.com:learn'),
'Content-Type': 'application/json',
},
method: 'DELETE',
});
};
注
ここでは、デモのために基本的な認証を使用しています。 本番環境では、 OAuth 2.0経由でユーザーを認証する必要があります。 OAuth2 を使用するサンプル React アプリケーションについては、 OAuth2 を使用してユーザーを承認する を参照してください。
フォームの実装
GetForm.js は getObjects メソッドを呼び出し、応答を JSON として解析します。 J4X7の各エントリーは、フォームごとに一覧表示されます。
AddForm.js は入力を受け取り、ユーザーが Addをクリックすると、 addObject メソッドを呼び出します。
PatchForm.js は入力を受け取り、ユーザーが Patchをクリックすると、 patchObject メソッドを呼び出します。
DeleteForm.js は入力を受け取り、ユーザーが 削除をクリックすると、 deleteObject メソッドを呼び出します。
フォームは App.js ファイルによって 1 ページにまとめられ、表示されます。
関連トピック