【第3回】画像移行をJSで突破！カラーミーからのデータ抽出手順

2026年3月20日 2026年3月21日

tt_admin

【連載目次】カラーミーからSquareへ移行した記録

【第1回】カラーミーからの移行：エコノミープラン廃止と「隠れコスト・データ移行の罠」
【第2回】固定費ゼロ！ネットショップサービス5社を比較してSquare（スクエア）を選んだ理由
【第3回】画像移行をJSで突破！カラーミーからのデータ抽出手順（本記事）
【第4回】Square（スクエア）でのネットショップ構築手順と、実際の使い勝手

記事のターゲット

カラーミーショップから他社カートへの引っ越しを検討している方
「画像ファイル管理」にあるサブ画像を一括ダウンロードできず絶望している方
手作業での画像保存を回避して、少しでも楽にデータ移行したい方

カラーミーの画像ファイルURL抽出手順

ショップの引っ越し作業で一番の壁になるのが「画像データの移行」です。
商品テキストや「メイン画像（商品編集画面の商品画像）」のURLは標準のCSV機能で簡単に書き出せますが、やっかいなのが「サブ画像（画像ファイル管理画面の画像）」。私が調べた限り、サブ画像のURLを一括出力する機能はありませんでした。

数百枚の画像を1枚ずつ右クリックで保存するのは非現実的です。そこで本記事では、ブラウザの「開発者ツール」と短いJavaScriptコードを使って、サブ画像のURLリストを一瞬で取得する裏技をサクッと解説します！

1. 準備編：「メイン画像」はCSVでサクッと出力

まずは簡単なところから終わらせましょう。

カラーミーの管理画面サイドバー右下の「ダウンロード」へ進む。
「商品データ」をダウンロードする。

これだけで、商品名や価格などのテキストデータに加えて、商品登録画面で設定した「メイン画像」のURLも取得できます。メイン画像に関しては、このCSVのURLリストを使って一括ダウンロードツールなどに読み込ませればOKです。

2. 本題：「サブ画像」のURLをJSで強制抽出する

問題は、CSVに出力されない「サブ画像」です。手作業での右クリック保存を回避するため、ブラウザ（Google Chromeなど）の機能を使ってURLリストを引っこ抜きます。コピペでできるので安心してください。

「ネットショップ」＞「画像ファイル管理」画面を開く
- カラーミーの管理画面で、抽出したい画像が並んでいるページを開きます。
Chromeの「開発者ツール」を起動
- キーボードの Ctrl + Shift + Iキー（Macは Option + ⌘ + I）を押して開発者ツールを開き、上部のタブから「Console（コンソール）」を選択します。
- ※Chromium系のブラウザなら大体同じように動きます。
魔法のコード（JS）を実行する
- コンソールの入力欄（> の横）に、以下のJavaScriptコードをコピー＆ペーストして Enter キーを押します。
- ※CSSセレクタは変わる可能性が高いため、うまく取得できない場合はご自身で調整してください。

JavaScript

const links = Array.from(document.querySelectorAll('.fname')) .map(a => a.getAttribute('data-url-with-timestamp'));
console.log(links.join('\n'));

URLリストを一気に取得！
- コードを実行した瞬間、コンソール画面にそのページにあるすべてのサブ画像URLがリスト状に出力されます。
- このURLリストを全選択してコピーし、ExcelやGoogleスプレッドシートに貼り付ければ完了です。
- 複数ページある場合は、ページをめくって同じ作業を繰り返してください。

※注意（免責事項） このコードは記事執筆(2026年3月)時点のカラーミーのHTML構造（.fname クラスなど）を利用して抽出しています。今後のシステム仕様変更によって動作しなくなる可能性がありますのでご了承ください。

3. 取得したURLリストから画像を一括ダウンロード

スプレッドシート等にサブ画像のURLリストが完成したら、あとは難しい手順は必要ありません。 Chromeの拡張機能である「Tab Save」や、フリーの画像一括ダウンロードツールにこのURLリストを読み込ませれば、何百枚あっても一瞬でご自身のPCに保存することができます。

まとめ：データは無事救出！いざSquareの構築へ

カラーミーの画像囲い込み仕様も、JavaScriptを少し活用するだけでなんとか突破することができました。

CSVデータとすべての画像（メイン・サブ）が手元に揃えば、移行作業の8割は終わったようなものです。次回（第4回）は、今回救出したデータを使って、いよいよ固定費0円の「Square」にショップを構築していく手順を解説します！

投稿者プロフィール

tt_admin: サイト管理者。記事の内容に対するお問い合わせ、ご意見について是非コメントをお寄せください。個別の相談については、お問い合わせフォームをご利用ください。