Quick BI:カスタム可視化の管理

登録

新しい可視化コンポーネントを追加するには、対応するタブで登録する必要があります。

• コンポーネントの登録：**[コンポーネント]** タブで **[コンポーネントの登録]** をクリックし、**[コンポーネントの登録]** ダイアログボックスで設定を構成します。

  設定項目		説明
  コンポーネント名		コンポーネントの任意の名称を入力します。この名称はアセットパネルに表示され、コンポーネントの識別を支援します。ビジネス目的に基づいた意味のある名称を付けてください。
  アイコン		コンポーネント用のアイコンを選択します。このアイコンはアセットパネルに表示され、カスタムコンポーネントを視覚的に区別するために使用されます。組み込みアイコンのほか、カスタムイメージのアップロードも可能です。 説明 JPG、JPEG、PNG、GIF 形式のイメージのみアップロードできます。各ファイルのサイズは 100 KB 未満である必要があります。
  範囲		コンポーネントを使用できる場所（ダッシュボードまたはデータダッシュボード）を選択します。
  プラットフォーム		コンポーネントを実行できるデバイスタイプを選択します。PC がデフォルトで選択されており、解除できません。モバイルデバイス向けの有効化はオプションです。
  開発モード		コンポーネントの開発モードを選択します：**[オンライン編集]** または **[プロフェッショナルモード]**。 オンライン編集：Quick BI コンソール内でコンポーネントを開発およびデバッグします。ローカル開発環境は不要です。デバッグがよりシンプルかつ高速です。 プロフェッショナルモード：ローカル環境でコンポーネントを開発およびデバッグします。事前にローカル開発環境をインストールおよび構成する必要があります。複雑なコンポーネントの開発に適しています。 説明 この設定は開発ワークフローに影響を与え、登録後に変更することはできません。
  高度な設定	Shadow DOM の有効化	有効化すると、カスタムコードが他のページコードから隔離されます。これにより、CSS スタイリングの隔離が容易になります。
  	デフォルトの幅と高さ	コンポーネントのデフォルトの幅と高さを設定します。
  	サードパーティライブラリ	開発中に使用されるサードパーティ依存関係を追加します。 **[追加]** をクリックし、以下の情報を入力します： ライブラリ名：インポート文で使用される名称です。たとえば、import * as echarts from "echarts" の場合、ライブラリ名は "echarts" です。 エクスポート名：グローバルオブジェクトにバインドされる名称です。たとえば、window.echarts の場合、エクスポート名は echarts です。 CDN パス：ライブラリを読み込むために使用されるリクエストパスです。ライブラリは UMD モジュール仕様に準拠している必要があります。 サードパーティライブラリの詳細については、「サードパーティライブラリ CDN」をご参照ください。
  	備考	コンポーネントに関する備考を追加します。

• メニューの登録：**[メニュー]** タブで **[メニューの登録]** をクリックし、**[メニューの登録]** ダイアログボックスで設定を構成します。

  設定項目		説明
  メニュー名		メニューの任意の名称を入力します。この名称はメニューバーに表示され、メニュー項目の識別を支援します。その機能を反映した名称を付けてください。
  アイコン		メニュー用のアイコンを選択します。このアイコンはメニューバーに表示され、カスタムメニュー項目を視覚的に区別するために使用されます。組み込みアイコンのほか、カスタムイメージのアップロードも可能です。 説明 JPG、JPEG、PNG、GIF 形式のイメージのみアップロードできます。各ファイルのサイズは 100 KB 未満である必要があります。
  メニューの種類		メニューの種類を選択します：**[チャートカードメニュー]**、**[ダッシュボードメニュー]**、または **[ワークブックメニュー]**。
  プラットフォーム		メニューを実行できるデバイスタイプを選択します。 メニューの種類が **[チャートカードメニュー]** の場合、PC またはモバイルを選択できます。メニューの種類が **[ダッシュボードメニュー]** または **[ワークブックメニュー]** の場合、PC のみがサポートされます。
  開発モード		メニューの開発モードを選択します：オンライン編集またはプロフェッショナルモード。 オンライン編集：Quick BI コンソール内でメニューを開発およびデバッグします。ローカル開発環境は不要です。デバッグがよりシンプルかつ高速です。 プロフェッショナルモード：ローカル環境でメニューを開発およびデバッグします。事前にローカル開発環境をインストールおよび構成する必要があります。複雑な開発シナリオに適しています。 説明 この設定は開発ワークフローに影響を与え、登録後に変更することはできません。
  高度な設定	Shadow DOM の有効化	有効化すると、カスタムコードが他のページコードから隔離されます。これにより、CSS スタイリングの隔離が容易になります。
  	表示モード	メニューの表示方法を選択します：**[タイル]** または **[折りたたむ]**。 説明 PC では最大 2 個のカスタムメニューをタイル表示できます。モバイルでは最大 10 個のカスタムメニューを折りたたむことができます。
  	表示順序	このメニュー項目をシステムメニュー一覧に表示する順序を設定します。数値が小さいほど上位に表示されます。
  	サードパーティライブラリ	開発中に使用されるサードパーティ依存関係を追加します。 **[追加]** をクリックし、以下の情報を入力します： ライブラリ名：インポート文で使用される名称です。たとえば、import * as echarts from "echarts" の場合、ライブラリ名は "echarts" です。 エクスポート名：グローバルオブジェクトにバインドされる名称です。たとえば、window.echarts の場合、エクスポート名は echarts です。 CDN パス：ライブラリを読み込むために使用されるリクエストパスです。ライブラリは UMD モジュール仕様に準拠している必要があります。 サードパーティライブラリの詳細については、「サードパーティライブラリ CDN」をご参照ください。
  	備考	メニューに関する備考を追加します。

