Documentation

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

ここでは、オブジェクトヘッドレスAPIリモートアプリケーションを使って、データダッシュボード用の動的なグラフを作成する方法を説明します。 まず、オブジェクトAPI 呼び出し用に CORS を有効にして、新しいDXP インスタンスをセットアップします。 次に、データの受信と保存を行うためのオブジェクトを作成します。 REST APIを使ってオブジェクトにデータを追加したら、提供されているReact FusionCharts アプリケーションをダウンロードし、ビルドしてください。 コードがコンパイルされたら、生成された.jsファイルをLiferayドキュメントライブラリーでホストし、そのWebDAV URLをコピーします。 最後に、このURLを使ってReactチャートのリモートアプリケーションを作成し、ページウィジェットとしてデプロイします。

チャートは5秒ごとにヘッドレスAPI経由でオブジェクトを呼び出し、オブジェクトのデータを返してチャートを動的に更新するように構成されています。

Liferay ObjectsとReactチャートを使って、データダッシュボードの動的なビジュアルを作成します。

Liferay DXPのセットアップ

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

docker run -it -m 8g -p 8080:8080 liferay/dxp:7.4.13-u29。

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

次に、以下の手順に従って、 /o/c/*URLパターンを [Default Portal CORS Configuration] に追加してください。 グローバルメニュー(グローバルメニュー)を開き、 [コントロールパネル] タブをクリックして、 [System Settings] → [Security Tools] に移動します。

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

    Default Portal CORS Configurationをクリックします

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

    オブジェクトAPIの/o/c/* URLパターンを追加します。

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

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

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

    項目

    ラベル

    X3J8-Object

    複数形のラベル

    X3J8-Objects

    名前

    X3J8Object

    注釈

    提供されたReactアプリケーションがこの値を使用します。

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

    ラベル

    項目名

    種類

    必須

    ラベル

    label

    Text

    Integer

  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://learn.liferay.com/dxp/latest/ja/building-applications/objects/objects-tutorials/liferay-x3j8.zip -O
    
    unzip liferay-x3j8.zip
    
    cd liferay-x3j8
    
  2. nodeyarn がインストールされていることを確認します。 そうでない場合は、以下のコマンドを実行し、プロンプトに従います。

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

    cd x3j8-remote-app
    
    yarn start
    

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

    localhost:3000にあるReactチャートを表示します。

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

    yarn build
    

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

  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. サイトメニュー(Site Menu) を開き、 [コンテンツ & データ] と展開して [Documents and Media] とクリックします。

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

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

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

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

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

    .jsファイルのWebDAV URLをコピーします。

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

  1. グローバルメニュー(Global Menu) を開き、 [アプリケーション] タブをクリックし、 [Remote Apps] を選択します。

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

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

    項目

    名前

    X3J8-Remote-App

    種類

    カスタム要素

    HTML 要素名

    x3j8-remote-app

    URL

    .jsファイルのWebDAV URL

    ポートレットのカテゴリ名

    リモートアプリケーション

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

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

リモートアプリケーションウィジェットをサイトページにデプロイすることができます。

追加情報