kintoneでJavaScriptを使用してHTMLを埋め込む方法【初心者向けガイド】

はじめに

はじめに

kintone（キントーン）は、業務プロセスの効率化を支援する強力なプラットフォームですが、標準機能だけでは物足りない場合があります。特に、ユーザーインターフェースのカスタマイズが必要な場面で、HTML要素を独自に追加したい時があります。今回はJavaScriptを使ったダイアログの追加について本記事でわかりやすく解説します。

kintoneにJavaScriptでダイアログを追加する理由

ユーザー体験の向上: ダイアログを活用することで、ユーザーに対してよりリッチな操作体験を提供できます。
業務プロセスのカスタマイズ: 特定の操作に対して確認メッセージや入力フォームを追加することで、業務プロセスを自分たちのニーズに合わせて最適化できます。

ダイアログを追加するための準備

kintoneアプリの管理画面にアクセス

kintoneのアプリを開き、右上の「設定」から「JavaScript / CSSでカスタマイズ」を選択します。

JavaScriptファイルをアップロード

ダイアログを表示するためのJavaScriptコードを含むファイルをアップロードします。ファイルは後でリンクを指定して読み込む必要があります。

JavaScriptでダイアログを追加する手順

以下は、kintoneでダイアログを表示するための基本的なJavaScriptコードのサンプルです。このコードをカスタマイズして、特定のニーズに合わせたダイアログを作成できます。

(function() {
    'use strict';

    // kintoneのレコード詳細画面でダイアログを表示するサンプル
    kintone.events.on('app.record.detail.show', function(event) {
        // ダイアログを作成
        var dialog = document.createElement('div');
        dialog.id = 'custom-dialog';
        dialog.style.position = 'fixed';
        dialog.style.top = '50%';
        dialog.style.left = '50%';
        dialog.style.transform = 'translate(-50%, -50%)';
        dialog.style.width = '300px';
        dialog.style.padding = '20px';
        dialog.style.backgroundColor = '#fff';
        dialog.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)';
        dialog.style.zIndex = '1000';
        dialog.innerHTML = '<h3>カスタムダイアログ</h3><p>これはkintoneで作成したカスタムダイアログです。</p><button id="close-dialog">閉じる</button>';

        // ダイアログを表示
        document.body.appendChild(dialog);

        // 閉じるボタンのイベントリスナー
        document.getElementById('close-dialog').addEventListener('click', function() {
            document.body.removeChild(dialog);
        });
    });
})();

コードの解説

kintone.events.on('app.record.detail.show', function(event) {...});
この部分は、レコードの詳細画面が表示されたときにダイアログを表示するためのイベントハンドラです。
ダイアログのスタイリング
CSSを使ってダイアログの位置やデザインを設定しています。position: fixed;で画面の中央に固定し、boxShadowでシャドウを追加しています。
ダイアログの表示と閉じる機能
ダイアログをdocument.bodyに追加し、閉じるボタンがクリックされたときにダイアログを削除する処理を記述しています。