はじめに (対象読者・この記事でわかること)

この記事は、Webサイトのカスタマイズに興味があり、JavaScriptの基本的な知識がある方を対象としています。特に、ダウンロードするファイル名を自動で変更したいと考えている方に最適です。

この記事を読むことで、Tampermonkey(UserScript)を使ってダウンロードファイル名を自由にカスタマイズする方法を学べます。具体的には、ダウンロードリンクを特定する方法、ファイル名を変更するスクリプトの作成方法、そして実際のサイトへの適用方法までを網羅的に理解できます。これにより、毎回手動でファイル名を変更する手間から解放され、作業効率を大幅に向上させることが可能になります。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

  • JavaScriptの基本的な知識（変数、関数、DOM操作など）
  • Tampermonkeyの基本的な使い方
  • Chromeブラウザの基本的な操作

ダウンロードファイル名をカスタマイズする必要性とTampermonkeyの仕組み

多くのWebサイトでは、ダウンロードリンクからファイルをダウンロードする際に、自動生成されたファイル名（例：download.php?file=12345）が割り当てられます。このようなファイル名は、後で整理する際に不便だったり、何のファイルかわからなくなってしまったりすることがあります。

Tampermonkeyは、ブラウザ上で動作するユーザースクリプトを実行できるChrome拡張機能です。この拡張機能を利用することで、Webサイトの動作をカスタマイズしたり、特定の要素を操作したりすることが可能です。ダウンロードファイル名の変更も、このTampermonkeyの機能を活用することで実現できます。

基本的な仕組みとしては、Tampermonkeyで作成したスクリプトがページ内のダウンロードリンクを検出し、クリック時にファイル名を書き換える処理を挿入します。これにより、ユーザーは意識することなく、希望のファイル名でファイルをダウンロードできるようになります。

具体的なスクリプトの作成方法

ここでは、実際にTampermonkeyでダウンロードファイル名を変更するスクリプトを作成する方法をステップバイステップで解説します。

ステップ1: Tampermonkeyのインストールと基本設定

まずはTampermonkeyをインストールします。Chromeウェブストアから「Tampermonkey」を検索し、インストールボタンをクリックします。インストールが完了したら、ブラウザ右上にTampermonkeyのアイコンが表示されます。

次に、新しいスクリプトを作成します。Tampermonkeyのアイコンをクリックし、「新しいスクリプトを作成」を選択します。これにより、スクリプト編集画面が開きます。

ステップ2: ダウンロードリンクを特定する方法

ファイル名を変更するには、まず対象となるダウンロードリンクを特定する必要があります。ブラウザの開発者ツール（F12キー）を開き、ダウンロードリンクのHTML構造を確認します。

一般的なダウンロードリンクは以下のようなHTML構造になっています。

Html

<a href="/download/file/12345" class="download-link">ダウンロード</a>

この場合、class="download-link"がダウンロードリンクを特定するためのセレクタとして使えます。セレクタはサイトによって異なるため、各サイトに合わせて適切なセレクタを特定する必要があります。

ステップ3: ファイル名を変更するスクリプトの作成

次に、実際にファイル名を変更するスクリプトを作成します。以下は基本的なスクリプトの例です。

Javascript

// ==UserScript==
// @name         ダウンロードファイル名変更
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  指定されたダウンロードリンクのファイル名を変更する
// @author       Kousukei
// @match        https://example.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // ダウンロードリンクを特定するセレクタ
    const downloadLinks = document.querySelectorAll('a.download-link');

    // 各ダウンロードリンクにイベントリスナーを追加
    downloadLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            // 元のURLを取得
            const originalUrl = link.href;

            // 新しいファイル名を指定（例：'document.pdf'）
            const newFileName = 'document.pdf';

            // 新しいURLを作成
            const newUrl = originalUrl.replace(/\/[^/]+$/, '/' + newFileName);

            // 元のリンクの代わりに新しいURLでダウンロード
            e.preventDefault();
            window.location.href = newUrl;
        });
    });
})();

このスクリプトでは、まず@matchでスクリプトを適用するURLを指定します。@matchの部分を変更することで、特定のサイトのみにスクリプトを適用できます。

スクリプト本体では、指定したセレクタでダウンロードリンクをすべて取得し、各リンクにクリックイベントリスナーを追加しています。クリックされた際には、元のURLからファイル名部分を新しいファイル名に置き換えて、新しいURLでダウンロード処理を実行します。

ステップ4: スクリプトの適用とテスト

スクリプトを保存したら、実際に動作を確認します。対象のWebサイトにアクセスし、ダウンロードリンクをクリックしてみてください。指定したファイル名でダウンロードが開始されれば成功です。

ハマった点やエラー解決

実装中に遭遇する問題や、エラーの解決方法について記載します。

問題1: ファイル名が変更されない

ダウンロードリンクのセレクタが間違っている可能性があります。開発者ツールで実際のHTML構造を確認し、正しいセレクタを指定してください。

問題2: ダウンロードが開始されない

URLの置換処理が正しく行われていない可能性があります。console.logでURLの変化を確認し、正しく置換されているか確認してください。

問題3: 複数のダウンロードリンクがある場合の対応

ページ内に複数のダウンロードリンクがある場合、すべてのリンクに同じファイル名が設定されてしまいます。リンクごとに異なるファイル名を設定するには、以下のようにスクリプトを修正します。

Javascript

downloadLinks.forEach((link, index) => {
    link.addEventListener('click', function(e) {
        const originalUrl = link.href;
        // リンクごとに異なるファイル名を設定
        const newFileName = `document_${index + 1}.pdf`;
        const newUrl = originalUrl.replace(/\/[^/]+$/, '/' + newFileName);

        e.preventDefault();
        window.location.href = newUrl;
    });
});

解決策

より高度なカスタマイズとして、URLから特定の情報を抽出してファイル名に含めることも可能です。例えば、URLから日付情報を抽出してファイル名に含める場合、以下のようにスクリプトを記述します。

Javascript

downloadLinks.forEach(link => {
    link.addEventListener('click', function(e) {
        const originalUrl = link.href;
        const date = new Date().toISOString().slice(0, 10).replace(/-/g, '');
        const newFileName = `document_${date}.pdf`;
        const newUrl = originalUrl.replace(/\/[^/]+$/, '/' + newFileName);

        e.preventDefault();
        window.location.href = newUrl;
    });
});

このスクリプトでは、現在の日付を取得し、YYYYMMDD形式でファイル名に含めています。これにより、毎日異なるファイル名でダウンロードできるようになります。

まとめ

本記事では、Tampermonkey(UserScript)を使ってダウンロードファイル名をカスタマイズする方法について解説しました。

  • ダウンロードリンクの特定方法
  • ファイル名変更スクリプトの作成方法
  • 実際のサイトへの適用方法

この記事を通して、手動でのファイル名変更の手間を省き、効率的にファイルを管理できるようになるメリットを得られたかと思います。

今後は、より高度なファイル名のカスタマイズ方法や、複数のサイトに対応する汎用的なスクリプトの作成方法についても記事にする予定です。

参考資料

参考にした記事、ドキュメントなどがあれば、必ず記載しましょう。