見出し画像

Kintoneで１文字検索や部分一致検索を可能にする

アプリ活用研究会

やりたいこと

Kintoneを使っている方の中には、レコード一覧表の検索機能に不満を持っている方も多いのではないでしょうか。
特に「全角1文字」や「半角英数字の部分一致」での検索ができない点に困っている方は多いかもしれません。
【参照】Kinotneヘルプ：検索キーワードの注意事項

今回は、そうした問題を解決するためのカスタマイズ方法をご紹介します。
この記事では、Kintoneのカスタムビュー機能とJavaScript、さらに外部ライブラリのVue.jsを活用して、ブラウザのようなキーワード検索ができる機能を実装する方法を説明します。これにより、従来のKintone標準機能では出来なかった「全角1文字」や「半角英数の部分一致」の検索が可能になります。

Kintoneの標準機能の検索では、レコード内の添付ファイルの中まで検索可能ですが、今回のカスタマイズでは添付ファイルの中は検索対象外です。
検索対象は、レコード一覧表の表示フィールドだけになります。

デモ画面

Kintoneアプリストアの「顧客リスト」でデモをしています
デモ画面では「建材」で検索した後「建」で1文字検索、「ami」で部分一致検索しています。
エンターキーを押さなくてもキーワード入力だけで検索できます。
（外部ライブラリvue.jsの機能で実現しています）

デモ画面

アプリの実装方法

デモ画面の様なアプリを実装する手順は以下の通りです。

  1. アプリの準備
    Kintoneアプリストアから「顧客リスト」アプリを選択し、サンプルデータを作成します。

  2. カスタマイズビューの設定
    カスタムビューを設定し、検索窓をHTMLコードで追加します。

  3. JavaScriptコードの準備
    Vue.jsの機能で検索機能を簡単に拡張できるコードを準備します。
    検索テキストに基づいてレコードをフィルタリングし、カスタムビューに表示します。

  4. Vue.jsとJavaScriptの実装
    Cybozuが提供するVue.jsのCDNを利用し、JavaScriptコードをKintoneにアップロードして機能を実装します。

  5. カスタムビューのスタイル変更
    CSSを利用し、列とデータの間に余白を設けて視認性を向上させます。

１．アプリの準備

Kintoneアプリストアから「顧客リスト」アプリを選択し、サンプルデータを含めて作成します。

アプリストア

２．カスタマイズビューの設定

アプリの設定＞一覧から、＋ボタンで一覧を追加画面を開きます。

カスタマイズビュー設定画面

一覧追加画面で各設定を以下の通り行います。
一覧名は、自由に好きな名前を付けてもかまいません。
一覧ID（自動採番）は、Javascriptの設定で使用します。

HTMLの欄に以下のＨTMLコードをコピーして貼り付けます。
<td>タグ行のrecord.と.Valueに挟まれた部分にアプリのフィールドコードを指定します。
<td>{ {record.アプリのフィールドコード.value} }</td>
※「顧客リスト」アプリのフィールドコードに合わせています。
最後に保存ボタンを押します。

<div id="app">
   <input v-model="searchText" placeholder="検索キーワード">
  <table id="custom-table" border="1px" width="80%">
    <thead>
      <tr>
        <th>顧客名</th>
        <th>電話番号</th>
        <th>メールアドレス</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="record in filteredRecords">
        <td>{{record.会社名.value}}</td>
        <td>{{record.TEL.value}}</td>
        <td>{{record.メールアドレス.value}}</td>
      </tr>
    </tbody>
  </table>
</div>

３．Javascriptコードの準備

// 初期設定の部分をアプリの設定に合わせて変更します。
VIEW_IDには、カスタムビューの一覧IDの値を設定します。
FIELDSの各要素には、フォームのフィールドコードを設定します。
※「顧客リスト」アプリのフィールドコードに合わせています。
設定完了後に、文字コードをUTF-8にして好きな名前で保存して下さい。

/* Kintoneで１文字検索や部分一致検索を可能にする
 * 一覧表の拡張検索（Vue.js使用）
 * Sample Program
 * Distributor: https://note.com/appgroup
 * Copyright (c) 2024 Application Utilization Study Group
 * Licensed under the MIT License
 ------------------------------------------------------------*/
'use strict';

// 必要なVue.jsコンポーネントのインポート
const { createApp, ref, computed } = Vue;

// 初期設定: カスタムビューの一覧IDとフィールド名
const VIEW_ID = 123456; // カスタムビューの一覧IDを設定
const FIELDS = {
  companyName: '会社名',
  telephone: 'TEL',
  email: 'メールアドレス'
};

