コーディングエージェントに 独自Extension書かせてみた

Jagu'e'r データ利活用分科会 Looker User Meetup Part 5

Transcript

1. コーディングエージェントに 独⾃Extension書かせてみた 〜僕にも出来るLooker Extension開発〜 2025/12/17 Looker User Meetup ⾯⽩法⼈カヤック 池⽥将⼠
2. 先に、会社紹介 鎌倉の地にて、主にWeb技術を 用いて 人の印象に深く残るような面白コ ンテンツを作る会社 ゲームからWebサービス、ミュージアムetc… 様々なことに挑戦
3. 弊社の特徴
4. 弊社の特徴
5. 弊社の特徴 サービス‧事業のライフサイクルが短い サービス‧事業の数が多い サービス‧事業の幅が広い データ整備、混ぜるな危険
6. @mashiike 2016年12月にカヤックにJoin - サーバーサイドエンジニア - データエンジニア 2019年 2022年 2025年 ⾃⼰紹介
7. @mashiike - サーバーサイドエンジニア - データエンジニア 面白法人カヤックと『北欧、暮らしの道具店』を運営する株式 会社クラシコム様との協業プロジェクト開始 ここでLookerを初めて触る https://www.kayac.com/news/2022/09/interview_kurashicom 2019年 2022年 2025年 実は、Looker歴 6年くらい 協業先でずっと触っていた。 今年になって やっと所属会社でLooker導入 ⾃⼰紹介 https://hokuohkurashi.com/ 株式会社クラシコム様 といっしょにお仕事する中で Lookerの良さを体感
8. @mashiike - サーバーサイドエンジニア - データエンジニア 面白法人カヤックと『北欧、暮らしの道具店』を運営する株式 会社クラシコム様との協業プロジェクト開始 ここでLookerを初めて触る https://www.kayac.com/news/2022/09/interview_kurashicom 2019年 2022年 引き続き、株式会社クラシコム様でLookerを触わって良さ を体感する。 この頃から、カヤック本体で『Lookerいいぞぉー布教活動 を始める』 カヤックの特性上の問題で予算感が合わなくて 導入できない問題 2025年 実は、Looker歴 6年くらい 協業先でずっと触っていた。 今年になって やっと所属会社でLooker導入 ⾃⼰紹介 https://www.kayac.com/ 事業多すぎ！！！ やってること バラバラ過ぎ！ 事業部の予算がｒｙ
9. @mashiike - サーバーサイドエンジニア - データエンジニア 面白法人カヤックと『北欧、暮らしの道具店』を運営する株式 会社クラシコム様との協業プロジェクト開始 ここでLookerを初めて触る https://www.kayac.com/news/2022/09/interview_kurashicom 2019年 2022年 引き続き、株式会社クラシコム様でLookerを触わって良さ を体感する。 この頃から、カヤック本体で『Lookerいいぞぉー布教活動 を始める』 カヤックの特性上の問題で予算感が合わなくて 導入できない問題 2025年 ゲーム事業の方にアプローチして、『Looker入れてみよう か！』となる。 (今ココ) カヤックの本体でやっと Lookerが入る 所属会社に Lookerに入ったので本会への参加券 Get！ 実は、Looker歴 6年くらい 協業先でずっと触っていた。 今年になって やっと所属会社でLooker導入 ⾃⼰紹介 https://www.kayac.com/ir/news 2025年12月期 第３四半期 決算説明会資料 より参照 ハイカジ調子いいね！ ハイカジになら Looker入れても・・・
10. @mashiike 2016年12月にカヤックにJoin - サーバーサイドエンジニア - データエンジニア 面白法人カヤックと『北欧、暮らしの道具店』を運営する株式 会社クラシコム様との協業プロジェクト開始 ここでLookerを初めて触る https://www.kayac.com/news/2022/09/interview_kurashicom 2019年 2022年 引き続き、株式会社クラシコム様でLookerを触わって良さ を体感する。 この頃から、カヤック本体で『Lookerいいぞぉー布教活動 を始める』 カヤックの特性上の問題で予算感が合わなくて 導入できない問題 2025年 ゲーム事業の方にアプローチして、『Looker入れてみよう か！』となる。 (今ココ) カヤックの本体でやっと Lookerが入る 所属会社に Lookerに入ったので本会への参加券 Get！ 実は、Looker歴 6年くらい 協業先でずっと触っていた。 今年になって やっと所属会社で Looker導入 ⾃⼰紹介
11. さて、そんな僕ですが‧‧‧ 所属会社で今年に Lookerが⼊ったので Extension開発にチャレンジ！
12. Looker Extension開発の敷居の⾼さ LookMLはわかるけど、 TypeScript+React.jsはわからない！ 高い壁がある
13. そうだ！ Coding Agentに書いてもらおう コレで簡単に作れる！！！
14. そう思っていた時期が   僕にもありました…
15. 最⼤の落とし⽳は‧‧‧ の上で動くということ
16. Coding Agent(     )  普通のWeb AppのReact.jsは スイスイ書けるが‧‧‧
17. Extension としては その書き⽅、動かない！が多い
18. 例えば‧‧‧  import React from 'react' import { ExtensionProvider40 } from '@looker/extension-sdk-react' export const App: React.FC = () => ( <ExtensionProvider40> <a href="https://www.google.com" target="_blank" rel="noopener noreferrer"> Googleへ </a> </ExtensionProvider40> ) こんな単純なコードで、 単純なリンクが置いてあるだけのExtensionでも‧‧‧
19. 例えば‧‧‧  開けなぁああああい！！！ ※見る人がみると一発で原因がわかるらしいです。
20. 例えば‧‧‧  Errorメッセージ⾒ればわかりそうですが聞いてみます。
21. 例えば‧‧‧  Gemini君は、Buttonに変えましょう！！！と提案します。
22. 例えば‧‧‧  buildして再度表⽰しようとすると‧‧‧ 表⽰できなあぁぁぁあああい！
23. 例えば‧‧‧  そして、会話すること 12回⽬…
24. 例えば‧‧‧  import React, { useContext } from 'react' import { ExtensionProvider40, ExtensionContext40 } from '@looker/extension-sdk-react' import { ComponentsProvider, Button } from '@looker/components' const AppContext: React.FC = () => { const { extensionSDK } = useContext(ExtensionContext40) return ( <ComponentsProvider> <Button onClick={() => { extensionSDK.openBrowserWindow('https://www.google.com', '_blank') }} > Googleへ </Button> </ComponentsProvider> ) }; export const App: React.FC = () => { return ( <ExtensionProvider40> <AppContext /> </ExtensionProvider40> ) }
25. 例えば‧‧‧  開けた！！！ 🎉
26. 例えば‧‧‧リンクが⼤変  なんで？？ 苦戦しすぎじゃないっすか？
27. Looker Extensionはiframeの中  https://docs.cloud.google.com/looker/docs/extension-framework-react-and-js-code-examples?hl=ja
28. GEMINI.mdにはこう書きます。 # Looker Extension 開発 このアプリケーションはLooker Extension Frameworkを使って書かれるアプリケーションです。 Looker Extensionはサンドボックス化されたiframeの中で動くアプリケーションであるため、普通の Web アプリケーションのReact.jsとは趣が異なります。 普通のWebアプリケーションの常識を疑い、参考リンクをよく調べてから、コーディングに臨んで ください。 ## 参考リンク - https://docs.cloud.google.com/looker/docs/intro-to-extension-framework?hl=ja 拡張機能の概要 - https://docs.cloud.google.com/looker/docs/extension-framework-react-and-js-code-examples?hl=ja コード例
29. これで、多少はマシになります。
30. だが、しかし、そもそも 彼ら（  ）は ドキュメントを調べるのが 上⼿ではない…。
31. そこで‧‧‧
32. 「NotebookLM + DeepResearch」の併⽤ 餅は餅屋！ 調べ物はDeepResearch
34. 例: React Router 例えば、StandaloneのExtensionでページを作ろうとして、リンク押してもうまく動かん！ import React, { useContext, useEffect, useState } from 'react' import { BrowserRouter, Routes, Route, Link } from 'react-router-dom' /* ... */ export const AppContent: React.FC = () => { const { extensionSDK } = useContext(ExtensionContext40) /* ... */ return ( <ComponentsProvider theme={theme}> <BrowserRouter> <!-- ... --> <Box flex={1} p="u3" overflow="auto"> <Routes> <Route exact path="/" component={DashboardCapturePage} /> <Route exact path="/canvases" component={CanvasListPage} /> <Route exact path="/canvases/:canvasId" component={CanvasPage} /> <Route component={NotFoundPage} /> </Routes> </Box> </Box> </BrowserRouter> </ComponentsProvider> ) } こんなコードを書きがちだけど…
35. 例: React Router DeepResearchで調べてみると、なんか⾊々と書かれているなぁ… 公式リンクがあるから眺めてみるとBrowserRouter使うなって書いてる！！！！！？ https://docs.cloud.google.com/looker/docs/extension-framework-react-an d-js-code-examples?hl=ja#routing_and_deep_linking
36. 例: React Router DeepResearchの結果をCodingAgentに与えると… こういうふうに書き換える import React, { useContext, useEffect, useState } from 'react' import { BrowserRouter, Routes, Route, Link } from 'react-router-dom' /* ... */ export const AppContent: React.FC = () => { const { extensionSDK } = useContext(ExtensionContext40) /* ... */ return ( <ComponentsProvider theme={theme}> <BrowserRouter> <!-- ... --> <Box flex={1} p="u3" overflow="auto"> <Routes> <Route exact path="/" component={DashboardCapturePage} /> <Route exact path="/canvases" component={CanvasListPage} /> <Route exact path="/canvases/:canvasId" component={CanvasPage} /> <Route component={NotFoundPage} /> </Routes> </Box> </Box> </BrowserRouter> </ComponentsProvider> ) } CodingAgentもWeb検索ツール使うけど、大量の情報から正しい情報を探し出すのは やはりDeepResearchのほうが強かった。 import React, { useContext, useEffect, useState } from 'react' import { Switch, Route, Link } from 'react-router-dom' /* ... */ export const AppContent: React.FC = () => { const { extensionSDK } = useContext(ExtensionContext40) /* ... */ return ( <ComponentsProvider theme={theme}> <!-- ... --> <Box flex={1} p="u3" overflow="auto"> <Switch> <Route exact path="/" component={DashboardCapturePage} /> <Route exact path="/canvases" component={CanvasListPage} /> <Route exact path="/canvases/:canvasId" component={CanvasPage} /> <Route component={NotFoundPage} /> </Switch> </Box> </Box> </ComponentsProvider> ) }
37. こうして、 コーディングエージェントに 書かせたものが こちらになります。。。
38. デモ
39. デモ ダッシュボードのキャプチャーを撮って その上からお絵かきできるExtension
40. まとめ コーディングエージェントにLooker Extensionを書い てもらうには⼯夫が必要 DeepResearchとNotebookLMを⽤いてドキュメント を調べて、それをコーディングエージェントに伝える とうまくいきやすい Looker Extensionはサンドボックス化されたiframe内 で動くんだぞ！と意識させるとうまくいきやすい