2025年に追加されたkintone JS API（の一部）を触ってみた

どうも。お久しぶりのBBです。
ジョイゾーでは統括マネージャー的な動きをしていますが、根っこはただのkintoneのエンジニアです。無駄なkintoneカスタマイズが好みです！

最近、急にkintoneのJavaScript APIが拡充していて、今までは自前で用意しないといけないUIパーツなどがさくっと実装できるようになりました！

拡充されることはとても嬉しいことではありますが、ただ、JS APIが拡充される前からkintoneカスタマイズをしていた身としては、

• すでに自前でUIライブラリ用意してるけど・・
• わざわざ載せ替えるメリットはあるのか？
• 細かいところまで制御できるのかな・・

なんて思ったりして、アプデ情報は見ていたけどなかなか手が出せずにいたのが正直なところ。

でもね。せっかくAPIとして搭載されたなら触らないとね。kintoneエンジニアなら。

ということで、書き手も読み手もとても気軽なブログ「触ってみたシリーズ」の1つとして書いてみたいと思います！

弊社では初回開発無料の定額39万円でkintoneアプリを開発する定額型開発サービス「システム３９」を提供しております。kintoneの導入やアプリ開発でお困りの方は、お気軽にご相談ください。
＊Webでの打ち合わせも可能です。

　　　kintoneのアプリ開発はこちら ＜相談無料＞ 　　　

触ったもの

cybozu developer network / kintone JavaScript API一覧 からピックアップしました。
直近だけでも、ものすごく増えていて、ピックアップに悩む！
（どうせならあれも書こうかな、これも入れたいな、と欲張ったら20個くらいになってしまったので、今回はUIパーツに絞りました！）

kintone.showConfirmDialog()
# 確認ダイアログを表示する

kintone.showNotification()
# 画面上部にメッセージを表示する

kintone.showLoading()
# ローディングを表示する

kintone.createDialog()
# ダイアログを作成する

以下はついでです 笑

kintone.app.showAddRecordButton()
# レコード追加ボタンの表示／非表示を変更する

kintone.app.showAppSettingsButton()
# アプリ設定ボタンの表示／非表示を変更する

kintone.app.showOptionsButton()
# アプリのオプションボタンの表示／非表示を変更する

kintone.app.showFilterButton()
# 絞り込みボタンの表示／非表示を変更する

kintone.app.showReportButton()
# 集計ボタンの表示／非表示を変更する

kintone.app.showViewAndReportSelector()
# 一覧・グラフの選択UIの表示／非表示を変更する

kintone.app.record.showPager()
# レコードの前・次ボタンの表示／非表示を変更する

kintone.app.record.showEditRecordButton()
# レコード編集ボタンの表示／非表示を変更する

kintone.app.record.showDuplicateRecordButton()
# レコード再利用ボタンの表示／非表示を変更する

（なんかコメントの方が目立ってしまったな・・・）

kintone.showConfirmDialog

kintoneライクな「確認ダイアログ」を表示することができるAPIです。このダイアログが表示されている間はkintoneの操作はできないようになっています。（が、ショートカットキーは動きました・・・これは2025年11月のアプデに期待ですな）

Promise対応もしているので、その後のAPI処理とかもしやすそうです。

kintone.showConfirmDialog({
  title: '{タイトル}',
  body: '{ボディ}',
  showOkButton: true,
  showCancelButton: true,
  okButtonText: '{submitボタン}',
  cancelButtonText: '{cancelボタン}',
  showCloseButton: true
}).then((result) => {
  if (result === 'OK') {
    console.log('OKのときの処理');
  } else {
    console.log('キャンセルしたから終わり');
  }
});

ただ、これは良いのか悪いのか、APIを同時に複数回実行すると差し替えではなく、レイヤーが重なってダイアログがどんどん重複していく感じでした。

kintone.showNotification

kintoneでよく見かける赤いアラートだったりが画面上部に出せるAPIです。
画面の制御は特にないので、画面操作は引き続き可能です。

赤以外にも「緑」「青」もあるみたい。

// 赤いやつ
kintone.showNotification('ERROR', '赤いやつです');

// 緑のやつ
kintone.showNotification('SUCCESS', '緑のやつです');

// 青いやつ
kintone.showNotification('INFO', '青いやつです');

複数回実行した場合、これはレイヤーとしては重ならず、差し替えになりました。（showConfirmDialogとは違う仕様です）

kintone.showLoading

いわゆる画面くるくる。
「今、ローディングしてるよ！」を表示することができるAPIです。

// ローディングの表示
kintone.showLoading('VISIBLE');

// ローディングの非表示
kintone.showLoading('HIDDEN');

