Tableauの初期表示が重い問題をなんとかしてみた

こんにちは！半田です。
夏の醍醐味ビアガーデンに今年も行けず、とても寂しい夏になりました。
来年こそは行きたいですね！

今回は前回のTableauの速度改善の続きで、Tableauの機能と外部ツールを駆使して初期表示が重い問題を解決した方法を紹介します。
Tableauのみで初期表示速度を改善したい！という方にはあまり有益な情報はないかと思います。
前回の記事はこちら

速度改善のその後
速度改善の条件のヒアリング
ユーザーに画像を提供するまで
サブスクリプションの設定
Slack Appの準備
GASの実装
実行結果
- メール受信確認
- Slackの確認
まとめ

速度改善のその後

速度改善を行った結果、フィルターの表示速度が30秒から5秒程度になるまで短くなりました。
ただ、今回ストレスに感じた初期表示はあまり速度が早くなったと感じませんでした。また、フィルターも早くなったとはいえ5秒はかかってしまいます。
こうなると毎朝同じ画面でデータのチェックをしているとだんだんイライラしてきますよね。実際使っていてイライラしていました。
特に、カスタムビューを保存して複数条件でたくさん開きたい場合、開きたい数だけ描画を待たなくてはなりません。
これを何とかするために色々考えた結果、意外とサクッと課題解決できてしまったので紹介します。

速度改善の条件のヒアリング

日々利用しているユーザーにヒアリングを行った結果、速度を早くするにあたり以下の条件ですすめることにしました。

初期表示5秒以内
グラフの削減は不可
ツールチップは削ってもOK
今後利用拡大を目指すためにフィルターの速度は早ければ早いほうがいい
最悪Tableau以外でもいい

以上の条件で考えた結果、正直Tableau上では限界を感じました…
そのため、外部連携を踏まえて色々調べていたところ、サブスクリプションという機能があることを見つけました。
サブスクリプションとはTableauのビューのスナップショットをイメージかPDFでユーザーにメールで送信する機能です。
画像であれば開く時間は一瞬、条件ごとにカスタムビューを保存して画像を送信すればフィルターをかける必要はない、グラフの削減は必要ない、と条件に合致していたため画像をユーザーに提供する方向で進めることに決めました。

ユーザーに画像を提供するまで

利用ユーザーは複数人います。サブスクリプションでメーリングリストに送信することも可能ですがSlackのほうが日常的に見ているのでSlackでチェックするようにしました。
以下のような構成で動かしています。

f:id:AdwaysEngineerBlog:20210827132251p:plain

やっていることは単純で、Tableauのサブスクリプションでimageを送信→GASで添付ファイルのメールを検索し画像データを取得→SlackにPOSTしているだけです。

サブスクリプションの設定

実際にサブスクリプションを登録してみます。
サブスクリプションを設定したいビューを開き、右上の✉️マークを押下します。
f:id:AdwaysEngineerBlog:20210827152237p:plain

以下のような設定項目が出てきますのでそれぞれ設定します。
f:id:AdwaysEngineerBlog:20210827132322p:plain

ユーザーの登録：送信先メールアドレスを設定
書式設定：イメージかPDFを選択。今回はイメージ
件名：メールの件名、今回は売上進捗
メッセージ：メールに記載するメッセージ。今回は不要なので空欄
頻度：メール送信時間指定か定期更新時か選択。今回はお試しですぐに送信してほしいため16:40にしています。

Slack Appの準備

画像ファイルを送信するためにはSlack側で設定が必要になります。

今回は files.upload method | Slack を使用しているため、ファイルの書き込みを許可したAppを作成します。

Slack API: Applications | Slack からSlack Appを作成
App Name にアプリ名、Pick a workspace to develop your app in: に送信したいWorkspaceを設定し、Create Appを押下
Basic Information > OAuth & Permissions > Scopes で files:write を選択し、ファイルの書き込みを許可
OAuth Tokens for Your Workspace でワークスペースにAppをインストールしトークンを発行する
- このトークンはGASで使用します
POSTしたいchannelにAppを追加

GASの実装

GASではファイルが添付されているメールを検索し、その添付ファイルをSlackにPOSTするだけです。

今回はTableauから何件メールが来るかわからないため、すべてのメールが受信されているであろう時間に起動するようにトリガーを仕込んでいます。

function sendImageToSlack() {
  // SlackのAPIトークンをプロパティに設定している前提
  const token = PropertiesService.getScriptProperties().getProperty("SLACK_TOKEN");
  const room = 'POSTする部屋名';
  const date = Utilities.formatDate(new Date(), "JST", "yyyy-MM-dd")
  const title = '売上進捗';
  const query = '"after:'+ date + ' ' + title + '"';

  const threads = GmailApp.search(query);
  const messagesForThreads = GmailApp.getMessagesForThreads(threads);

  // Gmailの検索結果からメールの件名と画像を取得する
  for(const messages of messagesForThreads) {
    for(const message of messages) {
      const subject = message.getSubject();
      const attachments = message.getAttachments();

      for(const attachment of attachments) {
        const payload = {
          "token" : token,
          "channels" : room,
          'file' : attachment,
          'title': subject
        };
        const options = {
          "method" : "post",
          "payload" : payload
        };
        UrlFetchApp.fetch("https://slack.com/api/files.upload", options);
      }
    }
  }
}

実行結果

メール受信確認

サブスクリプションで登録した16:40にトリガーが動き、Tableauのビューの画像が添付されたメールを受信しました。
f:id:AdwaysEngineerBlog:20210827145725p:plain

Slackの確認

Tableauのビューの画像がSlackに通知されました。
f:id:AdwaysEngineerBlog:20210827132400p:plain

まとめ

Tableauの初期表示の速度改善はかなり苦労していたのですが、Tableau以外のサービスを組み合わせることでかなり簡単にユーザーの要望を叶えることができました！
毎朝Tableauを確認する手間が省け、工数削減につながったとフィードバックをもらえました。
1つのサービスだけに固執しないで柔軟に考えるのは重要ですね。

この記事が何かのヒントにつながれば幸いです。