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
http://localhost:8080 に、メールアドレス test@liferay.com とパスワード test を使用して 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アプリケーションはこれらの値を使用します。
-
新しい オブジェクト ドラフトを選択し、 フィールド タブをクリックして、これらの フィールド を追加します。
ラベル 項目名 種類 名前 名前 テキストボックス 説明 説明 テキストボックス -
詳細 タブをクリックし、 公開 をクリックします。
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 は入力を受け取り、ユーザーが Delete をクリックすると、 deleteObject メソッドを呼び出します。
フォームは、 App.js ファイルとともに 1 つのページにまとめられて表示されます。
関連トピック