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 のコンテンツをプロジェクトのマニフェスト ファイルに貼り付けます。

   

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

   注: 生成された manifest.lkml ファイルの内容には、project_name LookML パラメータが含まれています。project_name パラメータを使用するには、ローカル プロジェクト インポート Labs 機能を有効にする必要があります。これを行わないと、この手順の次のステップで LookML バリデータから警告が返されます。

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

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

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

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
   

   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. [アプリケーション] セクションから拡張機能を選択して、拡張機能の出力を表示します。

拡張機能の変更

基本的な拡張機能を作成したら、適切な 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 パラメータで、拡張機能に付与されている権限を変更する必要がある場合があります。