JSON ServicesでDashのWebアプリを作る方法｜CData Connect AI + Python

Jerod Johnson
Jerod Johnson
Director, Technology Evangelism
CData Connect AI Python SDKとpandasを使い、リアルタイムのJSON servicesをDashのWebアプリで可視化する方法を解説。コーディングなしの接続設定からグラフ表示まで実現します。

CData Connect AI の Python SDK（DB-API 2.0準拠）を使うと、pandas と Dash でリアルタイムのJSON servicesを可視化する Web アプリを、個別ドライバー不要で構築できます。接続・モジュールインストール・アプリ構築の3ステップで、約10分で完成します。

Python は豊富なモジュールのエコシステムを備えているため、素早く作業に取りかかり、システムをより効果的に連携できます。CData Connect AI Python SDK、pandas モジュール、そして Dash フレームワークを使えば、JSON servicesを扱う JSON 連携の Web アプリケーションを構築できます。この記事では、Connect AI に接続し、pandas と Dash を使ってJSON servicesを可視化するシンプルな Web アプリを構築する方法をご紹介します。

Connect AI Python SDK（cdata-connect-ai）は DB-API 2.0（PEP 249）に準拠したクライアントなので、pandas は SDK の接続オブジェクトから直接クエリ結果を読み取れます。ソースごとにドライバーをインストールする必要はありません。パーソナルアクセストークンで接続して、アプリを構築しましょう。

Python + pandas + Dash でできること

JSON データの可視化ダッシュボード作成

SQL クエリで取得した JSON のレコードを pandas の DataFrame に読み込み、Dash のグラフコンポーネントに渡すだけで、業種別の傾向などを視覚的に確認できるダッシュボードを構築できます。

リアルタイムデータの自動更新レポート

Connect AI 経由の接続はパーソナルアクセストークンで認証されるため、スケジュール実行するスクリプトに組み込めば、JSON の最新データを反映したレポートを定期的に生成できます。

複数データソースとの統合分析

DB-API 2.0 準拠のクライアントなので、同じコードパターンで JSON 以外のデータソースにも接続でき、pandas 上で結合・集計してから Dash で一元的に可視化できます。

Connect AI で JSON に接続する方法は？

CData Connect AI では、直感的なクリック操作ベースのインターフェースでデータソースに接続できます。

  1. Connect AI にログインし、Sources をクリックして、 Add Connection をクリックします
    2. 接続の追加
  2. 「Add Connection」パネルから「JSON」を選択します
    3. データソースの選択
  3. JSON に接続するために必要な認証プロパティを入力します。

    データソースへの認証については、ヘルプドキュメントの「はじめに」を参照してください。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 への接続」を参照してください。

    接続の設定（Salesforce の例）
  4. 「Save & Test」をクリックします
  5. 「Permissions」タブに移動し、ユーザーベースの権限を更新します。 権限の更新

パーソナルアクセストークン（PAT）を生成する

Python SDK は、アカウントのメールアドレスとパーソナルアクセストークン（PAT）を使って Connect AI に認証します。アクセスの粒度を保つために、アプリケーションごとに個別の PAT を作成することをおすすめします。

  1. Connect AI アプリの右上にある歯車アイコン（）をクリックして、設定ページを開きます。
  2. 設定ページの Access Tokens セクションに移動し、 Create PAT をクリックします。
  3. PAT に名前を付けて Create をクリックします。 新しい PAT の作成
  4. パーソナルアクセストークンは作成時にのみ表示されます。必ずコピーして安全な場所に保管してください。

必要なモジュールをインストールする

pip ユーティリティを使って、SDK（pandas エクストラ付き）、Dash、Plotly をインストールします。

pip install "cdata-connect-ai[full]"
pip install dash
pip install plotly

Python で JSON Servicesの Web アプリを構築する

必要なモジュールをインストールしたら、Web アプリを構築する準備は完了です。以下にコードスニペットを紹介しますが、完全なソースコードは記事の末尾に掲載しています。

まずモジュールをインポートし、アカウントのメールアドレスと PAT で Connect AI に接続して、JSON servicesを DataFrame に読み込みます。識別子は <Connection>.<Schema>.<Table> という3つの部分で構成されており、接続名はデフォルトでソース名（例：JSON1）になります。

import dash
from dash import dcc, html
import pandas as pd
import plotly.graph_objs as go
import cdata_connect_ai

conn = cdata_connect_ai.connect(
    username="[email protected]",
    password="<your_pat>",
)

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

conn.close()

アプリとレイアウトを設定する

クエリ結果を DataFrame に格納したら、JSON servicesから棒グラフを作成し、アプリのレイアウトを設定します。

app = dash.Dash(__name__)
app.title = 'CData Connect AI + 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 Connect AI + Dash", style={'textAlign': 'center'}),
        dcc.Graph(
            id='example-graph',
            figure={
                'data': [trace],
                'layout': go.Layout(title='JSON people Data', barmode='stack'),
            },
        ),
    ],
    className="container",
)

アプリを実行できるようにする

接続、アプリ、レイアウトの設定が完了したら、アプリを実行する準備は整いました。

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

それでは、Python で Web アプリを実行し、ブラウザでJSON servicesを確認してみましょう。

python json-dash.py
ブラウザで動作する Dash の Web アプリ（Salesforce の例）

関連情報と無料トライアル

これで、CData Connect AI Python SDK を使って、リアルタイムのJSON servicesでインタラクティブな Dash の Web アプリを構築できるようになりました。JSON（および数百種類のその他のデータソース）への接続について詳しくは、Connect AI のページをご覧ください。

CData Connect AI の詳細、または無料トライアルにお申し込みください：

無料トライアル お問い合わせ


完全なソースコード

import dash
from dash import dcc, html
import pandas as pd
import plotly.graph_objs as go
import cdata_connect_ai

conn = cdata_connect_ai.connect(
    username="[email protected]",
    password="<your_pat>",
)

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

conn.close()

app = dash.Dash(__name__)
app.title = 'CData Connect AI + 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 Connect AI + Dash", style={'textAlign': 'center'}),
        dcc.Graph(
            id='example-graph',
            figure={
                'data': [trace],
                'layout': go.Layout(title='JSON people Data', barmode='stack'),
            },
        ),
    ],
    className="container",
)

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

はじめる準備はできましたか？

CData Connect AI の詳細、または無料トライアルにお申し込みください：

無料トライアル

この記事の内容

関連記事