Jupyter NotebookのようにSQLを実行できるFranchiseについて

## Index

1. Franchiseとは
2. 実行環境の整備
3. クエリ発行と可視化
4. まとめ

## Franchiseとは

掲題のような、Notebook式にSQLを発行して分析を行うためのツールで、アップロードしたファイルやMySQL, BigQueryなどに対してクエリを発行することができます。

https://franchise.cloud/

できることは明確なのでfranchiseが何物なのかという説明は上記の通りでしかないのですが、仕組みが特殊なのでここではそれを解説します。

Jupyter NotebookはサーバサイドのWebアプリケーションですが、franchiseは同じWebアプリケーションでも、JavaScriptで実装されたフロントエンドのSPAです。
と聞くと、幾つかんっ！？っとなる点があるのではないでしょうか。たとえば

1. データをどこに保存しているのか?
2. ブラウザからMySQLやPostgreSQLにはどのように接続するのか?

ということが気になるかと思います。それぞれについて説明します。

> 1. データをどこに保存しているのか?

例えばDBの接続情報や、cscやexcelファイルをアップロードした場合どのように保存されるかということで、LocalStorageを利用しています。ファイルをアップロードについては[WebWorker](https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API)によりバックグラウンドで実行されており、SQLiteのファイルを生成してLocalStorageに保存するという振る舞いをしています。具体的な実装は以下を参照ください。
https://github.com/HVF/franchise/tree/master/src/db/sqlite

> 2. ブラウザからMySQLやPostgreSQLにはどのように接続するのか?

Franchiseはブラウザで実行するアプリケーションなので、当然ですがMySQLやPostgreSQLなどのDBサーバと直接接続することはできません。そこで、 [franchise-client](https://github.com/antimatter15/franchise-client)というDB接続のブリッジをwebsocketによって行うアプリケーションを自PC上で実行することで実現しています。

ここまでの説明を図に起こすと以下のようになります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/20434/cfd6cc5e-5752-084b-06d1-ca437d480bcb.png)

## 実行環境の整備

franchiseがどのようなものかを解説したところで、こんどは実際に動かしてみます。

前述の通りfranchiseはクライアントサイドのアプリケーションなので、手元で実行しなくてもクラウド上 (https://franchise.cloud/app/ ) にデプロイされているものが　`localhost:14645` のfranchise-clientを探しに行くようになっていますし、データは一切リモートホストに対して送信されることはないのです。ゆえに本来franchiseはビルドも実行もしなくてもいいのですが、今回は手元で動かしてみることとします。

### franchise

以下実行すると http://localhost:3000 でフロントエンドのアプリケーションが実行されます

```
git clone https://github.com/HVF/franchise.git
cd franchise

npm install
npm start
```

### franchise-client

リポジトリのREADMEに書いてないのですが、以下実行することで起動できます。

```shell-session
npx franchise-client
```

npxについてはここでは詳しく書きませんが、以下Qiitaがわかりやすいです。
https://qiita.com/vvakame/items/23b02e950ca307b9e674

npxをインストールしておらず、ソースをcloneしてくる場合は以下の通り。

```
git clone https://github.com/antimatter15/franchise-client.git
cd franchise-client

npm install
node server.js
```

### 面倒なときはDocker Composeで

以下のようなDockerfileを用意しておきました。
https://gist.github.com/jsoizo/7beb4b7d9d6a68f6a60e212f6f7b82b5#file-franchise-docker-compose-yml

```yaml:franchise-docker-compose-yml
version: '2.2'
services: 
  web:
    ports: 
      - "3000:80"
    image: "jsoizo/franchise"
  client:
    ports: 
      - "14645:14645"
    init: true
    image: "jsoizo/franchise-client"
```

イメージ `jsoizo/franchise` と `jsoizo/franchise-client` はそれぞれforkしてDockerfileを作成したブランチをpushしたものです。

https://github.com/jsoizo/franchise
https://github.com/jsoizo/franchise-client

## クエリ発行と可視化

[BigQueryにはGitHubのデータが公開されている](https://cloud.google.com/bigquery/public-data/github?hl=ja)ので、それを使って試してみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/20434/481db149-6a36-4a67-e9f8-0ea122cf4123.png)

2017年に最も多くのcommitをしたどえらいユーザが誰なのかを見てみましょう。 
クエリウィンドウに入力して実行すると、表が返却されます。グラフのオプションは実行結果から動的に決まり、例えばGeoデータが出力されたら地図上にプロットするオプションが現れます。とはいえ、Excelほどには細かいグラフの表示制御はできないので、その場合はcsvやtsvでダウンロードすると良いでしょう。

![franchise_bigquery_sample.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/20434/908f674a-959d-82dd-edef-d59ffd15de0c.gif)

`GitHub` ですね。。。これが誰なのかは本題ではないので、無視して他のクエリを発行してみます。
`+` アイコンをクリックすると次のクエリ発行画面がレンダリングされるので、同様にGitHubの2016年の日別commit数を出力してみます。

![franchise_bigquery_sample2.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/20434/53662450-a615-a7e7-1592-0f954dc7f2ae.gif)

ギザギザしていますね。おそらく曜日で土日が少ないのでしょう。ということで次は曜日ごとに集計をかけた結果を出力してみましょう。というように、順を追って調査を行うことができます。

よく使う用途としてはレポートとして出したいなどがあると思いますが、その時のために、htmlとして出力することができます。このとき、ダウンロードオプションとして `Download with credentials` というものがありますが、これはBigQueryなりRDBMSの接続情報を同時に渡すオプションです。人に渡したりリポジトリ管理する場合は気をつけましょう。

![franchise_bigquery_sample3.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/20434/db9da118-10dc-d9c1-5e0c-51c3ba0ee266.gif)

出力されたhtmlを開くと、JavaScriptが動き出し、動いているfranchise( `localhost:3000` で動いていない場合は `franchise.cloud/`)の `receiver.html` にPOSTすることで当該レポートを開くようになっています。

![franchise_bigquery_sample4.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/20434/2dd06d9a-55d0-d33b-4db3-34e24ac6d2a1.gif)

## まとめ

- franchiseはJupyter NotebookのようにSQLの実行結果を記録しつつ分析を進めるためのOSS
- franchise-clientを任意のサーバで動かことでMySQL, PostgreSQLやBigQueryに接続可能
- SQLの実行結果はhtmlとして出力可能で、開くと結果を再現させることができる

それではよい分析ライフを!!!