ヘッドレスAPIによるリモートアプリケーション
7.4以降で利用可能
オブジェクトを作成・公開すると、Headless REST APIが自動的に生成されます。 ここでは、これらのエンドポイントを統合して、シンプルなCRUD（作成、読み取り、更新、削除）リモートアプリケーションを作成する方法について説明します。
Liferay DXPのセットアップ
新しいLiferay DXPインスタンスを起動し、以下を実行します。
docker run -it -m 8g -p 8080:8080 liferay/dxp:7.4.13-u55。
メールアドレス[email protected]_とパスワード_test_を使用して、http://localhost:8080でLiferayにサインインしてください。 プロンプトが表示されたら、パスワードを _learn_に変更します。
次に、以下の手順に従って、 /o/c/*URLパターンを ［Default Portal CORS Configuration］ に追加してください。 グローバルメニュー(
)を開き、 ［コントロールパネル］ タブをクリックして、 ［システム設定］ → ［セキュリティツール］ に移動します。
［Portal Cross-Origin Resource Sharing (CORS)］ タブで、 ［Default Portal CORS Configuration］ をクリックしてください。
［URL Pattern］ に
/o/c/*の値を追加し、 ［保存］ をクリックします。 これにより、すべてのオブジェクトAPI に対してCORSが有効になります。
CRUDアプリケーション用のオブジェクトを作成する
グローバルメニュー(
)を開き、 ［コントロールパネル］ タブをクリックして、 ［オブジェクト］ に移動します。追加 ボタン (
) をクリックし、下記の値を入力します。項目 値 ラベル J4X7-Object 複数形のラベル J4X7-Objects 名前 J4X7Object note提供されたReactアプリケーションがこの値を使用します。
新しい オブジェクト ドラフトを選択し、 ［フィールド］ タブをクリックして、これらの フィールド を追加します。
ラベル 項目名 種類 名前 名前 テキスト 説明 説明 テキスト ［詳細］ タブをクリックし、 ［公開］ をクリックします。
CRUDアプリケーションのセットアップ
CRUD アプリケーション をダウンロードし、解凍してください。
curl https://resources.learn.liferay.com/dxp/latest/ja/building-applications/developing-a-javascript-application/using-react/liferay-j4x7.zip -Ounzip liferay-j4x7.zipcd liferay-j4x7node>と<code>yarnがインストールされていることを確認します。 そうでない場合は、以下のコマンドを実行し、プロンプトに従います。./setup_tutorial.shCRUDアプリケーションのフォルダに移動し、Reactサーバーを起動します。
cd j4x7-remote-appyarn 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('[email protected]: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('[email protected]: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('[email protected]: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('[email protected]: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つのページに表示します。