spin.jsとか使わなくても実装できるのはありがたい！
スクロールはできるけどマウス操作はできないからクリックはできないです（けど、やっぱりショートカットキーは使えました。11月のアプデに・・以下略）

kintone.createDialog

さて。今回のラスボス。

なぜかこれだけdevnetにサンプルコードがなかった。謎っすな。
ほぼ「kintone.showConfirmDialog」と同じUIなんだけど、結構違う部分があって見事に初見殺しされました、とさ。

• ボディ部分にテキスト以外のHTMLが書ける
  • kintone.showConfirmDialog は文字列のみだけど、こちらは任意のHTMLが埋め込める（inputとかimgとか）
• このAPIを実行するだけでは画面に描画されず、そのレスポンスを使った処理を書かないと画面に出てこない
  • まさに初見殺し（ちゃんとドキュメントみたら解決するけどね・・）

// 不正解）
// これだけでは画面には何も表示されない
const input = document.createElement('input');
kintone.createDialog({
  title: '{タイトル}',
  body: input,
  showOkButton: true,
  showCancelButton: true,
  okButtonText: '{submitボタン}',
  cancelButtonText: '{cancelボタン}',
  showCloseButton: true
});

// 正解）
// 戻り値を受け取って、その戻り値に対して、
// show関数を実行することで初めて画面に表示される
const input = document.createElement('input');
const resp = await kintone.createDialog({
  title: '{タイトル}',
  body: input,
  showOkButton: true,
  showCancelButton: true,
  okButtonText: '{submitボタン}',
  cancelButtonText: '{cancelボタン}',
  showCloseButton: true
});

resp.show();

さらにいうと、submitが押されたのか、cancelが押されたかを判断するためには、show関数の結果をさらに受け取る必要があります（急にむずいぞ・・・）

const input = document.createElement('input');
const resp = await kintone.createDialog({
  title: '{タイトル}',
  body: input,
  showOkButton: true,
  showCancelButton: true,
  okButtonText: '{submitボタン}',
  cancelButtonText: '{cancelボタン}',
  showCloseButton: true
});

// show関数のレスポンスをさらにPromiseで受け取る
const r = await resp.show();

// このレスポンスで条件分岐が可能
console.log(r); // 'OK' or 'CANCEL'

埋め込んだHTMLエレメントの値取得のタイミングとか、何かしら意図はあるんだろうが、これまで紹介したJS APIとは明らかに難易度が違う！

ついでに

kintoneの画面要素の表示/非表示APIがたくさん出てたので、まとめてやってみました。

// 一覧画面だとこの6つ

kintone.app.showAddRecordButton('HIDDEN');
  // レコード追加ボタンの表示／非表示を変更する
kintone.app.showAppSettingsButton('HIDDEN');
  // アプリ設定ボタンの表示／非表示を変更する
kintone.app.showOptionsButton('HIDDEN');
  // アプリのオプションボタンの表示／非表示を変更する
kintone.app.showFilterButton('HIDDEN');
  // 絞り込みボタンの表示／非表示を変更する
kintone.app.showReportButton('HIDDEN');
  // 集計ボタンの表示／非表示を変更する
kintone.app.showViewAndReportSelector('HIDDEN');
  // 一覧・グラフの選択UIの表示／非表示を変更する

// 詳細画面だとこの6つ

kintone.app.showAddRecordButton('HIDDEN');
  // レコード追加ボタンの表示／非表示を変更する
kintone.app.showAppSettingsButton('HIDDEN');
  // アプリ設定ボタンの表示／非表示を変更する
kintone.app.showOptionsButton('HIDDEN');
  // アプリのオプションボタンの表示／非表示を変更する
kintone.app.record.showPager('HIDDEN');
  // レコードの前・次ボタンの表示／非表示を変更する
kintone.app.record.showEditRecordButton('HIDDEN');
  // レコード編集ボタンの表示／非表示を変更する
kintone.app.record.showDuplicateRecordButton('HIDDEN');
  // レコード再利用ボタンの表示／非表示を変更する

11月のアプデで、それぞれの要素がどの状態(表示/非表示）なのかわかるようになるみたいなので、それと組み合わせるとより正確にDOM操作ができますね！

おわり

気づかぬうちにたくさんAPIが搭載されていました！APIが増えれば、その分、公式にいろいろカスタマイズができるので嬉しい限り！

DOM操作ごりごりの「kintone魔改造」が魔じゃなくなるときも近いのかもなぁ・・

また気が向いたらブログ書きます！以上！

弊社では初回開発無料の定額39万円でkintoneアプリを開発する定額型開発サービス「システム３９」を提供しております。kintoneの導入やアプリ開発でお困りの方は、お気軽にご相談ください。
＊Webでの打ち合わせも可能です。

　　　kintoneのアプリ開発はこちら ＜相談無料＞