Looker 拡張機能の構築の概要

このページでは、基本的な Looker 拡張テンプレートを生成して構成する方法について説明します。このテンプレートを使用して機能を追加できます。

新しい Looker 拡張機能を作成するには、次のタスクを行う必要があります。

• モデルファイルとプロジェクト マニフェスト ファイルを含む LookML プロジェクトを構成し、Git に接続します。
• 拡張機能テンプレート ファイルを生成する

次の手順では、上記の要素を作成する方法を示します。

Looker の拡張機能の構成

Looker の各拡張には、実行するモデルファイルとマニフェスト ファイルを含む LookML プロジェクトが必要です。

1. 拡張機能の空のプロジェクトを作成します。

2. 新しいプロジェクトで、Looker IDE 内のファイル ブラウザの上部にある + を使用して、モデルファイルを作成します。

3. 新しいモデルファイルは、connection パラメータと include パラメータを使用して生成されます。

   

   connection パラメータの connection_name は、インスタンスで有効なデータベース接続の名前に置き換えます。Looker の権限データは LookML モデルを通じてアクセスされるため、拡張機能には有効なモデルファイルが必要です。拡張機能へのアクセスを管理するには、拡張機能を有効な LookML モデルに関連付けて、そのモデルにアクセスする権限をユーザーに付与する必要があります。モデルファイルの編集が完了したら、[変更を保存] をクリックします。

   この拡張機能ではビューファイルが必要ないので、include: "/views/*.view.lkml" パラメータを削除するか、行の先頭に # 文字を追加して、行にコメントを付けます。include: "/views/*.view.lkml" パラメータはそのままにすると、LookML バリデータでエラーが発生します。

4. Looker IDE でファイル ブラウザの上部にある + を使用して、プロジェクト マニフェスト ファイルを作成する。

   プロジェクト マニフェスト ファイルは初期状態が空ですが、この手順の後半では、application パラメータを含む生成済みのコンテンツをプロジェクト マニフェスト ファイルにコピーします。application パラメータは、拡張機能にラベルを付け、拡張機能の JavaScript の場所を Looker に伝え、拡張機能の利用資格のリストを提供します。利用資格によって、拡張機能がアクセスできる Looker リソースが定義されます。Looker のリソースは、エンタイトルメントにリストされていない限り、アクセスできません。

   ただし、このプロセスの後半では、ファイルの残りの内容をファイルにコピーするので、とりあえずマニフェスト ファイルはそのままにしておきます。

5. 新しいプロジェクトの Git 接続を構成します。

   [Configure Git] ページには、Looker IDE の右上にある [Configure Git] ボタンをクリックするか、Git 接続の設定とテストのドキュメント ページに記載されている [プロジェクトの構成] ページからアクセスできます。

拡張機能のプロジェクトを設定し、Git に接続したら、拡張機能テンプレート ファイルを生成する準備は完了です。

拡張機能テンプレート ファイルの生成

拡張機能テンプレートのコードファイルを生成するには、次の 2 つの方法があります。

• create-looker-extension ユーティリティの使用
• 拡張機能テンプレート Git リポジトリのクローンの作成

どちらのプロセスも Yarn を必要とするため、Yarn がインストールされていることを確認してください。

create-looker-extension を使用して拡張機能テンプレートを作成する

create-looker-extension ユーティリティは、必要なすべての拡張機能ファイルと依存関係を含む基本的な Looker 拡張機能を作成します。これを出発点として、コードと機能を追加すれば拡張機能を完成させることができます。

拡張機能テンプレートを生成するには:

1. create-looker-extension ユーティリティを実行します。<extension_name> は、実際の拡張機能の名前に置き換えます。

   yarn create looker-extension <extension_name>
   

2. 拡張機能の名前を確認するか、別の名前を入力して、拡張機能の作成に使用する言語とフレームワークを選択します。

   

   create-looker-extension ユーティリティは、指定されたフレームワークを使用してベース テンプレートにデータを入力し、生成されたすべてのファイルを、拡張機能の名前を使用する新しいディレクトリに配置します。

   

3. 拡張機能用に作成されたディレクトリに移動します。

   cd <extension_name>
   

4. 拡張機能の依存関係をインストールします。

   yarn install
   

5. 開発用サーバーを起動します。

   yarn develop
   

   拡張機能が実行され、JavaScript がローカルで http://localhost:8080/bundle.js から配信されます。

6. 拡張機能ディレクトリには manifest.lkml ファイルがあります。このファイルの内容をコピーします。

7. LookML プロジェクトで、manifest.lkml の内容をプロジェクトのマニフェスト ファイルに貼り付けます。

   

   [変更を保存] をクリックして、プロジェクトのマニフェスト ファイルを保存します。

