Qlik Senseナレッジ - INSIGHT LAB

【Qlik Sense】ユーザー必見!テーブルの列幅を均等に揃えるテクニック

作成者: Kaz|2024年9月09日

はじめに

 Qlik Senseでデータを視覚化する際、テーブルの列幅が不揃いだとレイアウトが見づらくなります。特に複数の列を持つテーブルでは、情報の可視性を高めるために列幅を均等に揃えることが重要です。本記事では、デベロッパーツールを活用して、簡単にすべての列を均等に揃える方法を詳しく解説します。

※本記事用で使用しているテストデータは、自動生成されたものであり、実在の人物や団体などとは関係ありません。

 

事前準備:デベロッパーツールの有効化

 まず、デベロッパーツールを有効にして、テーブルの細かなプロパティを調整できるようにします。手順は以下の通りです。

  1. ブラウザでQlik Senseアプリのシートを開きます。
    1 筆者はChromeを使用しています。
    2 Desktop版を使用している場合、ブラウザを開き、URL欄に「localhost:4848/hub/」と入力すると、 Web ブラウザーから Qlik Sense ハブへとアクセスが可能になります。

  2. URLに「/options/developer」を追加し、ページをリロードします。



  3. オブジェクトを右クリックするとコンテキストメニュー上で「Developer」が選択できるようになっています。

 

列を揃える前に知っておくべき設定

 デベロッパーツールを開くと、「プロパティ」と「レイアウト」の2つのセクションが表示されます。

これらを理解することが、設定を効果的に行う鍵となります。それぞれの内容をまとめると以下のようになります。

 

  • プロパティ: オブジェクトのデフォルト設定を示します。
  • レイアウト: 現在のインスタンスの状態を示します。

 

皆さんの身近な作業で例えると、普段テーブルチャートの「幅」や「ソート順」を変更した後、オブジェクトのプロパティを開くと以下のメッセージが表示されるかと思います。

デベロッパーツールにおける「プロパティ」と「レイアウト」とは、上記の適応前の状態を保存しているのが「レイアウト」で、適応後は「プロパティ」に反映されます。

今回のように、テーブルの列幅を均等に揃えることを永続的に反映させる場合、「プロパティ」の方を編集する必要があります。

 

列幅を均等に揃える方法

まずは調整前の列幅の状態は以下の通りです。

 

このようなテーブルを、以下の手順で列幅を均等に設定できます。

  1. Developerを開き、「プロパティ」タブを表示します。
    そうすると以下の画面が表示されます。


  2. スクロールしていくと「columnWidths」という項目があります。


  3. 「columnWidths」を一律「150」など希望する値に設定します。


  4. 設定後、ウィンドウ外をクリックするとプロパティが自動的に適用され、列幅が均等に揃います。

 

エディターを活用した効率的な編集

 デベロッパーツール内で直接編集するのは正直難しいです、その場合、「.txtファイル」や「VSCode」などのエディターツールを使うと効率的です。

  1. デベロッパーツールのコードをコピーします。
  2. Visual Studio Code などのエディターに貼り付け、一括置換機能を使用して編集します。
  3. 編集が完了したら、再度デベロッパーツールにコードを貼り戻します。

これにより、大量の列を一度に編集でき、時間の節約になります。

 

まとめ

 Qlik Senseでは、デベロッパーツールを活用することで、テーブルの列幅を簡単に均等に揃えられます。これにより、データの見やすさが向上し、視覚的に統一感のあるレイアウトを実現できます。Qlik Senseを使いこなして、データ可視化の効率をさらに高めましょう。