ブラウザ上での可視化がipython notebookで捗るかもしれない話

# はじめに
プログラムとかで分析した結果を直観的に理解するために可視化したいな、と思って手頃なツールを探していました。選定する際に気にしたのは大体次のようなこと

1. クライアントマシンに新しいツールを入れたくない、ブラウザから使いたい
2. ソースとなる分析結果にアクセスしやすい

まず１ですが、前提として分析システムはリモートのサーバで動かすことを想定しています。なので、手元のマシンはサーバで出力された結果を見るためのビューワとしてのみ使いたいわけです。ビューワとして使うならブラウザでできる技術がどこかにきっとあるでしょう、という期待がありました。２についてですが、そもそも何を可視化したいかといえば分析結果でした。なので、なるべく分析結果にアクセスしやすいツールが望ましいです。csv読んだりDBにアクセスするだけで四苦八苦するようなツールであってはならないわけです。

と、こんなことを考えつつ探していてたどり着いたのがipython notebookでした。ipython notebookを使うとブラウザからpythonという使いやすい言語でデータにアクセスし、いい感じに可視化することができます。

今回は、ipython notebook使っててこれはいいな、と思ったところと導入方法を簡単にご紹介します。

# ipythonとipython notebook
http://ipython.org/ によると

> IPython provides a rich architecture for interactive computing with:
* Powerful interactive shells (terminal and Qt-based).
* A browser-based notebook with support for code, text, mathematical expressions, inline plots and other rich media.
* Support for interactive data visualization and use of GUI toolkits.
* Flexible, embeddable interpreters to load into your own projects.
* Easy to use, high performance tools for parallel computing.

とのこと。特に、ここが重要です
> A browser-based notebook with support for code, text, mathematical expressions, inline plots and other rich media.

これは何か、ブラウザから可視化をコントロールできそうな予感がします。

# 目指すもの
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/12053/a3eb39a0-178b-c196-0297-0feba95f9cef.png)

完成イメージ図を書いてみました。サーバ側に分析環境があって、可視化のために必要なツールを入れていきます。また、今回はテスト用の環境をVM上に構築します。（余談ですが、リモートホストといえばパブリッククラウドが当たり前？になってきたこのご時世に我が家にはまだ物理サーバが鎮座しているのでこれを使います）

# インストール
基本的に、ここに書いてある通りにipythonをインストールします。
http://ipython.org/install.html
また、notebook関連の依存パッケージのインストールもやります。ここは、もしインストールされてなかったらログが出るので見ながら解決します。
また、matplotlibを入れておきます。
http://matplotlib.org/
matplotlibはpipでのインストールが辛かったのでdebian packageを使いました。（とはいえ、この辺の話は環境依存なので参考にならない可能性が高い）

手前味噌ですが、今回構築した環境は以下のとおりです。
https://github.com/risuoku/machine-learning-test-env.git

# サーバをたてる
「ブラウザから可視化する」というからにはその先にサーバがいるのでサーバプロセスを立ち上げます。
ドキュメント的にはこのへん
http://ipython.org/ipython-doc/stable/notebook/notebook.html#starting-the-notebook-server


基本的には、ドキュメントにあるとおり
`ipython notebook`

とかやればいいんですが、これだとデフォルトでは127.0.0.1:8888 をbindしてしまいます。今回は別ホストからアクセスしにいくのでIPを書き換える必要があります。というか、テストなのでとりあえず0.0.0.0 にしておきます

`ipython notebook --ip 0.0.0.0`

でok

こうなる

```vagrant@vagrant-ubuntu-trusty-32:~$ ps ax | grep ipython
11912 pts/0    Sl+    0:00 /usr/bin/python3 /usr/local/bin/ipython notebook --ip 0.0.0.0
12015 pts/1    S+     0:00 grep --color=auto ipython
vagrant@vagrant-ubuntu-trusty-32:~$ netstat -tan | grep 8888
tcp        0      0 0.0.0.0:8888            0.0.0.0:*               LISTEN
tcp        0      0 127.0.0.1:8888          127.0.0.1:37281         TIME_WAIT
```

# Hello visualization on my browser
適当にmatplotlib の公式サイトにあるグラフを描画してみます。
http://matplotlib.org/examples/lines_bars_and_markers/line_demo_dash_control.html
http://matplotlib.org/examples/lines_bars_and_markers/barh_demo.html
とか

まず、ブラウザからサーバにアクセスするとこうなります。ちなみに、画像に見えてる negitoro.in はサーバ側ホストOSのホスト名です
![n_1.png](https://qiita-image-store.s3.amazonaws.com/0/12053/c32b88c6-7cd7-059e-19b4-1b0c99dc01f2.png)

次に、"New Notebook"を押すとこうなる
![n_2.png](https://qiita-image-store.s3.amazonaws.com/0/12053/3aeb29b4-2256-0e17-0b3b-291a363bea47.png)

次に、初期設定として、"%matplotlib inline" を入力して実行します。ちなみに、ここはどういった方法で画像を取得するかで変わってくるのですが、今回はブラウザ内に表示したいのでinlineにします。
![n_3.png](https://qiita-image-store.s3.amazonaws.com/0/12053/c03b1dce-0019-f2bd-e0c2-b8d14c74bacb.png)

これで、準備完了です。まず、http://matplotlib.org/examples/lines_bars_and_markers/line_demo_dash_control.html
から表示します。
![n_4.png](https://qiita-image-store.s3.amazonaws.com/0/12053/91cb8516-e33a-04c9-847d-12b20b7c4798.png)

次は、
http://matplotlib.org/examples/lines_bars_and_markers/barh_demo.html
です。
![n_5.png](https://qiita-image-store.s3.amazonaws.com/0/12053/0169206e-4562-8741-7fb9-d22e2d3875b8.png)

すばらっ

適当にサーバ上にファイル作って、ブラウザから読んで表示してみます。


```
vagrant@vagrant-ubuntu-trusty-32:~$ mkdir tmp_work
vagrant@vagrant-ubuntu-trusty-32:~$ ls
tmp_work  Untitled0.ipynb
vagrant@vagrant-ubuntu-trusty-32:~$ cd tmp_work/
vagrant@vagrant-ubuntu-trusty-32:~/tmp_work$ touch hoge.log && echo "hogefugafuga" > hoge.log && cat hoge.log
hogefugafuga
vagrant@vagrant-ubuntu-trusty-32:~/tmp_work$ ls
hoge.log
vagrant@vagrant-ubuntu-trusty-32:~/tmp_work$ pwd
/home/vagrant/tmp_work
```

![n_6.png](https://qiita-image-store.s3.amazonaws.com/0/12053/78fc0954-3dbb-b0a7-2c1c-abecac947813.png)

ホホゥ

# おわりに
簡単にですが、ipython notebookについて書いてみました。ブラウザからお手軽に可視化できるので、何かとインストールでつまづくwindowsユーザに特にオススメしたいです。