• ページの登録：**[ページ]** タブで **[ページの登録]** をクリックし、**[ページの登録]** ダイアログボックスで設定を構成します。

  設定項目		説明
  ページ名		ページの任意の名称を入力します。この名称は **[PC 企業ポータルのカスタマイズ]** ページ選択リストに表示され、ページの識別を支援します。ビジネス目的を反映した名称を付けてください。
  アイコン		ページ用のアイコンを選択します。このアイコンは **[PC 企業ポータルのカスタマイズ]** ページ選択リストに表示され、カスタムページを視覚的に区別するために使用されます。組み込みアイコンのほか、カスタムイメージのアップロードも可能です。 説明 JPG、JPEG、PNG、GIF 形式のイメージのみアップロードできます。各ファイルのサイズは 100 KB 未満である必要があります。
  範囲		ページを使用できる場所を選択します。現在、企業ポータルのみがカスタムページをサポートしています。
  プラットフォーム		ページを実行できるデバイスタイプを選択します。現在、PC のみがサポートされています。
  開発モード		ページの開発モードを選択します。プロフェッショナルモードのみがサポートされています。つまり、SDK を使用してローカル環境で開発およびデバッグします。
  高度な設定	デバッグ URL	カスタムページをデバッグするために使用される URL です。 デフォルトは //127.0.0.1:8001 です。これは Quick BI の企業ポータルページを指します。必要に応じて、独自のデバッグ URL に変更してください。
  	Shadow DOM の有効化	有効化すると、カスタムコードが他のページコードから隔離されます。これにより、CSS スタイリングの隔離が容易になります。
  	サードパーティライブラリ	開発中に使用されるサードパーティ依存関係を追加します。 **[追加]** をクリックし、以下の情報を入力します： ライブラリ名：インポート文で使用される名称です。たとえば、import * as echarts from "echarts" の場合、ライブラリ名は "echarts" です。 エクスポート名：グローバルオブジェクトにバインドされる名称です。たとえば、window.echarts の場合、エクスポート名は echarts です。 CDN パス：ライブラリを読み込むために使用されるリクエストパスです。ライブラリは UMD モジュール仕様に準拠している必要があります。 サードパーティライブラリの詳細については、「サードパーティライブラリ CDN」をご参照ください。
  	備考	ページに関する備考を追加します。

編集

可視化コンポーネントの情報を変更するには、そのカード上の アイコンをクリックし、表示されるダイアログボックスで情報を更新します。設定項目の詳細については、「登録」をご参照ください。

デバッグ

開発中は、カスタム可視化コンポーネントをデバッグできます。デバッグ対象のコンポーネントのカード上の アイコンをクリックします。表示されるダイアログボックスで、デバッグ環境、範囲、その他の設定を構成します。これらのオプションを構成後、**[デバッグへ移動]** をクリックしてホストページを開き、可視化を確認します。

非表示

可視化コンポーネントをアセットパネルから非表示にするには、そのカード上の アイコンをクリックし、表示されるダイアログボックスで操作を確認します。

公開

可視化コンポーネントの開発およびデバッグが完了したら、本番環境に公開できます。コンポーネントを公開するには、そのカード上の アイコンをクリックします。公開手順は、開発モードによって異なります。

• オンラインモード：可視化コンポーネントを登録すると、そのステータスは「公開待ち」に変わります。**[公開]** アイコン () をクリックします。表示されるソースコードダイアログボックスで、コンポーネントの詳細を確認できます。**[コード差分の表示]** をクリックすると、**[コード差分]** ダイアログボックスでコードの変更内容を確認できます。情報の確認後、**[公開の確定]** をクリックしてコンポーネントを公開します。

• プロフェッショナルモード：可視化コンポーネントの開発パッケージをアップロードすると、「公開待ち」状態になります。また、既に公開済みのパッケージの情報を本番環境への同期前に変更した場合にも、この状態になります。この状態では、コンポーネントカード上の **[公開]** ボタンがアクティブになります。**[公開]** アイコン () をクリックします。表示されるソースコードダイアログボックスで、ファイル情報を確認できます。すでに公開済みのコンポーネントに対して修正済みの開発パッケージを再アップロードした場合、変更内容が表示されます。情報の確認後、**[公開の確定]** をクリックしてコンポーネントを公開します。

削除

可視化コンポーネントが不要になった場合は、削除できます。コンポーネントカード上の アイコンをクリックし、表示されるダイアログボックスで操作を確認します。

コンポーネントが削除された後は、以下のようになります。

• コンポーネントはアセットパネルに表示されなくなります。

• 以前に使用されていたページ上でもコンポーネントは表示されなくなります。代わりに、コンポーネントのメタデータが異常または削除済みであることを示すメッセージが表示されます。

コンポーネントの状態

カスタム可視化コンポーネントの管理は、そのランタイム状態および可視性状態を変更します。