[Voila]Jupyterで作成したインタラクティブなデータ分析結果を共有する

# はじめに
Jupyter Notebookや、Jupyter Lab上で作成したデータ分析結果を、チームの他のメンバーに共有したいことがあるかと思います。
Jupyterを立ち上げて、そのURLを共有することもできますが、共有した相手に誤ってコードを編集されることを避けたい場合もあるでしょう。

また、共有したい分析結果が非インタラクティブな形式で出力されるものであれば、分析結果をキャプチャして配布してしまえば良いのですが、
[ipywidgets](https://github.com/jupyter-widgets/ipywidgets)を利用したインタラクティブな出力結果を共有したい場合、ツールを検討することすることになるかと思います。

この記事では、上記の課題を解決するツールとして、[Voila](https://github.com/voila-dashboards/voila)を紹介します。

# インストール方法
```
$ pip install voila
```
これだけです。

# 動作確認
ここでは、Voilaの動作確認を行うまでの手順を残しておきます。

## 注意事項 
再現性を高めるため、Dockerコンテナを利用しています。
Dockerを利用しない場合は該当箇所を適宜読み替えてください。

## 手順1. 動作確認をする.ipynbファイルの用意

```
$ git clone https://github.com/voila-dashboards/voila.git
```

親切なことに、VoilaのGithubリポジトリにipywidgetsを利用したインタラクティブな動作を確認できる.ipynbファイルを用意してくれているので、今回はこれを使います。
ご用意があれば他の.ipynbファイルでも良いです。

## 手順2. Dockerイメージのダウンロードと実行 

### Dockerイメージのダウンロード

```
$ docker image pull python:3.7-slim-buster
```

Alpineを使っていない理由は以下の記事をご参照ください。
[Using Alpine can make Python Docker builds 50× slower](https://pythonspeed.com/articles/alpine-docker-python/)

### Dockerイメージの実行

```
$ docker run -it --rm -v $(pwd)/voila/notebooks:/workspace -w /workspace -p 8888:8866 python:3.7-slim-buster bash
```
手順1で落としてきたVoilaリポジトリのnotebooksディレクトリをマウントします。

## 手順3. Voilaとその他可視化に必要なパッケージのインストール

```
# pip install voila ipywidgets bqplot
```
手順1で紹介した.ipynbファイルで動作確認をする場合は、上記のパッケージだけで良いです。
他でご用意されたファイルで動作確認する場合は、適宜必要なパッケージをインストールしてください。
## 手順4. Voilaの起動

```
# voila .
```

## 手順5. ブラウザから動作確認
ブラウザから、http://localhost:8888 にアクセスすると、以下のようなページが表示されるかと思います。
(なお、Voilaはデフォルトでは8866番ポートで起動します。)
![スクリーンショット 2020-12-02 1.23.37（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/301619/a957bb96-24e5-49b9-7e6f-3a5b06e50083.png)


試しに、最上部のbasics.ipnybのリンクをクリックすると、
以下のように、コードは隠蔽された状態で、出力部分のインタラクティブな動作を確認できます。
![f4ee394ef0c3f993a0a5779f7a60402f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/301619/b0c3a19b-14ad-0e88-1fd3-e4f42d4f2b5e.gif)

他には、dashboard.ipnybを実行すると、以下のように動作が確認できます。
![74b2c59a5750e50a91e542ba27b7f294.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/301619/c08b192e-3aed-6d62-1cfe-44b42f30edde.gif)

上記以外にも、例えばプルダウンで選択されたものによって出力結果を変えたり、ipywidgetsで再現できるインタラクティブな動作は実現が可能です。

# 共有方法
ローカルPCで起動したVoilaをさくっと共有したい場合は、[ngrok](https://ngrok.com/download)のようなトンネリングツールを利用するのがおすすめです。

クラウドや、プライベートサーバーで起動して共有する場合には、手順例が[公式ドキュメント](https://voila.readthedocs.io/en/stable/deploy.html)にあるので、そちらをご参照ください。


# まとめ
以下のような場合には、Voilaを使うとラク。

・ Jupyter 上で作成したデータ分析結果をチームの他のメンバーに共有したい
・ でも、誤ってコードを編集されたくない
・ さらに、インタラクティブな出力結果を共有したい

# Appendix
## Jupyter系ダッシュボード作成ツールの調査結果

※ 下記の調査内容は、2020年9月24日時点のものです。
※ あくまでも参考程度にしてください。

| ツール名 | Voila | Panel |  PixieDust |
|:--|:--|:--|:--|
| 調査時点の最新コミット日 | 19hours ago | yesterday  | 6hours ago |
| GitHubリポジトリのStar数 |  2.7k |  0.8k |  0.9k |
| 最新バージョン | 0.2.4 | 0.9.7  | 1.1.8 |
| 提供元 | OSS | OSS | OSS |
| 特徴 |Jupyterで動作すれば、Voilaでも動作する。<br>インタラクティブ部分にはipywidgetsが使える。|地図系の可視化に強い。<br>インタラクティブ部分にはBokehが使える。|csvファイルから3行程度の実装でダッシュボードが作成できる。<br>チャートの種類や、x軸/y軸の設定等はUI上でインタラクティブに操作をする。|
| コメント(使い分け) | ipywidgetsベースで動いているものがあるならこれ | Bokehベースで動いているものがあるならこれを試しても良いかも | １から分析ダッシュボード作るならこれ |


# 参考
- [Jupyter Dashboarding — some thoughts on Voila, Panel and Dash](https://medium.com/informatics-lab/jupyter-dashboarding-some-thoughts-on-voila-panel-and-dash-b84df9c9482f)
- [Jupyter/Pythonでデータ分析する人にお勧めしたい！便利なライブラリー「PixieDust」をザクッと紹介します](https://qiita.com/ishida330/items/53f1b0df2247fab5c6dd)
- [Jupyter/Python上でたった3行でインタラクティブなチャート・ウィジェットを作れる！PixieDustを触ってみた](https://qiita.com/ishida330/items/36f31f224b230cb8f655)