このツール群は、お使いのコンピュータ上で直接動作する、ブラウザで使えるローカル完結のStatic Web Appコレクションです。サーバ不要で、各ツールは単一HTMLで完結して動作します。基本の流れは「入力 → 生成 → （必要に応じて）実行結果貼り付け → 次のステップの生成」で、画面要素は上から下へ流れに沿って並びます。ツールによっては「入力 → 生成」だけで完結します。
各ツール（HTMLファイル）をウェブブラウザで開くと、専用の入力画面が表示されます。そこに必要な情報を入力するだけで、用途に応じたテキストや結果が自動的に作成されます。
- FFmpeg向けツールで生成されたコマンドを実行するには、お使いのコンピュータに FFmpeg がインストールされている必要があります。
- Japan Weather は天気情報の取得で外部と通信します（オンライン取得）。
- ローカル動作: お使いのPC内で動作し、サーバは不要です。
- 簡単な操作: ウェブブラウザでファイルを開き、情報を入力するだけで結果が手に入ります。
- 1HTML完結: ツールごとに単一HTMLで完結し、配布や保守が簡単です。
- 完全オフライン化: CSSやJavaScriptライブラリは必要最小限に留め、外部CDNへの依存をベンダリング（自前実装）で排除しています。
- UIルール: 必須項目は赤い*、説明は?に集約、ボタン色は生成=緑／反映=青で統一します。
つまり、「ウェブブラウザで動く、ローカルHTMLツール集」と言えます。
- ブラウザでHTMLを開いてフォーム入力すると、用途に応じたテキストや結果を生成
- 基本はローカル動作で、インターネット接続は不要（※一部ツールはオンライン取得あり）
- Static Web App（静的HTML/CSS/JSのみ）として構成され、サーバは不要
- 各ツールは単一HTMLで完結して動作
- ただし
docs/music/は保守性確保のため「分割ソースをビルドして単一HTMLを生成」する例外運用を採用 - 基本の流れ：「入力 → 生成 → （必要に応じて）実行結果貼り付け → 次のステップの生成」で、画面要素は上から下へ流れに沿って並ぶ
- ツールによっては「入力 → 生成」だけで完結するものもある
- ベンダリング: CSSフレームワークなどの外部CDN依存をできる限り排除し、必要な機能は自前で実装して完全オフライン化を実現しています
- 仕様書の命名: 各
*.htmlに対応する仕様書は同一ディレクトリに*-spec.mdで配置する（例:git-pseudo-squash.html↔git-pseudo-squash-spec.md）
- ボタン色: コマンド生成は緑、解析結果の反映は青（用途別に統一）
- 必須項目: 赤いアスタリスク（
*）で示す - 説明: 「
?」のツールチップにまとめる - タイトル説明の運用: 各HTMLのタイトル右に「
?」の説明を置く方針にし、その文言をdocs/index.htmlのホバー説明へ転記する
docs/
├── index.html # トップページ（ツール一覧へのリンク）
├── diagram/ # 図表系ツール
├── music/ # 楽譜変換系ツール
│ ├── *-src.html # music向け開発テンプレート（手編集対象）
│ ├── *.html # music向け配布用生成物（手編集しない）
│ └── src/ # music向け分割ソース（css/ts/js）
├── ffmpeg/ # FFmpegおよび周辺ツール
├── git/ # Git補助ツール
├── grep/ # 検索補助ツール
├── img/ # 画像系ツール
├── text/ # テキスト系ツール
├── life/ # 生活系ツール
├── link/ # URL加工系ツール
└── password/ # パスワード生成ツール
- 対象:
docs/music/配下 - 配布:
*.html（単一HTML、生成物） - 開発:
*-src.html+src/css/*.css+src/ts/*.ts+src/js/*.js - ビルド:
npm run build:music（scripts/build-music.mjs） - 型チェック:
npm run typecheck:music（typescript導入後） - ルール:
*.htmlは直接編集しない- 変更は
*-src.htmlとsrc/を編集する - PRには生成済み
*.htmlを含める
docs/index.htmlの「更新日」を忘れずに更新するdocs/index.htmlの「最終更新日時（更新日）」を忘れずに更新する- PRテキスト作成は「特定のコミット以降の全変更」を求められる前提でまとめる
- 例：「
<コミット>以降の変更内容全てのための PRテキスト」
- 例：「
- PRテキストの基本構成は「タイトル / 概要 / 変更点 / 影響」で統一する
- 開発フローは「変更 → 動作/見た目を確認 → LGTMが出たらコミット」を基本とする
- 変更確認時は、必ず「手元のローカルファイル」を開いていることを確認する
- GitHub Pages 公開版（
https://igapyon.github.io/local-html-tools/）と、ローカル作業中の画面を混同しない - 見た目確認の前に、ブラウザのURLがローカルファイル（
file://.../docs/index.htmlなど）かを毎回チェックする - 公開版と比較する場合は、タブ名やウィンドウを分けて明示的に見分ける
- GitHub CLI不使用:
ghコマンドは使用しないでください。Bash のgitコマンドで対応してください - ユーザーが
LGTMと明示した変更は、追加確認を挟まず commit まで進める - このプロジェクトを編集・拡張する際は、上記の基本方針、UI設計ルール、構成、PRルールに従ってください
FFmpegのコマンドラインを生成するツールです。コマンド主体に見えますが、実際は「順を追って実行 → 結果を貼り付け → 次のコマンドを生成」というユースケースの流れに沿って設計されています。
- ffmpeg-concat-cmdline-gen.html: 複数の.wavファイルを結合するためのコマンドを生成します。
- ffmpeg-loudnorm-cmdline-gen.html: ラウドネス測定結果を基に、ハイレゾ対応やモード切り替えを含んだ正規化コマンドを生成します。
- ffmpeg-trim-cmdline-gen.html: 音声/動画ファイルを切り出すためのコマンドを生成します。
- ffmpeg-audio-convert-cmdline-gen.html: 音声ファイルを指定の形式に変換するコマンドを生成します。
- ffmpeg-youtube-mkv-gen.html: .wav音声ファイルと静止画から、YouTube向けの動画(.mkv)コマンドを生成します。
- ffmpeg-mp4-to-wav-gen.html: .mp4ファイルから音声をWAVとして取り出すコマンドを生成します。
- ffmpeg-replace-audio-with-wav-gen.html: .mp4動画の音声をWAVに差し替えるコマンドを生成します。
- ffmpeg-silence-detect-gen.html: 無音区間検出のためのコマンドを生成します。
URL加工系ツールです。
- amazon-dp-extract.html: Amazon URL から dp/ASIN を抽出します。
- facebook-fbclid-remove.html: URL から Facebook識別子（fbclid）を除去します。
- url-encode-decode.html: URLのエンコードとデコードを行います。
- mime-base64.html: MIME Base64のエンコードとデコードを行います。
- utm-remove.html: URL から utm_* パラメータを削除します。
パスワード生成ツールです。
- password-gen.html: 選択した文字種と文字数でパスワードを生成します。
検索補助ツールです。
- find-gen.html: findコマンドの検索条件を生成します。
画像系ツールです。
- img2svg.html: 画像ファイルをSVGに変換してダウンロードします。
図表系ツールです。
- mermaid-to-svg.html: Mermaid記法からSVGを生成し、SVGを保存します。
- graphviz-dot-to-svg.html: Graphviz DOT記法からSVGを生成し、SVGを保存します。
楽譜変換系ツールです。
- musicxml-to-svg.html: MusicXMLから楽譜SVGを生成し、SVGを保存します。
- musicxml-to-abc.html: MusicXMLをABC記法へ変換し、ABCを保存します。
- abc-to-musicxml.html: ABC記法をMusicXMLへ変換し、MusicXMLを保存します。
- musicxml-to-midi.html: MusicXMLをMIDIへ変換し、.midを保存します。
テキスト系ツールです。
- text-viewer.html: テキストをペーストして、読みやすく表示します。マークダウン形式にも対応しています。
- text-processing.html: 改行付きテキストを半角空白区切りに変換します。
生活系ツールです。
- forgot-items-check.html: 忘れ物チェック用のリストを生成します。
- japan-weather.html: 日本の天気情報（地域別）を確認できます（オンライン取得）。
Git補助ツールです。
- コマンドから入るのではなく、まずユースケース（やりたいこと）を明確化し、流れに沿って必要なコマンドを並べる方針です。
- git-pseudo-squash.html: reset --soft で疑似的に1コミット化するコマンドを生成します。複数行のコミットメッセージに対応し、内容は一時ファイルに書き込んで git commit -F で渡します。
- git-branch-diff.html: ブランチ差分コマンドを生成します。
- git-config-setup.html: Gitのユーザー名とメールアドレスを設定するコマンドを生成します。
- git-config-advanced-setup.html: core.autocrlfやpush.defaultなどの詳細設定をコマンドで生成します。
GitHub Pages で公開する場合は docs/index.html が入口になります。ツール本体は docs/diagram/、docs/music/、docs/ffmpeg/、docs/git/、docs/link/、docs/password/、docs/grep/、docs/img/、docs/text/、docs/life/ 配下にあります。
公開URL: https://igapyon.github.io/local-html-tools/
本プロジェクトで利用しているサードパーティソフトウェアとライセンスは THIRD_PARTY_NOTICES.md に記載しています。
本リポジトリのライセンスは LICENSE を参照してください。
本プロジェクトは複数カテゴリのツールで構成されており、Diagram、FFmpeg、Git、リンク管理、パスワード、grep、画像、生活系などが並列に含まれます。FFmpeg 系ツールはその一部です。