はじめに
Qlik Senseでデータを視覚化する際、テーブルの列幅が不揃いだとレイアウトが見づらくなります。特に複数の列を持つテーブルでは、情報の可視性を高めるために列幅を均等に揃えることが重要です。本記事では、デベロッパーツールを活用して、簡単にすべての列を均等に揃える方法を詳しく解説します。
※本記事用で使用しているテストデータは、自動生成されたものであり、実在の人物や団体などとは関係ありません。
事前準備：デベロッパーツールの有効化
まず、デベロッパーツールを有効にして、テーブルの細かなプロパティを調整できるようにします。手順は以下の通りです。
- ブラウザでQlik Senseアプリのシートを開きます。
※1 筆者はChromeを使用しています。
※2 Desktop版を使用している場合、ブラウザを開き、URL欄に「localhost:4848/hub/」と入力すると、 Web ブラウザーから Qlik Sense ハブへとアクセスが可能になります。 - URLに「/options/developer」を追加し、ページをリロードします。
- オブジェクトを右クリックするとコンテキストメニュー上で「Developer」が選択できるようになっています。
列を揃える前に知っておくべき設定
デベロッパーツールを開くと、「プロパティ」と「レイアウト」の2つのセクションが表示されます。
これらを理解することが、設定を効果的に行う鍵となります。それぞれの内容をまとめると以下のようになります。
- プロパティ: オブジェクトのデフォルト設定を示します。
- レイアウト: 現在のインスタンスの状態を示します。
皆さんの身近な作業で例えると、普段テーブルチャートの「幅」や「ソート順」を変更した後、オブジェクトのプロパティを開くと以下のメッセージが表示されるかと思います。
デベロッパーツールにおける「プロパティ」と「レイアウト」とは、上記の適応前の状態を保存しているのが「レイアウト」で、適応後は「プロパティ」に反映されます。
今回のように、テーブルの列幅を均等に揃えることを永続的に反映させる場合、「プロパティ」の方を編集する必要があります。
列幅を均等に揃える方法
まずは調整前の列幅の状態は以下の通りです。
このようなテーブルを、以下の手順で列幅を均等に設定できます。
- 「Developer」を開き、「プロパティ」タブを表示します。
そうすると以下の画面が表示されます。
- スクロールしていくと「columnWidths」という項目があります。
- 「columnWidths」を一律「150」など希望する値に設定します。
- 設定後、ウィンドウ外をクリックするとプロパティが自動的に適用され、列幅が均等に揃います。
エディターを活用した効率的な編集
デベロッパーツール内で直接編集するのは正直難しいです、その場合、「.txtファイル」や「VSCode」などのエディターツールを使うと効率的です。
- デベロッパーツールのコードをコピーします。
- Visual Studio Code などのエディターに貼り付け、一括置換機能を使用して編集します。
- 編集が完了したら、再度デベロッパーツールにコードを貼り戻します。
これにより、大量の列を一度に編集でき、時間の節約になります。
まとめ
Qlik Senseでは、デベロッパーツールを活用することで、テーブルの列幅を簡単に均等に揃えられます。これにより、データの見やすさが向上し、視覚的に統一感のあるレイアウトを実現できます。Qlik Senseを使いこなして、データ可視化の効率をさらに高めましょう。
