kintone異種拡張技戦

Mixed Extension Competition

本橋大輔@キン担ラボ

2023/11/28 devkin meetup!

こんなお話

これまでkintoneプラグインとか作ってきました

先日chrome拡張作ってみたら思いのほか楽しかった

プラグインと組み合わせたらもっと楽しいのでは？

本橋大輔

1977年の埼玉出身 / 2004年から徳島在住
ものづくり（木工と電子）が趣味です

kintoneは2014年から、システム開発基盤として見たバランスの良さに惚れ込みプラグイン開発を中心に関わっています

異種拡張技とは

異種拡張技とは、様々な拡張スタイルをkintone上で競い合うスリリングな機能拡張のことです。異なる技術や戦略がぶつかり合い、時には予測不可能な展開が繰り広げられるのです。力強いJavaScriptから緻密なAPI連携、そして華麗なブラウザ拡張まで、異種拡張技はまさに多様性の宝庫。

さあ、リングの上で今日も新たな伝説が生まれようとしています。目を離すな！興奮と驚きの連続、それが異種拡張技の世界です！

民明書房館『すごいぞ世界の拡張技(ChatGPT版)』より

概要

前編: kintone拡張技の世界

後編: 演舞（デモ）

kintone拡張技の世界

前編

kintoneの拡張を種類別に見ていきます

多様なスタイルの拡張技

先日Chrome拡張を作ってみました

• 石際さんご助言ありがとうございました！

chromeストアに公開中

kintonePluginMigrator

https://chromewebstore.google.com/detail/kintonepluginmigrator/pndmdhhanlckeimjahjfijelpkbgoeac

プラグイン設定をダウンロード

note書きました

[kintone] 管理者と開発者に捧ぐChrome拡張 プラグインの設定をどこからでも保存&読込みできます
https://note.com/motohasystem/n/nfc3048198ca2

面白い

作ってみて思った

プラグインやJS拡張が届かなかった領域をフォローできる

kintoneの機能拡張手段として選択肢に入れておきたい

届かなかった領域をフォロー？

どんな拡張がkintoneにあるっけ？

そもそも

おさらい

JSカスタマイズ

JavaScirptのコードを直接kintoneに組み込む拡張技。特定の一つのアプリに対して適用することができる。適用にはシステム管理権限を必要とする。

プラグイン

パッケージ化したJSやCSSをkintone環境にインストールして、アプリ単位で適用する拡張技。アプリ管理者はプラグイン設定も管理できる。

Webhook連携

レコード操作に応じてkintoneサーバー側で発火するサーバー間通信拡張技。他の拡張技と少し毛色が異なる。

ブラウザ拡張

new!

chromeなどのブラウザにインストールする拡張技。kintoneに限らずあらゆるWebサイトで機能する。

どんな特徴がある？

拡張技の選定基準

A.適用範囲の違い

B.パラメータの設定

C.管理に必要な権限

例: 絞込み条件の再利用

☆ブックマーク

• ユーザーが保存してそのユーザーが使う

一覧に保存

• 管理者が保存して全ユーザーが使える

たとえば

A. 適用範囲の違い

何に対する拡張技？

適用範囲の違い

• JSカスタマイズ
  • アプリ単体
• プラグイン
  • すべてのアプリ管理者が適用できる
  • 設定はアプリ単位に保存
• ブラウザ拡張
  • cybozu.comを含むすべてのWebサイト（特定のドメインに制限可能）

B.パラメータの保存

プログラムの設定値はどこに格納されている？

パラメータの保存

• JSカスタマイズ
  • システム管理者が設定したパラメータをユーザーが使う
  • ソースコード中に書き込まれている
• プラグイン
  • アプリ管理者が設定したパラメータをユーザーが使う
• ブラウザ拡張
  • ユーザーが設定したパラメータをユーザーが使う
  • ブラウザ拡張の設定画面からブラウザに保存

C.管理に必要な権限

• JSカスタマイズ
  • システム管理者がインストールしてユーザーが使える
• プラグイン
  • システム管理者がインストールできる
  • アプリ管理者が適用＆設定してユーザーが使える
• ブラウザ拡張
  • ユーザーがインストール＆設定してユーザーが使える

ブラウザ拡張はユーザー管理

管理権限を持たないアカウントもkintoneを拡張できる

ブラウザのアカウント切り替えで設定も複数持てる

ユーザーの自由度を増やす拡張技

選定は誰にとどんな権限をで考慮したい

異種拡張技演舞

パート２

プラグイン ✕ JSカスタマイズ

ChattyTone

ChatGPTとkintoneを連携するプラグイン

AI相談プラグイン『ChattyTone（おしゃべりなkintone）』の命名とアイコン作成のためのAI相談プロセス
https://note.com/motohasystem/n/nee5fa6c16316

どんな機能？

プロンプトをChatGPT APIに投げて、結果を出力フィールドに書き込む

ChattyToneの弱点

複数フィールドを組み合わせてプロンプトを作るには計算式を使う必要がある

JSメンタ郎

JSカスタマイズ開発に特化したペアプロミングGPTs

[kintone] ChatGPTの新機能！ GPTsはJSカスタマイズのペアプロミングメンターを20ドルで雇える仕組みだ！
https://note.com/motohasystem/n/naee115beee59

どんな機能？

ペアプロミングでJSカスタマイズを書いてくれるプログラミングのメンターです

ChattyToneの弱点をJSメンタ郎が補完

計算式を使わずにフィールドを結合したい

⇩

%%フィールドコード%% みたいなプレースホルダ置換が欲しい

ChattyToneの弱点を補完するJSカスタマイズをメンタ郎に書いてもらうデモ

デモ

他の異種拡張技戦は？

例１: Webhookで変換したcsvファイルをプラグインでプレビューしてからアプリにインポート

例１: Webhookで変換したcsvファイルをプラグインでプレビューしてからアプリにインポート

A.適用範囲	アプリ単体	アプリ単体
B.パラメータ	連携先	アプリ
C.権限	システム管理	アプリ管理

システム管理者とアプリ管理者が設定した変換処理を
ユーザー権限でアプリにインポート

ここから先は「こういうのもできそう」というアイデアのお話

例２: プラグインで指定した入力フィールドと出力フィールドの間の変換処理を(GPTsで生成した)JSで定義

例２: プラグインで指定した入力フィールドと出力フィールドの間の変換処理を(GPTsで生成した)JSで定義

A.適用範囲	アプリ単体	アプリ単体
B.パラメータ	アプリ	システム
C.権限	アプリ管理	システム管理

システム管理者が登録したJSのロジックを、アプリ管理者が変換処理に適用して、
ユーザーは何も知らずに使用する

例３: JSカスタマイズで処理した集計結果をブラウザ拡張側でグラフ描画

例２: JSカスタマイズで処理した集計結果をブラウザ拡張側でグラフ描画

A.適用範囲	アプリ単体/kintone全体	cybozu.com
B.パラメータ	システム	ブラウザ
C.権限	システム管理	ユーザー

システム管理者が登録したJSによる集計結果を、ユーザーは自分で設定したグラフとして描画する（あるいは自分で設定したネイティブアプリに連携するとか..）

番外編

devkin meetup! のロゴ作りませんか？

(時間が余ってたら...)

ロゴ郎

最後に

kintone Café 徳島 vol.6

2月10日に開催予定です！

＼ご清聴／

ありがとうございました