スプレッドシートを
検索できるミニ業務アプリに変える方法

01 — まず題材

表はある。でも、探す道具としては弱い

今回の題材は、説明用に作った架空のUSBケーブル検索ツールです。型番もデータもすべてダミーですが、構成と考え方は実際の小さな業務ツールと同じです。

USBケーブルは、見た目がかなり似ています。けれど、100Wで充電できるもの、60Wまでのもの、映像出力できるもの、充電専用のものが混ざります。ノートPCを急速充電したい人は、表を管理したいわけではありません。「65W以上で、1m以上で、映像出力もできるC-Cケーブル」を今すぐ見つけたいだけです。

02 — 役割分担

スプレッドシートは管理画面、HTMLは利用画面

スプレッドシートを捨てる必要はありません。行を追加しやすい。列を増やしやすい。非エンジニアでも編集できる。履歴も残る。データを持つ場所としては、むしろ強いです。

問題は、利用者向けUIとしては弱いことです。列が多い、横スクロールがある、スマホで見にくい、どの列を見ればよいか分かりにくい。そこで、役割を分けます。

この分担にすると、「管理しやすい表」と「探しやすい画面」を両立できます。

03 — After

HTML側で、表を「道具」に変える

同じデータでも、HTML側に渡せばカード表示にできます。型番、端子、長さ、給電ワット数、映像出力、注意点、保管場所を、利用者が見たい順番で並べられます。

さらに検索条件を入れると、合うものを上に集め、合わないものは薄く下へ回せます。完全に消さないのがポイントです。条件を少し緩めれば使える候補も見えるので、業務ツールとしては判断しやすくなります。

04 — Apps Script

Apps Script側は、データを渡すだけにする

仕組みとしては、Apps ScriptでHTML画面を表示し、スプレッドシートの全行をJSONとして渡します。検索や表示の工夫はHTML側に寄せます。

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
    .setTitle('ケーブル検索ツール')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function getData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = sheet.getDataRange().getValues();
  const headers = data[0];
  const jsonData = [];

  for (let i = 1; i < data.length; i++) {
    let row = {};
    for (let j = 0; j < headers.length; j++) {
      row[headers[j]] = data[i][j];
    }
    jsonData.push(row);
  }
  return jsonData;
}

1行目をヘッダーとして扱い、2行目以降をデータにするだけです。Apps Script側を複雑にしないほど、あとから見た目や検索条件を変えやすくなります。

05 — 検索ロジック

条件に合う行を、上に集める

HTML側では、カードごとに検索用の値を持たせます。給電、長さ、端子、映像出力、認証の有無を照合すれば、「65W以上で1m以上」のような検索ができます。

const matchPower = isNaN(power) || (power <= rowWatt);
const matchLength = isNaN(length) || (length <= rowLen);
const matchType = type === "" || rowType === type;

スプレッドシートのフィルタでも同じことはできます。ただ、毎回3つも4つも列を開いて条件を設定する操作を、全員が迷わずやってくれるとは限りません。検索画面にしておけば、選び方の知識をUIに埋め込めます。

06 — 表記ゆれ

「対応」と「非対応」が同時にヒットする罠

実データでは、表記ゆれが必ず出ます。映像出力の列に「対応」「○」「可」「非対応」が混ざる。認証の列に「有」「取得済」「○」「無」が混ざる。入力者が複数いる表では普通です。

// 「対応」「○」「可」を映像出力OKとみなす。ただし「非対応」は先に除外する。
const videoOk = v => !String(v).includes("非") &&
  (String(v).includes("対応") || String(v).includes("○") || String(v).includes("可"));

ここで単純に includes("対応") だけで判定すると、「非対応」までOK扱いになります。こういう細かい落とし穴は、AIに「非対応が誤ってヒットしないように」と明示して直させるとよいです。

07 — AIに任せる部分

AIが効くのは、コードよりUIの詰め

この手のツールでAIが一番効くのは、Apps Scriptの短いロジックより、HTML側の見た目と使い勝手です。

このスプレッドシートのデータを、業務用の検索ツールとして見やすくしてください。
スマホでも使う想定です。
検索欄、タイプ絞り込み、カード表示、該当件数、元シートへのリンクを入れてください。
見た目は派手すぎず、社内で使える落ち着いたUIにしてください。

さらに「型番を一番目立たせる」「注意点を赤系のラベルにする」「スマホでは1列、PCでは2〜3列にする」のように直していくと、かなり実用的な画面になります。

08 — 向いている場面

似ているものの中から選ぶ場面に強い

この構成が向いているのは、名前や見た目が似ているものの中から、条件に合う1つを選ぶ場面です。

向いている例	理由
備品・ケーブル検索	見た目が似ていて、仕様だけが違う。
部品・消耗品の型番検索	型番、サイズ、対応機種など複数条件で選ぶ。
社内FAQ・トラブル対応表	利用者は答えだけを早く探したい。
教材・資料一覧	カテゴリ、対象者、用途で絞れると使いやすい。

共通点は、データを更新する人と利用する人が違うことです。更新者は表で編集したい。利用者は条件で探したい。このズレがある場所では、HTML検索画面をかぶせる価値があります。

09 — 注意点

万能ではない。小さく使う

この構成は、巨大サービスを作るためのものではありません。数百件から数千件くらいの小さな業務データを、見やすい検索ツールに変えるためのものです。

Google Apps ScriptのWebアプリとして公開するなら、誰がアクセスできるのか、スプレッドシートの内容をどこまで見せてよいのかを確認する必要があります。列名を変えるとHTML側に影響するので、列名のルールも決めておいた方がいいです。

AIは画面作りをかなり助けますが、業務上の意味までは勝手に決められません。どの列が重要か、何で絞るべきか、どの条件ならOKかは、人間が決めるところです。

10 — まとめ

見た目は、業務ツールの機能になる

「スプレッドシートでよくない？」という問いへの答えは、こうです。

データ管理だけなら、スプレッドシートでよい。でも、利用者に使ってもらうなら、見た目は機能です。条件で絞れる。間違えにくい。スマホで見やすい。注意点が目に入る。元データにも戻れる。

スプレッドシートをデータベースにする。HTMLを検索画面にする。AIにUIの詰めを手伝わせる。

この構成なら、大きなシステムを作らなくても、実用的なミニ業務アプリは作れます。