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

ヘッドレスAPIを使用したリモートアプリケーション

7.4以降に対応

オブジェクトの作成と公開後、ヘッドレス REST API が自動的に生成されます。ここでは、これらのエンドポイントを統合して、シンプルなCRUD（作成、読み取り、更新、削除）リモートアプリケーションを作成する方法について説明します。

Liferay DXP をセットアップする

Liferay DXP の新しいインスタンスを起動するには、以下を実行します。

docker run -it -m 8g -p 8080:8080 liferay/dxp:2026.q1.9-lts

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

次に、以下の手順に従って、 /o/c/* URL パターンを デフォルトポータル CORS 設定 に追加します。

グローバルメニュー () を開き、 コントロールパネル → システム設定 → セキュリティツール に移動します。
ポータルクロスオリジンリソース共有（CORS） タブに移動し、 デフォルトのポータルCORS構成をクリックします。
URLパターン を /o/c/* の値とともに追加し、保存をクリックします。これにより、すべてのオブジェクトAPIでCORSが有効になります。

CRUDアプリケーション用のオブジェクトを作成する

グローバルメニュー () を開き、 コントロールパネル → オブジェクト に移動します。
追加ボタン () をクリックし、以下の値を入力してください。

分野値

ラベル J4X7オブジェクト

複数形ラベル J4X7オブジェクト

名前 J4X7オブジェクト

注記

提供されているReactアプリケーションはこれらの値を使用します。
新しい オブジェクト ドラフトを選択し、 フィールド タブをクリックして、これらの フィールド を追加します。

ラベルフィールド名タイプ

名前名前文章

説明説明文章
詳細タブをクリックし、公開をクリックします。

分野	値
ラベル	J4X7オブジェクト
複数形ラベル	J4X7オブジェクト
名前	J4X7オブジェクト

ラベル	フィールド名	タイプ
名前	名前	文章
説明	説明	文章

CRUDアプリケーションの設定

CRUD アプリケーションをダウンロードして解凍します。

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

unzip liferay-j4x7.zip

cd liferay-j4x7

node と yarn がインストールされていることを確認してください。そうでない場合は、以下のコマンドを実行し、画面の指示に従ってください。
```
./setup_tutorial.sh
```
CRUDアプリケーションのフォルダに移動し、Reactサーバーを起動します。
```
cd j4x7-custom-element
```
```
糸のスタート
```
起動したら、 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 を使用してユーザーを認証するを参照してください。