Redash を少し便利に使う Chrome Extensions を書いた

エンジニアの佐野です。菅原が Redash について言及したのでそれに乗っかって自分も簡単な記事を書きます。

tech.kanmu.co.jp

まず Redash の基本的な使い方としては次の通りです。

  1. https://your-redash-domain/queries/new にアクセスする。
  2. データソース *1 を選択してクエリを書く。
  3. クエリを実行する。

ここで2のデータソースを選択する際なのですが、カンムは Redash を多用しているため大量のデータソースが存在し、都度用途に応じて選択する必要があります。次の画像が存在するデータソース一覧です。

例えば画像中でマスクしていない BigQuery (DWH) と readonly(RR) なのですが以下のような用途・特徴となっています。

データソース名 接続先 特徴 用途 主な利用者
BigQuery (DWH) Google BigQuery リアルタイム性はない *2 が、アナリティクスを含めバンドルカードのほぼすべてのデータが入っている ヘビーなクエリを投げて分析したいケース、カンムのほぼすべての DB を JOIN したいケース データチーム、マーケチーム
readonly(RR) バンドルカードのメインの DB *3 リアルタイムのデータにアクセスできる リアルタイム性が必要なデータを参照したいケース、メイン DB のデータのみで完結するような分析用途 バンドルカードのエンジニア

このデータソースは上の画像の通りプルダウンメニューから選択することになっているのですが、データソース名の辞書順でソートされて表示される仕様になっています。Redash のソースコードでいうと以下の箇所です。クエリ新規作成画面にアクセスしたときに Redash のサーバ側でソート済のデータソースのリストが画面に返されてそれが表示されるようになっています。

github.com

ここでクエリを書く際に面倒なことがあります。ある人は BigQuery をよく使う、またある人は readonly(RR) をよく使う...といったように人によってよく使うデータソースが異なります。加えて Redash 自体にユーザごとにデフォルトのデータソースを設定するような機能はありません。辞書順でソートされるのであればデータソース名に 1, 2, 3_... のようなプレフィックスをつけて頻繁に使われるものが上にくるようにすればいいと思うかもしれませんが、それは人によって異なるのでそれでは解決しません。

そこでこの問題を解決するために簡単な Chrome Extensions を書きました。Extension の設定画面にデフォルトのデータソースを設定すると、クエリの新規作成画面に飛んだときにそれが自動で選択状態になるといったものです。

github.com

私自身は日々のデータ分析や調査で頻繁に Redash からクエリします。そのときに毎度毎度自分がよく使う readonly(RR) を選択するのがかなり面倒でした。この Extension によって少なくとも自分自身のペインは解消されました。

JavaScript のようなフロントエンドの技術に関してはかなり素人なのでとりあえず動くものを書いたというのがこの Extension です。TypeScript への書き直しであったり PR を投げてもらえるととてもありがたいです。ちなみにそんなヨカタの自分がこの Extension の開発でちょっとだけ苦労した点としては、プルダウンメニューを示す要素が最初から画面にあるわけではなかったという点でしょうか...。Redash のクエリ新規作成画面は動的に描画されるようです。最初は「プルダウンメニューでターゲットとなるデータソース名を選択済にしてしまうコードを書けばさくっとできるだろう...そんくらいなら俺でも秒で書けるぞ。」と思ったのですがそうもいかなくて、 DOM の変化を監視してプルダウンメニューが表れたらそれをクリックさせる、というようにしました。これももっとスマートなやりかたがあったらご指摘いただけると幸いです。

今日は簡単ですが以上です。

おわり

*1:接続先の DB を表す Redash 上の概念。スプレッドシートCSV ファイルをデータソースとすることもできる。

*2:日次や月次で BigQuery にデータを同期している。

*3:正体は Amazon Aurora PostgreSQL の reader ノード。