非ITエンジニアの私のkintoneカスタマイズ遍歴

こちらの記事は、kintone Advent Calendar 2025の12日目、2025年12月12日担当分となります。

自己紹介

自己紹介(note)はこちらから。
今年の私の参加アドベントカレンダーはこちらから。

なぜkintoneカスタマイズを？

私の所属している組織ではkintoneを2023年から導入していますが、JavaScript/CSSカスタマイズは禁止されています。これは属人化リスクを防止するためのガバナンス設計の答えの一つとして私は正しいと考えています。また私自身は連携サービスであるgusuku Customineと、プラグインのkrewシリーズを使用しているため、特に困っていない状況になります(個人的にkintoneを導入していて優秀な人材の多いエンタープライズ企業はこの2製品を導入すればすぐに元は取れると考えています)

ではなぜカスタマイズをしているかというと理由は下記の2点になります。

・カスタマイズスペシャリストのkintone認定資格を獲りたい！
・連携サービス及びプラグインの知識を深めたい！

特にCustomineを使用しているとなぜこの動作ができるのか、この動作が難しいのか、というのが見えたりしてきます。

この記事ではコーディングできない私が今までに行ってきたカスタマイズ3つの遍歴を書いていきたいと思います。なおカスタマイズ環境は家族用のチーム応援ライセンスで行っています。

1つ目のカスタマイズ(画像表示)

きっかけはLT(ライトニングトーク)登壇前に素数を数えて落ち着くために素数アプリを作った事でした。せっかく作ったのですが数字が並んでいるだけのアプリでは寂しいので、元ネタとなった漫画の画像を一覧画面の一番上に貼り付けたくなったのが1つ目のカスタマイズのきっかけになります。こちらは一から自分でコーディングをしたのではなく、ChatGPTを利用したVibe Codingで作成しています。なお下記のコードで参照しているのはサンプル画像のURLになります。

example.js

(function () {
  "use strict";

  kintone.events.on("app.record.index.show", function () {
    if (document.getElementById("custom-header-image")) return;

    const header = kintone.app.getHeaderSpaceElement();
    if (!header) return;

    const img = document.createElement("img");
    img.id = "custom-header-image";
    img.src = "https://placehold.jp/500x500.png"; // サンプル画像URL

    header.appendChild(img);
  });
})();

実装イメージはこんな感じです。kintoneにはリッチテキストでアプリの説明をする事は基本機能で可能ですが、このような画像表示で使い方などを表記する事は一定の需要があるのではないかと思います。

実装はプログラムを書き込んだtxtファイルの拡張子をjsに変更して、アプリの設定のJavaScript/CSSカスタマイズからJSファイルをアップロードすればできます。

2つ目のカスタマイズ(kintone Café HYOGO用のクイズ)

2025年8月24日(日)に開催されたkintone Café HYOGO Vol.7でgusuku Everysiteを利用して六甲山に関するクイズのLTを行う事にしました。クイズはアメリカ横断ウルトラクイズ、高校生クイズ、オールスター感謝祭、アタック25を組み合わせたことがやりたくなって、Vibe Codingによるカスタマイズを2つ行いました。

クイズ上位ベスト10をオールスター感謝祭のように下位から順番に表示させるカスタマイズ

アタック25の海外旅行挑戦クイズを模倣したカスタマイズ

3つ目のカスタマイズ(パネルクイズアタック25)

その後本物のアタック25に近いことができるのでは？と思いChatGPTで作ろうとしましたがうまくいきませんでした。
そんな中で出会ったのがPulsarWorksさんのAquariusCoder（β版）でした。こちらはChatGPT上で動作する、kintoneのカスタマイズを手伝うコーディングエージェントで、AquariusCoderの力を得てパネルクイズアタック25をVibe Codingで再現することができました。

アタック25を一覧画面で再現しました

海外旅行挑戦クイズも詳細画面で再現しました

実際の動作や製作過程は登壇させて頂いたRPA Community ライトニングトーク支部主催のkintone縛りのLT大会！YouTubeアーカイブ動画で見ることができます。

ちなみに一番最初のプロンプトはこんな感じでした。

ここから壁打ちを120回行い、最終的に1,480行のコードになりました。

Vibe Coding・kintone JSカスタマイズについての個人的考え

このように結構難しい事をkintone上でVibe CodingによるJavaScriptカスタマイズでできてしまうのですが、遊びならともかく安易に業務に用いるのはリスクがあると個人的に考えています。少なくとも下記3点をクリアにしておく必要があると思います。

• 自分が理解しているプログラミング能力の範囲で行う

• kintoneの仕様変更にすぐ対応できる体制である

• 作った本人がいなくなっても運用できる体制である

Vibe Codingで色々できてしまうので楽しくなってしまうのは仕方ないのですが、リスクは十分に認識しておく必要があると思います。それに黎明期と違って今はプラグイン・連携サービスも充実していますので属人化リスクを回避するためにはカスタマイズよりもオフィシャルパートナーの製品を使った方が良いと思っています。
導入事例の古い事例を見ると結構昔はカスタマイズしてますね。

またVibe Codingを実際にやってみて、生成AIが出てくる前に自力でプログラミングを行っていたITエンジニアの方の凄さが身に染みてわかりました。
私自身はやってみたいネタはまだまだありますので来年もカスタマイズを続けて行きたいと思います。