JupyterDash を使用して Google Colaboratory で可視化 Web アプリを開発する方法

4 min

Python で気軽に 可視化用の Web アプリケーションを始める方法を探してませんか?
そんな方には、Google Colaboratory 上で実行出来て、HTMLやCSSやjavascriptの経験がなくてもwebアプリが開発出来る JupyterDash というフレームワークがおすすめです。
本記事を最後まで読むと、Colab から簡単にwebアプリが始められるようになります。
サンプルコードも用意しておりますのでご参考ください。

※本記事はChromebookを使用して執筆しました

広告_零号機

こんなお困りごとないですか?

若手社会人

若手社会人

Pythonで可視化する方法は解ったけど、webアプリケーションを開発にも挑戦したいわ。FlaskとかDjangoとかはいきなり敷居が高そうだから、もう少しお手軽に始めたいわ。HTMLやCSSやjavascriptも経験無いしね。

解決方法は?

あるよ。

忠犬SE

忠犬SE

JupyterDashというフレームワークを使えば、Colabからでも簡単にwebアプリが始められるよ。

DashというFlaskベースのSPAアプリケーションがあるけど、これをJupyteノートブック(≒Colab)から実行出来るようにしたのがJupyterDashさ。これにはBootStrapも用意されていて組み合わせて使用することで簡単にイケてる画面が作れるよ。

このフレームワークを使うとすべてPythonで記述出来るから、HTMLやCSSやjavascriptの経験がなくてもwebアプリが開発出来るんだ。

早速始めよう。

Colabで可視化webアプリを始める

流れ

  • 全体概要を理解する
  • Colabのノートブックを作成する
  • 実際に動かしてみる
  1. STEP

    全体概要を理解する

    1. ColabにてJupyterDashとBootStrapを使用するためのライブラリをインストールする
    2. webアプリの基底クラスとしてJupyterDashを継承したクラスを作成する
      • webページのタイトル(タブに表示される名称)を設定する
      • BootStrapを使用可能にする
      • レイアウト(html+cssに相当)を設定する抽象メソッドを実行する
      • コールバック関数(動的な処理を追加、javascriptに相当)を設定する抽象メソッドを実行する
      • 上記抽象メソッド実行後、ポート番号を指定してwebアプリを起動する
    3. 基底クラスを継承してwebアプリを定義したクラスを作成する
      • レイアウトを設定する抽象メソッドをオーバーライドする
      • コールバック関数を設定する抽象メソッドをオーバーライドする
    4. タイトル名とポート番号を指定して実行する
  2. STEP

    Colabのノートブックを作成する

    下記記事などを参考に、Colabで新しいノートブックを作成します。

  3. STEP

    実際に動かしてみる

    下記リンクより Colab を起動し、順番に実行します。
    ※コードが長くなるので本記事には直接記載しておりません。

    Open In 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.1

    2. 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 よりご確認ください

    Open In Colab

    Graphs in Tabs

    次に、下記リンク先ページで記載されているwebアプリを実現します。

    下記コードを実行します。

    ※コードが長くなるので省略します。詳細は Colab よりご確認ください

    Open In Colab
  4. 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 を満たす数少ない端末です。
軽くて持ち運びしやすく開発に耐えうるスペックなのでおすすめです。

富士通|FUJITSU ノートパソコン FMV Chromebook 14F(タッチパネル) ダーククロム FCB143FB [14.0型 /Chrome OS /intel Core i3 /メモリ:8GB /SSD:128GB /タッチパネル対応 /2021年12月モデル]【point_rb】

価格:70,510円
(2022/2/23 18:35時点)
感想(1件)

Chromebook でプログラミングを始める方法

【付録】さらに理解を深めたいという方たちへおすすめ本

今回可視化で使用したDashへの理解を深める方には下記がおすすめです。

【付録】演習

理解を深めるためには、実際に動かしてみるが一番です。

下記テーマを参考に、色々と動かしてみてはいかがでしょうか?

  1. 今回作成したMyDashクラス、MyDash2クラスをライブラリ化する。
  2. JupyterDashからはPlotlyが使用できます。過去にPlotlyで可視化したグラフを表示するwebアプリを開発する。
  3. アップロードしたデータを可視化するインタラクティブな可視化webアプリを開発する。
広告_零号機-エリア2
kewton

kewton

大学院卒業後、某大手SIerで10年以上SEとして従事。
社会人3年目までに基本情報・応用情報技術者、データベーススペシャリスト、簿記3級・2級を取得。
基幹系システム・IoTシステム開発のプロジェクト経験多数。AI活用システムの企画・プロト開発経験あり。
強みは、プロマネだけでなく自身で開発も実施してきたこと。
【扱える言語】
C#、java、python、javascript、Excel VBA
【扱えるDB】
oracle、sql server、postgreSQL、mongoDB

FOLLOW

関連記事

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA