【電帳法対応】プログラミング未経験でも作れた！「ポチポチ押すだけ」のファイル名リネーム術（設定不要・無料）

フリーランス運営

「あれ、あの請求書のファイル、どこに保存したっけ…？」

「とりあえずデスクトップに置いておこう（そして画面がアイコンで埋め尽くされる）」

年末が近づくと、PCの中の整理整頓、憂鬱になりますよね。

在宅ワークでCADオペレーターをしている私も、全く同じでした。

「ちゃんと整理しなきゃ」とは思っても、忙しい時に毎回ファイル名を打ち込むのは面倒くさい。

でも、適当な名前で保存すると、後で「電帳法（電子帳簿保存法）」の検索要件（日付・取引先・金額）を満たしているか不安になる…。

そんなジレンマを解消するために、「何も考えずにボタンをポチポチ押すだけで、完璧なファイル名を作ってくれるツール」を自作してみました。

コードなんて書いたことのない私でも、Windowsの「メモ帳」だけで作れたこのツール。

あまりに便利なので、コードを無料で公開します。コピペするだけで使えますので、ぜひ試してみてください。

なぜ、わざわざ「ツール」を作るのか？

「ファイル名くらい、手で打てばいいじゃない」

そう思うかもしれません。でも、ちょっと計算してみてください。

「3ヶ月」で元が取れる計算

私がこのツールを作るのにかかった時間は、コピペ作業を含めてもたったの15分です。

一方で、毎回手入力でファイル名をつけている時間は、1回30秒だとしても、月に10ファイルあれば年間で1時間以上のロスになります。

  • 手入力のロス: 毎月5分（年間60分）
  • ツール作成時間: 15分

つまり、このツールを作って3ヶ月使い続ければ、そこから先はずっと「時間の貯金」が増え続けるということです。

忙しい私たちフリーランスこそ、こういう「地味な自動化」に投資すべきだと思いませんか？

3分で作れる「自分専用リネームツール」

今回紹介するのは、こんなツールです。

このツールの特徴:

  1. インストール不要: アプリを入れる必要はありません。
  2. ネット不要: オフラインでも動くので、カフェでも飛行機でも使えます。
  3. 電帳法対応: 「日付_金額_内容_取引先」という、法律の要件を満たすファイル名が自動で作れます。

使い方はシンプル。

「いくら？どんな？」「何？」「誰？」というボタンを選んでいくだけ。

最後に「コピー」ボタンを押せば、20251207_100000_請求書_A社 といったファイル名がクリップボードに入ります。あとは保存画面で貼り付けるだけ！

【実践】魔法のレシピ（作り方）

では、実際に作ってみましょう。作業時間は3分です。

ステップ1：素材をコピーする

