Ribbit.work

プラグイン無料公開 - 一覧をリロードせず高速に検索・絞り込みができるプラグインを開発しました

KintoneJavaScript

last modified date2021-9-10

publish date2021-9-1

こんにちはリビットです🍀

今回は自信作です。汎用的で広く使っていただけるものを開発しました。

smart-view

通常レコード一覧で特定のレコードを検索する場合、フィルターから検索条件を1つ1つ設定しなければなりません。 検索を実行するとページがリフレッシュされ、指定した条件の一覧が表示されます。

また、Kintoneのフィールド検索には制約があり、日本語であれば2文字以上、アルファベットと数字は単語単位でしか検索ができません。

当プラグインを使用することで、検索フィールドに文字を入力した瞬間、一覧のフィールド全てから入力値に当てはまるレコードを検索し、一覧に表示することができます。

また、各フィールドを1文字単位で検索も可能です。

ダウンロードはこちらから可能です。

このサイトで公開している全てのプラグインの一覧はこちら

ちなみにこのサイトの記事一覧も同様の仕組みで検索を実装していますので、挙動を確認したい方は試してみてください。

まずはデモからどうぞ。

デモ

レコード一覧の操作

記事トップでもお見せしましたが、プラグインを有効にすると一覧と共に検索フィールドが追加されます。検索フィールドに文字列を打ち込むことで、即座に結果が反映されます。

検索ボタンをクリックする必要すらありません。

smart-view

設定画面の操作

後ほど追加します。

設定手順

プラグイン用の空の一覧を作成する

当プラグインでは1つの一覧を丸ごと使用します。

アプリの設定画面 → 「一覧」から一覧を追加し、以下の設定を行います。

一覧名 任意の名前を設定してください
レコード一覧の表示形式 必ず「カスタマイズ」を選択してください
ページネーションを表示する チェックを外してください
絞り込み 初期表示する一覧の条件

以上の設定が完了したら、一度アプリを更新してください。

プラグインは更新済みの一覧のみ参照できます。

プラグインの設定

前述した方法で作成した一覧を、「テーブルを表示する一覧の設定」で選択します。

「テーブルに表示するフィールドの設定」に実際に一覧で表示するフィールドを選択し、設定は完了です。

ダウンロード

こちらからダウンロード可能です。

APIの使用回数は大丈夫?

デモをご覧になって、この疑問をお持ちになったベテランエンジニアの方もいらっしゃると思います。

当プラグインでは一覧表示時にカーソルAPIを使用してレコードを一括取得し、データをキャッシュしています。

事前に非同期でデータを取得しておくことで、検索パフォーマンスを向上させています。

ですので検索フォームに文字を打つたびにAPI使用回数を消費することはなく、最大でも

アプリの総レコード数 / 500 + 1

の使用回数しか消費しません。

数十万、数百万レコードが蓄積されているような大規模なアプリや、全従業員が頻繁にアクセスするようなアプリの場合は、この上限に達してしまう可能性もありますが、ほとんどの場合影響はないと思います。

今後の開発について

今後は一覧での編集機能、CSVでのダウンロード機能を実装しようかなと考えています。

時々更新をチェックしていただけると幸いです。

この記事を読んだ方におすすめの記事

KintoneからChatworkのユーザ一覧を取得する

KintoneからChatworkのユーザ一覧を取得する

JavaScriptKintone
2021-9-15
TypeScriptで楽天ブックス書籍検索APIを使う📚

TypeScriptで楽天ブックス書籍検索APIを使う📚

TypeScriptJavaScript
2021-9-13
【kintone】Webフォントを適用する

【kintone】Webフォントを適用する

KintoneJavaScript
2021-9-8
KintoneからChatworkにメッセージを送る

KintoneからChatworkにメッセージを送る

JavaScript
2021-9-6
アクセス権限のないアプリにJavaScriptからだけアクセスを許可する方法

アクセス権限のないアプリにJavaScriptからだけアクセスを許可する方法

KintoneJavaScript
2021-9-3

最新の記事

KintoneからChatworkのユーザ一覧を取得する

KintoneからChatworkのユーザ一覧を取得する

JavaScriptKintone
2021-9-15
TypeScriptで楽天ブックス書籍検索APIを使う📚

TypeScriptで楽天ブックス書籍検索APIを使う📚

TypeScriptJavaScript
2021-9-13
【kintone】Webフォントを適用する

【kintone】Webフォントを適用する

KintoneJavaScript
2021-9-8
KintoneからChatworkにメッセージを送る

KintoneからChatworkにメッセージを送る

JavaScript
2021-9-6
Excel VBAの高速化はこれだけでOK!コピペで使えるコードを紹介

Excel VBAの高速化はこれだけでOK!コピペで使えるコードを紹介

VBA
2021-9-3