Looker 拡張機能のビルド

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

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

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

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

拡張機能に対する Looker の構成

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

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

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

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

   

   connection パラメータの connection_name を、インスタンスの有効なデータベース接続の名前に置き換えます。この拡張機能には 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 で、[Validate LookML] をクリックし、[Commit Changes & Push] をクリックしてから [Deploy to Production] をクリックします。

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
   

   この拡張機能は、マニフェスト ファイル http://localhost:8080/bundle.js の url パラメータで指定されたローカル開発用サーバーで 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 パラメータで、拡張機能に付与されている権限を変更する必要がある場合があります。