※ 本投稿はLooker Advent Caledar 2021 2日目の記事となります。
さて、Looker 21.20ではPDT Dependency Visualizerという機能がリリースされました。この機能によって、管理者メニューのPDT画面から依存関係を確認することが可能となります。しかし、本機能を利用するためには管理者権限が必要となるため、今回はAPI Endpointを利用するExtension Frameworkを利用して依存関係のグラフだけを表示するアプリケーションを作成してみたいと思います。Reactに関しての細かい部分については、ここでは割愛します。
まずは、Extension Frameworkをご存知ない方のために、少しご紹介しておきます。
Lookerでは、このフレームワークを利用して、Looker上で動作するJavascriptアプリケーションを構築することが可能になっています。代表的な例としては、Looker MarketPlaceからインストール可能なData DictionaryやLookML Diagramがあります。本フレームワークは、Webアプリケーション開発時に必要となる以下のような認証などの実装は、Looker側で管理可能なため、機能開発に注力することが可能です。
Authentication - Lookerの既存の認証オプションを利用可能 (パスワードログイン、 LDAP、 SAML、 やOpenID Connect).
APIアクセス - 他の開発リソースの活用、サード・パーティAPIやLooker
また、Looker Extension Frameworkは以下のような機能を備えています:
Looker Extension SDK: Looker環境において、ユーザーのインタラクティブな操作を可能とするLookerの外部APIアクセス
Looker Components: Extensionで利用可能なReact UIコンポーネント
Embed SDK: ダッシュボード、LookやExploreをExtensionへ埋め込むためのライブラリ(サンプルコードとして、kitchen sink extensionを参照ください)。また、Embed SDKを利用して、このアプリケーションを3rdパーティ・アプリケーションへ埋め込むことも可能です。Explore、Lookやダッシュボードを埋め込む場合は、ブラウザでCookieが有効化されている必要があります
Create-looker-extensionユーティリティ: 必要となるファイルや依存関係を含有し、開発時に基本となるextensionアプリケーションを生成するユーティリティ
3rdパーティAPIへアクセスし、3rdパーティデータをアプリケーションへ追加する機能
Looker内でフルスクリーン表示させる機能(本機能を利用することで、ユーザーを他のLooker機能へ遷移させることを防ぐことや、Lookerのナビゲーションバーを非表示にすることも可能)
アクセスキーの設定: ユーザーがエクステンション利用に際して、キー入力を必須にします。これは、エクステンションの利用に課金をする場合に便利です。
Looker Extension Frameworkを利用して開発をするためには、以下が必要となります:
インスタンス上でのLookML開発者権限
インスタンスでExtension Frameworkが有効化されていること
開発環境にNodeJS、Yarnがインストールされていること
JavasriptかTypescriptの開発
Reactを利用した開発ができること(Javascriptのみで開発することも可能です)
それでは、アプリケーションを作成していきたいと思います。
以下のコマンドを実行し、アプリケーションの下地を作成します。
yarn create looker-extension <your-project-name>
cd <your-project-name>
Looker APIのGet subgraph of derived table and dependencies は、dot languageという構造で出力されます。そのため、グラフ描画に必要となるライブラリを追加します。
yarn add graphviz-react
さて、それでは、グラフ描画に必要なロジックを追加していきます。まず、Looker APIを呼び出すために、ContextからSDKを取得します。
import React, { useEffect, useState, useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
export const HelloWorld = () => {
const { core40SDK } = useContext(ExtensionContext)
次に、PDTの依存関係グラフを取得する部分のロジックです。返却結果は、graphTextをUseStateを利用して保存しておきます。
useEffect(() => {
const initialize = async () => {
try {
const result = await core40SDK.ok(core40SDK.graph_derived_tables_for_view({
view: <PDT View Name>,
models: <Model Name>
}))
if (result) {
setGraphText(result.graph_text)
} else {
setGraphText("")
}
} catch (error) {
console.error(error)
}
}
initialize()
}, [])
あとは、APIから返却された結果をGraph表示するモジュールに渡せばOKです。
return (
<>
<ComponentsProvider>
<Space around>
<Graphviz dot={graphText} />
</Space>
</ComponentsProvider>
</>
)
コード全体では以下のようになるかと思います。
import React, { useEffect, useState, useContext } from 'react'
import { Space, ComponentsProvider, Span } from '@looker/components'
import { ExtensionContext } from '@looker/extension-sdk-react'
import Graphviz from 'graphviz-react'
export const HelloWorld = () => {
const { core40SDK } = useContext(ExtensionContext)
const [graphText, setGraphText] = useState()
useEffect(() => {
const initialize = async () => {
try {
const result = await core40SDK.ok(core40SDK.graph_derived_tables_for_view({
view: <PDT View Name>,
models: <Model Name>
}))
if (result) {
setGraphText(result.graph_text)
} else {
setGraphText("")
}
} catch (error) {
console.error(error)
}
}
initialize()
}, [])
return (
<>
<ComponentsProvider>
<Space around>
<Graphviz dot={graphText} />
</Space>
</ComponentsProvider>
</>
)
}
次に、Looker上で表示するための設定を行っていきます。
まずは、Lookerに新規プロジェクトを作成します。LookMLのviewなどは作成する必要がないので、今回は、Blank Projectを選択します。
Modelファイルを作成します。特にviewファイルなどは含める必要がないため、connectionだけ指定します。他のincludeは削除、もしくはコメントアウトします。
connection: “<connection name>”
次にmanifestファイルを追加します。
application: <application name> {
label: "<Application Label>"
url: "http://localhost:8080/bundle.js"
# file: "bundle.js"
entitlements: {
core_api_methods: ["graph_derived_tables_for_view"]
}
}
あとは、プロジェクトへリポジトリの設定を行い、デプロイをするとLookerの画面上に今回作成したアプリケーションが表示されるようになります。
では、早速、アプリケーションを動かしてみようと思います。
ローカル開発環境の、今回のアプリケーション開発ルートフォルダへ移動し、以下を実行します。
yarn develop
ローカル開発環境で、サーバーが起動し、8080ポートで接続できるようになっています。
次に、Lookerの画面上で、先ほど表示されたApplicationメニューをクリックすると、ブラウザ上で、ローカルサーバーで起動しているアプリケーションと連動して、グラフ表示されるようになります。以下のような画像が表示されるのではないでしょうか?
今回は、開発中ということでローカルで動作させましたが、以下のコマンドからbundle.jsを生成して、Looker上で動作させることも可能です。
yarn build
distフォルダ配下にあるbundle.js というファイルを、Lookerにドラッグ&ドロップし、manifestファイルを次のように書き換えます。
application: <application name> {
label: "<Application Label>"
# url: "http://localhost:8080/bundle.js"
file: "bundle.js"
entitlements: {
core_api_methods: ["graph_derived_tables_for_view"]
}
}
上記のように変更することで、ローカル開発サーバではなく、Looker上でアプリケーションを動作させることが可能となります。
いかがでしたでしょうか。Extension Frameworkを利用することで、さらにパワフルなデータ・プラットフォームをLooker上で構築することとが可能になります。一連の業務プロセスをLooker内で完結させることや、他システムとシームレスな連携を行うアプリケーションの開発なども可能となります。
今回は、サンプルということで、viewとモデル名を直接指定して描画しましたが、Looker APIを利用して、以下のようにPDTを選択できるようにすることも簡単ですので、ぜひ、皆さんも独自アプリケーションを作成してみてください。
なお、上記のサンプル・プログラムはgithub上にありますので、ご興味ありましたら拡張していただけると幸いです。
本サンプル・プログラムは執筆時点での情報を元に記載しており、ソースコードに関してのお問い合わせについては、弊社サポート・チームでは対応致しかねます。Extension Frameworkのご紹介については、弊社ヘルプ・ページを参照ください。(ご利用中のLooker上での、カスタム・アプリケーション開発のご依頼は、弊社営業へご連絡ください)
共有しているサンプル・プログラムでは、情報を取得するために、LookML ModelやConnection情報を取得しているため開発者権限が必要になる可能性があります。
また、PDTの情報を取得するために、System Activityモデルへのクエリを実行しています。