もしもアフィリエイト「かんたんリンク」、別タブ（別ウィンドウ）で開きたい！対処法とスクリプト紹介

もしもアフィリエイトの「かんたんリンク」は、実に手軽にECサイトの商品リンクボックスを作成できる便利なツールです。

Pochippの利点と制限

Pochippは非常に便利で、「Pochipp Assist」という拡張を使えば、AmazonアソシエイトのPA-APIを使わずに商品検索が可能です。

これにより、Amazonアソシエイトの審査に通っていない段階でもECサイトの商品リンクボックスを作成できるのは大きな魅力です。

ただし、Pochipp Assist（無料版）には1日の検索回数が5件までという制限があります。

そのため、検索ワードはある程度絞ってから使う必要があります。また、検索エラーが頻発することも難点です。検索できないときは、1日中、あるいは数日以上も利用できないといった問題がよくありました。有料版では改善されるとのことですので、本来は問題ないのかもしれません。

一方で、「かんたんリンク」は無料で何度でも検索でき、これまで検索エラーを経験したことはありません。

「かんたんリンク」が別タブで開かない理由

「かんたんリンク」は、JavaScriptで商品リンクを動的に生成する仕組み（bundle.jsという非公開ライブラリ）になっています。そのため、リンクの<a>タグに直接にtarget="_blank"を付け加えることができません。

通常のテキストリンクなら、target="_blank"を追加すれば別タブで開きます。また、セキュリティを考慮する場合は、rel="noopener noreferrer"も追加するのが推奨されています。

「かんたんリンク」を別タブで開くスクリプト

「かんたんリンク」のスクリプトで生成されたリンクをクリックすると、目的の新しいページが同じタブ上で表示されます。

この時、何らかのイベントが発生しているはずです🤔。スクリプトを組んだ経験のある方なら、addEventListener() を思い出すでしょう。

つまり、生成されたリンクを別タブで開きたいのであれば、ページのリロード時に target="_blank" を追加すれば良いのではないか💡と考えました。

実際にそのようなスクリプトを組んでみたのですが、非常に複雑で冗長なものになってしまいました😢。
正直、他人様にお見せできるようなスクリプトではありませんでしたが、AI様に整理してもらったところ、なんと5分の1以下にまで短縮されたのです😂。
しかも、new MutationObserverという関数の今まで知らなかった使い方まで教えてもらいました。

ページ内の「かんたんリンク」を別タブで開くスクリプト

<script>
// イベント発生時（ページの読み込み完了時）に処理を開始する
window.addEventListener('load', () => {
  // かんたんリンク（msmaflink）を対象に、
  // target="_blank" と rel="noopener noreferrer" を追加する関数
  const setBlank = () =>
    document.querySelectorAll('[id^="msmaflink-"] a').forEach(a => {
      a.target = '_blank';                      // 別タブで開く
      a.rel = 'noopener noreferrer';            // セキュリティ対策
    });
  setBlank(); // 初回実行：すでに生成済みのリンクに対して適用
  // 動的に追加されるリンクに対しても適用
  new MutationObserver(setBlank).observe(document.body, {
    childList: true,    // 子要素の追加・削除をチェック
    subtree: true       // 孫要素すべての変化も対象
  });
});
// Written by Kasuga
// Ver1.0.0 for maintenance
</script>

このスクリプトをブログ記事を表示した時に実行します。
実行させる最も簡単な方法は、「かんたんリンク」のある記事の任意の場所にこのスクリプトを設置（コピー＆ペースト）することでしょう。
このスクリプトを設置するには、WordPressの投稿画面で「カスタムHTML」ブロックを使うのが簡単です。
　⇓　　⇓　　⇓

（見えないかもしれませんが）ここに設置してあります。↓

---

あるいは、お使いのテーマのブロックエディター設定で対応できるかもしれません。
テーマCocoonであれば、「投稿」設定画面にある「カスタムJavaScript」欄に、<script></script>タグを除いたスクリプトの内容を貼り付けることで、そのページにスクリプトを適用できます。
　⇓　　⇓　　⇓

次は、「かんたんリンク」を使って「どこでも持ち物スタンプ」で検索して作成した商品リンクボックスです。

いつも通り「カスタムHTML」で追加しました。リンクをクリックしてみてください。

別タブで開きましたでしょうか？

おわりに

今回は、やや強引な手法で別タブで開くということを実現しましたが、プログラム自体は特に複雑な処理を行っているわけではありませんので、このスクリプトが何か悪影響を及ぼす可能性は低いと考えられます。（むしろ、セキュリティ対策のrel="noopener noreferrer"を追加しているため、有益かもしれません。）

ただし、念のため、ご使用は自己責任でお願いいたします。

さらに「かんたんリンク」をもっとスタイリッシュにカスタマイズしたい方は、次の記事で具体的な方法とCSSサンプルを掲載しています。

今回のスクリプトは、WordPressプラグインとして公開しました。導入方法については、以下の記事で詳しく解説していますので、ぜひご覧ください。