Extension Frameworkを利用してPDTの依存関係を表示させる

※ 本投稿はLooker Advent Caledar 2021 2日目の記事となります。

さて、Looker 21.20ではPDT Dependency Visualizerという機能がリリースされました。この機能によって、管理者メニューのPDT画面から依存関係を確認することが可能となります。しかし、本機能を利用するためには管理者権限が必要となるため、今回はAPI Endpointを利用するExtension Frameworkを利用して依存関係のグラフだけを表示するアプリケーションを作成してみたいと思います。Reactに関しての細かい部分については、ここでは割愛します。

Extension Frameworkとは

まずは、Extension Frameworkをご存知ない方のために、少しご紹介しておきます。

Lookerでは、このフレームワークを利用して、Looker上で動作するJavascriptアプリケーションを構築することが可能になっています。代表的な例としては、Looker MarketPlaceからインストール可能なData DictionaryLookML Diagramがあります。本フレームワークは、Webアプリケーション開発時に必要となる以下のような認証などの実装は、Looker側で管理可能なため、機能開発に注力することが可能です。

Extension Frameworkの機能

また、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のナビゲーションバーを非表示にすることも可能)

  •  アクセスキーの設定: ユーザーがエクステンション利用に際して、キー入力を必須にします。これは、エクステンションの利用に課金をする場合に便利です。

Extension Framework要件

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上で表示するための設定を行っていきます。

まずは、Lookerに新規プロジェクトを作成します。LookMLのviewなどは作成する必要がないので、今回は、Blank Projectを選択します。

dFKI8IUYYhUcyiS3-yGnhfrQ86O_k5FDF1EjrMsEaghIdaYAxrgq-4phfJC4yZyE3ic577JTSYLQUKJPaIukLx2vQ1pfQ35KyaNoZwrd7g1QeWaWB69VlZIlQ5InuO2nU0xJuJ_pMD4QF1a6717HzWm85ZOsBvEtAWx9AUCJF2luFF8X

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の画面上に今回作成したアプリケーションが表示されるようになります。

2sQbAKaPKGPZ8ydPsDyTST0q63icxq7fcpnrwhnA0pwvZspb9dF_8BGddk4psOUx7BPNj5iMR0QGegnqlvsp5RW2LW226UGt3PQPK6s8mwa2RuvFPh_ImQ991yGC0cBg_51nY9sB3pPHplpagN9o7QcXKFYVqRf0JEJV2mETvnfVNfX8

では、早速、アプリケーションを動かしてみようと思います。

ローカル開発環境の、今回のアプリケーション開発ルートフォルダへ移動し、以下を実行します。

yarn develop

ローカル開発環境で、サーバーが起動し、8080ポートで接続できるようになっています。

次に、Lookerの画面上で、先ほど表示されたApplicationメニューをクリックすると、ブラウザ上で、ローカルサーバーで起動しているアプリケーションと連動して、グラフ表示されるようになります。以下のような画像が表示されるのではないでしょうか?

b7539ba7-ba1c-4c2c-8b57-9cd9f571c8da.png

本番リリースする場合

今回は、開発中ということでローカルで動作させましたが、以下のコマンドから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を選択できるようにすることも簡単ですので、ぜひ、皆さんも独自アプリケーションを作成してみてください。

eOO5x73PzeyzJY-qzW11tYSAbU4HG2HS7zB4-hOZTff4LZGQ_l7leMbmK7hFfjFkMsj4cFNjYy3Q18hRAYN5aadDS_JojYAVnBEehsynDG9Fx_jE4KPfBHYjFJrZaYoGQyNSl6-SQtSBDPYSku1NERqDKRM5HCAaMHEnO4jhykfnRYkq

なお、上記のサンプル・プログラムはgithub上にありますので、ご興味ありましたら拡張していただけると幸いです。

本サンプル・プログラムは執筆時点での情報を元に記載しており、ソースコードに関してのお問い合わせについては、弊社サポート・チームでは対応致しかねます。Extension Frameworkのご紹介については、弊社ヘルプ・ページを参照ください。(ご利用中のLooker上での、カスタム・アプリケーション開発のご依頼は、弊社営業へご連絡ください)
 

共有しているサンプル・プログラムでは、情報を取得するために、LookML ModelやConnection情報を取得しているため開発者権限が必要になる可能性があります。

また、PDTの情報を取得するために、System Activityモデルへのクエリを実行しています。

5 0 396