データベースのデータを分析してダッシュボード表示してくれるオープンソースCube.js

公開日：2019/11/21 更新日：2019/11/21

はじめに

Cube.jsというデータベースのデータを分析して綺麗なUIで作成されたダッシュボードに表示してくれるオープンソースです。Cube.jsはWebアプリケーション、またはWebアプリケーションのモジュール、APIとして使用できます。この記事では、Cube.jsをインストールして起動してみるまでの手順をまとめます。

Cube.jsでできるようになること

Cube.jsをインストールして起動すると、WebブラウザからCube.jsによって作成されたWebアプリにアクセスできるようになります。そしてアクセスすると、任意のデータベースの内容に関する色々な情報をグラフ表示できます。自分専用のGoogle Datastudioのような感じです。または任意のデータベースをGoogle Analyicsのようなダッシュボードで色々な情報を表示してくれるイメージです。詳しくは、こちらの公式ドキュメントのExamplesを見てみてください。

以下がCube.jsの公式サイトです。

cube.dev

Cube.js | Open Source Analytics Framework

Cube.js is an open source modular framework to build analytical web applications. It is primarily used to build internal business intelligence tools or to add customer-facing analytics to an existing application.

また、公式リポジトリは以下になります。

github.com

Cube.js

Open Source Analytics Framework

前提と環境

Cube.jsが動作するにはNode.jsがインストールされている必要があります。

Node.js : 12.13.1

Cube.jsをインストールする

Node.jsが使用できる環境で、npmかyarnを使用してCube.jsを以下のコマンドでインストールします。ここではnpmを使用します。

$ npm install -g cubejs-cli

Cube.jsをインストール後、cubejsのコマンドができるようになるので、以下のコマンドを実行してCube.js用のプロジェクトを作成します。

$ cubejs create cubeapp -d mysql

cubeappは任意の適当なプロジェクト名です。この名前でディレクトリが作成されます。また、-d mysqlが意味するのは、Cube.jsに読み込ませたいデータベースの種類になります。Cube.jsは色々なデータベースに対応しており、2019年11月21日時点では以下に対応しています。

postgres
mysql
mssql
athena
mongobi
bigquery
redshift
clickhouse
hive
snowflake
prestodb
oracle

ここでは、MySQLを使うとします。以上でCube.jsのインストールが完了です。続いてCube.jsで読み込むデータベースの設定を行います。

Cube.jsで読み込むデータベースの設定

cubejs createによってプロジェクトを作成すると、そのプロジェクトのディレクトリ配下に.envというデータベースの設定ファイルが作成されています。上記ではcubeappという名前でプロジェクトを作成したので、cubeappというディレクトリの中に.envがあります。そしてその中身は以下のようになっています。

cubeapp/.env

CUBEJS_DB_HOST=<YOUR_DB_HOST_HERE>
CUBEJS_DB_NAME=<YOUR_DB_NAME_HERE>
CUBEJS_DB_USER=<YOUR_DB_USER_HERE>
CUBEJS_DB_PASS=<YOUR_DB_PASS_HERE>
CUBEJS_WEB_SOCKETS=true
CUBEJS_DB_TYPE=mysql
CUBEJS_API_SECRET=b31394y29h35y92hu59459274h5i32grh9l2u39842jri23r9283jfo2j30t8j203ijd02o83tj0o2f082j4it24pi24k30923j09jrp2di12p308ur2j3pri2oi3j0d2o

上記の.env内の<YOUR_DB_NAME_HERE>、<YOUR_DB_USER_HERE>などをCube.jsで読み込みたいデータベースの情報を各自で置き換えます。例えば、ローカルにあるMySQLのデータベースに接続したい場合は以下のような感じになると思います。各値は完全に適当なもので意味はありません。

cubeapp/.env

CUBEJS_DB_HOST=localhost
CUBEJS_DB_NAME=vueapi_development
CUBEJS_DB_USER=mydbuser
CUBEJS_DB_PASS=mypassword
CUBEJS_WEB_SOCKETS=true
CUBEJS_DB_TYPE=mysql
CUBEJS_API_SECRET=b31394y29h35y92hu59459274h5i32grh9l2u39842jri23r9283jfo2j30t8j203ijd02o83tj0o2f082j4it24pi24k30923j09jrp2di12p308ur2j3pri2oi3j0d2o

なお、特にシングルクウォートやダブルクウォーテーションで各値を囲まなくても問題ありませんでした。以上で準備が完了です。実際にCube.jsを起動してアクセスしてみます。

Cube.jsを起動してブラウザからアクセスしてみる

Cube.jsを起動するには、作成したプロジェクトのディレクトリにて以下でサーバーを起動します。

cubeapp

$ npm run dev

後はブラウザからhttp://localhost:4000にアクセスすると、以下のようにCube.jsの管理画面が表示されます。

上記の左側に「vueapi_development」と表示されていますが、これは私が.envに記載したMySQLのデータベース名です。ここは各自が.envで記載したデータベース名になっていると思います。これで無事にCube.jsが起動しアクセスできることを確認できました。

Cube.jsでデータベースを読み込む

以下のように読み込んだデータベースにチェックを入れ、Cube.jsで読み込みたいテーブルを選択することができます。全て読み込む場合は全てにチェックを入れた状態にします。

読み込むテーブルを選択したら、以下のように円の中に「＋」が入った追加ボタンをクリックします。すると以下のように「Generate Schema」と表示されるのでこれをクリックします。追加ボタンをクリックしただけでは何も起きないので注意してください。

以下のように無事に読み込んだ旨のメッセージが表示されますので、「Build」をクリックします。

続いて以下のように表示させる情報の種類やグラフなどを選択できる画面が表示されるので、ここで色々と分析したい情報を選択していきます。ここで作成できるグラフの種類などは多いので、Cube.jsの公式ドキュメントを見てみてください。

作成したグラフなどは、以下のように「Add to dashboard」をクリックすることで自分のダッシュボードに追加できます。

ただし、まだダッシュボードを作成していないので、ダッシュボードの作成方法を次に載せます。

ダッシュボードを作成する

Cube.jsでは、分析したき結果を表示するダッシュボードを自由に作成できます。以下のように「Dashboard App」というタブを表示すると、いくつかのテンプレートが用意されています。ここでは、「Material UI React Dashboard」を使ってみます。

ダッシュボードを選択すると、インストールが開始され少し時間がかかるので待機します。

完了すると、以下のように表示されるので「Start dashboard app」をクリックします。

少々待機すると、以下のようにダッシュボードが表示されます。

上記のダッシュボードには何も表示されていませんが、前述したように読み込んだデータベースから好きなグラフや数値を表示させることができます。なお、このダッシュボード部分は、http://localhost:3000で別にアクセスできます。

まとめ

Cube.jsはできることが非常に多いです。データベースのデータを日頃から分析して確認しているような場合や社内で自社に関するデータを見える化するのにCube.jsはとても便利そうです。ReactやVue.jsなとの連携もできますし、APIとしてバックエンドで動作させて好きなフロントエンドを作成することもできます。興味のある方は見てみてください。