みなさんこんにちは。
futureshopのアイテムボックスのバージョンアップが発表されました。
itembox(V2)では、画像フォーマットとして WebP や AVIF に対応したことで、ページ読み込み速度の向上が期待できます。また、動画表示にも対応とのことで、これまで以上にリアリティのある表現ができるのが楽しみですね。
このアップデートに伴い、現在 futureshop で店舗運営をされている方は、既存で記述しているitemboxのドメインやサイズ表記を8月末までに変更する必要があります。
詳細はこちら↓↓
目次
対応が必要な範囲
以下の箇所に記載されている画像URLは、順次変更していく必要があります。
・商品説明文
・グループ説明文
・フリーページ
・パーツ
・WordPress 記事
・メールマガジン
・その他外部ツールや外部記事
これをすべて手作業で行うのは現実的ではありません・・・
できる限り自動化・効率化を行っていきましょう。
CSVで対応できる箇所
商品説明文やグループ説明文など、CSVで操作が可能な箇所については、
１.CSVをダウンロード
２.検索・置換で一括変換
３.再アップロード
という流れで進められるため、比較的短時間で対応が可能です。
問題はfutureshopのフリーページです。
フリーページはCSVダウンロードができないため、通常は1ページずつ手作業で修正する必要があります。
ページ数が多いショップでは、ここが最も時間を要するポイントになります。
そこで今回は、この部分を可能な限り効率化する方法をご紹介します。
対象ページの洗い出し
まずはfutureshopの管理画面内、フリーページ一覧を開きます。
キーワード欄に itembox.design と入力し、
その下にある 「ページ本文を検索対象にする」 にチェックを入れて【検索する】をクリックします。
これにより、itemboxの旧URLが記載されているページ一覧が表示されます。
もし検索結果が0件であれば対応は不要です。
一覧に多くのページが表示された場合、
1ページずつドメインを変更し、サイズ表記を削除していく作業は、かなりの時間を消費してしまいます。
そこで今回は、Chromeに標準搭載されている「ブックマークレット」を使用して、一括で変更していきます。
特別なツールや専門知識は必要ありません。
Chromeがあれば誰でも実行可能です。
操作手順は動画で解説しています
設定方法から実行方法まで、実際の画面を使ってまとめています。
まずはこちらの動画をご覧ください。
ブックマークのURL欄に記載しているコードはこちら↓
javascript:(()=>{const fix=(url)=>{url=url.replace(/^https:\/\/([a-z0-9-]+).itembox.design/ig,'https://$1.itembox.cloud');url=url.replace(/^https:\/\/([a-z0-9-]+).itembox.cloud/ig,'https://$1.itembox.cloud');url=url.replace(/-(xs|s|m|l|xl|xxl)(?=.(?:jpe?g|png|gif|webp)\b)/ig,'');url=url.split('#')[0];url=url.split('?')[0];return url;};const transform=(txt)=>txt.replace(/https:\/\/[a-z0-9-]+.itembox.(?:design|cloud)\/[^\s"'<>]+/ig,(m)=>fix(m));const cmEl=document.querySelector('.CodeMirror');if(cmEl&&cmEl.CodeMirror){const cm=cmEl.CodeMirror;cm.setValue(transform(cm.getValue()));alert('itembox変換：完了');return;}const ta=document.querySelector('textarea');if(ta){ta.value=transform(ta.value);alert('itembox変換：完了');return;}alert('本文欄が見つかりません（HTML/ソース表示に切替して再実行）');})();
実行方法はとても簡単です
ブックマークレットの設定と実行は、慣れてしまえば数分で完了します。
一度登録してしまえば、あとはワンクリックで何度でも使い回せるのが最大のメリットです。
手順
１. フリーページの編集画面を開く
２. ブラウザのURL横にあるブックマークボタン(☆)をクリック
３. 別のフォルダを選択をクリック
４. URL欄にこの記事で紹介しているコードを貼り付け
５. 保存を押すと、ブックマークバーエリアに実行ボタンが出現
６. 記事全体を選択（Mac：cmd + A / Windows：Ctrl + A）
７. 作成した実行ボタンをクリックで一括変換完了
これで、ページ内に記載されている itembox の旧ドメインやサイズ表記が自動で置き換わります。
他ページもワンクリック
一度ブックマークレットを登録してしまえば、
他のフリーページや記事でも実行ボタンを押すだけで変換可能。
ページを開く → 本文を全選択 → クリック。
この3ステップだけで作業が終わります。
作業時間を大幅に短縮できます
手作業で1ページずつ修正していくと、
・ドメイン変更
・サイズ表記削除(6サイズ分)
・確認
といった工程を何十回、何百回と繰り返すことになります。
ショップの規模によっては、半日〜数日かかることもあります。
今回の方法を使えば、
数時間かかっていた作業が数分で終わるケースも多くあります。
ぜひお試しいただき、不明な点やサポートが必要な場合はなんなりとNUSEEKまでご相談ください。
NUSEEKでは、UXデザインとデータ分析を掛け合わせ、
貴社ならではの強みを最大限に引き出すECサイト改善をご提案しています。
サイト運営・改善・リニューアルにお悩みの方は、ぜひ一度ご相談ください！
