このトピックでは、Quick BI カスタムコンポーネントの基本概念について説明します。
カスタムコンポーネント
Quick BI では、カスタムコンポーネント (CustomComponent) は、bootstrap、mount、unmount、update などのプロパティを持つオブジェクトです。これらのプロパティは、カスタムコンポーネントの具体的な実装ロジックを網羅しています。詳細については、「ライフサイクル」をご参照ください。
例
// これはカスタムコンポーネントです
const CustomComponent = {
bootstrap: (props) => {},
mount: (props) => {},
unmount: (props) => {},
update: (props) => {},
}通常、カスタムコンポーネントのライフサイクルを管理する必要はありません。bi-open-sdk と bi-open-react-sdk は、createBIComponent 関数を提供しており、カスタムコンポーネントを作成するために直接呼び出すことができます。
カスタムコンポーネントメタデータ
カスタムコンポーネントメタデータ (ComponentMeta) は、propsSchema などのプロパティを含むオブジェクトです。メタデータを使用すると、Quick BI カスタムコンポーネントのデータパネル、スタイルパネル、および詳細パネルの機能をカスタマイズできます。詳細については、「ComponentMeta」をご参照ください。
例
const meta = {
propsSchema: {
dataSchema: {
schema: {}
},
styleSchema: {
schema: {}
},
}
}プロジェクト構造
Quick BI カスタムコンポーネントを作成するための推奨方法は、create-qbi-app コマンドを使用してシードプロジェクトを生成することです。npm init qbi-app <project name> コマンドで作成できます。詳細については、「はじめに」をご参照ください。
ファイルディレクトリ
シードプロジェクトを生成すると、ファイルディレクトリ構造は次のようになります。
├── build # ビルド出力ディレクトリ ├── node_modules # プロジェクト関連のパッケージ依存関係 ├── public # ローカルデバッグエントリ │ └──index.html ├── src # ソースコード │ ├──index.tsx # コンポーネントエントリ │ ├──index.scss # コンポーネントスタイルファイル │ └──meta.ts # コンポーネントプロパティ構成（データ、スタイル、データとビューのマッピング関係を含む） ├── .eslintrc # ESLint プラグイン構成ファイル ├── config-overrides.js # Webpack 構成ファイル ├── package.json # 依存パッケージ管理 ├── README.md # プロジェクトドキュメント └── tsconfig.json # TypeScript 構成ファイル関連コマンド
npm run start: ローカルデバッグを開始します。npm run build: プロジェクトをビルドします。npm run pack: ビルド結果を Quick BI デプロイメントパッケージにパッケージ化します。デフォルトでは、このコマンドは最初にnpm run buildを実行します。
Src ディレクトリ
このフォルダには、カスタムコンポーネントのソースコードが含まれています。これには以下が含まれます。
meta.ts: カスタムコンポーネントのメタデータ。データパネルとスタイルパネルを構成するために使用されます。index.tsx: カスタムコンポーネント自体。index.scss: カスタムコンポーネントのスタイルファイル。
Public ディレクトリ
このフォルダには、
devserverの HTML テンプレートとモックデータが含まれています。Build ディレクトリ
このフォルダには、ビルド出力とパッケージ化された結果が格納されます。
npm run buildを実行すると、次のモジュールが生成されます。ファイル名
モジュールタイプ
モジュール名
main.js
umd
BIComponent
meta.js
umd
BIComponentMeta
main.css
-
-
説明出力結果の精度を確保するために、webpack 構成を任意に変更しないでください。
カスタムコンポーネントの状態
Quick BI カスタムコンポーネントには、実行状態 と 表示状態 の 2 つの状態ディメンションがあります。
実行状態
実行状態は、カスタムコンポーネントの作成から破棄までのライフサイクルを追跡し、コンポーネントの 開発モード に基づいて変化します。コンポーネントの実行状態は、オープン プラットフォーム > カスタム コンポーネント からアクセスできる カスタム コンポーネント 管理プラットフォームを介して管理します。
オンライン編集
公開待ち - 新しく登録された、または更新された情報が公開されていますが、まだオンラインに同期されていません。
公開済み - コンポーネントはオンラインで実行されています。
プロフェッショナルモード
開発中 - 新しく登録され、開発パッケージのアップロードを待機しています。
公開待ち - 開発パッケージがアップロードされた、または情報が調整されましたが、まだオンラインに同期されていません。
公開済み - コンポーネントはオンラインで実行されています。
コンポーネントの登録
コンポーネントの登録確認 をクリックし、情報フィールドに入力して、 ボタンをクリックします。
登録が成功すると、コンポーネントのカードがページに表示されます。
選択した 開発モード は、カスタムコンポーネントの後続の開発プロセスに影響を与え、選択後は変更できません。ニーズに合わせて選択してください。
オンライン編集: ページ上で直接編集およびデバッグを行い、使いやすさと利便性を提供します。詳細については、「モード 1. オンライン編集」をご参照ください。
プロフェッショナルモード: SDK を使用してローカルデバッグを行い、複雑なコンポーネント開発に最適です。詳細については、「モード 2. プロフェッショナルモード」をご参照ください。
コンポーネントのデバッグ
コンポーネントリストで、コンポーネントカードの デバッグ ボタンをクリックしてデバッグを開始します。
コンポーネントデバッグのダイアログ ボックスが表示されます。
[Edit Online] 内には、コンポーネント用の 3 つのデバッグ環境があります。
オンライン開発環境 - コンポーネントソースコードのオンライン編集が可能で、構成は公開待ちパッケージに設定されています。
公開待ち環境 - 公開待ちパッケージのリソースを使用し、構成はそれに応じて設定されています。
オンライン環境 - 公開済みパッケージのリソースを使用し、構成はそれに応じて設定されています。
プロフェッショナルモードでは、コンポーネント用に 3 つのデバッグ環境があります。
ローカル開発環境 - ローカル サービスからコンポーネントリソースを読み取り、構成は公開待ちパッケージに設定されています。
公開待ち環境 - 公開待ちパッケージのリソースを使用し、構成はそれに応じて設定されています。
オンライン環境 - 公開済みパッケージのリソースを使用し、構成はそれに応じて設定されています。
コンポーネントデバッグ ダイアログボックスで、デバッグする デバッグ範囲、ワークスペース、および対応するダッシュボードを選択し、[デバッグに移動] をクリックして該当のダッシュボードページに移動します。
オンライン編集
オンラインで編集実行 モードでは、コンポーネントのアイコンがページマテリアルバーに表示され、コードエディタがページの下部に表示されます。左側で src の下のファイルを選択して編集します。コードを変更した後、 ボタンをクリックしてリアルタイム実行を行います。
コード編集パネルは手動で閉じることができます。編集モードに再び入るには、カスタムコンポーネントカードの右上隅にあるドロップダウンメニューをクリックし、カスタム コンポーネントの編集 を選択します。
注:
デバッグモードでは、表示状態に関係なく、カスタムコンポーネントは常にマテリアルバーに表示されます。
デバッグモード中は、ダッシュボードは保存できますが、公開できません。
[Edit Online] でコンポーネントの開発を完了した後、[保存] ボタンをクリックしてコードを保存します。コンポーネントは保留中の公開ステータスになります。
プロフェッショナルモード
プロフェッショナルモードで、ダッシュボードページの [グラフの追加] > [カスタム] を選択します。コンポーネントのアイコンが表示されます。ダッシュボードにドラッグし、データパネルを構成して、データを取得します。ローカルコードを変更した後、ページをリフレッシュして開発とデバッグを続行します。
注:
プロフェッショナルモードでは、コンポーネントのローカルサービスが実行されていることを確認します。
デバッグモードでは、表示状態に関係なく、カスタムコンポーネントは常にマテリアルバーに表示されます。
デバッグモード中は、ダッシュボードは保存できますが、公開できません。
プロフェッショナルモードでの開発が完了したら、オープン プラットフォーム > カスタム コンポーネント からコンポーネントをパッケージ化してアップロードします。
[編集] ボタンをクリックすると、コンポーネント情報を変更するためのダイアログ ボックスが表示されます。
必要な情報を更新した後、[確認] ボタンをクリックします。コンポーネントは保留中の公開ステータスになります。
シードプロジェクトで yarn run pack を実行して、開発パッケージを作成します。
コンポーネントの公開
コンポーネントが公開待ち状態の場合、コンポーネントカードの 公開 ボタンがクリック可能になります。
公開 ボタンをクリックすると、コンポーネントの変更の詳細が表示され、変更されたプロパティは赤で強調表示されます。
オンライン編集 モードの場合は、[コード比較の表示] をクリックして、具体的なコードの変更を確認します。
[発行の確認] を選択して、コンポーネントを本番環境に正式にリリースし、状態を公開済みに変更します。
コンポーネントの削除
カスタムコンポーネントを削除するには、リスト内のコンポーネントカードにある [削除] ボタンをクリックします。
削除すると:
カスタムコンポーネントは、追加可能なアイテムのリストから削除されます。
以前に保存された、カスタムコンポーネントを使用するチャートには、カスタムコンポーネントが表示されなくなり、「チャートメタデータが異常であるか、削除されています」というメッセージが代わりに表示されます。
表示状態
表示状態は、カスタムコンポーネントがダッシュボードに表示されるかどうかを決定し、2 つの設定が利用可能です。
非表示: カスタム コンポーネントは、ダッシュボード編集ページの [グラフの追加] -> [カスタム] に表示されません。これにより、新しいグラフの作成はできなくなりますが、以前に保存されたグラフは引き続き表示されます。
表示: カスタム コンポーネントは、ダッシュボード編集ページの [チャートの追加] -> [カスタム] に表示され、チャートの作成と切り替えを可能にします。
注:
コンポーネントの表示状態を変更しても、公開待ち 状態はトリガーされず、すぐにオンラインで有効になります。
開発モードでは、コンポーネントは常に表示されます。
カスタムコンポーネントプラットフォームで [非表示] または [表示] ボタンをクリックすることで、コンポーネントの表示ステータスを変更します。
この変更は、コンポーネントのエントリが表示または非表示になることで、ダッシュボードに反映されます。
