Kotlin Notebookを プラグイン開発に活用する

2026/02/12開催のpixiv App Talkの発表資料です。
https://pixiv.connpass.com/event/382298/

Transcript

1. Kotlin Notebookを プラグイン開発に活用する @fusuma
2. 自己紹介 • fusuma(ふすま) • 2021年中途入社 • pixivコミックのAndroidアプリ開発 2
3. Kotlin Notebook 3
4. Kotlin Notebookとは • データ分析などに広く使われるJupyter NotebookのKotlin版 • コードセルとドキュメントセル(Markdown)で構成されるインタラクティブな開発 環境 ◦ ドキュメントとコード、実行結果(図表などを含む)が一体になった実行可能なドキュメント ◦ 依存ライブラリの記述やプロジェクト内のコードの実行も可能 • IntelliJプラグインのプロトタイピングへの活用が今回のメイントピック ◦ プラグイン開発に使うIntelliJプラットフォームAPIをNotebook上で実行可能 4
6. プロジェクト内のコードの実行 • プロジェクトのモジュールを依存先に指定することで、プロジェクト内のコードを Notebookで実行できる ◦ Notebook上でのアプリの実装の試行錯誤や、プロジェクト特有のAPIクライアントの実行環境としての利 用などに活用できる 6
7. 導入 • Kotlin Notebookプラグインをインストール • File > New > Kotlin Notebookでファイル作成 ◦ プロジェクトを新規作成せずに既存プロジェクトに追加できるのでサクッと始められる 7
8. プラグイン開発 8
9. そのプラグイン、オーバーキルかも？ • 公式のプラグイン開発スタートガイドで複数の代替手段が提示されている ◦ SSR(Structural search and replace)で ◦ IDEスクリプトコンソールでIDEの機能にアクセスする軽量なスクリプトを作成 • 更に今ならAgent Skillsなども有力な候補になる https://plugins.jetbrains.com/docs/intellij/plugin-alternatives.html 9
10. プラグインの出番 • 即時性が求められる • IDEに統合されたUI • IntelliJプラットフォームAPIの高度・正確な利用 ◦ 後述のPSIの利用など 10
11. Kotlin NotebookでIntelliJプラグイン開発 11
12. Kotlin Notebookでプラグインのプロトタイピング • プラグインの開発で利用するIntellijプラットフォームAPIがNotebook上で動作する ◦ ウィジェットの登録やPSI(Program Structure Interface)の利用 • プラグインのUIがNotebook上で動作する • これまでよりプラグイン開発のハードルが下がる ◦ 開発環境のセットアップが爆速 ◦ 試行錯誤の高速化 12
13. 今回つくるプラグイン • デザインシステムに則ったカラーパレットの可視化 ◦ ピクシブのデザインシステム「Charcoal」 ▪ サービスのブランドカラーを示す brand などのトークンにライト/ダークテーマごとに具 体的な色を割り当てている ▪ OSSとして実装が公開されている • トークンと色の対応表を表示するUIをプラグインとして実装 ◦ トークンと色の組み合わせを開発中にすぐに確認できるようにする 13
14. トークンと色の対応表出力イメージ 14 トークン ライトテーマ ダークテーマ brand #FFFFC400 #FFEFB800 brandDark … … … … …
15. 開発環境 • Android Studio Panda 2 | 2025.3.2 Canary 3 ◦ 今回紹介する範囲では問題なく利用できたが、一部IDEAでは動くがAndroid Studioで動かない機能があっ たので、IDEAの方が安定しそう ▪ 実行結果の出力タイプがhtmlだと表示されなかった 15
16. 準備 • Run in IDE Process を選択 • %use intellij-platform をコードセルで実行 ◦ プラグイン開発に必要なものがインポートされる 16
17. UI構築 17
18. トークンと色をマッピングする • 一旦アプリ側のコードを実行して データを取得することにする ◦ コードの静的解析から取得したいが後回し • 各テーマのトークン・色の組み合わせを 示すdata classを返す関数を呼ぶ 18 アプリ側のコード
19. 19 Notebook
20. 20 トークンと色をマッピング
21. プラグインのUI実装の選択肢 • Swing ◦ IntelliJプラットフォームの基盤になっているJava製のUIライブラリ。汎用性は最も高い ◦ 手続き的な記述 • Kotlin UI DSL ◦ 宣言的に記述できるDSL • Compose / Jewel ◦ Jewel: IntelliJプラットフォーム用のUIをComposeで提供するライブラリ ▪ プラグイン開発での利用は公式にサポートされていないが、Android Studioの実装でも使われている https://github.com/JetBrains/intellij-community/tree/master/platform/jewel ◦ Kotlin Notebook上での利用は2026/2時点では開発中 ▪ Kotlin Conf 2025のセッションでデモを交えて紹介された https://www.youtube.com/watch?v=bkd6EAPIVe0 21
22. プラグインのUI実装の選択肢 • Swing ◦ IntelliJプラットフォームの基盤になっているJava製のUIライブラリ。汎用性は最も高い ◦ 手続き的な記述 • Kotlin UI DSL ◦ 宣言的に記述できるDSL • Compose / Jewel ◦ Jewel: IntelliJプラットフォーム用のUIをComposeで提供するライブラリ ▪ プラグイン開発での利用は公式にサポートされていないが、Android Studioの実装でも使われている https://github.com/JetBrains/intellij-community/tree/master/platform/jewel ◦ Kotlin Notebook上での利用は2026/2時点では開発中 ▪ Kotlin Conf 2025のセッションでデモを交えて紹介された https://www.youtube.com/watch?v=bkd6EAPIVe0 22
23. トークン・色の対応表をUIで表示 • 23
24. Kotlin UI DSLで対応表のUIを構築 24
25. UIをIDEに統合する 25
26. UIをIDEに統合する 26 • UIをIDE上で表示できるようにする • 先ほどの対応表をTool Windowとして登録する(枠線部分に追加)
27. Tool Windowの登録 27 • Tool Windowのコンテンツ部分を提供するインタフェースを実装
33. PSIの利用 33
34. PSIからトークン・色の組み合わせを取得 34 • アプリのコードに依存せずに、コードの静的解析で取得する ◦ アプリ側のコードを実行してトークン・色の組み合わせを取得していた箇所を置き換える • PSI (Program Structure Interface) ◦ ソースコードを解析してIDEが扱うためのデータ構造にしたもの・その仕組み • PSIを利用してコードの静的解析を行う ◦ PSIからトークン・色の組み合わせを抽出する
35. Notebook上でPSIを扱う準備 35 • loadPluginsでNotebook上で他のプラグインの実装を利用できる • PSIを扱うのに必要なプラグインをロードする
36. PSIからトークン・色の組み合わせを取得 36 • トークンと色の組み合わせを返す関数にアノテーションを付与して目印にする ◦ (アノテーションは一旦アプリ側に定義した)
40. プロタイプ完成 • 色の対応表をKotlin UI DSLで構築 ◦ トークン・色のマッピングはアプリのコードを実行して取得 • Tool WindowとしてIDEに統合 • アプリのコード実行によるマッピング取得から、 静的解析を用いた方法に変更 40
41. 所感 • IntelliJプラグインのインストールでKotlin Notebookが利用できる • Notebookはプラグイン開発のプロトタイピングに活用できる ◦ IntellijプラットフォームのAPIやUIをサクッと試せる ◦ 詳細なデバッグが難しい・通常のプラグイン開発の方が情報が多いため、ハマったら通常の プラグイン開発にスイッチしながら進めると良い • Compose対応が進行中なので期待 41
42. 参考 • IntelliJ Platform SDK ◦ https://plugins.jetbrains.com/docs/intellij/welcome.html • intellij-community ◦ https://github.com/JetBrains/intellij-community/tree/master • Kotlin Notebook Meets IntelliJ Platform | PluginDevConf2025 ◦ https://www.youtube.com/watch?v=OC5u7_c3m9w • Compose Prototyping in Kotlin Notebooks | Kotlin Conf 2025 ◦ https://www.youtube.com/watch?v=bkd6EAPIVe0 42