【電子書籍対応】Cocoon楽天商品リンクブックマークレット

Cocoon楽天商品リンクブックマークレット楽天Kobo電子書籍対応

2019-12-20追記:(現時点)公式ページで当記事のコードを紹介していただきました!

Cocoon楽天商品リンクショートコード作成用のブックマークレットが公式ページにて公開されているのですが、楽天Koboの電子書籍には未対応だったので対応版に改変して自分が使っている物を公開します。

※以下、Cocoon公式ページで紹介されているブックマークレット=公式ブックマークレットとします。

スポンサーリンク

サンプル

このように電子書籍の商品リンクも楽天商品リンクショートコードで簡単に作成出来ます。

[rakuten id="rakutenkobo-ebooks:18377752" kw="本当によくわかるWordPressの教科書 改訂2版 はじめての人も、挫折した人も、本格サイトが必ず作れる (本当によくわかる教科書)  電子書籍版  赤司 達彦"]

何気に楽天ブックスのダウンロード版も商品リンクに出来ます。

[rakuten id="rdownload:17917635" kw=" Switch  Nintendo Switch Online利用券(12ヶ月券) (ダウンロード版) ※1,000ポイントまでご利用可 Nintendo Switch"]

電子書籍対応版ブックマークレットを登録

See the Pen Cocoon用楽天ブックマークレット+ by 草村 (@kusamura_mono) on CodePen.38847

ブックマークレットの登録方法

詳しくはCocoon公式ページをご覧ください。

更新履歴

2019-12-20: (電子書籍対応+)楽天ビック対応

旧バージョン

