Chrome Extension から Looker APIを読んだ際に色々分かったことを共有します。

  • 22 December 2021
  • 0 replies
  • 170 views

 

Chrome ExtensionからLookerのAPIを使ってなにか出来ないかと思い、

実装してみました。

その段階で、調べて分かったこと、今の所ここまでしか出来ないといったところを共有したいと思います。

APIの基本的な処理の流れは以下になります。

1.Client_ID/Client_Secretを使って認証を行います。

Client_ID/Client_Secretの取得はここから取得します。

このClient_IDとClient_Secretを利用します。

 

例:https://xxxxxx.looker.com/api/4.0/login&client_id=xxxxxxxx&client_secret=xxxxxxx

2.そうするとaccess_tokenが発行されますのでそれを使って今後操作をしていくことになります。


3.Access_Tokenをつかっての操作はこんな感じです。
例:https://xxxxxx.looker.com/api/4.0/queries/models/thelook-model/views/order_items/run/json?fields=order_items.total_revenue&access_token=xxxxxxxxxxxxxxxxxxxxxx&f[products.brand]=filter用の検索ワード

queries以下は操作に寄って色々変わりますが、&access_token=xxxxxxxxxxxxxxxxxxxxxxは必ずどの操作でも必要となります。

APIのリファレンスはここになります。

 

次にChrome Extensionの話です。

ミニマムなファイル構成は

manifest.json

main.js(名前は何でも良い、manifest.jsonの中で呼び出す名称と一致していれば良いです。)

Chrome Extension の開発はこの開発モードで行います。

デベロッパーモードをオンにするとパッケージ化されていない機能拡張を読み込むオプションが利用できるようになるので、上記のmanifest.jsonなどがあるフォルダを指定することで作成中の新しい機能拡張が利用できるようになります。 

開発が終了したらパッケージ化してGoogleの審査を通るとようやく一般に開放できることとなります。

(今回はそこまでしていないのでご了承ください。)

ここまでがLooker APIとChrome Extensionの大きな流れになります。

 

次に試したこと

1.あるサイトに訪問した際、画面上にキーワードをLooker APIにフィルタの条件として流し込めないか?(例えば渋谷というキーワードで検索した結果、渋谷をLooker APIにフィルタの条件として付与し、APIを実行出来ないか)
結果→NGでした

理由はCORS(Cross-Origin Resource Sharing)のポリシーに違反しているため、全くことなるOrigin(domain+port)へのブラウザ内からのアクセスができないということが原因です。
CORSについてはこのサイトが参考になるかと思います。
回避策として

サーバサイドのレスポンスヘッダーを変更することで対応が可能とのことなのですが、

  • Access-Control-Allow-Origin: https://trusted-one.co.jp // 特定のサイトを許可する
  • Access-Control-Allow-Origin:* //全てのサイトを許可する(危険なので基本的にはやらない)

(今回やりたかったChrome Extensionは下の全てのサイトを許可して貰う必要がある。)

Looker側ではその対応はできないので断念。

じゃぁ、Embedで自社サイトからLookerを呼び出すのは大丈夫なのか?という話になるのですが

これはちゃんと、考えられています。

このリンクに詳細が書かれていますので必要に応じて確認してください。

 

2.最新バージョンのmanifest.jsonを利用する。

バージョン3からCORS対応しているという、書き込みを見て

このサイト等を参考に色々ためしてみたのですが、やはりLooker側から拒否され実行できませんでした。(誰か、バージョン3の書き方で行けたよという人がいれば教えて下さい。)

 

3.Chrome ExtensionのポップアップからAPIを実行するということに変更

結果→一部OK

なぜ一部なのか、Access_Tokenが取得できないのです・・

OAuthで回避できないかは確認中です。(ご了承ください。)

 

実際の動きはこのリンクにあります

テキストボックスにブランド名を入力します。

その後、弊社のデモデータにあるブランドを検索し、Revenueを表示するAPIを実行しています。

実際にはこんな感じのAPIになっています。

http://xxxxx.looker.com:1999/api/4.0/queries/models/thelook-model/views/order_items/run/json?fields=order_items.total_revenue&access_token=xxxxxxxxxxxxxx&f[products.brand]=xxxxxxx


4.今の所、固定のhost、model、explore、dimension、measure、filterなのでこれを可変にすべく

  Chrome Extension APIを使って各々のブラウザに保持するよう対応中です。

  現在、絶賛実装中。(2021/12/22)

サンプルソースのリンクになります。

 

こんな使い方もあるんだよという参考になれば幸いです。


0 replies

Be the first to reply!

Reply