Show original
Try the app
類似ファイル名抽出ツール
Enjoyed this article?
Support zero-dev. jp
Share
Similar Filename Extraction Tool Development Record
AI translation
Similar Filename Extraction Tool Development Record
About 7 min read0
AI translation
Similar Filename Extraction Tool Development Record
Try the app
類似ファイル名抽出ツール
Enjoyed this article?
Support zero-dev. jp
This is the background behind the development of the "Similar Filename Extractor" tool.
A web tool that takes filenames in a folder or a list of filenames, groups files with similar names together, and displays them in a list. It's used in the preliminary stage of file organization to visually confirm "things that might be duplicates" and "files with different versions" (it does not delete, move, rename files, or read file contents).
Before starting development, I considered which method to use for finding similar names.
I decided not to include a feature to adjust character similarity numerically, and instead narrowed it down to 7 types: copy notation, version notation, dates, trailing numbers, file extensions, notation variations, and path differences.
If I used a method based on character similarity, it would require adjustment of "how similar is similar," and it would be difficult to explain the reasoning behind the judgment. I thought it would be better suited as a tool for self-judgment by looking at results if I used a form where the reason could be explained in words—differences in notation. I also decided not to add delete or rename buttons, keeping the role limited to finding and arranging files.
There was an issue where backslashes and forward slashes were mixed in path separators when pasting and reading files.
I standardized the separator to forward slashes at the import stage and aligned the display and saved text notation.
Additionally, there was a part I revisited regarding the notification for skipping lines that had only paths without filenames.
Initially, the "0 items, cannot extract" message when pressing "Extract" was overwriting the previous notification.
I changed it to retain the count of skipped lines as a state and display it alongside the 0-item message.
I discovered during pre-release checks that the tool wouldn't work on older Safari versions because part of the normalization process used lookbehind regular expressions.
I added "Safari 16.4 or later" to the operating environment section with an explanation, making the compatible range clear.
At the same time, when running on a subpath (/similar-filename-extractor/), I switched the build configuration references to relative paths to prevent script and stylesheet loading failures.
If this setting had been missed during release, scripts and stylesheets wouldn't have loaded on the subpath, and the screen wouldn't have displayed. This was caught during pre-release deep review.
In line with the configuration that doesn't communicate externally, I also added Content-Security-Policy settings and confirmed that saving and copying work on the screen after building.
I conducted pre-release quality checks and code reviews, as well as post-release real-device verification.
The initial judgment in the pre-release quality check was "conditional." All 7 critical items (★) were OK, but CSP meta tag was not set (NG), and items that would be completed in later processes—such as images for posting, public URLs, and real-device verification—remained.
After fixing the flagged items and re-checking, along with post-release real-device verification, it received an official "pass" judgment.
In machine checks (subfolder checks, CSS class checks, screen and communication checks), I confirmed 0 NG items across the board.
In code review (first review and pre-release deep review), I received the following feedback and made improvements:
It does not read file contents. Even when a folder is selected, it only uses the filename and location (relative path); it does not open the file itself.
It does not delete, move, or rename files. This tool only "finds and shows similar files." Whether to delete them is for you to confirm and decide.
Filenames you input are not saved in the browser's storage area (they disappear when you close the page).
Judgment is based only on the name format, so it cannot determine whether contents are identical. Also, files that differ only in numbers, such as "InvoiceOctober.pdf" and "InvoiceNovember.pdf," will appear in the same group. Whether they are different files is for you to judge by looking at the names.
The tool can handle up to 10,000 filenames. If the limit is exceeded, it stops importing beyond that point and notifies you of the excess count on the screen.
Files that can be handled in name list import are .txt / .csv format (10MB or less, UTF-8 / Shift-JIS). Empty files or files whose character encoding cannot be determined will result in an error, and the import list up to that point is retained.
If no similar filenames are found and there are 0 groups, it displays "No similar filenames were found."
Filenames such as date-only names that become empty after removing notation are treated as "not eligible for key" and are not included in similar groups.
👉 類似ファイル名抽出ツール（similar-filename-extractor） を開く
「類似ファイル名抽出ツール（similar-filename-extractor）」の開発に至った背景です。
フォルダ内のファイル名、またはファイル名のリストから、名前が似ているファイル同士をグループにして一覧表示する Web ツール。ファイル整理の前段で「重複しそうなもの」「版が分かれているもの」を目で確認するために使う（ファイルの削除・移動・リネームおよびファイル本体の読み込みは行わない）。
開発を始める前に、似た名前をどの方式で探すかを検討しました。
文字の近さを数値で調整する機能は入れず、コピー表記や版表記、日付、末尾の数字、拡張子、表記ゆれ、パスの違いの 7種類に絞る形にしました。
文字の近さで拾う方式にすると、『どこまでを似ているとするか』の調整が必要になり、判定の理由も説明しにくくなります。付記の違いという、理由を言葉で説明できる形にしたほうが、結果を見て自分で判断する道具には合っていると考えました。
削除やリネームのボタンも付けず、見つけて並べるところまでを役割にしています。
貼り付けとファイル読み込みで、パスの区切り文字にバックスラッシュとスラッシュが混ざる問題がありました。
取り込みの段階で区切り文字をスラッシュへ統一し、表示と保存テキストの表記をそろえました。
また、パスだけでファイル名がない行を読み飛ばす通知について、後から見直した箇所があります。
最初は「抽出する」を押したときの「0件のため抽出できません」という案内が、直前の通知を上書きしていました。
読み飛ばした件数を状態として残し、0件の案内と一緒に並べて表示する形へ直しました。
正規化処理の一部に後読み正規表現を使っていたため、古い Safari では動かないことが公開前の確認で見つかりました。
動作環境の欄に「Safari 16.4 以降」と理由を書き添え、動く範囲をはっきりさせました。
あわせて、サブパス（/similar-filename-extractor/）で動かしたときにスクリプトやスタイルシートの読み込みが失敗しないよう、ビルド設定の参照先を相対パスへ切り替えました。
この設定が漏れたまま公開すると、サブパスではスクリプトとスタイルシートが読み込めず、画面が表示されなかったはずです。公開前の深層レビューで見つかったものです。
外部へ通信しない構成に合わせ、Content-Security-Policy の設定も追加し、保存とコピーが動くことをビルド後の画面で確かめました。
公開前の品質チェックとコードレビュー、公開後の実機確認を行いました。
公開前品質チェックの初回判定は「条件付き」でした。重大項目（★）の 7項目はすべて OK でしたが、CSP メタタグ未設定が NG で、掲載用画像や公開 URL、実機確認など、後の工程で揃う項目が残っていたためです。
指摘箇所の修正と再確認、および公開後の実機確認を経て、正式に「合格」判定となりました。
機械検査（子フォルダ検査、CSS クラス検査、画面・通信検査）では、いずれも NG 0件を確認しています。
コードレビュー（一次レビュー・事前深層レビュー）では、次のような指摘を受けて改善しました。
ファイルの中身は読みません。 フォルダを選んだ場合も、使うのはファイル名と場所（相対パス）だけで、ファイル本体は開きません。
削除・移動・名前の変更はしません。 このツールは「似ているものを見つけて見せる」だけです。消すかどうかは、ご自身で確認して決めてください。
入力したファイル名はブラウザの保存領域に保存されません（ページを閉じると消えます）。
名前の形だけで判定するため、中身が同じかどうかは分かりません。また、「請求書_10月.pdf」と「請求書_11月.pdf」のように、数字だけが違う別のファイルも同じグループに出てきます。別物かどうかは、名前を見て判断してください。
取り込めるファイル名は上限 10,000件です。上限を超えた場合は、超過分を取り込まずに打ち切り、その件数を画面に通知します。
名前リスト読込で扱えるファイルは .txt / .csv 形式（サイズ 10MB 以下、UTF-8 / Shift-JIS）です。空ファイルや文字コードを判定できないファイルはエラーになり、それまでの取り込み一覧が保持されます。
類似するファイル名が見つからずグループが0件だった場合は、「類似するファイル名は見つかりませんでした。」と表示されます。
日付だけのファイル名など、付記の除去後に本体が空になる名前は「キー対象外」として扱い、類似グループには入れません。
👉 類似ファイル名抽出ツール（similar-filename-extractor） を開く
