見出し画像

[LT抜粋] 異種拡張技入門！ kintoneカスタマイズの種類をおさらい（kintone Café 高知 Vol.20参加報告）

M橋D輔

こんにちは、キン担ラボの本橋です。

本橋です

初鰹の季節、また高知を訪れることができました！　

厚切り初鰹

ということで、kintone Café 高知 Vol.20に参加してきました。もちろんLT枠での申込みです。

今回は異種拡張技入門です。kintoneカスタマイズのバリエーションについておさらいするとともに、自分だけのChrome拡張を5分で作る、というライブコーディングのデモを行いました。

ライブコーディングと言っても関数コメントをささっと書くとAIがズドンとコードを書いてくれるというティンカリングのライブです。コメントが十分適切であれば適切なコードが出てきます。いつの時代もコメントは大事。

前回の高知では、『メールを「書く」から「彫る」時代へ』と題してChatGPT連携プラグイン『ChattyTone』を使ったメール文面の作り方についてLTを行いました。

AIに頼りっきりの本橋です。


LTスライド

前編: kintoneカスタマイズの種類をおさらい

異種拡張技入門

引用:「４種類のkintoneカスタマイズについておさらいします」

まずはkintoneのカスタマイズの種類についておさらいです。kintoneのカスタマイズには大きく分けてこの４種類があります。

  • JSカスタマイズ

  • Webhook

  • プラグイン

  • ブラウザ拡張

それぞれ適用範囲や必要とする権限に違いがあり、『どんな機能を提供したいか』によって適切な選択肢は変わってきます。

コードを書く話ではあるので、究極的にはどれを選んでも同じ機能を実現することができます。近道はありますが、遠回りして実現することも可能です。

適用範囲

引用:「JSカスタマイズはkintoneのドメイン全体に対するカスタマイズ」

今回一番時間がかかったスライド

４つの拡張の違いについて詳しく解説していきます。

ざっと説明すると、JSカスタマイズはkintoneのドメイン全体や特定のアプリに対するカスタマイズが可能、プラグインはアプリ単体が対象、ブラウザ拡張はkintoneの権限に縛られずユーザーが自由にカスタマイズできる点が特徴、ということになります。

Webhookはkintoneのサーバー側で実行されるのでちょっと毛色が違いますね。対象はアプリ単体にURLを設定して、レコード1件単位で指定したURLに対してPOSTリクエストをします。

Chrome拡張の活用法

引用:「プラグイン設定のエクスポートインポートができるというもので」

chromeウェブストアからインストールできます。

紹介したChrome拡張『kintonePluginMigrator』は、kintoneのプラグイン設定のエクスポートやインポートを簡単に行うことができます。複雑なプラグインの設定を一発で行うことができるのは我ながら便利！

後半のティンカリングでは、kintonePluginMigratorのソースコードに手を加えながらオリジナルの機能を実装していくデモを行いました。

後編: 5分のティンカリングで自分だけのChrome拡張を開発

ティンカリングの出発点としてkintonePluginMigratorを利用

引用:「5分でChrome拡張を作ってみたいと思います」

githubに公開しているChrome拡張のコードが出発点（ボイラープレート）

後半の5分でChrome拡張をライブで作成してみました。GitHubに公開しているkintonePluginMigratorをボイラープレート代わりに使います。

手順としては以下のとおりです。

  1. ソースコードをダウンロードする

  2. それをデスクトップに配置

  3. Chromeの拡張機能を管理を開く

  4. 展開したzipのディレクトリを指定して拡張機能として読み込む

あとはソースコードに手を加えて、拡張機能の管理画面からリロードすれば実行できます。

AIを活用したティンカリング

引用:「// すべてのtdセルを取得して…とコメントを書いて」

コメントを書いたらあとはタブキー連打

AIを活用したティンカリング（少しずついじって改善する作業）のデモです。関数コメントを書いたら、あとはgithub copilotがズバッと関数を丸ごと実装してくれました。

コメントが適切であればシンプルな関数はそれだけで作業完了です。

概ねうまく動いてくれました。

残る課題

引用: 「このままでは実用には課題が残ります」

取りあえず動くものは5分で作れましたが、それだけでは不十分です。こんな課題が残ってますよ、という責任逃れのスライドを出してLTはお終いとさせていただきました。

AIコーディングは試してみるとよく分かるんですが、自分が理解しているところまでしかコードを書いてくれません。また、今のところ全体的な設計までは教えてくれないので、扱いには経験的な裏付けが必要です。

とはいえ開発効率は10倍では利かないくらい向上するので使わない手はありません。github copilot + cursorの組み合わせをぜひ試してみてください！

カスタマイズ手順の詳細

LTでお話した内容について、以前公開した記事に詳しく解説しています。

kintone用のChrome拡張開発に興味を持っていただいた方はぜひこちらもお目通しいただけると嬉しいです！

いいなと思ったら応援しよう！