au Pay マーケット（au Wowma!）のスマホ商品ページでJavaScriptを使う裏技

au Pay マーケット（au Wowma!）ではJavaScriptは使えない。そう思い込んでいませんか？

それは間違いです！

実はau Pay マーケット（au Wowma!）のスマホ商品ページでJavaScriptを使うことができるんです。

本記事では裏技の使い方に加え、使い方の一例として「日時指定で表示／非表示を切り替える」方法を紹介します。

この記事の目次

裏技の使い方
1. 画像URL
2. 読み込ませるJSファイルについて
複数のJSファイルを読み込むには？
サンプル：日時指定で表示／非表示を切り替える
まとめ：au PAY マーケットのスマホ商品ページでJavaScriptを使おう

裏技の使い方

裏技を使うための手順

JSファイルを作成
JSファイルをau PAY マーケット Plusにアップロード
Wow! manager（ワウマネージャーの商品ページ編集画面を開く
「SP用商品説明」に裏技用のimgタグを記述する

裏技を使ってau PAY マーケット Plus（Wowma! Plus（ワウマプラス）のJSファイルを読み込みます。

使用するのは下のimgタグだけ！

<img style="display:none;" src="画像のURL"　="="onload=jQuery.getScript('https://plus.wowma.jp/user/会員番号/plus/js/xxx.js（読み込みたいJSファイルのURL）')>

ここがポイント！

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

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

画像URL

style="display:none;"を指定しているため画像は表示されません。何の画像でもOKです。src=""に画像URLを入力します。

透明で軽量なスペーサーGIFを使うのも一つの手です。

スペーサーGIFとは？

スペーサーGIFとは、縦横1pxの透明なGIF画像のこと。
画像編集ソフトがあればすぐ作成できますが、下のダウンロードボタンを押して入手していただいてもOKです。※圧縮ファイル（zip形式）でダウンロードされますので展開してお使いください。

spacer.gif（39バイト）

ダウンロード

読み込ませるJSファイルについて

au PAY マーケット PlusにアップしているJSファイルを読み込ませることができます。

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

例）jQuery.getScript('https://plus.wowma.jp/user/会員番号/plus/js/sample.js')

ここがポイント！

会員番号を忘れた場合はショップのトップページURLを見るのが手っ取り早いです。

例）https://wowma.jp/user/会員番号またはhttps://plus.wowma.jp/user/会員番号/plus/

URLサンプルはこちら。

https://plus.wowma.jp/user/28287944/plus/

リンク先：タマチャンショップ【au Pay マーケット店】

複数のJSファイルを読み込むには？

JSファイルを複数読み込むことも可能です。

jQuery.getScript('https://plus.wowma.jp/user/会員番号/plus/js/sample1.js');jQuery.getScript('https://plus.wowma.jp/user/会員番号/plus/js/sample2.js')

ここがポイント！

一つ目のjQuery.getScript('')のあと、続けて二つ目のjQuery.getScript('')を記述します。間の「;」セミコロンを忘れずに。

サンプル：日時指定で表示／非表示を切り替える

裏技の使い方例としてサンプルを一つ紹介。

日時指定で要素の表示／非表示を切り替えるスクリプトです。

view_timer.js

$(document).ready(function() {
    $(".view_timer").each(function(t, a) {
        var e = $(this).attr("data-start-date")
          , i = $(this).attr("data-end-date")
          , n = new Date;
        e = e ? new Date(e) : n,
        i && (i = new Date(i)),
        e <= n && (!i || n <= i) ? $(this).show() : $(this).hide()
    })
});

SP用商品説明

<img style="display:none;" src="画像のURL"　="="onload=jQuery.getScript('https://www.rakuten.ne.jp/gold/店舗ID/js/view_timer.js')>

<!-- 2020年6月1日 10:00以降に表示する -->
<span class="view_timer" data-start-date="2020/6/1 10:00">ここに内容</span>

<!-- 2030年6月1日 9:59まで表示する -->
<span class="view_timer" data-end-date="2030/6/1 9:59">ここに内容</span>

<!-- 2020年6月1日 10:00～2030年6月1日 9:59の間は表示する -->
<span class="view_timer" data-start-date="2020/6/1 10:00" data-end-date="2030/6/1 9:59">ここに内容</span>

使い方