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

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

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

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

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

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

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

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

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

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

まずはデモからどうぞ。

デモ

レコード一覧の操作

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

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

設定画面の操作

設定画面です。

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

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

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

カード形式の表示

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

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

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

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

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

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

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

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

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

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

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

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

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

sequenceDiagram
    participant U as ユーザー
    participant V as プラグイン一覧
    participant E as 検索エンジン
    participant K as kintone API

    Note over V,K: 一覧表示時（初期化）
    V->>K: レコードを一括取得（500件ずつ）
    K-->>E: レコードデータ
    E->>E: キャッシュに保存

    Note over U,E: 検索時
    U->>V: 文字を入力
    V->>E: キャッシュから検索
    E-->>V: マッチするレコード
    V->>V: 差分のみ再描画
    Note over U,V: APIを消費せず即座に結果表示

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

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

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

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

ちなみに、最初の検索エンジンの仕組みをより細かく表現すると、以下のようになります。(半分私の自己満足なので、無理に理解しなくても大丈夫です)

sequenceDiagram
  participant U as ユーザー
  participant V as プラグイン一覧
  participant C as 永続キャッシュ(IndexedDB)
  participant E as 検索エンジン
  participant K as kintone API

  Note over V,C: 一覧表示時（初期化）
  V->>C: 前回の永続キャッシュを読み込み

  alt キャッシュあり(SWR)
    C-->>V: 前回のレコード
    V->>E: キャッシュに保存
    V-->>U: 一覧を即座に表示
    Note over V,K: 裏側で差分同期（表示は待たせない）
    V->>K: 更新日時 >= 前回の最大更新日時 で差分取得 + 総件数を確認
    K-->>V: 変更されたレコード / 総件数
    alt 整合性OK
      V->>V: 差分をマージ
      V->>C: 更新後のキャッシュを保存
      V->>E: 表示中データを差し替え
    else 不整合を検知（削除・フィルタ離脱など）
      V->>K: 全件を再取得（500件ずつ）
      K-->>E: レコードデータ
      E->>E: キャッシュに保存
      V->>C: 新しいキャッシュとして保存
    else 同期に失敗
      V-->>U: 「表示内容が古い可能性」を表示（キャッシュは表示継続）
    end
  else キャッシュなし/初回
    V->>K: レコードを一括取得（500件ずつ）
    K-->>E: レコードデータ
    E->>E: キャッシュに保存
    V->>C: 永続キャッシュとして保存
  end

  Note over U,E: 検索時
  U->>V: 文字を入力
  V->>E: キャッシュから検索
  E-->>V: マッチするレコード
  V->>V: 差分のみ再描画
  Note over U,V: APIを消費せず即座に結果表示

計算結果を覚えておく仕組み

一覧の表示には、レコードの取得の他、並び替えや他レコードの紐づけなど、様々な計算が必要です。

このプラグインでは、ただ全レコードをキャッシュするだけではなく、「並び替え終わったデータ」「他レコードの紐づけが完了したデータ」など、一覧表示に必要な計算結果をキャッシュすることで、検索時に再度計算する必要がなくなり、パフォーマンスを向上させています。

例えば、並び順を変更せず、検索キーワードのみ変更した場合、「並び替え終わったデータ」を使って検索することで、再度並び替えを行う必要がなくなり、検索結果の表示速度を向上させています。

デバウンス機能

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

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

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

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

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

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

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

設定手順

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

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

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

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

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

プラグインの設定

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

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

API の使用回数は大丈夫？

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

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

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

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

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

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

お問い合わせ

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

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

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

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