Python で気軽に 可視化用の Web アプリケーションを始める方法を探してませんか？
そんな方には、Google Colaboratory 上で実行出来て、HTMLやCSSやjavascriptの経験がなくてもwebアプリが開発出来る JupyterDash というフレームワークがおすすめです。
本記事を最後まで読むと、Colab から簡単にwebアプリが始められるようになります。
サンプルコードも用意しておりますのでご参考ください。
※本記事はChromebookを使用して執筆しました
目次
こんなお困りごとないですか？
若手社会人
Pythonで可視化する方法は解ったけど、webアプリケーションを開発にも挑戦したいわ。FlaskとかDjangoとかはいきなり敷居が高そうだから、もう少しお手軽に始めたいわ。HTMLやCSSやjavascriptも経験無いしね。
解決方法は？
あるよ。
忠犬SE
JupyterDashというフレームワークを使えば、Colabからでも簡単にwebアプリが始められるよ。
DashというFlaskベースのSPAアプリケーションがあるけど、これをJupyteノートブック（≒Colab）から実行出来るようにしたのがJupyterDashさ。これにはBootStrapも用意されていて組み合わせて使用することで簡単にイケてる画面が作れるよ。
このフレームワークを使うとすべてPythonで記述出来るから、HTMLやCSSやjavascriptの経験がなくてもwebアプリが開発出来るんだ。
早速始めよう。
Colabで可視化webアプリを始める
流れ
- 全体概要を理解する
- Colabのノートブックを作成する
- 実際に動かしてみる
- STEP
全体概要を理解する
- ColabにてJupyterDashとBootStrapを使用するためのライブラリをインストールする
- webアプリの基底クラスとしてJupyterDashを継承したクラスを作成する
- webページのタイトル（タブに表示される名称）を設定する
- BootStrapを使用可能にする
- レイアウト（html+cssに相当）を設定する抽象メソッドを実行する
- コールバック関数（動的な処理を追加、javascriptに相当）を設定する抽象メソッドを実行する
- 上記抽象メソッド実行後、ポート番号を指定してwebアプリを起動する
- 基底クラスを継承してwebアプリを定義したクラスを作成する
- レイアウトを設定する抽象メソッドをオーバーライドする
- コールバック関数を設定する抽象メソッドをオーバーライドする
- タイトル名とポート番号を指定して実行する
- STEP
Colabのノートブックを作成する
下記記事などを参考に、Colabで新しいノートブックを作成します。
- STEP
実際に動かしてみる
下記リンクより Colab を起動し、順番に実行します。
※コードが長くなるので本記事には直接記載しておりません。
1. ColabにてJupyterDashとBootStrapを使用するためのライブラリをインストールする
下記コードを実行して必要なライブラリをインストールします。
# dashのインストール !pip install dash==2.0.0 # jupyter-dashインストール !pip install jupyter-dash==0.4.0 # dash_bootstrap_componentsインストール !pip install dash_bootstrap_components==0.13.12. webアプリの基底クラスとしてJupyterDashを継承したクラスを作成する
下記コードを実行してwebアプリの基底クラスを定義します。
継承してbuildbaselayoutとregistcalbackをオーバーライドすることで Dash BootStrap Components を使用したwebアプリが開発できます。
このクラスをうまく使うことで自分独自のライブラリが開発出来るようになります。
使用例は後ほど説明します。
from jupyter_dash import JupyterDash import dash_bootstrap_components as dbc class JupyterDashBootStrap(JupyterDash): def __init__(self, _title, _port): super().__init__(__name__, external_stylesheets=self.__external_stylesheets()) if _title is not None: self.title = _title self.__setlayout() self.__run(_port) def __setlayout(self): self.layout = self.buildbaselayout() self.registcalback(self) def buildbaselayout(self): return def registcalback(self, app): return def __run(self, _port): if _port is None: self.run_server(mode="external") else: self.run_server(mode="external", port=_port ) def __external_stylesheets(self): return [dbc.themes.BOOTSTRAP]3. 基底クラスを継承してwebアプリを定義したクラスを作成する
Dash BootStrap Componentsを使用します。
Simple sidebar
下記リンク先ページで記載されているDashアプリケーションをJupyterDashで実現します。
※コードが長くなるので省略します。詳細は Colab よりご確認ください
Graphs in Tabs
次に、下記リンク先ページで記載されているwebアプリを実現します。
下記コードを実行します。
※コードが長くなるので省略します。詳細は Colab よりご確認ください
- STEP
タイトル名とポート番号を指定して実行する
下記コードを実行します。
第一引数にwebページの名称を指定します。
第二引数にポート番号を指定します。
MyDash("*** Simple sidebar ***", 8881) MyDash2("*** Graphs in Tabs ***", 8882)セルを実行すると下記が出力されます。
URLをクリックします。新しいタブで下記web画面が表示されます。
- Simple sidebar
- Graphs in Tabs
buildbaselayoutとregistcalbackをメンテすることでよりリッチなwebアプリが開発出来ます。
最後に
本日は、JupyterDash を使用して Colab から Python コードだけを記述して Web アプリを開発してみました。
ご参考になりましたら twitter をフォローして SNS でシェアして頂ければ幸いです。
ちなみに今回は下記 Chromebook を使用しました。
14.0型フルHD × Core i3 × メモリ8GB を満たす数少ない端末です。
軽くて持ち運びしやすく開発に耐えうるスペックなのでおすすめです。
 | 価格:70,510円 |
【付録】さらに理解を深めたいという方たちへおすすめ本
今回可視化で使用したDashへの理解を深める方には下記がおすすめです。
【付録】演習
理解を深めるためには、実際に動かしてみるが一番です。
下記テーマを参考に、色々と動かしてみてはいかがでしょうか？
- 今回作成したMyDashクラス、MyDash2クラスをライブラリ化する。
- JupyterDashからはPlotlyが使用できます。過去にPlotlyで可視化したグラフを表示するwebアプリを開発する。
- アップロードしたデータを可視化するインタラクティブな可視化webアプリを開発する。
