Python-web-development-libraries-dash-framework
ダッシュフレームワーク
この章では、Dashフレームワークについて詳しく説明します。
Dashは、分析Webアプリケーションの構築に使用されるオープンソースのPythonフレームワークです。 これは、データ駆動型アプリケーションの開発を簡素化する強力なライブラリです。 これは、Web開発にあまり詳しくないPythonデータ科学者にとって特に便利です。 ユーザーはダッシュを使用してブラウザで素晴らしいダッシュボードを作成できます。
Plotly.js、React、およびFlaskの上に構築されたDashは、ドロップダウン、スライダー、グラフなどの最新のUI要素を分析Pythonコードに直接結び付けます。
ダッシュアプリは、HTTP要求でJSONパケットを使用してフロントエンドのReactコンポーネントと通信するFlaskサーバーで構成されます。
ダッシュアプリケーションは純粋にPythonで記述されているため、HTMLやJavaScriptは必要ありません。
ダッシュのセットアップ
端末にDashがまだインストールされていない場合は、下記のDashライブラリをインストールします。 これらのライブラリは活発に開発されているため、頻繁にインストールしてアップグレードしてください。 Python 2および3もサポートされています。
- pip install dash == 0.23.1#コアダッシュバックエンド
- pip install dash-renderer == 0.13.0#ダッシュフロントエンド
- pip install dash-html-components == 0.11.0#HTMLコンポーネント
- pip install dash-core-components == 0.26.0#過給コンポーネント
- pip install plotly == 3.1.0#Plotly graphing library
すべてが正常に機能していることを確認するために、ここでは単純なdashApp.pyファイルを作成しました。
ダッシュまたはアプリのレイアウト
ダッシュアプリは2つの部分で構成されています。 最初の部分は、基本的にアプリケーションがどのように見えるかを説明するアプリの「レイアウト」です。 2番目の部分では、アプリケーションの対話性について説明します。
コアコンポーネント
dash_core_componentsをdccとしてインポート
dash_html_componentsをhtmlとしてインポート
dash_html_componentsは、dash_core_componentsがReact.jsで作成された対話機能用であるすべてのHTMLタグ用です。
上記の2つのライブラリを使用して、以下のコードを記述しましょう-
そして、同等のHTMLコードは次のようになります-
Simple Dashアプリの作成
ファイル dashApp.py で上記のライブラリを使用して、ダッシュで簡単な例を作成する方法を学習します。
Dashアプリを実行する
Dashアプリの実行中は、次の点に注意してください。
(MyDjangoEnv)C:\ Users \ rajesh \ Desktop \ MyDjango \ dash> python dashApp1.py
- Flaskアプリ「dashApp1」の提供(遅延読み込み)
- 環境:生産
WARNING Do not use the development server in a production environment. +代わりに実稼働WSGIサーバーを使用します。 * デバッグモード:オン * statで再起動する * デバッガーがアクティブです! * デバッガーPIN:130-303-947 * http://127.0.0.1:8050/ で実行(終了するにはCTRL + Cを押してください)
Webブラウザで http:127.0.0.1:8050/ にアクセスします。 次のようなアプリが表示されます。
上記のプログラムでは、注意すべきいくつかの重要な点は次のとおりです-
- アプリのレイアウトは、html.Divやdcc.Graphのような「コンポーネント」のツリーで構成されています。
- dash_html_componentsライブラリには、すべてのHTMLタグのコンポーネントがあります。 html.H1(children = ‘Hello Dash’)コンポーネントは、アプリケーションで<h1> Hello Dash </h1> HTML要素を生成します。
- すべてのコンポーネントが純粋なHTMLではありません。 dash_core_componentsは、インタラクティブで、React.jsライブラリーを介してJavaScript、HTML、およびCSSで生成される高レベルのコンポーネントを記述します。
- 各コンポーネントは、キーワード属性によって完全に記述されます。 ダッシュは宣言的です。主にこれらの属性を使用してアプリケーションを説明します。
- childrenプロパティは特別です。 慣例により、常に最初の属性であるため、省略できます。
- Html.H1(children = ’Hello Dash’)は、html.H1(「Hello Dash」)と同じです。
- アプリケーションのフォントは、ここに表示されているものとは少し異なります。 このアプリケーションは、カスタムCSSスタイルシートを使用して、要素のデフォルトスタイルを変更しています。 カスタムフォントスタイルは許可されますが、現在のところ、以下のURLまたは任意のURLを追加できます- + app.css.append_css(\ {“ external_url”:* [[1]]
HTMLの詳細
dash_html_componentsライブラリには、すべてのHTMLタグのコンポーネントクラスと、すべてのHTML引数のキーワード引数が含まれています。
以前のアプリテキストにコンポーネントのインラインスタイルを追加しましょう-
上の例では、html.Divおよびhtml.H1コンポーネントのインラインスタイルをstyleプロパティで変更しました。
次のようにDashアプリケーションでレンダリングされます-
dash_html_componentsとHTML属性の間にいくつかの重要な違いがあります-
- Dashのスタイルプロパティの場合、辞書を指定するだけで済みますが、HTMLの場合はセミコロンで区切られた文字列です。
- スタイル辞書キーは camelCased であるため、テキストの配置は textalign に変更されます。
- DashのClassNameは、HTMLクラス属性に似ています。
- 最初の引数は、childrenキーワード引数で指定されたHTMLタグの子です。
再利用可能なコンポーネント
Pythonでマークアップを記述することにより、コンテキストや言語を切り替えることなく、テーブルのような複雑で再利用可能なコンポーネントを作成できます-
以下は、pandasデータフレームから「テーブル」を生成する簡単な例です。
出力は次のようになります-
視覚化の詳細
dash_core_componentsライブラリには、 Graph というコンポーネントが含まれています。
Graphは、オープンソースのplotly.js JavaScriptグラフ作成ライブラリを使用して、インタラクティブなデータ視覚化をレンダリングします。 Plotly.jsは約35のチャートタイプをサポートし、ベクター品質のSVGと高性能WebGLの両方でチャートをレンダリングします。
以下は、パンダのデータフレームから散布図を作成する例です-
上記のコードの出力は次のとおりです-
これらのグラフはインタラクティブで応答性があります。 ポイントにカーソルを合わせて値を表示し、凡例項目をクリックしてトレースを切り替え、クリックしてドラッグしてズームし、シフトを押したままにして、クリックしてドラッグしてパンすることができます。
値下げ
dashはdash_html_componentsライブラリを介してHTMLフレーバーを公開しますが、コピーをHTMLで記述するのは面倒です。 テキストのブロックを作成するには、dash_core_componentsライブラリのMarkdownコンポーネントを使用できます。
コアコンポーネント
dash_core_componentsには、ドロップダウン、グラフ、マークダウン、ブロックなどの高レベルのコンポーネントのセットが含まれます。
他のすべてのDashコンポーネントと同様に、それらは完全に宣言的に記述されています。 構成可能なすべてのオプションは、コンポーネントのキーワード引数として使用できます。
以下は、利用可能なコンポーネントのいくつかを使用した例です-
上記のプログラムからの出力は次のとおりです-
ヘルプの呼び出し
ダッシュコンポーネントは宣言型です。 これらのコンポーネントの構成可能な要素はすべて、インストール中にキーワード引数として設定されます。 任意のコンポーネントのpythonコンソールでヘルプを呼び出して、コンポーネントとその利用可能な引数について詳しく知ることができます。 それらのいくつかを以下に示します-
要約すると、Dashアプリのレイアウトはアプリの外観を説明します。 レイアウトは、コンポーネントの階層ツリーです。 dash_html_componentsライブラリは、すべてのHTMLタグとキーワード引数のクラスを提供し、style、className、idなどのHTML属性を記述します。 dash_core_componentsライブラリは、コントロールやグラフなどの高レベルのコンポーネントを生成します。