React Chartsでオブジェクトデータを使用する

ここでは、 オブジェクト、 ヘッドレス API、および カスタム要素リモート アプリケーション を使用して、データ ダッシュボード用の動的なチャートを作成します。 まず、オブジェクト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:2026.q1.9-lts

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

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

1. グローバルメニュー () を開き、 コントロールパネル → システム設定 → セキュリティツール に移動します。

2. ポータルクロスオリジンリソース共有（CORS） タブに移動し、 デフォルトのポータルCORS構成をクリックします。

   

3. URLパターン を /o/c/* の値とともに追加し、 保存 をクリックします。 これにより、すべてのオブジェクトAPIでCORSが有効になります。

   

React Chart 用のオブジェクトを作成する

1. グローバルメニュー () を開き、 コントロールパネル → オブジェクト に移動します。

2. 追加 ボタン () をクリックし、以下の値を入力してください。

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

   注記

   提供されているReactアプリはこれらの値を使用します。

3. 新しい オブジェクト ドラフトを選択し、 フィールド タブをクリックして、これらの フィールド を追加します。

   ラベル	フィールド名	タイプ	必須
   ラベル	ラベル	文章	✔
   価値	価値	整数	✔

4. 詳細 タブをクリックし、 公開 をクリックします。

オブジェクトの公開 は、データの受信と保存のための新しいアプリケーションを作成してアクティブ化します。 Liferay UIまたはヘッドレスAPI経由でアクセスできるようになりました。

ヘッドレスAPIを使用してオブジェクトにデータを追加する

1. Liferay の API Explorer (つまり、 localhost:8080/o/apiを開き、 REST Applications ドロップダウン メニューをクリックし、 c/x3j8objects をクリックします。

2. バッチ POST API のリクエストボディにこのデータを入力してください:

   [
     {
       "ラベル": "FOO"、
       "値": "250"
     }、
     {
       "ラベル": "BAR"、
       "値": "200"
     }、
     {
       "ラベル": "GOO"、
       "値": "150"
     }、
     {
       "ラベル": "BAZ"、
       "値": "100"
     }、
     {
       "ラベル": "QUX",
       "値": "50"
     }
   ]
   

3. をクリックして を実行し、データエントリをオブジェクトに追加します。

データの追加が完了したら、提供されているReactサーバーを設定できます。 これには、X3J8-ObjectへのAPI呼び出しを行い、そのデータを表示するFusionChartの実装が含まれます。

React Chartの設定

Reactアプリケーションをダウンロードしてビルドするには、以下の手順に従ってください。

1. React プロジェクト をダウンロードして解凍します。

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

   unzip liferay-x3j8.zip
   

   cd liferay-x3j8
   

2. node と yarn がインストールされていることを確認してください。 そうでない場合は、以下のコマンドを実行し、画面の指示に従ってください。

   ./setup_tutorial.sh
   

3. Reactアプリケーションのフォルダに移動し、Reactサーバーを起動します。

   cd x3j8-custom-element
   

   糸のスタート
   

   起動したら、 localhost:3000 にアクセスして React チャートを表示します。 これは、基本認証を使用して c/x3j8objects サービスを呼び出し、5 秒ごとにオブジェクトのデータを取得します。

   

4. Reactプロジェクトをビルドします。

   糸ビルド
   

   このコマンドは、アプリケーションをリモートアプリとして実行するために必要なファイルを含む、最適化された本番環境用ビルドを作成します。

5. ビルドが成功したことを確認し、アプリケーションの .js ファイルを確認してください。

   最適化された本番環境ビルドを作成しています...
   コンパイルに成功しました。
   
   gzip圧縮後のファイルサイズ：
   
     523.77 kB build/static/js/main.5a6819d5.js
     20 B build/static/css/main.31d6cfe0.css
   

   注記

   .css ファイルはこのチュートリアルでは不要です。

コードがコンパイルされたら、アプリケーションの.jsファイルをLiferay ドキュメントライブラリでホストし、そのWebDAV URLをコピーします。

アプリケーションの .js ファイルをホストしています

1. サイトメニュー (を開き、 コンテンツ & データを展開し、 ドキュメントとメディア をクリックします。

2. .js ファイルをアップロードエリアにドラッグアンドドロップしてください。

   ドキュメントライブラリにアップロードされると、ファイルには固有のWebDAV URLが割り当てられます。このURLを使用してリモートアプリを作成します。

3. 情報 アイコン () をクリックし、アップロードした ファイル を選択します。

4. ファイルの WebDAV URL をコピーして、次のステップで使用するために保存します。

   例えば、 http://localhost:8080/webdav/guest/document_library/main.5a6819d5.js。

   

React Chart 用のリモート アプリを作成する

1. グローバルメニュー () を開き、 アプリケーション → クライアント拡張機能 に移動します。

2. 追加 ボタン ( ) をクリックします。

3. 以下の値を入力してください。

   分野	価値
   名前	X3J8カスタム要素
   タイプ	カスタム要素
   HTML要素名	x3j8カスタム要素
   URL	.js ファイルの WebDAV URL
   ポートレットカテゴリ名	リモートアプリ

4. をクリックして保存します。

保存されると、Liferayはリモートアプリケーションのウィジェットを作成し、サイトページにデプロイすることができます。 このウィジェットは、アプリケーションのポートレットカテゴリ名の下にリストされています（このチュートリアルでは、 リモートアプリ となります）。

関連トピック

• オブジェクト概要
• カスタムオブジェクトAPI
• CORSの設定