// Vue.jsアプリケーションの設定
const app = createApp({
  setup() {
    const records = ref([]);          // レコードを保持するリアクティブ変数
    const searchText = ref('');       // 検索テキストを保持するリアクティブ変数

    // 検索テキストに基づいてフィルタリングされたレコードを計算する
    const filteredRecords = computed(() => {
      if (!searchText.value) {
        return records.value;
      }
      return records.value.filter(record => 
        record[FIELDS.companyName].value.includes(searchText.value) || 
        record[FIELDS.telephone].value.includes(searchText.value) || 
        record[FIELDS.email].value.includes(searchText.value) 
      );
    });

    // レコードを設定する関数
    function setRecords(newRecords) {
      records.value = newRecords;
    }

    return {
      records,
      searchText,
      filteredRecords,
      setRecords
    };
  }
});

// Kintoneイベントの設定: カスタムビューが表示されたとき
kintone.events.on('app.record.index.show', (event) => {
  // ビューIDが一致しない場合は処理を終了
  if (event.viewId !== VIEW_ID) return event;

  // Vueアプリケーションのインスタンスを作成し、レコードを設定
  const instance = app.mount('#app');
  instance.setRecords(event.records);

  return event;
});

４．veu.jsとJavascriptカスタマイズコードの実装

アプリの設定＞JavaScript / CSSでカスタマイズの画面で、カスタマイズ用のファイルをセットアップします。
vue.jsのコンポーネントは、外部のＣＤＮを利用します。
cybouz developer networkにあるVue.js v3.xCDNのURLを利用します。

上記CDNのURLを、Javascriptファイルの「URL指定で追加」ボタンで追加します。その下に手順３で保存したJavascriptコードを「アップロードして追加」ボタンで追加します。

Javascriptカスタマイズ画面

全ての設定が完了したら「アプリの更新」ボタンを押します。

CDNの利用は、CDNを提供しているサーバーの障害で、カスタマイズ機能が突然動かなくなるリスクがありますが、今回はCybouz社のCDNなので、本番で利用してもまず問題ないと思います。
【参考】他社のＣＤＮを利用してトラブルを体験した記事

５．カスタムビューのスタイル変更（ＣＳＳファイル）

手順４まで完了したら、デモ画面と同じ様な動作が確認できると思います。
しかし、列の枠とデータの間に少し余白が無いと視認性が悪いので、CSSファイルでデザインを工夫してみたいと思います。
このためにカスタマイズビューHTMLのテーブルタグに、CSSで操作するためのID（custom-table）を予め付与しておきました。
<table id="custom-table" border="1px" width="80%">

列に余白を設けるＣＳＳファイル

/* テーブルのスタイル */
#custom-table {
  margin: 10px 0; /* 左揃えにする */
}

#custom-table th, #custom-table td {
  padding: 10px;
  text-align: left;
}

上記のコードを文字コードをUTF-8にして好きな名前で保存して下さい。
アプリの設定＞JavaScript / CSSでカスタマイズの画面で、保存したCSSファイルをアップロードして追加します。

ＣＳＳでデザインを変更した一覧画面では、列の余白があるので見易くなっていると思います。工夫次第で見出しに色を付けたりすることも可能です。

CSSでデザインを変更した画面

カスタマイズした感想

今回のカスタマイズにより、Kintoneの検索機能が大幅に改善され、より柔軟で使いやすいものになりました。Vue.jsを活用することで、少ないコード量で検索機能の拡張が実装できたことに正直驚きました。

kintoneのレコード一覧表の検索機能の制限（全角1文字や半角英数字の部分一致検索が不可）には、不満のあるユーザーも多かったので、今回のカスタマイズは、結構ニーズが有ると思います。
※添付ファイルの中身の検索は対象外です。

【留意事項】
本カスタマイズは、レコードを一括取得してデータをキャッシュしているいるので、検索の度にＡＰＩ回数を消費しないメリットがありますが、
反面、レコード件数が10万件を超える様な大きなアプリでは、検索結果が表示されるまでかなり時間がかかる可能性がありますので、使いどころに注意して下さい。

柔軟なカスタマイズも可能

カスタマイズビューのHTMLとJavascriptコードのフィールド設定を修正することで、色々なアプリに柔軟に対応できると思います。
以下のデモ画面では、検索窓を一覧表のヘッダー部分に移動して、一覧表の表示列項目を増やし、デザインをCSSでカスタマイズし、レコード詳細画面のリンクマークを左端に取り付けてみました。
工夫次第でこの様なカスタマイズも可能です。

デモ画面

本投稿の内容は、以下の記事を参考にさせて頂きました。

Kintoneとvue.jsを組み合わせたカスタマイズには、大きな可能性がありそうです。
今回も最後まで読んで頂いてありがとうございました。

いいなと思ったら応援しよう！

アプリ活用研究会
よろしければサポートお願いします！ いただいたサポートは、note記事制作の活動費に使わせていただきます！