こんにちは、kintoneカスタマイズをされている皆さん！
日々、アプリの利便性を高める工夫をされていることと思います。今回は、kintoneのカスタマイズで「localStorage」を活用する方法をご紹介します。
localStorageは、ちょっとした情報をブラウザに保存できる便利な仕組みです。ユーザーの入力を記憶したり、設定を保持したりすることで、より使いやすいkintoneアプリを実現できます。
お知らせ①
🌟無料＆登録不要でプラグインのお試しが可能！🌟
kintoneユーザーの皆さん！
エムザスのkintoneプラグインはもう試しましたか？🤔
エムザスでは以下のようなプラグインを開発しています！👇
デモ環境で、ほとんどの機能が今すぐお試しいただけます✨
さらに、お客様のドメインで無料で3ヶ月間、すべての機能を試すこともできます！🎉
それでは、本題に入ります！
1. localStorageとは？
localStorage は、Webブラウザにキーと値のペアでデータを保存できる仕組みです。特徴は以下の通りです：
- ブラウザに永続的に保存（ページを閉じてもデータは残る）
- 最大容量は約5MB程度（ブラウザによって異なる）
- セッションをまたいで使用可能
- 保存は簡単な文字列形式（JSONなどにして複雑な構造も保存可能）
対して sessionStorage は、ページを閉じるとデータが消える一時的な保存領域です。
2. localStorageの基本的な使い方
以下は基本的な操作です：
// 保存
localStorage.setItem('myKey', 'myValue');
// 取得
const value = localStorage.getItem('myKey');
// 削除
localStorage.removeItem('myKey');
// 全削除
localStorage.clear();
複雑なデータを保存したい場合は、JSON.stringify()とJSON.parse()を使います。
// オブジェクトを保存
localStorage.setItem('userSettings', JSON.stringify({ view: 'grid', theme: 'dark' }));
// 取得して復元
const settings = JSON.parse(localStorage.getItem('userSettings'));
3. kintoneでのlocalStorage活用例
3-1. 検索条件の保存と復元
よく使う検索条件を記憶しておくことで、ユーザーは毎回入力し直さずに済みます。
(function () {
'use strict';
kintone.events.on('app.record.index.show', function (event) {
const keyword = localStorage.getItem('searchKeyword');
if (keyword) {
document.querySelector('#my-search-input').value = keyword;
}
document.querySelector('#my-search-input').addEventListener('input', function (e) {
localStorage.setItem('searchKeyword', e.target.value);
});
return event;
});
})();
#my-search-input は対象のHTML要素に合わせて変更してください。
3-2. 表示モード（リスト/グリッド）の保存
ユーザーが選んだ表示モードを保持し、次回アクセス時に反映します。
(function () {
'use strict';
const STORAGE_KEY = 'viewMode';
kintone.events.on('app.record.index.show', function (event) {
const savedMode = localStorage.getItem(STORAGE_KEY) || 'list';
changeView(savedMode);
document.querySelectorAll('.toggle-button').forEach(btn => {
btn.addEventListener('click', function () {
const mode = this.dataset.mode;
localStorage.setItem(STORAGE_KEY, mode);
changeView(mode);
});
});
return event;
});
function changeView(mode) {
console.log('ビュー変更:', mode);
// 実際のUI切り替え処理をここに
}
})();
3-3. 入力内容の一時保存
長い入力フォームなどで、誤ってリロードしてもデータを復元できるようにしておく例です。
(function () {
'use strict';
kintone.events.on('app.record.create.show', function (event) {
const savedMemo = localStorage.getItem('draftMemo');
if (savedMemo) {
event.record['メモ'].value = savedMemo;
}
kintone.app.record.setFieldShown('メモ', true);
document.querySelector('[name="メモ"]').addEventListener('input', function (e) {
localStorage.setItem('draftMemo', e.target.value);
});
return event;
});
})();
4. localStorageを使う際の注意点
| 項目 | 内容 |
|---|---|
| 容量制限 | ブラウザごとに上限あり（多くて5MB程度） |
| セキュリティ | 機密情報の保存は禁止（パスワード、トークンなど） |
| 端末・ブラウザ依存 | 同一ユーザーでも他端末・他ブラウザでは共有されない |
| シークレットモード | 通常より厳しい制限があるため動作確認が必要 |
5. 他の保存手段との比較
| 手段 | 特徴 | 持続性 | ユーザー別 | 備考 |
|---|---|---|---|---|
| localStorage | 永続保存、即時アクセス | 高 | ✕ | セキュリティ注意 |
| sessionStorage | 一時的保存（タブのみ） | 低 | ✕ | タブ閉じで削除 |
| kintone plugin config | ユーザー別設定管理 | 中〜高 | ◯ | プラグイン内のみ |
| kintone REST API（アプリに保存） | 正式なデータ保存 | 高 | ◯ | 開発コストが高め |
6. まとめ
localStorageはちょっとしたユーザー設定や入力内容を保持するのにとても便利な手段です。kintoneの標準機能では実現できない「UX向上」を、簡単なコードで実装できます。
ただし、セキュリティや保存データの内容には十分注意してください。特に個人情報や機密情報の保存は禁止です。