1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【#kintone100日チャレンジ】Day 1: driver.jsを活用して入力ナビゲーションプラグインを作ってみた

1
Last updated at Posted at 2026-04-01

day001.png

面倒解決エンジニアの森田ユウゴです。
台湾からお届けする「#kintone100日チャレンジ」の記念すべき1日目。

👉 "#kintone100日チャレンジ"の概要はこちら

本日は、新入社員や異動してきたばかりのメンバー(初めてアプリを操作するユーザー)向けの「入力ナビゲーション(powered by driver.js)」を開発しました!

「入力ナビゲーションプラグイン」について

🎯 なぜ開発したか?(現場の課題とベネフィット)

  • 現場の「不」: kintoneでアプリを作るのは簡単ですが、それを他人に使ってもらうとしたら話は別です。アプリを作った際、必ずと言っていいほど発生するのが「どこに何を入力すればいいの?」という質問攻めです。その度に画面キャプチャを切り貼りして分厚いマニュアルを作ったり、差戻し対応に追われたり……。この「入力迷子」と「マニュアル保守」のコストは、現場の大きな負担になっています。
  • 導入後の世界(ベネフィット): 外部マニュアルは一切不要!kintoneの画面上に「入力ツアー」を内蔵させることで、ユーザーは光るガイドに従って入力するだけになります。オンボーディングの時間を劇的に短縮し、質問対応の時間をゼロにします!

✨ これで出来ること(機能概要)

まずはこちらをご覧ください。

  • ステップバイステップの入力ガイド: レコード画面の「ツアーを開始」ボタンを押すと、入力すべきフィールドが順番にハイライトされます。
  • ノーコードでステップ設定: プラグイン設定画面から、対象フィールドをクリックするだけで直感的にガイドの順序や説明文を設定可能です。
  • 画面別の個別設定: 「レコード追加/編集画面」と「詳細画面」で、それぞれ別のガイドシナリオを組むことができます。

課題

現時点では下記のような課題が残っています。

  • HTMLサニタイズに失敗
    HTMLで装飾を出来るように試みていました。一方、セキュアコーディングガイドラインにも記載がある通り、HTMLの入力できるという点はリスクがあります。そこでバイブでサニタイズを進めていくうえでいつの間にか機能が壊れてしまいました…。
  • 設定UIの課題
    何も細かい指定をしないとフィールドコードを手打ちするようなUIを作ってきたので、kintone.app.getFormFields()で取得をするようにしました。
    今回はドラッグアンドドロップにしてみましたが、並び順も分かりづらいです。
    しかも、ドラッグアンドドロップ前と、ドロップ後、ここら辺の表示名・フィールドコードが逆転しているなど、まだまだ細かく見てあげないといけないんだな…と感じました。

さいごに

明日もお楽しみ!

2026/4/15追記…下記の通り、ソースコードとプロンプトについては公開を停止します。

下記のブログもご覧ください!
👉 【#kintone100日連続チャレンジ】AIにkintoneカスタマイズを100%任せたらどこまでいけるか?現役フリーランスの「100 Days of kintone Hacks」始動!
👉 ココナラで「kintone有資格者が導入や運用の相談にのります」サービスを開始します!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?