こんにちは、ジョイゾーでkintoneプラグインの開発エンジニアをやっている川嵜です。
kintoneで日々業務を行なっていく中で、「フィールド数が多すぎて、縦に長くなっているアプリ」を使うことはありませんか？
実務で使い込んでいるアプリほど、「あの項目も欲しい」「この情報も必要だ」とどんどんフィールドを追加してしまいがちですよね。。。
こうして縦に長くなったアプリで1番上/一番下までスクロールするのは地味にストレスです。
一回一回は小さな手間に思えますが、毎日何度もレコードを開く業務だと、この往復のスクロールが少し面倒に感じてしまいます。
そこで今回は、kintoneの「スペースフィールド」を活用して、
画面の右下に常に表示される「最上部へ移動」ボタンと「最下部へ移動」ボタンを実装するカスタマイズを作ってみたので、紹介します！
弊社では初回開発無料の定額39万円でkintoneアプリを開発する定額型開発サービス「システム３９」を提供しております。kintoneの導入やアプリ開発でお困りの方は、お気軽にご相談ください。
＊Webでの打ち合わせも可能です。
弊社では初回開発無料の定額39万円でkintoneアプリを開発する定額型開発サービス「システム３９」を提供しております。kintoneの導入やアプリ開発でお困りの方は、お気軽にご相談ください。
＊Webでの打ち合わせも可能です。
アプリ側での準備
例として、kintoneアプリストアの「問い合わせ管理」をベースに、準備を進めていきます。
ボタンを画面に表示させたいアプリが決まったら、「スペースフィールド」を
アプリのフォームに配置し、「要素ID」を設定してください。
（例：scroll_button）
大まかな仕組みについて
アプリの準備ができたら、次のようなステップでコードを書いていきます。
やっていることは以下の4つのステップだけなので、とてもシンプルです。
- 詳細/追加/編集画面が表示されたら、準備したスペースフィールドを取得
- 「TOP」「BOTTOM」2つのボタンを配置してデザインを整える
- ボタンがクリックされた時に、最上部/最下部に遷移する処理を仕込む
- 配置したボタンを画面上に固定表示
コードの適用方法については、kintoneヘルプにて詳しく紹介されているので、
JavaScript/CSSの適用方法が分からないです。という方は、以下リンクをチェックしてみてください。
JavaScriptやCSSでアプリをカスタマイズする
実装内容の紹介！
今回は、「動き（JavaScript）」と「見た目（CSS）」の2つのファイルに分けています。
まずは、JavaScriptファイルからです。
中身としては、先ほど解説した「大まかな仕組み」の通りになっていますが、
追加でkintone JavaScript APIのサイドバーの開閉を切り替えるを利用して、「サイドバー（コメント/変更履歴）が開いているかどうか」を取得する処理を入れています。
これによって、サイドバーが開いたときにはボタンが自動で左に避けてくれるようになり、コメント/変更履歴欄に被ることなく操作できます。
(function() {
'use strict';
let SPACE_ID = 'scroll_buttons';
let SIDEBAR_OPEN_RIGHT = '375px';
let SIDEBAR_CLOSED_RIGHT = '20px';
let activeContainer = null;
// サイドバーの開閉状態に合わせて、ボタンの表示位置を切り替え
function updateButtonPosition() {
// ボタンコンテナが存在しない場合は何もしない
if (!activeContainer) {
return;
}
// サイドバーの開閉状態を取得
kintone.app.record.getSideBarDisplayState().then(function(state) {
let sidebarOpen = state === 'COMMENTS' || state === 'HISTORY';
activeContainer.style.right = sidebarOpen ? SIDEBAR_OPEN_RIGHT : SIDEBAR_CLOSED_RIGHT;
});
}
// ラベルとクリック処理を受け取り、ボタン要素を1つ作成
function createScrollButton(label, onClick) {
let button = document.createElement('button');
button.type = 'button';
button.className = 'scroll-jump-btn';
button.textContent = label;
button.addEventListener('click', onClick);
return button;
}
// スペースフィールド内に、TOP/BOTTOMボタンを設置
function mountScrollButtons(spaceElement) {
// 画面再表示時などにボタンが二重になるのを防ぐ
let existing = spaceElement.querySelector('.scroll-btn-container');
if (existing) {
activeContainer = existing;
updateButtonPosition();
return;
}
let container = document.createElement('div');
container.className = 'scroll-btn-container';
// ボタンクリック時のスクロール処理
container.appendChild(createScrollButton('▲ TOP', function() {
// ページ先頭へ
window.scrollTo({ top: 0, behavior: 'smooth' });
}));
container.appendChild(createScrollButton('▼ BOTTOM', function() {
// ページ最下部へ
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
}));
spaceElement.appendChild(container);
activeContainer = container;
updateButtonPosition();
}
document.addEventListener('click', updateButtonPosition);
// 詳細・追加・編集画面が表示されたときにボタンを設置
kintone.events.on([
'app.record.detail.show',
'app.record.create.show',
'app.record.edit.show'
], function(event) {
let spaceElement = kintone.app.record.getSpaceElement(SPACE_ID);
if (!spaceElement) {
return event;
}
mountScrollButtons(spaceElement);
return event;
});
})();
続いて、CSSファイルです。
ボタンの基本的な見た目（色や形）のほかに、ボタンを画面右下に固定させる設定や、カーソルを当てた際のホバー演出（マウスを乗せると少し濃くなる動き）を入れています。
/* ボタン2つをまとめるコンテナ（画面右下に固定表示） */
.scroll-btn-container {
position: fixed;
right: 20px;
bottom: 30px;
z-index: 999;
display: flex;
flex-direction: column;
gap: 8px;
transition: right 0.3s ease;
}
/* TOP/BOTTOMボタン共通の見た目 */
.scroll-jump-btn {
padding: 10px 14px;
background-color: #3498db;
color: #ffffff;
border: none;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
opacity: 0.8;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: opacity 0.2s ease;
}
/* マウスホバー時は少し濃く表示 */
.scroll-jump-btn:hover {
opacity: 1;
}
実際の動きの確認
コードは完成したので、実際にアプリに入れて、今回のカスタマイズの動きを見てみようと思います。
レコード編集画面を開いてみると、右下にボタンがきちんと表示されています。
この状態から、テーブルの行をいくつか追加し、縦長になってしまっても、
配置した「▲ TOP」ボタンをクリックすれば、一瞬で画面最上部まで戻ることができます。
普段であれば何度もスクロールして戻っていたところを、ボタン一つで瞬時に移動できるのは快適です。
もちろん「▼ BOTTOM」ボタンを使えば、一番下へ移動することもできます。
おわりに
今回は、kintoneに画面の右下に常に表示される「最上部へ移動」ボタンと「最下部へ移動」ボタンを設置するカスタマイズをしてみました！
ちょっとした一工夫ですが、これだけで毎日のスクロールの手間をかなり省くことができて業務がしやすくなると思います。
小さな手間をそのままにせず、プラグインやカスタマイズなどを用いて、日々の作業を少しづつ便利にしていきましょう。
弊社では初回開発無料の定額39万円でkintoneアプリを開発する定額型開発サービス「システム３９」を提供しております。kintoneの導入やアプリ開発でお困りの方は、お気軽にご相談ください。
＊Webでの打ち合わせも可能です。
弊社では初回開発無料の定額39万円でkintoneアプリを開発する定額型開発サービス「システム３９」を提供しております。kintoneの導入やアプリ開発でお困りの方は、お気軽にご相談ください。
＊Webでの打ち合わせも可能です。
