一覧高速検索＆絞り込みプラグイン

kintone 標準の検索機能を使用する場合、以下の手順が必要です。

1. フィルターアイコンをクリック
2. 検索条件を 1 つ 1 つ設定
3. 「適用」ボタンをクリック
4. 画面がリロードされ、結果が出力

最低でも 4 アクション以上、一般的なウェブサービスと比べると、かなり手間がかかります。

この手間を軽減するため、代わりの検索機能を提供するプラグインはいくつか存在しますが、その多くは以下のような手順になるかと思います。

1. ヘッダーなどに予め表示されている入力フィールドに文字を入力
2. 「検索」ボタンをクリック
3. 画面がリロードされ、結果が出力

当プラグインを活用すれば、文字を入力するという 1 アクションのみ行えば、画面リロードなしで即座に検索結果が表示されます。

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

当プラグインを使用することで、各フィールドを 1 文字単位で検索も可能です。

ソースコードは全て GitHub に公開しており、無料で利用できます。

まずはデモからどうぞ。

デモ

レコード一覧の操作

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

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

設定画面の操作

設定画面です。

既存の一覧からフィールド情報をインポートすることもできるため、検証のため一時的に使用する場合も簡単に設定できます。

プラグインが提供する機能

• 高速な表示と検索
• 1 文字単位での検索が可能
• AND 検索
• 特定のフィールドに限定した検索
• 年、月、日単位での日付フィールドの検索

カード形式の表示

プラグインには、表示形式として「一覧形式」と「カード形式」があります。

カード形式を選択することで、一覧の各レコードをカードとして表示することができます。

画像フィールドを持つレコードの場合、カード形式で表示することで、画像を一覧で確認することができ、よりユーザーが見やすい一覧を作成することができます。

また、表示形式を一覧から変更可能にするオプションも用意しています。

プラグインが活きるシーン

頻繁に絞り込みを行う必要がある場面

条件を変えながら、複数のデータを比較、編集する必要がある業務に最適です。

複数の検索条件を組み合わせて検索する必要がある場面

複雑なデータの分析や、詳細なデータの絞り込みが求められる場面で活躍します

スマートフォンからの利用を想定している場面

モバイルデバイスでの操作性を考慮して設計されており、外出先でも迅速にデータにアクセスできます。

高速な検索を実現できる理由

プラグイン独自の検索エンジン

他の検索プラグインの多くは、プラグインの検索フィールドを使用して、kintone 標準の検索機能を呼び出す形で実装されています。

それに対し、当プラグインでは検索エンジンから見直し、標準の検索機能を使用せずに、独自の検索システムを実装しています。

プラグインが有効な一覧が表示されると、最適化された手順で情報の取得を開始し、順次キャッシュしていきます。

これにより、初期表示の速度を担保しつつ、ユーザーが検索フィールドに文字を入力した瞬間に、キャッシュされた情報から即座に結果を表示することが可能です。

デバウンス機能

プラグインが一度に表示するレコード数は 100 件ですが、ユーザーが検索フィールドに文字を入力するたびにこの 100 件を再表示してしまうと、端末のスペックによってはパフォーマンスが低下する可能性があります。

この対策として、連続して検索フィールドに文字を入力した際、ひとつ前の入力結果が画面に表示される前であっても、次の入力を検出した時点で、新しい検索結果を表示するようにしています。

これにより、不要な再描画を防ぎ、パフォーマンスを向上させています。

一覧 1 行あたりのコスト最適化

当プラグインでは、一覧１行あたりの情報量の最適化と、再表示時のコスト最小化を実現しています。

kintone 標準の一覧や他の検索プラグインでは、改ページや検索の際に一覧すべてが再描画されますが、当プラグインでは、一覧 1 行 1 行の情報のみを更新することで、再描画のコストを最小限に抑えています。

さらに、検索によって表示される内容が変わらなければ再描画は行われず、追加・減少した行のみを更新することで、パフォーマンスを向上させています。

設定手順

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

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

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

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

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

プラグインの設定

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

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

API の使用回数は大丈夫？

デモをご覧になって、このような疑問を持った方は、kintone に詳しいご経験豊富な方なんじゃないかと思います。ただ、プラグインはその点も考慮して設計しています。

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

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

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

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

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

お問い合わせ

プラグインの不具合や、機能追加のご要望などがあれば、画面上部のナビバーからお問い合わせください。

プラグインのソースコード

本プラグインはオープンソースです。 ソースコードは GitHub で公開されており、どなたでも自由に確認できます。

詳細な実装内容や構成に興味がある方は、ページトップの「ソースコードを確認する」ボタンからリポジトリにアクセスしてください。