以下の「魔法のコード」をすべてコピーしてください。これがツールの設計図です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>シンプル・リネーム（オフライン）</title>
    <style>
        /* デザイン設定 */
        :root {
            --primary: #2563eb; --primary-bg: #eff6ff; --primary-hover: #1d4ed8;
            --secondary: #16a34a; --secondary-bg: #f0fdf4;
            --gray-bg: #f3f4f6; --border: #e5e7eb;
            --text-main: #374151; --text-sub: #6b7280;
        }
        body {
            font-family: "Helvetica Neue", Arial, sans-serif;
            background-color: var(--gray-bg); margin: 0;
            display: flex; justify-content: center; align-items: center;
            min-height: 100vh; color: var(--text-main);
        }
        .container {
            background-color: white; padding: 24px; border-radius: 12px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            width: 100%; max-width: 450px; box-sizing: border-box;
        }
        h2 { font-size: 1.25rem; margin: 0 0 16px 0; padding-bottom: 8px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
        .tag-law { font-size: 0.75rem; background-color: #fee2e2; color: #dc2626; padding: 2px 8px; border-radius: 4px; font-weight: normal; }
        .form-group { margin-bottom: 20px; }
        label { display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: 500; margin-bottom: 6px; }
        .badge-any { font-size: 0.7rem; background-color: #e5e7eb; padding: 1px 6px; border-radius: 4px; color: #4b5563; }
        
        /* 入力欄のスタイル調整 */
        input { width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; box-sizing: border-box; outline: none; }
        input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-bg); }
        /* 日付欄も入力できるように背景色を白に */
        #inputDate { background-color: white; font-family: monospace; letter-spacing: 1px; } 

        .preset-container { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
        button { cursor: pointer; border: none; font-family: inherit; }
        .btn-preset { padding: 4px 10px; font-size: 0.75rem; border-radius: 9999px; border: 1px solid transparent; background-color: white; transition: all 0.2s; }
        .btn-preset:active { transform: scale(0.95); }
        .theme-blue .btn-preset { background-color: var(--primary-bg); color: var(--primary); border-color: #bfdbfe; }
        .theme-blue .btn-preset:hover { background-color: #dbeafe; }
        .theme-green .btn-preset { background-color: var(--secondary-bg); color: var(--secondary); border-color: #bbf7d0; }
        .theme-green .btn-preset:hover { background-color: #dcfce7; }
        .amount-area { background-color: #f9fafb; padding: 12px; border-radius: 8px; border: 1px solid var(--border); }
        .amount-input-wrapper { position: relative; }
        .amount-input-wrapper input { padding-left: 10px; background-color: white; }
        .amount-desc { font-size: 0.65rem; color: #9ca3af; margin-top: 4px; text-align: right; }
        .result-box { background-color: #eff6ff; border: 1px solid #dbeafe; border-radius: 8px; padding: 12px; display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
        .result-code { font-family: monospace; font-weight: bold; color: var(--primary); font-size: 1.1rem; word-break: break-all; }
        .btn-copy { background-color: var(--primary); color: white; padding: 8px 16px; border-radius: 6px; font-weight: bold; font-size: 0.875rem; margin-left: 12px; flex-shrink: 0; }
        .btn-copy:hover { background-color: var(--primary-hover); }
        .btn-copy.copied { background-color: var(--secondary); }
        .btn-reset { color: var(--text-sub); font-size: 0.75rem; background: none; margin-left: auto; display: block; margin-top: 8px; }
        .btn-reset:hover { color: var(--text-main); }
        .date-reset { text-align: right; margin-top: 4px; }
        .date-reset button { background: none; color: var(--primary); font-size: 0.75rem; text-decoration: underline; }
    </style>
</head>
<body>
    <div class="container">
        <h2>🏷️ シンプル・リネーム <span class="tag-law">電帳法対応</span></h2>

        <!-- 日付 -->
        <div class="form-group">
            <label>いつ？ (取引日 yyyymmdd)</label>
            <input type="text" id="inputDate" placeholder="20250101">
            <div class="date-reset"><button onclick="setToday()">今日の日付に戻す</button></div>
        </div>

        <!-- 補足 / 金額 (任意) -->
        <div class="form-group amount-area">
            <label>補足 / 金額 <span class="badge-any">任意</span></label>
            <div class="amount-input-wrapper">
                <input type="text" id="inputAmount" placeholder="例: AI自動化、11000 など">
            </div>
            <p class="amount-desc">※ここに入力した内容が、日付のすぐ後に来ます</p>
        </div>

        <!-- 内容 -->
        <div class="form-group theme-green">
            <label>何？ (内容)</label>
            <div class="preset-container" id="contentPresets"></div>
            <input type="text" id="inputContent" placeholder="例: 請求書">
        </div>

        <!-- 相手/案件 -->
        <div class="form-group theme-blue">
            <label>誰の？ (取引先)</label>
            <div class="preset-container" id="clientPresets"></div>
            <input type="text" id="inputClient" placeholder="例: A社">
        </div>

        <!-- 結果 -->
        <div style="margin-top: 24px;">
            <label style="color:var(--text-sub); font-size:0.75rem;">生成されたファイル名 (拡張子なし)</label>
            <div class="result-box">
                <code id="resultOutput" class="result-code"></code>
                <button onclick="copyToClipboard()" class="btn-copy">コピー</button>
            </div>
        </div>

        <button onclick="resetForm()" class="btn-reset">↺ 入力をリセット</button>
    </div>

    <script>
        /* =================================================================
           【設定エリア】 自由に書き換えてください
           ================================================================= */
        
        const clients = [
            "A社", 
            "B社", 
            "MKT", 
            "個人", 
            "事業"
        ];

        const contents = [
            "請求書", 
            "領収書", 
            "投稿済", 
            "記事下書き", 
            "ネタ",
            "素材", 
            "確定申告"
        ];

        /* =================================================================
           プログラム本体
           ================================================================= */

        window.onload = function() {
            setToday();
            createButtons('clientPresets', clients, setClient);
            createButtons('contentPresets', contents, setContent);
            updateResult();
        };

        function setToday() {
            const today = new Date();
            const yyyy = today.getFullYear().toString();
            const mm = (today.getMonth() + 1).toString().padStart(2, '0');
            const dd = today.getDate().toString().padStart(2, '0');
            document.getElementById('inputDate').value = `${yyyy}${mm}${dd}`;
            updateResult();
        }

        function createButtons(containerId, items, onClickFunc) {
            const container = document.getElementById(containerId);
            items.forEach(item => {
                const btn = document.createElement('button');
                btn.textContent = item;
                btn.className = 'btn-preset';
                btn.onclick = () => onClickFunc(item);
                container.appendChild(btn);
            });
        }

        function setClient(val) {
            document.getElementById('inputClient').value = val;
            updateResult();
        }
        function setContent(val) {
            document.getElementById('inputContent').value = val;
            updateResult();
        }

        function updateResult() {
            const date = document.getElementById('inputDate').value;
            const client = document.getElementById('inputClient').value;
            const amount = document.getElementById('inputAmount').value;
            const content = document.getElementById('inputContent').value;
            
            let result = date;
            
            // ★並び順を変更しました: 日付_補足_内容_取引先
            if (amount) result += `_${amount}`; 
            if (content) result += `_${content}`;
            if (client) result += `_${client}`;
            
            document.getElementById('resultOutput').textContent = result;
        }

        function copyToClipboard() {
            const text = document.getElementById('resultOutput').textContent.trim();
            if (!text) return;
            navigator.clipboard.writeText(text).then(() => {
                const btn = document.querySelector('.btn-copy');
                const originalText = btn.textContent;
                btn.textContent = "OK!";
                btn.classList.add('copied');
                setTimeout(() => {
                    btn.textContent = originalText;
                    btn.classList.remove('copied');
                }, 1500);
            });
        }

        function resetForm() {
            setToday();
            document.getElementById('inputClient').value = "";
            document.getElementById('inputAmount').value = "";
            document.getElementById('inputContent').value = "";
            updateResult();
        }

        // すべての入力欄で変更を監視
        document.getElementById('inputDate').addEventListener('input', updateResult);
        document.getElementById('inputClient').addEventListener('input', updateResult);
        document.getElementById('inputAmount').addEventListener('input', updateResult);
        document.getElementById('inputContent').addEventListener('input', updateResult);
    </script>
</body>
</html>

ステップ2：メモ帳を開く

Windowsのスタートメニューから「メモ帳」を開きます。

そこに、さっきコピーしたコードをそのまま貼り付けてください。

ステップ3：保存する（ここが最重要！）

ここだけ注意してください！

保存するときに、ファイル名を「シンプルリネーム.html」にします。

そして、ファイルの種類を「すべてのファイル」に変えてください。

ステップ4：完成！

保存したファイルのアイコンが、普段使っているブラウザ（ChromeやEdge）のマークに変わっていれば成功です。

ダブルクリックしてみてください。あなた専用のツールが起動します！

自分の取引先に書き換えるには？

「A社とかB社じゃなくて、自分のクライアント名にしたい！」

もちろんできます。これも「メモ帳」で編集するだけです。

  1. 作ったファイルを右クリックします。
  2. 「プログラムから開く」→「メモ帳」を選びます。
  3. ファイルの下の方にある【設定エリア】という場所を探してください。

// ■「誰の？」のボタンリスト
const clients = [
    “株式会社〇〇”,
    “△△デザイン”,
    “個人”,
    “経理”
];

この “” の中身を、あなたのよく使う取引先や案件名に書き換えて、上書き保存するだけ。

これで、世界に一つだけの「あなた専用ツール」の完成です。

⚠️ メモ帳で開くと文字化けしている場合

もし開いた時に文字がぐちゃぐちゃになっていても、慌てないでください。 パソコンの表示がおかしいだけです。

  1. 文字化けしている中身をすべて消す（Ctrl + A で全選択して Delete）。
  2. 新しいメモ帳にブログのコードをもう一度コピーして、貼り付け直す。
  3. これで綺麗な日本語に戻ります！

まとめ：事務作業を秒で終わらせよう

たったこれだけの作業で、これからのファイル整理が劇的に楽になります。

私はこのツールのおかげで、「領収書、ちゃんと整理できてるかな…」という漠然とした不安が消えました。

フォルダを開いた時に、規則正しくファイルが並んでいるのを見るのは、精神的にもすごく気持ちがいいものです。

ぜひこのツールを使って、面倒な事務作業をサクッと終わらせて、美味しいコーヒーでも飲む時間を確保してくださいね。

コメント

タイトルとURLをコピーしました