こんにちは。ISID CIT事業部の熊倉です。
昨年7月、Googleが提供しているBIツール「Looker」でExtension Frameworkという新しい機能が追加されました。 今回の記事ではExtension Frameworkの開発方法について検証する目的で作成したアプリケーションについて紹介していきます。 本記事がExtension Frameworkの開発イメージやメリットについての理解の手助けになれば幸いです。
1. Lookerとは？
「Looker」はGoogle Cloudが提供しているBIサービスです。 Lookerは純粋な分析機能の他に様々なデータ活用の基となるデータプラットフォームとして利用できる機能が多く提供されており、他のBIサービスにはない特徴があります。
具体的には、
- 豊富なAPI
- 外部アプリケーションに分析機能を埋め込める「組み込み分析」機能の提供
- Lookerのダッシュボードや分析画面を外部アプリケーションに組み込むことができます
- Looker Action
- 分析して得た結果や条件に応じて、Action Hubと呼ばれるサーバを経由して外部サービスにデータを連携できます。
- 連携できる外部サービス（TwilioやSlack等々）は数十種類公開されております。
- Teamsのアクションについては自分が作成した経緯があったりします :)
等々の機能が提供されています。
データベースと接続したLookerを通して、分析（Modern BI & Analytics）、既存の分析との融合（Integrated Insight）、データを起点としたワークフローの実行（Data-driven Workflows）、データアプリケーションの作成（Custom Application）を実現できます。
（引用：Advanced Data Analytics Platform）
2. Extension Frameworkとは？
Extension Frameworkとは2021年7月22日に発表されたLooker上でJavaScriptのアプリケーションをホスティングできる機能です。
前述しているように、Lookerは以前より外部連携機能（API連携、組込み機能）が充実していました。 しかし、アプリケーションを開発する際には（当然ですが）インフラの用意やネットワークの設定が必要で、開発者は機能開発以外に環境構築を行うハードルがありました。 Looker環境上でアプリケーションが実行できるExtension Frameworkの登場で、そのようなインフラの構築をLookerが担保してくれるようになり、開発者がより機能の開発に集中できるようになりました。
（引用：拡張フレームワークを使用して Looker での構築を簡単にする）
Extension Frameworkでは以下のようなことが可能になっております。
- 外部APIへのリクエスト（情報の取得/更新）
- データベースにないデータの取得、表示
- Lookerの分析機能の埋め込み
- サードパーティのライブラリを利用
- 標準で表現できない描写（ガントチャート、ツリー表示）
また、Looker上でホスティングされることによる利点も享受でき、ホスティングしたアプリケーションは
といったことが利用可能です。
2.1 Extension Frameworkの利用例
Extension Frameworkを利用する事で、Lookerの分析で得た知見を次のアクションにつなげることができたり、通常のダッシュボードでは表現が難しかったリッチなビジュアライズの提供ができます。
- BIによる分析結果を利用したデータの更新
- Extension Frameworkから外部のAPIを叩く事で、BIによる分析結果を次のアクションにつなげることが可能です
- Lookerに統合されたデータベースのマスタを管理することも可能に
- アプリケーション例）予実管理アプリケーション
- 予算マスタをExtension Frameworkで管理。Looker上で分析から管理まで業務を完結できる。
- Extension Frameworkから外部のAPIを叩く事で、BIによる分析結果を次のアクションにつなげることが可能です
- リッチなビジュアライズの提供
- Lookerがデフォルトで表現できない描写（ガントチャートやツリー表示等）もJavaScriptのライブラリをExtension Frameworkにインポートすることで描写が可能です
- 例えば特定のユースケースに絞ったダッシュボードを作成したり、フィルター機能をマスクし分析をシンプルかつ簡単に分析するようなアプリケーションが作成可能です
- アプリケーション例）顧客シングルビュー
3. Extension Frameworkの開発方法
この章では具体的にExtension Frameworkを利用した開発を行う際にどのようなスキルが必要になるのか、また、Googleから提供されているライブラリ/ツールについて紹介をします。
3.1 開発に必要なスキル
Extension FrameworkはJavaScript（or TypeScript）を使用し開発します。 また、アプリケーション構築に必要なSDKも提供されております。純粋なJavaScriptのライブラリとして提供されている他に、それらをReactから利用できる形でラップしたSDKも提供されています。
開発スキルのパターンをまとめると、
- JavaScript + raw JavaScript SDK
- TypeScript + raw JavaScript SDK
- JavaScript + React SDK
- TypeScript + React SDK
から選択することとなります。
JavaScript / TypeScriptの選択は好き嫌いがあると思いますので自由に選択していただいて良いかと思います。 Reactを利用するかどうかについてはLookerからReact用のUIコンポーネントが提供されていたり、参照できるサンプルの数に差があったりするためReactの利用をお勧めします。 （と言ってもスキルセットの問題もあると思うので、最終的には自由に選択して問題ないです）
3.2 ライブラリ/ツール
Extension Frameworkを利用したアプリケーションを開発するために、公式から以下のようなライブラリ/モジュールが用意されています。
- Looker Extension SDK
- Extension FrameworkからLooker環境内部へアクセスするインターフェースとしてSDKが提供されています。SDKを通してLooker public API にアクセスし、API経由でLooker環境内部とやり取りをします。
- Reactに最適化されたライブラリも提供されています。
- Looker components
- Embed SDK
- create-looker-extension utility
- よくある対話形式で環境構築してくれる便利ツールです。
- コンソールから
yarn create looker-extensionまたは（npx create-looker-extension）で利用可能です。
- Looker extension framework examples
- Googleが用意してくれているサンプル集です。Extension Frameworkについて参照できる情報が少ないため、実際に開発してく際はサンプルを参照し、開発していくことになると思います。
本記事では具体的な開発方法について詳細を記述しませんが、より詳しく知りたい方は以下のブログの内容等が参考になるかと思います。
Extension Frameworkを利用してPDTの依存関係を表示させる
4. アプリケーションを作成してみた
開発方法について検証する目的で実際にExtension Frameworkを利用したアプリケーションを開発してみました。
4.1 想定したユースケース
アプリケーションを作成する際の題材としてLINEとつながる唯一のビジネスチャットツール『LINE WORKS』を今回は採用し、LINE WORKSの顧客情報とCRMの顧客情報を連携できる アプリケーションをExtension Frameworkで作成しました。
アプリケーションの紹介の前にまず題材として取り上げたLINE WORKSについて紹介をします。
4.1.1 LINEWORKSについての紹介
ビジネスチャットツール「LINE WORKS」はLINEユーザとコミュニケーションできる「LINE連携機能」が提供されており、 特に小売業で顧客のLINEとのやり取りで「LINE連携機能」が活用されています。 https://line.worksmobile.com/jp/solutions/retail/
利用することでスタッフや営業(LINE WORKSユーザ)とお客さん(LINEユーザ)との間で交わされたトーク内容や顧客の情報を管理できます。
ただし、LINE WORKSの顧客情報は独立して管理されている為、もし既存のCRMの顧客情報と一元的に管理したいとなった場合、ユーザがある程度情報を確認しながら実際に紐づけ操作を行う必要があります。 今回はCRMで管理している顧客情報とLINE WORKS上で管理されている顧客情報を参照し、それらの紐づけを管理できるアプリケーションを開発しました。
4.1.2 スキーマ
DBのスキーマとして以下のような構造を想定しました。
user- LINEWORKSのユーザ(上記のスタッフや営業)
- LINE WORKSのAPIから取得できる情報を基にカラムを定義
lw_contact- LINEWORKSの顧客情報
- LINE WORKSのAPIから取得できる情報を基にカラムを定義
talk- LINEWORKS上で交わされたコミュニケーション内容
- LINE WORKSのAPIから取得できる情報を基にカラムを定義
contact- CRMで管理している顧客情報
- カラムについては特定のサービスを意識せず想定で用意しました。
lw_contact_link-
contactとlw_contactを紐付けるレコードが格納
-
実際に紐付けを管理しているのは lw_contact_linkテーブルです。
アプリケーションについて 「CRMの顧客情報とLINE WORKSの顧客情報を連携する」 アプリケーションと紹介しましたが、言い換えれば 「contact、lw_contactの内容を参照し、lw_contact_linkのレコードを更新できる」 アプリケーションを今回作成したことになります。
4.2 アーキテクチャ
アプリケーション全体のアーキテクチャを紹介します。
今回のアプリケーションではLookerに接続するDWHとしてBigQueryを選択しました。
まず、LookerとBigQueryを接続し、あらかじめLook（テーブル / ビジュアライゼーションをレポートとして保存したもの）を作成しています。 そのLookをExtension FrameworkのSDK経由で取得し、アプリケーションに表示するという構成を取っております。 （図の「テーブル取得」→「Lookの取得」→「LINEWORKSとCRMの顧客情報を参照」の部分）
更新する際は、Extension Framework（JavaScript）側でBigQueryにて実行したいクエリを作成し、Lookerと既に接続しているコネクションを利用し、テーブルにUpdateをかけています。
今回のアプリケーションでは直接BigQueryに対してUpdateするクエリを実施するのではなく、Lookerを経由してデータの更新を行っています。 Extension Frameworkでは外部に対してAPIを叩くこともできますので、例えばBigQueryのクライアントライブラリをExtension Framework側でインポートし直接BigQueryに対してAPIを叩くといった設計も可能です。
今回はデータの保存場所としてBigQuery ストレージのみを使用していますが、例えばデータ取り込み元としてGCSを利用している想定をし、GCSに対してデータの更新を行うといった設計ももちろん可能です。
4.3 作成したアプリケーションの紹介
アプリケーションは以下の操作フローを想定し、作成を行いました。
- CRM顧客の一覧が表示される
- 一覧から1人を選択する
- CRM顧客詳細画面が表示される
- CRM顧客詳細画面から『LINEWORKSユーザ紐付け』ボタンをクリック。紐付けモーダルが表示される。
- LINEWORKSユーザの一覧が表示される
- LINEWORKSユーザを1名選択し、CRM顧客と連携（または連携解除）をする
以下、アプリケーションの機能についてアニメーションを使用しながら紹介します。
4.3.1 CRM顧客情報を参照
（動画では、上記フローの1,2,3まで実施しています）
左のサイドメニューから「Contact」を選択する事で顧客の一覧が表示され、その中で一名を選択するとその詳細画面に遷移します。
一覧で表示している情報や詳細画面の「Profile Information」で表示している情報は全てあらかじめ作成したLookから情報を取得しているため、「一覧に表示させるカラムを変更したい」「順番を変更したい」という場合は元のLookを編集する事で変更可能です。
4.3.2 LINEWORKS顧客情報とCRM顧客情報を連携
（動画では上記フローの4,5,6まで実施しています）
顧客情報詳細のヘッダーにある『LINEWORKSユーザ紐付け』ボタンを押下する事で、モーダルが表示されます。 モーダルではLINE WORKSの顧客情報一覧が確認でき、行右側の「連携」（または連携解除）ボタンを押す事で「参照していたCRMの顧客情報」と「LINEWORKSの顧客情報」が連携されます。
アプリケーションの機能紹介は以上になります。
4.2 実際に作成してみての所感
開発ではTypeScript + Reactを利用しました。
開発した所感として通常のReact開発と同じ感覚で開発できると感じました。 フレームワーク特有の記述方法も多少はありますが基本的に自由に開発できるかと思います。 React Routerによるルーティングも可能ですし、（今回の開発では使用していませんが）Reduxによる状態管理も可能です。
開発に必要なスキルセットとしてJavaScript / TypeScript / Reactの知識の他に、Looker APIの知識が必要となりますが、 APIを実際の環境のリソースに対してGUIから叩くことができるアプリケーション『API Exploer』が公式で用意されていたりするのでLookerの仕様に明るくない方でも十分開発ができるのではないかと思います。
5. まとめ
以上のように、Extension Frameworkを利用することでLookerの集計/分析機能を利用したアプリケーションをインフラ構築といった作業を経ずに簡単に素早く実装できます。 今回紹介したアプリケーションのように、ある意味汎用的に作られているパッケージ製品では実現が難しかった特別な要件 / 業種/ 職種に最適化されたアプリケーションを構築できます。
Extension Frameworkの登場で「データの集計/分析（ビジュアライズ）」から「意思決定」といった データドリブンなプロセスを Looker環境上で完結して提供できるようになりました。
「データドリブンを実現したいが、具体的な方法がわからない」といった場合にLookerとExtension Frameworkは1つの回答になるのではないかと思います。
最後までお読みいただきありがとうございました。
執筆：@kumakura.koki.isid、レビュー：@sato.taichi （Shodoで執筆されました）
