Reactチャートでのオブジェクトデータの使用
ここでは、 オブジェクト , Headless APIs, custom element remote applications を使って、データダッシュボード用のダイナミックチャートを作成します。 まず、オブジェクトAPI 呼び出し用に CORS を有効にして、新しいDXP インスタンスをセットアップします。 次に、データの受信と保存を行うためのオブジェクトを作成します。 REST APIを使ってオブジェクトにデータを追加したら、提供されているReact FusionCharts アプリケーションをダウンロードし、ビルドしてください。 コードがコンパイルされたら、生成された.jsファイルをLiferayドキュメントライブラリーでホストし、そのWebDAV URLをコピーします。 最後に、このURLを使ってReactチャートのリモートアプリケーションを作成し、ページウィジェットとしてデプロイします。
チャートは5秒ごとにヘッドレスAPI経由でオブジェクトを呼び出し、オブジェクトのデータを返してチャートを動的に更新するように構成されています。
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/**値で追加し、 Save をクリックします。これで、すべてのObject APIに対してCORSが有効になります。
- URL Pattern **を
React Chart用のオブジェクトを作成する
グローバルメニュー(
) を開き、 コントロールパネル タブで、 オブジェクト をクリックします。追加 ボタン（！ 追加ボタン ）をクリックし、これらの値を入力します。
フィールド 値 ラベル X3J8-Object 複数形のラベル X3J8-Objects 名前 X3J8Object note提供されたReactアプリは、この値を使用しています。
新しい オブジェクト ドラフトを選択し、 ［フィールド］ タブをクリックして、これらの フィールド を追加します。
ラベル 項目名 種類 必須 ラベル label Text ✔ 値 値 Integer ✔ ［詳細］ タブをクリックし、 ［公開］ をクリックします。
オブジェクトの公開 は、データの受信と保存のための新規アプリケーションを作成し、有効にします。 Liferay UIやヘッドレスAPIでアクセスできるようになりました。
ヘッドレスAPIを使ったオブジェクトへのデータ追加
Liferayの ［APIエクスプローラー］（すなわち
localhost:8080/o/api）を開き、 ［RESTアプリケーション］ ドロップダウンメニューをクリックして、 ［c/x3j8objects］ をクリックしてください。このデータをバッチ
POSTAPIのリクエストボディに入力してください。[ { "label": "FOO", "value": "250" }, { "label": "BAR", "value": "200" }, { "label": "GOO", "value": "150" }, { "label": "BAZ", "value": "100" }, { "label": "QUX", "value": "50" } ]［実行］ をクリックして、データエントリーをオブジェクトに追加します。
データの追加が終わったら、提供されたReactサーバーを設定します。 これには、X3J8-ObjectにAPI呼び出しを行い、そのデータを表示するFusionChartの実装が含まれます。
Reactチャートの設定
以下の手順で、Reactアプリケーションをダウンロードし、ビルドします。
Reactプロジェクト をダウンロードし、解凍してください。
curl https://resources.learn.liferay.com/dxp/latest/ja/building-applications/objects/objects-tutorials/liferay-x3j8.zip -Ounzip liferay-x3j8.zipcd liferay-x3j8nodeとyarnがインストールされていることを確認します。 そうでない場合は、以下のコマンドを実行し、プロンプトに従います。./setup_tutorial.shReactアプリケーションのフォルダに移動し、Reactサーバーを起動します。
cd x3j8-remote-appyarn start起動したら、
localhost:3000にアクセスし、Reactチャートを表示します。c/x3j8objectsサービスを基本認証で呼び出し、5秒ごとにオブジェクトのデータを取得します。
Reactプロジェクトをビルドします。
yarn buildこのコマンドは、リモートアプリケーションとしてアプリケーションを実行するために必要なファイルを含む、最適化された本番環境用ビルドを作成します。
ビルドが成功したことを確認し、アプリケーションの
.jsファイルをメモしておきます。Creating an optimized production build... Compiled successfully. File sizes after gzip: 523.77 kB build/static/js/main.5a6819d5.js 20 B build/static/css/main.31d6cfe0.cssnoteこのチュートリアルでは、
.cssファイルは不要です。
コードがコンパイルされたら、アプリケーションの.jsファイルをLiferay ドキュメントライブラリでホストし、そのWebDAV URLをコピーします。
アプリケーションの.jsファイルをホストする
サイトメニュー(
) を開き、 ［コンテンツ & データ］ と展開して ［Documents and Media］ とクリックします。.jsファイルをアップロードエリアにドラッグ＆ドロップしてください。ドキュメントライブラリにアップロードされると、そのファイルには固有のWebDAV URLが割り当てられ、それを使ってリモートアプリケーションを作成することになります。
Info アイコン (
) をクリックし、 アップロードしたファイル を選択します。ファイルの ［WebDAV URL］ をコピーし、次のステップで使用するために保存してください。
例えば、
http://localhost:8080/webdav/guest/document_library/main.5a6819d5.jsです。
Reactチャートのリモートアプリケーションを作成する
グローバルメニュー(
) を開き、 ［アプリケーション］ タブをクリックし、 ［Remote Apps］ を選択します。追加 ボタン（
）をクリックします。次の値を入力します。
項目 値 名前 X3J8-Remote-App 種類 カスタム要素 HTML 要素名 x3j8-remote-appURL .jsファイルのWebDAV URLポートレットのカテゴリ名 リモートアプリケーション ［Save］ をクリックします。
保存されると、Liferayはリモートアプリケーションのウィジェットを作成し、サイトページにデプロイすることができます。 このウィジェットは、アプリケーションのポートレットカテゴリ名（つまり、このチュートリアルでは、 リモートアプリケーション）の下に表示されます。