8. LookML IDE で [Validate LookML]、[Commit Changes & Push]、[Deploy to Production] の順にクリックします。

9. ブラウザの再読み込み機能を使用して Looker を再読み込みします。

   Looker の [Browse] メニューに新しい拡張機能の名前が表示されます。

   

10. [参照] メニューから拡張機能を選択して、拡張機能の出力を表示します。

管理者が拡張ナビゲーションのラボ機能を有効にしている場合は、新しい拡張ナビゲーション パネルの [アプリケーション] セクションに拡張機能が表示されます。

Git リポジトリのクローンを作成して拡張機能テンプレートを作成する

Looker には、いくつかの拡張機能テンプレートを含む Git リポジトリ（https://github.com/looker-open-source/extension-examples）があります。そこで使用する例の一つを使用する場合は、そのサンプルのリポジトリに移動して、以下の手順を行います。

この手順では Yarn が必要なため、Yarn がインストールされていることを確認します。

1. ローカル コマンドラインで、次のコマンドを使用して Git リポジトリのクローンを作成します。

   git clone [e-mail]:looker-open-source/extension-examples.git
   

2. システムにインストールするテンプレートが含まれているディレクトリに移動します。この例では、React と JavaScript の「Hello World」という拡張機能を使用します。

   cd extension-examples/react/javascript/helloworld-js
   

3. 拡張機能の依存関係をインストールします。

   yarn install
   

   ノードのバージョンの変更には、ノードのバージョンの更新やノードのバージョン マネージャーの使用が必要になる場合があります。

4. 拡張機能ディレクトリには manifest.lkml ファイルがあります。このファイルの内容をコピーします。

5. LookML プロジェクトで、manifest.lkml の内容をプロジェクトのマニフェスト ファイルに貼り付けます。

   

   [変更を保存] をクリックして、プロジェクトのマニフェスト ファイルを保存します。

6. LookML IDE の右上で [Validate LookML]、[Commit Changes & Push]、[Deploy to Production] の順にクリックします。

7. ターミナルで、開発用サーバーを起動します。

   yarn develop
   

   拡張機能が実行され、マニフェスト ファイルの url パラメータ（http://localhost:8080/bundle.js）で指定されたローカル開発用サーバーで JavaScript が提供されます。

8. ブラウザの再読み込み機能を使用して Looker を再読み込みします。

   Looker の [参照] メニューに新しい拡張機能の名前が表示されます。この名前は、プロジェクト マニフェスト ファイルの label パラメータによって決定されます。

   

9. [参照] メニューから拡張機能を選択して、拡張機能の出力を表示します。

管理者が拡張ナビゲーションのラボ機能を有効にしている場合は、新しい拡張ナビゲーション パネルの [アプリケーション] セクションに拡張機能が表示されます。

拡張機能の変更

基本の拡張機能を作成したら、適切な JavaScript ファイルまたは TypeScript ファイルを変更することで、拡張機能にコードを変更または追加できます。

拡張機能ディレクトリの src ディレクトリには、コードを追加できるソースファイルが含まれています。上記の例では、React と JavaScript の「Hello World」テンプレートの場合、ファイル名は HelloWorld.js になります。このファイルにコードを追加または修正すると、拡張機能の機能も変更されることになります。

React と JavaScript の HelloWorld.js ファイルの出力を以下に示します。

import React, { useEffect, useState, useContext } from 'react'
import { Space, ComponentsProvider, Text } from '@looker/components'
import { ExtensionContext } from '@looker/extension-sdk-react'

export const HelloWorld = () => {
  const { core40SDK } = useContext(ExtensionContext)
  const [message, setMessage] = useState()

  useEffect(() => {
    const initialize = async () => {
      try {
        const value = await core40SDK.ok(core40SDK.me())
        setMessage(`Hello, ${value.display_name}`)
      } catch (error) {
        setMessage('Error occured getting information about me!')
        console.error(error)
      }
    }
    initialize()
  }, [])

  return (
    <>
      <ComponentsProvider>
        <Space p="xxxxxlarge" width="100%" height="50vh" around>
          <Text p="xxxxxlarge" fontSize="xxxxxlarge">
            {message}
          </Text>
        </Space>
      </ComponentsProvider>
    </>
  )
}

上記の例では、setMessage('Hello, ${me.display_name}') の行のテキストを変更することで、拡張機能のテキスト出力を変更できます。

機能を追加する際は、プロジェクトのマニフェスト ファイルの application パラメータで、拡張機能に付与された利用資格の変更が必要になることがあります。