備忘録10〜【楽天市場】RMSでJavaScriptを使う方法

最初の頃に、前職のお話をサラッとしましたが、ネットショップに在籍をしておりました。

その時に見つけたバグ技です。PC向けのものになりますが、ご参考までに・・・

楽天RMSではscriptタグが禁止されているためJavaScriptが使えません。

それでもどうにかしてJavaScriptを使いたいという方のための裏技を紹介します。

商品ページやカテゴリページでJavaScriptを使って実現したいことがある人は参考にしてください。

Contents

1. 読み込み可能なタグ
2. onpageshow属性
3. imgタグで読めればいいのになあ
4. 画像URL
5. 読み込ませる外部JSファイル
6. imgタグはどこに入力する？
7. おまけ
- 7.1. JSONPを用意する。
- 7.2. HTML
8. 呼び出しします。
9. おまけのプログラム？
10. 使い方
- 10.1. 関連

読み込み可能なタグ

<img src="画像のURL"　="="onload=jQuery.getScript('https://www.rakuten.ne.jp/gold/店舗アカウント/js/xxx.js')>

これをヘッダーに入れると読み込みできます！

注意！

src="画像URL"の直後、全角スペースに続けて="="onloadを記述することで外部JavaScriptの読み込みができます。半角スペースではダメです。

正：src="画像URL"　="="onload
誤：src="画像URL" ="="onload

onpageshow属性

onpageshow属性の「意外な使い道」について – コンサルロケッツステーション

こんにちは。ロケッツ4号機です。さいきん、知人の影響で落語にハマり始めました。桂米朝「たちぎれ線 ...

https://c-rocketz.com/technology/rms-onpageshow/

【楽天市場】RMSのヘッダーでJavaScriptを使うには？onpageshowで解決 | ネットショッ

【楽天市場】RMSのヘッダー、フッター、レフトナビでJavaScriptは使えるの？という疑問にお答えします ...

https://ecmemo.net/rms-header-js

当時、この２つの記事を参考に、

<body onpageshow="スクリプト">

をPCヘッダーに記載し、JavaScriptを呼び出しておりました。

ただ、２〜３秒程度読み込みされるのに時間がかかる・・・

読み込み完了までが時間がかかりすぎていたので、他に方法がないものかと試行錯誤をしておりました・・・

imgタグで読めればいいのになあ

当時、スマホのバグ技が使えていたので、それを基にPCでも読み込めればと試していました。

<img src="xxx.jpg" ="">

これですね、「=""」で禁止タグが入るというやつでした。

※今は使えません。

<img src="画像のURL"　=""onload=jQuery.getScript('https://www.rakuten.ne.jp/gold/店舗アカウント/js/xxx.js')>

見事に、禁止タグが入っていると警告表示が出ます・・・・

11個以上の全角スペースというのも、スマホのバグ技であったのでやってみましたが、だめです。😩

タイピングミスではあったのですが、

<img src="画像のURL"　="="onload=jQuery.getScript('https://www.rakuten.ne.jp/gold/店舗アカウント/js/xxx.js')>

「　="="」とすることでなんと、登録ができてしまった。

登録できても、Yahoo!ショッピングのように、テキスト文字に強制変換されている可能性もありましたが、

普通に読み込みができていました！！

画像URL

普通に表示させるバナーとかの画像URLでもいいですし、透明で軽量なスペーサーGIFを使うのも一つの手です。

読み込ませる外部JSファイル

楽天GOLDにアップしているJSファイルを読み込ませることができます。

jQuery.getScript('')に外部JSファイルのURLを入力してください。

例）jQuery.getScript('https://www.rakuten.ne.jp/gold/店舗アカウント/js/xxx.js')

imgタグはどこに入力する？

商品ページ・カテゴリページ両方でJavaScriptを使いたい場合、imgタグをRMS内のヘッダー、レフトナビ、フッターに入力します。

カテゴリページのみで使用したい場合はカテゴリページの編集画面です。

本記事の方法は楽天市場非公式のテクニックです。
使用の際は自己責任でお願いします。
なお、楽天市場の仕様変更により突然使えなくなる可能性があります。
ご注意ください。

おまけ

なぜ、こんなに頑張って探したかと言いますと、

iframeの高さを自動で設定したい→詳しくはこちらを参考
商品説明文のiframeをやめて、HTMLをそのまま呼び出して追記したい→ページ内での移動をさせようと思うと小分けしたiframeがいっぱいになってしまった。

特に２番の方ですね、同じスタイルシートやJavaScriptを読み込みに頑張るんですよブラウザ・・・

で、表示がPCなのに遅いとなる・・・

JSONPを用意する。

