1. このアプリでできること
お客様(会員・物件・生徒など)の情報を登録し、条件を入れて探し、番号をクリックして詳しい内容を見るためのアプリです。
- 項目別の検索:お客様番号・名前・住所・電話番号・製品などを、項目ごとに条件を指定して探せます。
- お客様ごとのまとめ表示:同じお客様番号で複数回登録すると、詳細画面でその履歴(購入・修理など)を確認できます。
- 表示のカスタマイズ:項目名、検索結果に出す項目、詳細画面のレイアウトを、設定画面(⚙ 設定)から自由に変えられます。
- CSVの読込・書出:Excelなどで作ったデータの取り込みや、バックアップができます。
HTMLファイルをブラウザ(Chrome・Edge・Safariなど)で開くだけで使えます。データはお使いのブラウザの中に保存され、サーバーには送信されません。
2. 画面の見かた
画面は、上から「検索欄」「ボタン」「検索結果」の順に並んでいます。
画面上部
タイトルの右側にある ⚙ 設定 から、表示のしかたを変える設定画面が開きます(8章)。タイトルの文字は設定で変えられます。
項目別検索
お客様番号、名前(漢字)、名前(カナ)、住所、電話番号、製品番号、製品名、購入日(期間)、メモの入力欄があります。設定で項目を追加した場合は、その入力欄も加わります。
ボタン
| 🔍 検索 | 入力した条件で検索します。 |
|---|---|
| 条件をクリア | 検索欄をすべて空にします。データは消えません。 |
| + 新規登録 | 新しいデータを1件登録します(5章)。 |
| 📥 CSV読込 | CSVファイルからデータを取り込みます(7章)。 |
| 📤 CSV書出 | 登録データをCSVファイルとして保存します。バックアップにも使えます。 |
| サンプル追加 | 動作確認用のテストデータ5件(山田 太郎・佐藤 花子・鈴木 一郎)を追加します。実際の業務では使いません。押すたびに5件ずつ増えます。 |
| 全データ削除 | 登録されているデータをすべて削除します。確認画面が出ます。元に戻せません。 |
検索結果
条件に合ったデータが表で表示されます。表に出る項目とその並びは、設定の「③一覧表示設定」で決まります。1回の登録が1行で、同じお客様番号のデータが複数あれば、その数だけ行が並びます。
表の中の お客様番号 は青い下線つきのリンクです。クリックすると詳細画面が開きます。
3. まず使ってみる
データがまだない状態で、操作の流れを試すには次の手順が便利です。
- サンプル追加 を押します。画面上部に「サンプル5件を追加しました」と表示されます。
- お客様番号 の欄に
C0001と入力して、🔍 検索 を押します。山田 太郎さんのデータが3件表示されます。 - 表の C0001 をクリックします。詳細画面が開きます。
- 詳細画面の下の「閉じる」を押して戻ります。
サンプルに入るのは C0001(3件)、C0002(1件)、C0003(1件)です。C0004 や C0005 は含まれないので、検索しても「一致するデータがありません」になります。
試し終えたら、全データ削除 でサンプルを消せます(他のデータも全部消えるため、実際のデータがある場合は押さないでください)。
4. 検索のしかた
基本のルール
- 条件を入れないと何も表示されません。検索欄がすべて空のときは「検索条件を入力してください」と出ます。
- 複数の欄に入力すると、すべてに合うデータだけが表示されます(AND検索)。
- 部分一致です。
C000と入れるとC0001〜C0005がまとめて見つかります。 - 英字の大文字・小文字、全角・半角、空白、ハイフンの違いは区別しません(例:
P-1001とp1001は同じ扱い)。 - 名前(カナ) と 製品名 は、ひらがな・カタカナの違いも区別しません(「やまだ」でも「ヤマダ」でも見つかります)。
購入日(期間)
「から」「まで」の日付を入れて期間で絞り込みます。片方だけでも使えます。期間を指定すると、購入日が空のデータは表示されません。
探し直すとき
条件をクリア で検索欄をすべて空にしてから、あらためて入力してください。前の条件が別の欄に残っていると、データがあっても見つからなくなります。
5. 登録・編集
新しく登録する
- + 新規登録 を押します。
- 入力欄に記入します。お客様番号 と 名前(漢字) は必須です。
- 「保存」を押します。
保存後、検索欄に条件が入っていれば、一覧がその条件で更新されます。条件が空のときは何も表示されないので、お客様番号などを入れて検索してください。
同じお客様が新しい製品を買った場合などは、同じお客様番号でもう1件登録します。詳細画面で、その履歴としてまとまって見られます。名前や住所も、もう一度入力してください。
編集する
- 検索して、お客様番号をクリックし、詳細画面を開きます。
- 直したいデータの ✎ 編集 を押します。
- 内容を直して「保存」を押します。詳細画面に反映されます。
1件ずつ編集する作りです。同じお客様番号の複数件をまとめて書き換える機能はありません。
6. 詳細画面
検索結果のお客様番号をクリックすると開きます。閉じるには、下の「閉じる」を押すか、Escキーを押すか、画面の外側をクリックします。
表示のしかたは5種類から選べます
設定の「④詳細画面設定」で選びます(8章)。
| 縦型 | 従来どおりの表示。基本情報を上に、履歴を下に並べます。 |
|---|---|
| カード型 | 基本情報と履歴を、枠で区切って表示します。 |
| 2列型 | 項目を2列に並べて表示します。 |
| 表形式 | 基本情報と履歴を、表で表示します。 |
| ③一覧表示設定 | ③で決めた行×列の配置のまま、1件分のデータを表示します(下記)。 |
縦型・カード型・2列型・表形式では、同じお客様番号のデータをまとめて表示します。基本情報は上に1回、履歴はデータの件数ぶん並びます。履歴の並び順は④で「登録順」「購入日の古い順」「購入日の新しい順」から選べます。
「③一覧表示設定」を選んだとき
- ③で置いた項目だけを、③と同じ行・列の位置に表示します。③に置いていない項目は出ません。
- クリックした行の1件だけが表示されます。同じお客様番号の他のデータはまとめて出ません。
- お客様番号は、リンクではなく通常の文字で表示されます。
- ③の配置を変えて保存すると、次に詳細画面を開いたときから新しい配置になります。
- ④の「表示する項目のチェック」「前の項目と1行にまとめる」「履歴ごとの見出し」は、このモードでは使われません。
7. CSVの読込・書出
書き出す(バックアップ)
📤 CSV書出 を押すと、customer_data.csv というファイルが保存されます。
- 1行目は見出しで、標準の9項目(お客様番号・名前(漢字)・名前(カナ)・住所・電話番号・製品番号・製品名・購入日・メモ)の右側に、追加した項目が続きます。
- 設定で項目名を変えていても、標準の9項目の見出しは上記の名前のままです。
- 文字コードはUTF-8(BOMつき)です。Excelでそのまま開けます。
読み込む
- 📥 CSV読込 を押して、CSVファイルを選びます。
- 「○件を読み込みました。現在のデータに追加しますか?」という確認が出ます。
「OK」は今のデータに追加します。「キャンセル」は今のデータをすべて消して、CSVの内容に置き換えます。取りやめるボタンではありません。誤って置き換えないよう、事前にCSV書出でバックアップを取っておくと安心です。
- 1行目は見出し行として扱われ、データは2行目以降に必要です。
- 見出しは、標準の名前(「お客様番号」「名前」「名前(漢字)」「名前(カナ)」「カナ」「住所」「電話番号」「製品番号」「製品名」「購入日」「メモ」)、または今の設定での項目名と一致した列だけが読み込まれます。一致しない列は無視されます。
- 空の行は読み飛ばされます。
- 文字コードはUTF-8にしてください。Excelで保存するときは「CSV UTF-8(コンマ区切り)」を選びます。文字化けしたり「読み込めませんでした」と出たりするときは、文字コードと見出しを確認してください。
- 購入日は
2026-04-10のような「年-月-日」の形式で入れておくと、日付として検索できます。
8. 設定(⚙)
画面右上の ⚙ 設定 を押すと開きます。①〜④のタブで、項目名や表示のしかたを変えられます。登録済みのデータは、設定を変えても変わりません。
設定画面の下にある 設定を保存 を押すと確定します。「キャンセル」で閉じると、変更は捨てられます。「初期設定に戻す」は顧客管理の初期状態に戻しますが、これも「設定を保存」を押して確定します。
① 業種テンプレート
顧客管理・小売店・修理業・不動産・自動車整備・学校・教室・自由設定から業種を選び、この業種を適用 を押すと、項目名・表示項目・詳細画面の見出しがまとめて設定されます。
- 適用したあとも、②〜④で自由に変えられます。
- 自分で追加した項目は、業種を切り替えても残ります。
- 同じ画面で、画面上部のタイトル(画面タイトル)も変えられます。
② 項目設定
- 項目名の変更:入力欄の文字を書き換えます。表示上の名前だけが変わり、データは変わりません。
- 区分:「基本情報」か「履歴情報」かを選びます。基本情報はお客様ごとに1回、履歴情報はデータ1件ごとに表示されます。
- 並び順:↑↓ で変えます(同じ区分の中で入れ替わります)。
- 項目の追加:「+ 項目を追加」で、項目名・種類(テキスト・日付・数値・長文)・区分を選んで 追加 を押します。追加した項目は、登録フォームと検索欄にも現れます。
- 項目の削除:追加した項目だけ 削除 できます。入力済みのデータは消えず、表示されなくなるだけです。標準の項目は削除できません。
- 項目名は空にできません。ほかの項目と同じ名前も付けられません。
③ 一覧表示設定
検索結果の表に、どの項目を出すか、どの位置に置くかを決めます。詳細画面の「③一覧表示設定」モードでも、この配置が使われます。
- 項目のチェック:チェックを入れると、表の空いているセルに自動で置かれます。外すと配置から外れます。
- 一覧表レイアウト:行×列のマス目が並び、各マスのプルダウンで表示する項目を選びます。同じ項目を別のマスで選ぶと、前のマスは空になります。
- 行・列の増減:+ 行を追加- 行を削除+ 列を追加- 列を削除 で増減します(最小1×1、最大20×20)。
- 未配置の項目:どこにも置いていない項目が並びます。+ 配置 で空きマスに置けます。
- 初期状態に戻す:レイアウトを初期状態に戻す で、自動配置に戻ります。
検索結果からお客様番号をクリックして詳細画面を開くため、お客様番号 はレイアウトのどこかに置いてください。外してしまうと、検索結果にお客様番号が出ず、詳細画面を開けなくなります。
④ 詳細画面設定
| 詳細画面レイアウト | 縦型・カード型・2列型・表形式・③一覧表示設定から選びます(6章)。 |
|---|---|
| 各種の見出し | 詳細画面のタイトル、「基本情報」「履歴」の見出しの文字を変えます。 |
| 履歴ごとの見出し | 履歴1件の先頭に、太字で出す項目を選びます(製品名など)。 |
| 履歴の並び順 | 登録順/購入日の古い順/購入日の新しい順。 |
| 表示する項目 | 基本情報・履歴情報の項目ごとに、詳細画面に出すかどうかをチェックで選びます。 |
| 前の項目と1行にまとめる | チェックすると、直前の項目と同じ行に並べて表示します(例:住所を前の項目と1行に)。 |
「③一覧表示設定」を選んだときは、表示する項目・順序は③の配置が優先されます。
9. 一覧と詳細の表示の関係
③で決めた「行×列の配置」が、検索結果と詳細画面でどう見えるかを例で示します。この2つは見え方が違うので、ここで整理しておきます。
| お客様番号 | メールアドレス | 名前(漢字) | 製品番号 | 電話番号 | 購入日 |
|---|---|---|---|---|---|
| C0001 | yamada@example.com | 山田 太郎 | P-1001 | 090-1234-5678 | 2026年4月10日 |
お客様番号のリンクが押せるのは検索結果の表だけです。詳細画面の中では通常の文字で表示されます。
- 配置を変えて「設定を保存」を押せば、検索結果の列の並びも、次に開く詳細画面の配置も、同じ配置に変わります。
- ③に置いていない項目は、検索結果にも「③一覧表示設定」モードの詳細画面にも出ません。他のレイアウト(縦型など)の詳細画面では、④でチェックした項目が出ます。
10. データの保存と注意点
- データはブラウザの中に保存されます。登録したデータも設定も、お使いのパソコンのそのブラウザの中にあります。別のパソコンや別のブラウザ、別の場所に置いたHTMLファイルでは、同じデータは見えません。
- ブラウザの履歴・サイトデータを消すと、データも消えることがあります。大切なデータは、定期的に 📤 CSV書出 でファイルに保存しておいてください。
- 複数の人で同じデータを共有する機能はありません。
- 全データ削除 と、CSV読込の確認で「キャンセル」を選ぶ「置き換え」は、どちらも元に戻せません。
- ブラウザによっては、プライベートモード(シークレットウィンドウ)で使うと、閉じたときにデータが消えます。
11. よくある質問
- 検索しても何も表示されません。
- 次を確認してください。①検索欄が空のままではないか(条件がないと表示しません)。②別の欄に前の条件が残っていないか(条件をクリア で消せます)。③そのお客様番号のデータが本当に登録されているか。画面上部の「登録データ ○件」で件数を確認できます。
- サンプル追加を押しても、画面が何も変わりません。
- 追加はされています。検索条件が空だと一覧が出ないため、変わらないように見えます。画面上部の「登録データ ○件」が増えているか確認し、
C0001などで検索してください。 - 同じ人が何行も表示されます。
- 1回の登録が1行の作りだからです。同じお客様番号で3回登録すれば3行になります。
- お客様番号をクリックできません。
- ③一覧表示設定のレイアウトに、お客様番号が置かれていない可能性があります。設定の③でお客様番号をどこかのマスに置いてください。
- 設定を変えたのに、画面が変わりません。
- 設定画面の下の「設定を保存」を押しましたか。保存するまで反映されません。すでに開いている詳細画面は、閉じてから開き直してください。
- 詳細画面に、③で置いた項目以外も出てほしいです。
- ④のレイアウトを「縦型」「カード型」「2列型」「表形式」のどれかにすると、基本情報と履歴が④のチェックに従って出ます。「③一覧表示設定」は、③で置いた項目だけをそのまま出すモードです。
- 詳細画面の「③一覧表示設定」で、同じお客様の他の履歴も一緒に見たいです。
- このモードは、クリックした行の1件だけを表示します。同じお客様番号の全履歴をまとめて見たいときは、縦型・カード型・2列型・表形式を選んでください。
- ボタンが押せません。
- 詳細画面や設定画面が開いたままだと、後ろの画面のボタンは押せません。「閉じる」を押すか、Escキーで閉じてください。
- データが消えてしまいました。
- ブラウザを変えた、ファイルの置き場所を変えた、ブラウザのサイトデータを消した、プライベートモードで使った、などが考えられます。元のブラウザ・元のファイルで開き直してみてください。今後に備えて、📤 CSV書出 でこまめにバックアップを取ってください。
- CSVを読み込んだら文字化けしました/読み込めませんでした。
- ファイルをUTF-8で保存し直してください。あわせて、1行目の見出しが「標準の名前」または今の項目名と一致しているか確認してください。