javascript: (function () {
  var url = location.href;
  var host = location.host;
  var item_code = null;
  var shortcode = null;
  var title = null;
  if (host == 'item.rakuten.co.jp') {
    var links = document.getElementsByTagName('link');
    for (var i = 0; i < links.length; i++) {
      var m = links[i].getAttribute('href').match(/item_code=(.+?)&/);
      if (m) {
        item_code = m[1]
      }
    }
    var metas = document.getElementsByTagName('meta');
    for (var i = 0; i < metas.length; i++) {
      if (metas[i].getAttribute('name') == 'twitter:title') {
        title = metas[i].getAttribute('content')
      }
    }
    shortcode = '[rakuten id="' + item_code + '" kw="' + title + '"]'
  } else if (host == 'product.rakuten.co.jp') {
    var elements = document.getElementsByClassName('topProduct__specsInfo');
    var code_no = null;
    for (var i = 0; i < elements.length; i++) {
      code_no = elements[i].innerText.trim();
      if (code_no.match(/(EAN|JAN|ISBN|UPC)/)) {
        item_code = code_no.replace(/[A-Z]+?: /, '');
        break
      }
    }
    var elements = document.getElementsByClassName('topProduct__title');
    for (var i = 0; i < elements.length; i++) {
      var spans = elements[i].getElementsByTagName('span');
      for (var j = 0; j < spans.length; j++) {
        if (spans[j].getAttribute('itemprop') == 'name') {
          title = spans[j].innerText.trim()
        }
      }
    }
    shortcode = '[rakuten no="' + item_code + '" kw="' + title + '"]'
  } else if (url.match(/books\.rakuten\.co\.jp\/(rb|rk|rd)\//)) {
    var elements = document.getElementsByClassName('susumeruArea');
    var shop_code = null;
    for (var i = 0; i < elements.length; i++) {
      shop_code = elements[i].getAttribute('data-shop_url');
      item_code = elements[i].getAttribute('data-item_id')
    }
    title = document.getElementById('productTitle').innerText.trim().replace(/\r?\n|[\[\]]/g, ' ');
    shortcode = '[rakuten id="' + shop_code + ':' + item_code + '" kw="' + title + '"]'
  } else {
    alert('Error:ブックマークレットのサポート範囲外のページです。')
  }
  if (shortcode) {
    if (item_code) {
      if (shortcode = prompt('コピーしてください。', shortcode)) {
        var r = document.createRange();
        var text = document.createTextNode(shortcode);
        r.selectNode(document.body.appendChild(text));
        window.getSelection().addRange(r);
        document.execCommand('copy');
        text.remove()
      }
    } else alert('Error:コードが見つかりませんでした。')
  }
})();
void(0);

対応ページ

公式ブックマークレットで対応している個別ページに加え楽天Koboの電子書籍・楽天ブックスダウンロード個別ページでもショートコードが作成出来ます。

  • 楽天市場商品個別ページ(item.rakuten.co.jp)
  • 価格ナビ個別ページ(product.rakuten.co.jp)
  • 楽天ブックス個別ページ(books.rakuten.co.jp/rb)
  • 追加 楽天Kobo 電子書籍個別ページ(books.rakuten.co.jp/rk)
  • 追加 楽天ブックス ダウンロード個別ページ(books.rakuten.co.jp/rd)
  • 追加 楽天ビック商品個別ページ(biccamera.rakuten.co.jp/item)

公式ブックマークレットとの違い

楽天ブックス個別ページで作成されるショートコードが少し違います。
ただし、作成される商品リンクに差はありません。

ブックマークレットで作成した楽天ショートコード
公式
ブックマークレットで作成した楽天ショートコード
電子書籍対応版

no, shopで作成した商品リンク

idで作成した商品リンク

ブックマークレットの使い方

Cocoon公式ページに詳しい使い方が掲載されているのでこちらを参考にしてください。

ソースコード

javascript: (function () {
  var url = location.href;
  var host = location.host;
  var item_code = null;
  var shortcode = null;
  var title = null;
  if (host == 'item.rakuten.co.jp') {
    var links = document.getElementsByTagName('link');
    for (var i = 0; i < links.length; i++) {
      var m = links[i].getAttribute('href').match(/item_code=(.+?)&/);
      if (m) {
        item_code = m[1]
      }
    }
    var metas = document.getElementsByTagName('meta');
    for (var i = 0; i < metas.length; i++) {
      if (metas[i].getAttribute('name') == 'twitter:title') {
        title = metas[i].getAttribute('content')
      }
    }
    shortcode = '[rakuten id="' + item_code + '" kw="' + title + '"]'
  } else if (host == 'product.rakuten.co.jp') {
    var elements = document.getElementsByClassName('topProduct__specsInfo');
    var code_no = null;
    for (var i = 0; i < elements.length; i++) {
      code_no = elements[i].innerText.trim();
      if (code_no.match(/(EAN|JAN|ISBN|UPC)/)) {
        item_code = code_no.replace(/[A-Z]+?: /, '');
        break
      }
    }
    var elements = document.getElementsByClassName('topProduct__title');
    for (var i = 0; i < elements.length; i++) {
      var spans = elements[i].getElementsByTagName('span');
      for (var j = 0; j < spans.length; j++) {
        if (spans[j].getAttribute('itemprop') == 'name') {
          title = spans[j].innerText.trim()
        }
      }
    }
    shortcode = '[rakuten no="' + item_code + '" kw="' + title + '"]'
    } else if (url.match(/(books\.rakuten\.co\.jp\/(rb|rk|rd)|biccamera\.rakuten\.co\.jp\/item)\//)) {
    var elements = document.getElementsByClassName('susumeruArea');
    var shop_code = null;
    for (var i = 0; i < elements.length; i++) {
      shop_code = elements[i].getAttribute('data-shop_url');
      item_code = elements[i].getAttribute('data-item_id')
    }
    title = document.getElementById('productTitle') || document.getElementsByClassName('p-productDetail__title')[0];
    title = (title?title.innerText:'').trim().replace(/\r?\n|[\[\]]/g, ' ');
    shortcode = '[rakuten id="' + shop_code + ':' + item_code + '" kw="' + title + '"]'
  } else {
    alert('Error:ブックマークレットのサポート範囲外のページです。')
  }
  if (shortcode) {
    if (item_code) {
      if (shortcode = prompt('コピーしてください。', shortcode)) {
        var r = document.createRange();
        var text = document.createTextNode(shortcode);
        r.selectNode(document.body.appendChild(text));
        window.getSelection().addRange(r);
        document.execCommand('copy');
        text.remove()
      }
    } else alert('Error:コードが見つかりませんでした。')
  }
})();
void(0);

さいごに

このブックマークレットは記事作成時点に使用可能であることを確認しています。
今後仕様変更で使えなくなる可能性もありますのでご了承下さい。

コードの原型はCocoon公式ページのブックマークレットです。ありがとうございます!

コメント

  1. ごえもん より:

    初めまして!

    MACを使用していて、リンクが「Error:ブックマークレットのサポート範囲外のページです。」となってしまいます。 念のため、Androidのスマホで確認しましたが同様でした。

    その為、ドラッグ&ドロップはもちろんのことブックマークで新規登録しようとしてもダメでした。
    もし良ければ対処法を教えて頂けませんか?

    お忙しい中恐れ入りますがお返事よろしくお願いいたします。

  2. 草村草村 より:

    ごえもんさん

    はじめまして、こんにちは!
    ブックマークレットをブックマークに登録できないと言う事でよろしいでしょうか?

    どうやらMacだとブックマークレットの登録がうまく出来ない場合があるようですね。

    Cocoon公式の楽天ブックマークレットのページにある「ドラッグ&ドロップで登録できない場合」の方法でも登録できないでしょうか?
    https://wp-cocoon.com/rakuten-link-bookmarklet/

    一度ご確認くださいませ!

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