Technical Blog テクニカルブログ
  1. HOME
  2. テクニカルブログ
  3. Looker Report Table ビジュアリゼーションの応用

Looker Report Table ビジュアリゼーションの応用

投稿者:藤原

目次

  • 1.はじめに
  • 2.Report Table ビジュアリゼーションとは
  • 3.CSSファイル連携手順
    • 3.1.実際にコードを書き換えてみよう
    • 3.2.URLの取得
  • 4.Lookerへの適用
  • 5.まとめ

1.はじめに

こんにちは、藤原です。

気が付けば、Lookerを触り始めてから早くも一年が経過しました。

これからも引き続き勉強を重ね、知見を広げていきたいと思います。

今回は、LookerのCustom Visualizationのご紹介でも登場したReport Table ビジュアリゼーションにフォーカスして、CSSファイルを使って見栄えを自由にカスタマイズできる小ネタを紹介したいと思います。

2.Report Table ビジュアリゼーションとは

データを表形式で表示し、効率的にデータを分析・探索することが可能になります。デフォルトのTableビジュアリゼーションと比較すると、一意の値を持つ行を統一して表示することができるため、より直感的にデータを把握することが可能です。

さらに、ツールチップ機能(詳細表示)を活用することができます。この機能では、measureカラムにカーソルを合わせると、対応するdimensionの内容とmeasureの値を同時に確認できます。特に、measureの数が増えて横スクロールが発生し、dimensionの内容が1画面に収まらない場合に便利です。ツールチップを使用することで、スクロールせずに重要な情報を素早く把握でき、効率的なデータ分析が可能となります。

ツールチップ機能

また、Report TableはCSSファイルを使用することで、表の見た目を自由にカスタマイズすることができます。これにより、色やフォント、行間などを調整して、見やすさやデザイン性を高めることが可能です。今回は、その具体的な手順を紹介したいと思います。

3.CSSファイル連携手順

編集メニューの「Theme」からテーマを選択することができます。「Traditional」、「Looker」、「Contemporary」はLookerが提供するテーマで、それぞれ異なる見た目の特徴がありますので、ぜひ試して確認してみてください。これらのテーマはLookerのオープンソースリポジトリでコードを確認することが可能です。

そこで今回は、Lookerのオープンソースのテーマコードをベースに、「Use custom theme」を選択して、自由にデザインをカスタマイズします。

Lookerのテーマ設定

事前準備として、まずGitHubでリポジトリを作成する必要があります。

今回は、「fuzzy-octo-barnacle」というリポジトリ名で作成しました。このリポジトリ内にCSSファイルを作成し、カスタムスタイルを管理していきます。

「fuzzy-octo-barnacle」というリポジトリを作成

まず、GitHubリポジトリで「Add file」をクリックします。そこから、以下の2つの方法でファイルを追加できます。

①:ファイルを直接作成する方法

「Create new file」をクリック>その場でコードを直接入力します

ファイルを作成し、直接書き込む方法

②:ファイルをアップロードする方法

「Upload files」をクリック>アップロードしたいファイルを選択します

ファイルをリポジトリに連携する方法

ファイルをアップロードしたら、「Commit Changes」をクリックして変更を確定します。これで、アップロードしたファイルがリポジトリに追加されていることを確認できます。

連携後の画面

3.1.実際にコードを書き換えてみよう

実際に、ファイルを開いて直接コードを書き換えてみましょう。今回は、ツールチップの色とMeasure項目の色彩等を変更してみたいと思います。まず、Lookerのオープンソースから「theme_looker.css」をコピーし、作成したファイルに貼り付けます。(今回は「theme_Looker_検証.css」に貼り付けます)

theme_looker.cssファイルの内容をコピー
コピーした内容を作成したCSSファイルに貼り付ける
ツールチップ機能の大きさと色を変更
色や文字の表示設定を変更

変更を加えたら、「Commit Changes」をクリックして変更を確定させます。これで、コードの更新が完了となります。

「Edit in place」をクリックし変更を加える
Commit Changesをクリックする

3.2.URLの取得

ファイルのリンクをコピーし、ソースコード用のCDNにそのURLを貼り付けて変換します。変換されたURLをコピーしてください。本番環境と開発環境によって使用するURLが異なるため、適切なURLを選択する必要があります。URLを取得したら、Lookerの画面に戻ります。

URLを取得する
ソースコード用のCDN

4.Lookerへ適用

Looker画面の編集から「Theme」>「Use cusutom theme」を選択します。

「Load custom CSS from」に、先ほどコピーしたURLを貼り付けます。これで、指定したカスタムCSSが適用されるようになります。*適用されるのに時間が掛かる可能性がございます。

Themeの設定画面

このように、元の「Looker」テーマをベースにして、カスタムCSSで変更を加えました。これにより、既存のデザインを活かしつつ、必要な部分を自由にカスタマイズすることができます。

変更前
変更後

5.まとめ

いかがでしたでしょうか?Lookerの「Report Table」ビジュアリゼーションは、CSSファイルを連携することで見た目を自由にカスタマイズできるため、データを瞬時に視覚化し、業務の効率化に役立ちます。また、他のLookerのビジュアリゼーションについてもこちらで紹介していますので、ぜひ併せてご覧ください。

ページのトップへ