【ブックマークレット】Web画像をフォルダに一括保存する方法（日本語対応）

Webページ内の画像をワンクリックで一括ダウンロードするブックマークレットを解説します。日本語ファイル名の文字化け解消や遅延読み込み画像への対応、File System Access APIによるフォルダへの直接保存手順を初心者向けに紹介します。

はじめに

Webページ上の解説画像やスクリーンショットを1枚ずつ手動で保存する作業は手間がかかります。

本記事では、記事エリア内の画像や画像リンクを自動判別し、日本語ファイル名の文字化けを防ぎながら指定フォルダに一括保存できるJavaScriptブックマークレットのコードと導入手順を解説します。拡張機能のインストールなしで、ブラウザ標準の機能のみで安全に実行できます。

ブックマークレットの機能と特徴

今回作成するブックマークレットは、ブログ記事や技術解説サイトに配置されている画像アセットを高速に収集・保存するためのツールです。

手順1：画像一括保存ブックマークレットの登録

1. ブラウザのブックマーク機能にスクリプトを登録します。以下のコードは、File System Access APIを利用してローカル環境にフォルダを作成し、その中に画像ファイルを書き込むプログラムです。コード全体をコピーしてください。

ブラウザへの登録手順

1. ブラウザ（Google ChromeまたはMicrosoft Edge）のブックマークバーを表示します（ショートカットキー: Ctrl + Shift + B / Macは Cmd + Shift + B）。
2. ブックマークバーの空いている場所で右クリックし、[ページを追加] または [ブックマークを追加] を選択します。
3. 名前に任意の名前（例：画像一括保存）を入力します。
4. URLの入力欄に、以下のJavaScriptコードを貼り付けて [保存] をクリックします。

javascript:(async()=>{const targetSelector='main, article';const c=(targetSelector?document.querySelector(targetSelector):null)||document.body;const s=new Set();const reg=/\.(png|jpe?g|gif|webp|svg|bmp)(\?.*)?$/i;c.querySelectorAll('a[href]').forEach(a=>{if(reg.test(a.href))s.add(a.href);});c.querySelectorAll('img').forEach(m=>{const u=m.currentSrc||m.src||m.getAttribute('data-src')||m.getAttribute('data-lazy-src');if(u&&!u.startsWith('data:')&&reg.test(u))s.add(u);});const list=Array.from(s);if(list.length===0){alert('画像が見つかりませんでした。');return;}if(!window.showDirectoryPicker){alert('お使いのブラウザはFile System Access APIに対応していません。ChromeまたはEdgeをご利用ください。');return;}try{const rootDir=await window.showDirectoryPicker();const folderName=prompt('作成するフォルダ名を入力してください:','downloaded_images');if(!folderName)return;const targetDir=await rootDir.getDirectoryHandle(folderName,{create:true});for(let i=0;i<list.length;i++){const u=list[i];try{const res=await fetch(u);const b=await res.blob();let fn=u.split('/').pop().split('?')[0]||`image_${i+1}.png`;try{fn=decodeURIComponent(fn);}catch(e){}const fileHandle=await targetDir.getFileHandle(fn,{create:true});const writable=await fileHandle.createWritable();await writable.write(b);await writable.close();}catch(e){console.error(e);}await new Promise(r=>setTimeout(r,200));}alert('指定フォルダへの保存が完了しました。');}catch(e){if(e.name!=='AbortError')console.error(e);}})();

コード先頭の変数 targetSelector に任意のCSSセレクタ（クラス名やID名、要素名）を指定しています。初期値として main, article を設定しており、ここを任意の文字列に書き換えることで対象エリアを限定できます。WordPress専用のパス判定（/wp-content/uploads/）も排除し、画像拡張子の正規表現判定に一本化しています。

手順2：ブックマークレットの実行と保存手順

登録したブックマークレットを使って、Webサイトから画像をダウンロードします。

1. 画像を保存したいWebページを開きます。
2. ブックマークバーにある登録したブックマークをクリックします。
3. ディレクトリの選択ダイアログが表示されるため、保存先の親フォルダ（例: 「ダウンロード」や「デスクトップ」）を選択してアクセスを許可します。
4. フォルダ名の入力プロンプトが表示されたら、新規作成するフォルダ名を入力して [OK] をクリックします。
5. 画像の取得と保存が順次実行され、完了メッセージが表示されます。

ブックマークレットのコード解説

本ブックマークレットで採用している主要な技術仕様とWeb標準APIの役割を解説します。

主要APIとブラウザ仕様

フォルダ作成と直接保存の仕組み

通常のダウンロード処理（HTMLの download 属性）では、セキュリティ上の制限からWebページ側から保存先ディレクトリを任意に作成・指定することはできません。パス記号（/ や \）を含めても、ブラウザによって自動的に無効化されます。

本コードでは、W3Cで策定が進められている MDN Web Docs: File System Access API を利用しています。ユーザーがダイアログで明示的に許可したディレクトリに対してのみ書き込み権限を取得し、指定したフォルダを新規作成した上で、バイナリデータをファイルハンドルへ直接ストリーム書き込みしています。

日本語ファイル名の文字化け防止

Webサーバ上に配置されている日本語ファイル名は、URL規格に準拠してパーセントエンコーディング（UTF-8バイト列の16進表記）されています。

変換前: %E3%83%86%E3%82%B9%E3%83%88.png
復元後: テスト.png

本コードでは、URL末尾から抽出したファイル名文字列に対して decodeURIComponent() を適用することで、保存時に本来の日本語表記へ復元しています。

遅延読み込み（Lazy Load）画像の収集対策

WordPressをはじめとする多くのWebサイトでは、パフォーマンス向上のため画像の遅延読み込みが設定されています。この場合、表示前のimg要素では src 属性にプレースホルダー用のダミー画像が指定され、本来の画像URLは data-src や data-lazy-src などの独自属性に格納されています。

スクリプト側で currentSrc、src、各種データ属性を優先度順に走査することで、画面にスクロール表示されていない画像も含めて網羅的にURLを収集します。

関連コンテンツ

ブックマークレット超入門

ブックマークレットの使い方をまとめました。

ai.joho.info

2026.09.06