この記事はkintone Advent Calendar 2025の参加記事です。
ぼくはkintoneのカスタマイズやプラグインの開発を生業にしているエンジニアです。kintoneの開発をしていると、UIをこしらえることが多くあるのですが、UIのレイヤーが迷子になることがあります。
いくつかのUIを画面上にfixedで重ねると、zIndexの関係でレイヤーの重なりが分からなくなることってありませんか？
kintoneだと、詳細画面や編集画面で、コメントのレイヤーが画面に乗ってくるので、フローティングボタンなどを配置したときにコメントの上に潜り込んじゃって。ではzIndexをあげようとすると、今度はモーダルのBackdropの前に出てきてしまって「もう！」となります。
kintoneでレイヤーを可視化するプラグイン
レイヤースタック可視化プラグイン
DOMの重なりを3D空間に描画して、どのDOMが順番で重なっているかを表示します。
マウスでドラッグするとくるくる回せて、ホイールで近づくことができます。
この操作で、DOMのz-indexによる重なりを確認することができるので、
後ろに隠れてしまったDOMを見つけ出すことができます！
kintoneを3Dで見ると
ヘッダーが２つのグループに分かれています。
スクロールしたときに吸い付いてくれるのは上部のDOMで、下のコンテンツにつながっている領域はスクロールすると画面外に流れていきます。
コメントの入力はかなり上のDOMに指定されていて、コメントが最新を表示などで流れても必ず表示されるようになっています。
おもしろい😀
3D表示
みんな大好きthree.jsを利用しています。
CSS3DRendererでDOMをCloneしたものをCSS3DObjectにしてSceneにぶち込んでいます。
const clone = info.el.cloneNode(true) as HTMLElement;
clone.style.margin = '0';
clone.style.width = `${info.width}px`;
clone.style.height = `${info.height}px`;
clone.style.overflow = 'hidden';
const frame = document.createElement('div');
frame.style.width = `${info.width}px`;
frame.style.height = `${info.height}px`;
frame.style.boxSizing = 'border-box';
frame.style.border = '1px solid rgba(0,255,200,.8)';
frame.style.background = 'rgba(0,255,170,.08)';
frame.appendChild(clone);
clone.querySelectorAll('*').forEach(child => {
(child as HTMLElement).style.pointerEvents = 'none';
});
// cloneをWrapしたframeをCSS
const obj = new CSS3DObject(frame);
obj.position.x = (info.left + info.width / 2 - cx);
obj.position.y = -(info.top + info.height / 2 - cy);
obj.position.z = info.z * depthPerZ;
// new THREE.Scene();
scene.add(obj);
ダウンロード
下記のURLからダウンロードできます。
使い方
とっても簡単で、アプリにプラグインをインストールするだけで動作します。
右下の「SHOW 3D Z-INDEX VIEW」をクリックして、気になるアプリを覗いてみてください。
じつは
レイヤーの確認だけならChromiumの機能を使うと確認できます。
開発者機能から、レイヤービューを表示させることができます🫠
(GoogleChromeやEdgeでも同じ感じでできます）
まとめ
three.jsを利用して、kintoneのDOM構造を覗いてみました。自由にダウンロードできるので、ぜひみなさんも楽しんでみてくださいね。
three.jsを利用すると、3Dのデータもkintoneで扱えますよ！
この記事は以上です。ありがとうございました。
kintoneのプラグイン開発や研修などを行っています。
お仕事のお話はこちらまで。