Reactチャートでのオブジェクトデータの使用

ここでは、 オブジェクト、 ヘッドレス 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:2025.q1.6-lts

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

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

1. グローバル メニュー () を開き、 コントロール パネル タブに移動して、 セキュリティ ツールをクリックします。

2. ［Portal Cross-Origin Resource Sharing (CORS)］タブで、 ［Default Portal CORS Configuration］をクリックしてください。

   

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

   

React チャート用のオブジェクトを作成する

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

2. 追加 ボタン () をクリックし、次の値を入力します。

   項目	値
   ラベル	X3J8-Object
   複数形のラベル	X3J8-Objects
   名前	X3J8Object

   注

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

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

   ラベル	項目名	種類	必須
   ラベル	label	テキストボックス	✔
   値	値	整数	✔

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

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

ヘッドレスAPIを使ったオブジェクトへのデータ追加

1. Liferayの［APIエクスプローラー］（すなわち localhost:8080/o/api）を開き、 ［RESTアプリケーション］ドロップダウンメニューをクリックして、 ［c/x3j8objects］をクリックしてください。

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

   [
     {
       "label": "FOO",
       "value": "250"
     },
     {
       "label": "BAR",
       "value": "200"
     },
     {
       "label": "GOO",
       "value": "150"
     },
     {
       "label": "BAZ",
       "value": "100"
     },
     {
       "label": "QUX",
       "value": "50"
     }
   ]
   

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

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

Reactチャートの設定

以下の手順で、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
   

   yarn start
   

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

   

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

   yarn build
   

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

5. ビルドが成功したことを確認し、アプリケーションの.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.css
   

   注

   .css ファイルはこのチュートリアルでは必要ありません。

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

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

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

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

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

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

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

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

   

Reactチャートのリモートアプリケーションを作成する

1. グローバル メニュー () を開き、 アプリケーション タブをクリックして、 リモート アプリを選択します。

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

3. 次の値を入力します。

   項目	値
   名前	X3J8-Custom-Element
   種類	カスタム要素
   HTML 要素名	x3j8-custom-element
   URL	WebDAV URL for the .js file
   ポートレットのカテゴリ名	リモートアプリケーション

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

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

関連トピック

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