【応用編】こんな機能がほしい！ポータルに自作の機能を追加しよう！

※ 本記事は2026年8月時点の機能を基に作成しています。（プラグインバージョン：Ver.2.3.2）

はじめに

本記事では、こだわり kintone プラグインの機能「開発者用Editorウィジェット」を使ってできることをご紹介します。
コードを扱う【応用編】のため、HTML・CSS・JavaScriptの基礎知識がある方向けの内容です。

こんな場合に活用できます

ポータルが縦に長くなって、目的のウィジェットまでのスクロールが大変…

👉 クイックメニューを設置すれば、ボタンをクリックするだけで目的のウィジェットまで自動で移動できるようになり、探す手間が減ります。

目次

1. 「開発者用Editorウィジェット」とは？
2. ご利用にあたっての注意事項
3. ウィジェットまで一気に移動できる「クイックメニュー」の作成
4. まとめ

「開発者用Editorウィジェット」とは？

こだわり kintone プラグインに搭載された機能の一つで、ウィジェットの中にHTMLを直接書き込み、メニューやお知らせなどの自作コンテンツを表示できます。
また、埋め込んだHTMLに対して、アップロードしたJavaScriptファイルを実行することも可能です。 JavaScriptファイルのアップロードには、kintoneシステム管理の「JavaScript / CSSでカスタマイズ」機能を使用します。

ご利用にあたっての注意事項

ご利用の前に、以下の点にご注意ください。

• JavaScriptの実行については動作保証の対象外となります
• 開発者用Editorの表示・動作も保証対象外です

予期せぬ動作が発生する可能性がありますので、十分なテストを行ってからご利用ください。
※本記事で紹介するサンプルコードへの個別のお問い合わせ（カスタマイズのご相談・不具合調査）は、サポート対象外とさせていただきます。ご自身の環境で十分にご確認のうえご利用ください。

参考）こだわり kintone プラグイン 各種設定マニュアル

ウィジェットまで一気に移動できる「クイックメニュー」の作成

ここからは、開発者用Editorウィジェットの活用例を1つご紹介します。

ポータルにウィジェットをたくさん配置すると、ページが縦に長くなります。
目的のウィジェットまでスクロールして移動するのは、なかなか大変です。
そこで今回は、ボタンをクリックすると目的のウィジェットまで自動でスクロールする「クイックメニュー」を作ってみます。

作成するのは、以下の3つです。

1. メニュー本体（開発者用Editorウィジェット）
2. 移動先の目印（移動先の各ウィジェットに追記するHTML）
3. スクロール処理（kintoneシステム管理からアップロードするJavaScriptファイル）

※移動先にできるのは、「2」を設定できるiframeウィジェットと開発者用Editorウィジェットです。

それでは、早速作ってみましょう。
①「開発者用Editor」を選択して、「＋Widget追加」をクリックしてください。

ウィジェットが追加されました。次は、設定画面を開いてみましょう。

②生成されたウィジェットの歯車アイコンをクリックして設定画面を開きます。

③「html」と書かれた入力欄に、メニュー本体のコードを書いて「保存」をクリックしてください。

<nav id="hk_jump_nav" class="p-jump" aria-label="Jump">
  <button type="button" class="p-jump__btn" data-scroll-to="p1">掲示板</button>
  <button type="button" class="p-jump__btn" data-scroll-to="p2">スケジュール</button>
  <button type="button" class="p-jump__btn" data-scroll-to="p3">メッセージ</button>
</nav>

<style>
  .p-jump {
    width: 100%;
    display: flex;
    gap: 8px;
    box-sizing: border-box;
  }
  .p-jump__btn {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
  }
</style>

<nav id="hk_jump_nav" class="p-jump" aria-label="Jump">
  <button type="button" class="p-jump__btn" data-scroll-to="p1">掲示板</button>
  <button type="button" class="p-jump__btn" data-scroll-to="p2">スケジュール</button>
  <button type="button" class="p-jump__btn" data-scroll-to="p3">メッセージ</button>
</nav>

<style>
  .p-jump {
    width: 100%;
    display: flex;
    gap: 8px;
    box-sizing: border-box;
  }
  .p-jump__btn {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
  }
</style>

④移動先にしたい各iframeウィジェットの設定に、目印となるコードを1行追記してください。

<div id="p1"></div>

<div id="p1"></div>

※2つ目以降は p2、p3 とIDを変え、メニュー本体の 「data-scroll-to」 の値と合わせてください。
※iframeウィジェット以外へ移動したい場合は、そのすぐ上に目印用の開発者用Editorウィジェットを置く方法もあります。

⑤スクロール処理のJavaScriptファイルを作成し、以下のコードを追加してください。

(function () {
  'use strict';
  // 固定ヘッダー分の余白（px）。お使いの画面に合わせて調整してください
  const OFFSET_TOP = 60;

  document.addEventListener('click', function (e) {
    // data-scroll-to属性を持つボタンがクリックされたときだけ動く
    const btn = e.target.closest('button[data-scroll-to]');
    if (!btn) return;
    // 移動先の目印（div）までスクロール
    const el = document.getElementById(btn.getAttribute('data-scroll-to'));
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY - OFFSET_TOP;
    window.scrollTo({ top: y, behavior: 'smooth' });
  });
})();

(function () {
  'use strict';
  // 固定ヘッダー分の余白（px）。お使いの画面に合わせて調整してください
  const OFFSET_TOP = 60;

  document.addEventListener('click', function (e) {
    // data-scroll-to属性を持つボタンがクリックされたときだけ動く
    const btn = e.target.closest('button[data-scroll-to]');
    if (!btn) return;
    // 移動先の目印（div）までスクロール
    const el = document.getElementById(btn.getAttribute('data-scroll-to'));
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY - OFFSET_TOP;
    window.scrollTo({ top: y, behavior: 'smooth' });
  });
})();

⑥kintoneシステム管理の「JavaScript / CSSでカスタマイズ」からアップロードしてください。

これで、メニューのボタンをクリックすると、目的のウィジェットまで自動でスクロールするようになります。
ボタンの名前や移動先を変更して、よく使うウィジェットに合わせてアレンジしてみてください。

まとめ

今回は、「開発者用Editorウィジェット」でこんなことができる、という一例をご紹介しました。
他にも、以下のような活用方法があります。

• よく使うサイトへのリンク集を画面に固定して表示
• 社内向けの「お知らせ」をHTMLでデザイン
• アプリと組み合わせて、アプリのデータをウィジェットに表示

ぜひ、この記事を参考にウィジェットを設定して、より効果的なkintoneポータルを作成してください！