EC運営で役立つブックマークレットをまとめてみた

その他
2024.07.23

EC運営で役立つブックマークレットをまとめてみた

商品選定や自社商品の管理を行う際に商品ページURLをエクセルにまとめることがあると思うのですが、これらのURLを無邪気にコピペして使用していると、不要なパラメータが付与され文字列が冗長になることがありますね。

これは「URLが分かりにくくなる」という視覚的な悪影響は言うまでもなく、実務上の問題を引き起こす可能性も孕んでいます。

例えば、amazonの商品ページURLに付与されたパラメータはアフィリエイトプログラムを含む流入経路の解析に使用されているため、これらのURLを第三者と共有し彼らがアクセスした場合、パラメータの矛盾によりサイト側に「何らかの工作をしようとしている」と受け取られる可能性を排除できません。

商品ページのURLはなるべく「プレーンな状態」で管理しておきたいというのが筆者の考えなのですが、そこで今回紹介する「ブックマークレット」が活躍します。

今回はEC運営で役立つブックマークレットをまとめてみます。

「ブックマークレット」とは？

「ブックマークレット」とは何なのでしょうか？

1. ブックマークレットの定義

ブックマークレットとは、Webブラウザのブックマーク（お気に入り）に保存された小さなJavaScriptプログラムのことです。通常のブックマークとは異なり、特定のウェブページを表示するのではなく、ブラウザ上で特定のタスクを実行することができます。

2. ブックマークレットの仕組み

ブックマークレットは、JavaScriptコードをURIスキームとして保存することによって動作します。例えば、以下のようにJavaScriptコードを含むURIを作成し、これをブックマークとして保存します。

javascript:(function(){alert('Hello, world!');})();

3. ブックマークレットの作成方法

ここでは2024年現在で最もシェアの大きいGoogle Chromeの画像を交えて解説してきます。

  1. まず最初にブラウザのブックマーク管理ページを開きます。Google Chromeであればブックマークバーを右クリックして表示させたモーダルから「ブックマークマネージャ」を選択しましょう。

    bookmarklet-1

  2. 次に新しいブックマークを作成します。何もない場所で右クリックをして表示させたモーダルから「新しいブックマークを追加」を選択し、URL欄にjavaScriptコードを入力、名前欄にはお好きなプログラム名を記載して保存してください。

    bookmarklet-2bookmarklet-3

  3. URL欄にJavaScriptコードを記入します。例えば、以下のプログラムを名前を付けて保存してみましょう。

    javascript:(function(){document.body.style.backgroundColor = 'yellow';})();

4. ブックマークレットの使用例

  • ページの背景色を変更する: 上記の例のように、ページの背景色を変更することができます。
  • フォーム入力の自動化: 特定のフォームフィールドに自動的にデータを入力することができます。
  • ページ要素のハイライト: 特定の要素を強調表示して視認性を向上させることができます。
  • 簡易なWebスクレイピング: ページ内の特定の情報を抽出して表示することができます。

ブックマークレットは、特定のタスクを迅速に実行するための便利なツールであり、ユーザーの作業効率を大幅に向上させることができます。

EC運営で使えるブックマークレット一覧

それでは、具体的なブックマークレットを紹介していきたいと思います。

URL短縮ブックマークレット／amazon

javascript: (function() {
  var a = document.createElement("p");
  var b = document.createElement("p");
  b.style.userSelect = "auto";
  a.appendChild(b).textContent = "https://www.amazon.co.jp/dp/" + ue_pti;
  document.body.appendChild(a);
  document.getSelection().selectAllChildren(a);
  document.execCommand("copy")
})();

冒頭の事例に出てきたamazonのブックマークレットです。

URL短縮ブックマークレット／アリババ・タオバオ

javascript: (function() {
  var currentUrl = window.location.href;
  var domain = new URL(currentUrl).hostname;
  var urlParams = new URLSearchParams(currentUrl);
  var productId = urlParams.get('id');
  var a = document.createElement("p");
  var b = document.createElement("p");
  b.style.userSelect = "auto";
  a.appendChild(b).textContent = "https://" + domain + "/item.htm?id=" + productId;
  document.body.appendChild(a);
  document.getSelection().selectAllChildren(a);
  document.execCommand("copy")
})();

アリババ・タオバオもURLのパラメータが多く付与されるサイトの一つですので、これらのURLもプレーンな状態で管理したいですね。

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