Googleデータポータルでのデザインの自由度が高いツールチップの表示と設定方法

はじめに

Googleデータポータル（旧Googleデータスタジオ）はその名の通りGoogleが提供しているBIツールです。
他のBIツールと比較すると無料で使えるという点が利点として挙げられますが、データ系のミートアップイベントでは、かゆいところに手が届かないとよく言われてるところを耳にします。
しかし、Googleデータポータルにはコミュニティ・ビジュアライゼーションという、ユーザがグラフ等のコンポーネントを作り公開することができる機能があります。

その機能を用いて、以下のDEMOのように、マウスオーバーでツールチップを表示させるコミュニティビジュアライゼーション（自作コンポーネント）「MouseOver Tooltip」を作成しました。

レポートについてちょっとした説明を入れたいけど、常時表示させるレベルのものじゃない...
かと言ってレポートの見方みたいな別なドキュメントを作る程のものでもない...

そんなときにこのコンポーネントは役に立つと思います。（実際自分が欲しいから作ったというのが開発の一番の動機です。）

今回はこのコンポーネントの使用方法について解説します。

コミュティビジュアライゼーションの使用方法

今回紹介する MouseOver Tooltipに限らず、他のコミュニティビジュアライゼーションにも共通するコミュニティビジュアライゼーションの使い方を紹介します。

Step1 コミュニティビジュアライゼーションへデータソースの使用を許可する

MouseOver Tooltipでは特にデータソースのデータを利用していませんが、Googleデータポータルの仕様上、何かしらのデータソースへ紐付ける必要があります。
そのアクセスを許可します。

【設定方法】
ツールバー → リソース → 追加済みデータソースの管理 → 使用するデータソースの「編集」 → 右上の「コミュニティにおける可視化へのアクセス」を「オン」にして保存

Step2 コミュニティビジュアライゼーションをレポートに追加する

コミュニティビジュアライゼーションをレポートに追加するには、コミュニティ ギャラリーから選択して追加するか、ビジュアライゼーションIDを入力して追加します。

コミュニティビジュアライゼーション及びコンポーネントをクリックしてコミュニティビジュアライゼーションメニューを表示

「+もっと見る」をクリック

コミュニティ ギャラリーに追加されているものがここに一覧表示されています。

MouseOver Tooltipをレポートに追加するためには、一覧表示されているコミュニティ ギャラリーをスクロールして「MouseOver Tooltip」を選択するか、直接ビジュアライゼーションIDを入力します。

※現在コミュニティギャラリーに追加できるのは英語のコンポーネントのため、英語版のみこの操作で追加できます。

ちなみに本記事執筆時点で、コミュニティギャラリーに追加されているコンポーネントのうち、日本語にも対応している（日本人と思われる人が作った）コンポーネントはMouseOver Tooltipのみと見受けられます。
恐らく日本からは初となるGoogleのコミュニティビジュアライゼーションでギャラリーに公開されたコンポーネントかと思われます。
(筆者調べ、もし誤っていましたらご一報ください)

なお、日本語のコンポーネントを追加したい場合は、ビジュアライゼーションIDを直接入力してコンポーネントを追加する必要があります。

独自のビジュアライゼーションの作成をクリックし、コミュニティビジュアライゼーションのテストと追加の欄に、マニフェストパスを入力します。
MouseOver Tooltipのマニフェストパスは以下です。
[日本語] gs://community-viz-shotaokb/mouseovertooltip/ja
[英語] gs://community-viz-shotaokb/mouseovertooltip/en

送信をクリックして表示されたコンポーネントをクリックして、レポートに追加します。

MouseOver Tooltipの設定

コンポーネントをレポートに追加したら、プロパティの設定を行います。

「データ」プロパティの設定

MouseOver Tooltipはユーザデータを利用しないため、基本的にはデータプロパティの設定は不要です。ただしGoogleデータポータルの仕様上、「データソース」を各コンポーネントに設定する必要があります。
Step1でコミュニティビジュアライゼーションへデータソースの仕様を許可したデータソースを設定してください。
※この設定がうまく出来ていないと、画像のようにビジュアライゼーションが表示されないエラーとなります。

「スタイル」プロパティの設定

MouseOver Tooltipコンポーネントは「スタイル」プロパティの設定が主となります。設定は大きく「ツールチップの設定」と「アイコンの設定」の2つに分かれています。

尚、各種設定項目の詳細については、MouseOver Tooltipの公式ドキュメントでも詳しく紹介しています。

ツールチップの設定一覧表

設定項目	設定内容
テキスト	ツールチップに表示する文字列
フォント	テキストのフォント
テキストサイズ	テキストの大きさ
文字色	テキストの文字色
ツールチップの枠の色	ツールチップの枠線の色
ツールチップの枠の太さ	枠線の太さ
ツールチップの枠の種類	枠線の種類 {実線,破線,点線,二重線}
角を丸くする	枠の角の丸み
ツールチップの背景色	ツールチップの背景の塗りつぶし

アイコンの設定一覧表

設定項目	設定内容
アイコン	アイコンの種類 {インフォメーション(i),クエスチョン(?),ひらめき電球}
サイズ	アイコンの表示サイズ
アイコンの色	アイコンの表示色

MouseOver TooltipのTIPS

コンポーネントの大きさと表示順序

MouseOver Tooltipコンポーネントのそれ自体の大きさは、他のコンポーネントと被らない限りでできるだけ大きいサイズにしておくことをオススメします。
また、MouseOver Tooltipは最前面に配置しておくことをオススメします。

【理由】
①他のコンポーネントと被ると・・・被っている部分はクリックできなくなります。※
②サイズが小さいと・・・ツールチップのはみ出た部分にスクロールバーが表示され、見た目が損なわれます。
③最前面に配置しないと・・・ツールチップが他のコンポーネントに被ると見えなくなります。

※①の補足画像：ツールチップが表示されていない状態でも表示領域が被っている場合、クリックできません。

その他リンク集

MouseOver Tooltip公式ドキュメント(英語)
https://datastudio.google.com/reporting/b9596a2a-d10a-4916-a79b-c8ccb03c9138/
MouseOver Tooltip日本語公式ドキュメント
https://datastudio.google.com/u/0/reporting/0aa1fb77-5e31-49fd-81fb-89f77560864c/
Github
https://github.com/shotaokb/MouseOverTooltip
関連note「必要な情報を必要な人に届けるためのものを開発したらGoogleのプラットフォームに載った話」
https://note.com/notes/n011a2d66addd/
開発者へのご質問、ご意見、ご要望等
https://datastudio.google.com/u/0/reporting/0aa1fb77-5e31-49fd-81fb-89f77560864c/page/5ThTB