JSONP (JSON with padding) とは、scriptタグを使用してクロスドメインな（異なるドメインに存在する）データを取得する仕組みのことである。 HTMLのscriptタグ、JavaScript（関数）、JSONを組み合わせて実現される。

難しい説明です・・・・

まずは、json形式でHTMLを用意します。

{"html":'<div style="margin-bottom:15px;">ここからいろいろhtmlを記載します。</div>'}

こんな感じですね。

この場合、「html」という項目名に、'<div style="margin-bottom:15px;">ここからいろいろhtmlを記載します。</div>’が入っていると思ってください。

ここまでで、JSON形式のテキストが完成です。

クロスドメイン（異なるドメイン）であるので・・・

楽天GOLDと楽天商品ページはドメインが違います。

JavaScriptのコールバックという機能を使いながらJSONデータを呼び出します。

以下のコードは完成形です。

item({"data":[{"html":'<div style="margin-bottom:15px;">ここからいろいろhtmlを記載します。</div>'}]})

後ほど、ajaxのJavaScriptを記載しますが、「item」がコールバックで使われます。

dataっていう中身に先程のJSONを入れます。

よくわからないかもしれません。htmlの中身を書き換えて使ってみてください。

保存名は「xxxx.js」としてください。xxxxは任意に書き換えてください。

GOLDの任意の場所にアップロードしてください。

HTML

外部HTMLを追加させたい場所に

<div id="main-page" data-url=".../xxx.js"></div>

<div>の中には、何も入れないでください。上書きするので消えてしまいます。

data-urlは"https://www.rakuten.ne.jp/gold/店舗アカウント/"を除いた残りのURL（先程アップロードしたファイル）を書きます。

呼び出しします。

 $(function () {
  var target1 = document.getElementById('main_page');//idの指定
  var target2 = target1.getAttribute('data-url');//保存場所の取得
  var url = "https://www.rakuten.ne.jp/gold/店舗アカウント/" + target2; //URLを生成
  var userAgent = window.navigator.userAgent.toLowerCase(); //ブラウザはなにか？

//IE?

  if (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
    console.log('Internet Explorer');


//一秒後に実行
setTimeout(function(){
 jQuery.ajax({
      type: 'GET',
      url: url + "on",
      crossDomain: true,
      dataType: 'jsonp',
      timeout: 20000,
      contentType: 'application/javascript; charset=utf-8',
      cache: false,
     jsonp: 'callback',
      // キャッシュオフ
      jsonpCallback: "items",
      success: function (item) {
        var tag = "",
            tag = item.data[0].html;
        jQuery('#main_page').append(tag);
      }
    });

},5000);
  } else {
    //IE以外だったら
    jQuery.ajaxSetup({
      xhr: function () {
        // 使える場合はMicrosoft.XMLHTTP, 使えない場合はXMLHttpRequest
        try {
          return new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
          return new XMLHttpRequest();
        }
      }
    });
    jQuery.ajax({
      type: 'GET',
      url: url,
      crossDomain: true,
      dataType: 'jsonp',
      timeout: 20000,
      contentType: 'application/json; charset=utf-8',
      cache: false,
      // キャッシュオフ
      jsonpCallback: "item",
      success: function (item) {
        var tag = "",
            tag = item.data[0].html;
        jQuery('#main_page').append(tag);
      }
    });
  }


  });

これを、goldの任意の場所に保存してください。

※スライダー等を設定したHTMLにする場合は、このScriptの前に

jQuery.getScript("https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js");

を入れておくと先にプラグインの読み込みがされると思います。

ヘッダーで、

<img src="画像のURL"　="="onload=jQuery.getScript('https://www.rakuten.ne.jp/gold/店舗アカウント/js/xxx.js')>

呼び出しますと、指定位置にHTMLが追加されます。

画像がなくてわかりにくいかもしれません・・・・

ECモールの登録代行みたいなこともしてますので、ご相談頂けると嬉しいです。

おまけのプログラム？

jsonpを作成するものを作ってみました。手動で作るのがよくわからないなあと思う人は試してみてください。

※簡単に短時間で作ったので、最低限の機能しかありません。

ファイルメーカーが必要となります。持っているという方はご参考ください。

filemaker (200 ダウンロード)

こちらは、ランタイム版でファイルメーカーなしでも動きます。

jsonp_runtime (94 ダウンロード)

使い方

1.htmlのところに、jsonp化したいHTMLを貼り付けか入力してください。

2.ファイル名は必須です。英数字で入力してください。

3.書き出しのボタンを押すと、デスクトップに指定したファイル名で書き出しがされますので

4.goldにアップしてください。

以上です。

コメント一覧

まだ、コメントがありません