Python のDash ライブラリを使って、JSON のデータ に連携するウェブアプリケーションを開発する方法

こんにちは！ウェブ担当の加藤です。マーケ関連のデータ分析や整備もやっています。

Python エコシステムには、多くのモジュールがあり、システム構築を素早く効率的に行うことができます。CData Python Connector for JSON を使うことで、pandas モジュールとDash フレームワークでJSON にデータ連携するアプリケーションを効率的に開発することができます。本記事では、pandas、Dash とCData Connector を使って、JSON に連携して、JSON のデータ をビジュアライズするシンプルなウェブアプリを作る方法をご紹介します。

CData Python Connectors の特徴

CData Python Connectors は、以下のような特徴を持った製品です。

1. JSON をはじめとする、CRM、MA、会計ツールなど多様なカテゴリの270種類以上のSaaS / オンプレデータソースに対応
2. Dash をはじめとする多様なデータ分析・BI ツールにJSON のデータを連携
3. ノーコードでの手軽な接続設定

必要なモジュールのインストール

まずは、pip で必要なモジュールおよびフレームワークをインストールします：

pip install pandas
pip install dash
pip install dash-daq

Python でJSON のデータを可視化

必要なモジュールとフレームワークがインストールされたら、ウェブアプリを開発していきます。コードのスニペットは以下の通りです。フルコードは記事の末尾に掲載しているので、参考にしてください。

まず、CData Connector を含むモジュールをインポートします：

import os
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import cdata.json as mod
import plotly.graph_objs as go

接続文字列を使ってデータへの接続を確立します。connect 関数を使ってCData JSON Connector からJSON のデータ との接続を確立します。

cnxn = mod.connect("URI=C:/people.json;DataModel=Relational;")

データソースへの認証については、ヘルプドキュメントの「はじめに」を参照してください。CData 製品は、JSON API を双方向データベーステーブルとして、JSON ファイルを読み取り専用ビュー（ローカル ファイル、一般的なクラウドサービスに保存されているファイル、FTP サーバー）としてモデル化します。HTTP Basic、Digest、NTLM、OAuth、FTP などの主要な認証スキームがサポートされています。詳細はヘルプドキュメントの「はじめに」を参照してください。

URI を設定して認証値を入力したら、DataModel を設定してデータ表現とデータ構造をより厳密に一致させます。

DataModel プロパティは、データをどのようにテーブルに表現するかを制御するプロパティで、次の基本設定を切り替えます。

• Document（デフォルト）：JSON データのトップレベルのドキュメントビューをモデル化します。CData 製品 は、ネストされたオブジェクト配列を集約されたJSON オブジェクトとして返します。
• FlattenedDocuments：ネストされた配列オブジェクトと親オブジェクトを、単一テーブルに暗黙的に結合します。
• Relational：階層データから個々の関連テーブルを返します。テーブルには、親ドキュメントにリンクする主キーと外部キーが含まれています。

リレーショナル表現の設定についての詳細は、ヘルプドキュメントの「JSON データのモデリング」を参照してください。また、以下の例で使用されているサンプルデータも確認できます。データには人や所有する車、それらの車に行われたさまざまなメンテナンスサービスのエントリが含まれています。

Amazon S3 内のJSON への接続

URI をバケット内のJSON ドキュメントに設定します。さらに、次のプロパティを設定して認証します。

• AWSAccessKey：AWS アクセスキー（username）に設定。
• AWSSecretKey：AWS シークレットキーに設定。

Box 内のJSON への接続

URI をJSON ファイルへのパスに設定します。Box へ認証するには、OAuth 認証標準を使います。 認証方法については、Box への接続 を参照してください。

Dropbox 内のJSON への接続

URI をJSON ファイルへのパスに設定します。Dropbox へ認証するには、OAuth 認証標準を使います。 認証方法については、Dropbox への接続 を参照してください。ユーザーアカウントまたはサービスアカウントで認証できます。ユーザーアカウントフローでは、以下の接続文字列で示すように、ユーザー資格情報の接続プロパティを設定する必要はありません。 URI=dropbox://folder1/file.json; InitiateOAuth=GETANDREFRESH; OAuthClientId=oauthclientid1; OAuthClientSecret=oauthcliensecret1; CallbackUrl=http://localhost:12345;

SharePoint Online SOAP 内のJSON への接続

URI をJSON ファイルを含むドキュメントライブラリに設定します。認証するには、User、Password、およびStorageBaseURL を設定します。

SharePoint Online REST 内のJSON への接続

URI をJSON ファイルを含むドキュメントライブラリに設定します。StorageBaseURL は任意です。指定しない場合、ドライバーはルートドライブで動作します。 認証するには、OAuth 認証標準を使用します。

FTP 内のJSON への接続

URI をJSON ファイルへのパスが付いたサーバーのアドレスに設定します。認証するには、User およびPassword を設定します。

Google Drive 内のJSON への接続

デスクトップアプリケーションからのGoogle への認証には、InitiateOAuth をGETANDREFRESH に設定して、接続してください。詳細はドキュメントの「Google Drive への接続」を参照してください。

JSON にクエリを実行

read_sql 関数を使って、padas からSQL 文を発行し、DataFrame に結果を格納します。

df = pd.read_sql("""SELECT [ personal.name.first ], [ personal.name.last ] FROM people WHERE [ personal.name.last ] = 'Roberts'""", cnxn)

ウェブアプリケーションの設定

DataFrame に格納されたクエリ結果を使って、ウェブアプリにname、stylesheet、title を設定していきます。

app_name = 'dash-jsonedataplot'

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.title = 'CData + Dash'

Layout 設定

次に、JSON のデータ をベースにした棒グラフを作詞し、アプリのレイアウトを設定します。

trace = go.Bar(x=df.[ personal.name.first ], y=df.[ personal.name.last ], name='[ personal.name.first ]')

app.layout = html.Div(children=[html.H1("CData Extention + Dash", style={'textAlign': 'center'}),
	dcc.Graph(
		id='example-graph',
		figure={
			'data': [trace],
			'layout':
			go.Layout(alt='JSON people Data', barmode='stack')
		})
], className="container")

アプリをセットアップして実行

接続、アプリ、レイアウトを定義したら、アプリを実行してみましょう。以下のコードで実行できます。

if __name__ == '__main__':
    app.run_server(debug=True)

最後に、Python でウェブアプリを起動してブラウザでJSON のデータ を見てみましょう。

python json-dash.py

ちゃんとデータが表示できてますね！

おわりに

JSON Python Connector の30日の無償トライアル をぜひダウンロードして、JSON のデータ への接続をPython アプリやスクリプトから簡単に作成してみてください。

import os
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import cdata.json as mod
import plotly.graph_objs as go

cnxn = mod.connect("URI=C:/people.json;DataModel=Relational;")

df = pd.read_sql("SELECT [ personal.name.first ], [ personal.name.last ] FROM people WHERE [ personal.name.last ] = 'Roberts'", cnxn)
app_name = 'dash-jsondataplot'

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.title = 'CData + Dash'
trace = go.Bar(x=df.[ personal.name.first ], y=df.[ personal.name.last ], name='[ personal.name.first ]')

app.layout = html.Div(children=[html.H1("CData Extention + Dash", style={'textAlign': 'center'}),
	dcc.Graph(
		id='example-graph',
		figure={
			'data': [trace],
			'layout':
			go.Layout(alt='JSON people Data', barmode='stack')
		})
], className="container")

if __name__ == '__main__':
    app.run_server(debug=True)