JavaScriptでkintoneのプチカスタマイズ：閲覧確認ポップアップの実装
こんにちは！今回は、kintoneアプリに「閲覧権限確認ポップアップ」を実装する方法をご紹介します。このカスタマイズを使うと、ユーザーがレコードの詳細画面を見る前に、適切なアクセス権限を持っているかどうかをユーザーに確認してもらうことができるようになります。
1. カスタマイズの概要
このカスタマイズでは、次の機能を実装します：
レコードの詳細画面が表示されるタイミングでポップアップを表示
ユーザーの選択に応じて、画面を表示するか、別のページにリダイレクトする
ポップアップ表示中は、背景を黒く塗りつぶして元の画面を隠す
このように、ちょっと標準機能だと難しいな！ということもJavaScriptカスタマイズで実現できます。プラグインなどで実現する方法もありますが、今回はちょっとコードを書いて実現してみました。
結論としてこのような動作になりました。
2. コードの実装
まず、access_confirmation_popup.jsというファイルを作成して、次のようなコードを実装します。
(function() {
'use strict';
// レコード詳細画面表示時のイベントリスナーを設定
kintone.events.on('app.record.detail.show', function(event) {
console.log("ポップアップを表示してユーザーの選択を待つ");
showAccessConfirmationPopup(event.record);
return false; // 通常の画面表示をキャンセル
});
// アクセス権限確認ポップアップを表示する関数
function showAccessConfirmationPopup(record) {
const overlay = createOverlay();
const dialog = createDialog();
const { yesButton, noButton } = createButtons();
dialog.appendChild(createDialogContent(yesButton, noButton));
document.body.appendChild(overlay);
document.body.appendChild(dialog);
// ボタンクリック時のイベントリスナーを設定
yesButton.addEventListener('click', () => handleYesClick(dialog, overlay));
noButton.addEventListener('click', () => handleNoClick(dialog, overlay));
}
// 背景オーバーレイを作成する関数
function createOverlay() {
const overlay = document.createElement('div');
Object.assign(overlay.style, {
position: 'fixed',
top: '0',
left: '0',
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 1)', // 完全に不透明な黒背景
zIndex: '999'
});
return overlay;
}
// ダイアログ要素を作成する関数
function createDialog() {
const dialog = document.createElement('div');
dialog.className = 'modern-dialog-overlay';
Object.assign(dialog.style, {
position: 'fixed',
top: '0',
left: '0',
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 1)', // 完全に不透明な黒背景
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: '1000'
});
return dialog;
}
// ダイアログの内容を作成する関数
function createDialogContent(yesButton, noButton) {
const dialogContent = document.createElement('div');
dialogContent.className = 'modern-dialog-content';
Object.assign(dialogContent.style, {
backgroundColor: '#fff',
padding: '30px',
borderRadius: '8px',
textAlign: 'center',
width: '400px',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
});
// メッセージ要素の作成
const message = document.createElement('p');
message.className = 'modern-dialog-message';
message.innerText = 'あなたは閲覧権限があるユーザーですか？';
Object.assign(message.style, {
fontSize: '18px',
marginBottom: '20px'
});
// ボタンコンテナの作成
const buttonContainer = document.createElement('div');
Object.assign(buttonContainer.style, {
display: 'flex',
justifyContent: 'center',
gap: '20px'
});
// ボタンの追加
buttonContainer.appendChild(yesButton);
buttonContainer.appendChild(noButton);
// 要素の組み立て
dialogContent.appendChild(message);
dialogContent.appendChild(buttonContainer);
return dialogContent;
}
// 「はい」「いいえ」ボタンを作成する関数
function createButtons() {
const yesButton = createButton('はい', 'modern-dialog-button-primary');
const noButton = createButton('いいえ', 'modern-dialog-button-secondary');
return { yesButton, noButton };
}
// ボタン要素を作成するヘルパー関数
function createButton(text, className) {
const button = document.createElement('button');
button.className = className;
button.innerText = text;
return button;
}
// 「はい」ボタンクリック時の処理
function handleYesClick(dialog, overlay) {
document.body.removeChild(dialog);
document.body.removeChild(overlay);
// 現在のレコードIDを取得
var recordId = kintone.app.record.getId();
// 詳細画面にリダイレクト
window.location.href = `/k/${kintone.app.getId()}/show#record=${recordId}`;
}
// 「いいえ」ボタンクリック時の処理
function handleNoClick(dialog, overlay) {
document.body.removeChild(dialog);
document.body.removeChild(overlay);
alert('アクセスが許可されていません。');
// 一覧画面にリダイレクト
window.location.href = `/k/${kintone.app.getId()}/`;
}
})();
たとえば、特定の部署のメンバーだけがアクセスできる機密情報や、管理者権限が必要な設定画面など、さまざまなシーンで使えそうですね！
JavaScriptが触れる方はお試しください！
こういった標準機能では実現が難しいカスタマイズを実現したかったり、「どのプラグインを使えばいいのかわからない」、「予算に合わせた効率的な運用方法を相談したい」といった場合には、ぜひお気軽にお問い合わせください。
お客様のニーズに合った最適なkintoneの運用方法をご提案させていただきます！
この記事が気に入ったらサポートをしてみませんか？