Looker 拡張機能のビルド

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

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

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

次の手順は、上記の要素を構築する方法を示しています。

拡張機能用の 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 パラメータは、拡張機能にラベルを割り当て、Looker に拡張機能の JavaScript を検索する場所を指示し、拡張機能のエンタイトルメントのリストを提供します。エンタイトルメントは、拡張機能がアクセスできる Looker リソースを定義します。そのリソースが権限のリストに含まれていない場合、拡張機能は Looker リソースにアクセスできません。

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

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

   アクセス方法Git を構成するページのGit を構成するLooker IDE の右上にあるボタンをクリックするか、Git 接続の設定とテストドキュメント ページのプロジェクト構成をご覧ください。

拡張機能のプロジェクトを設定し、それを Git に接続したら、拡張機能テンプレート ファイルを生成する準備ができています。

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

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

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

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

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

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

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

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

   yarn create looker-extension <extension_name>
   

2. 拡張機能名を確認するか、別の名前を指定して、拡張機能のビルドに使用する言語とフレームワークを選択します。

   

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

   

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

   cd <extension_name>
   

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

   yarn install
   

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

   yarn develop
   

   拡張機能が http://localhost:8080/bundle.js で実行され、JavaScript がローカルで提供されるようになりました。

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

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

   

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

8. LookML IDE で [LookML を検証] をクリックし、[Commit Changes & Push] をクリックしてから [本番環境にデプロイ] をクリックします。

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

   Looker のメインメニューの [アプリケーション] セクションに、新しい拡張機能の名前が表示されます。

10. [Applications] セクションで拡張機能を選択して、拡張機能の出力を表示します。

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

Looker は、https://github.com/looker-open-source/extension-examples に、いくつかの拡張機能テンプレートを含む Git リポジトリを保持しています。これらの例のいずれかを使用する場合は、その例のリポジトリに移動し、次の手順に沿って操作します。

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

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

   git clone git@github.com:looker-open-source/extension-examples.git
   

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

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

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

   yarn install
   

   Node のバージョンを更新するか、Node バージョン マネージャー を使用して Node のバージョンを変更する必要があります。

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

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

   

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

6. LookML IDE の右上にある [LookML を検証] をクリックし、[Commit Changes & Push] をクリックしてから [本番環境にデプロイ] をクリックします。

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

   yarn develop
   

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

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

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

9. [Applications] セクションで拡張機能を選択して、拡張機能の出力を表示します。

拡張機能の変更

基本的な拡張機能を作成したら、適切な 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, ${value.display_name}`).

機能を追加する際は、プロジェクト マニフェスト ファイルの application パラメータで、拡張機能に付与されている権限を変更する必要がある場合があります。