YJShopping

提供: きまぐれ手記 Kimagurenote
YJshoppingから転送)
移動先: 案内検索

Extension:YJShopping は、Yahoo!ショッピング商品検索APIを使って商品リンクをMediaWiki記事中に埋め込むためのExtension(拡張機能)

特徴

できること

できないこと

  • Yahoo!ショッピングの商品検索APIを使うため、Yahoo!ショッピングに登録されていない商品は表示できない。
    →Amazon専用の AmazonSearch もあります
  • 価格はあえて表示していない(しようと思えばできるが)
  • 複数商品の表示(キーワード検索してAPIが返した最も上位1点のみ表示する)
  • 記事中から自動でキーワードを拾うといった機能は持たせていないので、記事中の埋め込みたい場所に所定のタグを記述する必要がある。
  • 一切の保証・補償とサポート(ご利用は自己責任でどうぞ)
  • 日本語以外(英語を含む)での説明書きや問い合わせ対応

できたら良いこと

  • honto と 7net は ISBN/JAN 検索の時のみ有効にしているが、キーワード検索でも任意にON/OFFできると良いかも?
  • Sofmapやリコレ、イトーヨーカドーなどの品揃えに偏りがあるサイトへのリンクボタンも追加したので、やはり何らかの形でON/OFFできるようにしたい。
  • 即席で汚いコードなので整理したい。 → 少しずつ整理している

経緯

近頃流行りのブログパーツのように、記事を書いていると商品リンクを貼れたら便利に思うことが少なくないが、MediaWikiのExtensionに使えそうな物が見当たらず、それらしき物があってもまともに動作しなかった。また、特定のショッピングサイト専用にするのも使い勝手が悪いので、自作することにした。

フリーキーワードによる商品検索APIは、Amazon楽天市場Yahoo!ショッピングが提供しているが、API制限や規約等を含めた使い勝手を総合的に勘案し、Yahoo!ショッピングを使ってみることにした。

これを作った後で、バリューコマースが『MyLinkBox』を出してきたりもして、やっぱりこういうブログパーツを使いたいと思う人は多いのかなと改めて実感。(MediaWikiで使いたい人は少なさそうだけれど)

なお、Amazonでしか取り扱いのない商品もあるので、Amazon専用の姉妹ツール AmazonSearch も作って併用している。

記述例 Usage

フリーキーワード

<yjshopping>CHE-324</yjshopping>

フリーキーワード+ストアID指定

<yjshopping store_id="cheeromart">CHE-324</yjshopping>

フリーキーワード+カテゴリ指定

<yjshopping category_id="49331">AQUOS R compact</yjshopping>

フリーキーワード+カテゴリ指定+新品のみ

<yjshopping category_id="49331" condition="new">AQUOS R compact</yjshopping>

フリーキーワード+カテゴリ指定+中古品のみ

<yjshopping category_id="49331" condition="used">AQUOS R compact</yjshopping>

※追加されるリンクボタンの検索対象は全商品(カテゴリや新古別指定は働かない)

ISBN

<yjshopping querytype="isbn">978-4-04-072944-2</yjshopping>

※ISBNのハイフンは不要だが、付けたままでもOK。

JAN

<yjshopping querytype="jan">4534530116536</yjshopping>

初期設定 Setting

Download

Download and unzip it on your MediaWiki extensions directory.

You can use it freely at your own risk. I license it under the Revised BSD License.

LocalSettings.php

Edit LocalSettings.php file to add below.

/* YJShopping */
require_once "$IP/extensions/YJShopping/YJShopping.php";
$wgYJShoppingAppID = '★';
#$wgYJShoppingVCID = '//ck.jp.ap.valuecommerce.com/servlet/referral?sid=xxxxxxx&pid=xxxxxxxxx&vc_url=';
$wgYJShoppingPlus['yahoo']['sid'] = '※';
$wgYJShoppingPlus['yahoo']['pid'] = '※';
$wgYJShoppingPlus['amazon'] = '◆';
#$wgYJShoppingPlus['amazon']['sid'] = '※';
#$wgYJShoppingPlus['amazon']['pid'] = '※';
$wgYJShoppingPlus['rakuten'] = '▲';
#$wgYJShoppingPlus['rakuten']['lsid'] = '●';
#$wgYJShoppingPlus['rakuten']['sid'] = '※';
#$wgYJShoppingPlus['rakuten']['pid'] = '※';
$wgYJShoppingPlus['sofmap']['lsid'] = '●';
$wgYJShoppingPlus['sofmap']['bids'] = '111111.1';
$wgYJShoppingPlus['sofmapused']['lsid'] = '●';
$wgYJShoppingPlus['sofmapused']['bids'] = '111111.1';
$wgYJShoppingPlus['naturum']['lsid'] = '●';
$wgYJShoppingPlus['naturum']['bids'] = '111111.1';
$wgYJShoppingPlus['honto']['sid'] = '※';
$wgYJShoppingPlus['honto']['pid'] = '※';
$wgYJShoppingPlus['7net']['sid'] = '※';
$wgYJShoppingPlus['7net']['pid'] = '※';
$wgYJShoppingPlus['iyec']['sid'] = '※';
$wgYJShoppingPlus['iyec']['pid'] = '※';
$wgYJShoppingPlus['wowma']['sid'] = '※';
$wgYJShoppingPlus['wowma']['pid'] = '※';
$wgYJShoppingPlus['kakakucom'] = true;
$wgYJShoppingAcceptArgs = array( 'category_id', 'store_id', 'sort', 'condition' );
  • 【必須】★印には、Yahoo!JAPAN で取得したアプリケーションIDを入れる。
  • 【任意】$wgYJShoppingVCID には、ここに書いてある要領で取得したYahoo!ショッピングのリンク先URLを入れる。任意。エンコードは不要(スクリプトにて行う)。
    ただし、$wgYJShoppingPlus['yahoo']['sid'] と $wgYJShoppingPlus['yahoo']['pid'] を指定する場合は省略可(sidとpidから自動生成する)。
  • 【任意】※印には、バリューコマースの各提携先で取得したMyLinkコードから必要な値を抜き出して入れる。各社と提携した後、MyLinkコードを取得し、リンク先URLからsidとpid(いずれも数字)を抜き出す。任意(省略するとリンク自体が生成されない)。値を間違えると機能しないリンクが生成されてしまうので、要注意。
  • 【任意】◆印には、各自で取得した Amazon.co.jp のトラッキングIDを入れる。省略するとリンクが生成されない。または、バリューコマースの MyLink から取得した sid, pid を指定しても良い。
  • 【任意】▲印には、楽天のアフィリエイトIDを入れる。省略するとリンクが生成されない。
  • 【任意】●印には、リンクシェアのリンク→リンク作成→リンクビルダー で生成したリンクコードから必要な値を抜き出して入れる。また、'bids' の '111111.1' には、<img> タグの中からbidsの値を抜き出して入れる。任意(省略するとリンク自体が生成されない)。値を間違えると機能しないリンクが生成されてしまうので、要注意。
  • 【任意】楽天市場の●印には、リンクシェアのプログラム→提携中のECサイト→楽天市場→ECサイト情報→【楽天プログラム】専用ツールを利用する→楽天URL指定リンク で生成したリンクコードのURLからidの値を抜き出して入れる。楽天では'bids'は不要。楽天アフィリエイトIDとは異なるので注意。
  • 【任意】$wgYJShoppingPlus['kakakucom'] を true にすると、「価格.com」へのリンク(アフィリエイト未対応)を追加する(ISBN・JAN検索を除く)
  • 【任意】$wgYJShoppingAcceptArgs 配列に値を追加すると、商品検索APIに渡すことのできる値を追加できる。

And check Special:Version on your wiki.

Common.css

Edit MediaWiki:Common.css to add below (customize free).

/* Extension:YJShopping */
DIV.yjshopping {
	clear: both;
	width: 100%;
	margin: 0 auto;
	padding: 0.5em;
	border: 1px solid #444;
	overflow: hidden;
}
DIV.yjshopping IMG.yjshoppingimg {
	float: left;
	margin: 0.1em 1em 0.1em 0.1em;
}
DIV.yjshopping P.yjshoppingname {
	margin: 0;
	font-size: 90%;
	text-indent: 0;
}
DIV.yjshopping P.yjshoppingstore {
	margin: 0;
	font-size: 80%;
	text-indent: 0;
}
DIV.yjshopping UL {
	margin: 0;
}
DIV.yjshopping UL LI {
	display: inline-block;
	text-align: center;
	list-style: none;
	font-size: 85%;
	width: 9em;
	margin: 0.2em;
	padding: 0.2em 0.5em 0.2em 0.5em;
	border-radius: 0.5em;
	white-space: nowrap;
}
DIV.yjshopping UL LI A {
	color: #fff;
}
DIV.yjshopping UL LI.shoplinkyahoo {
	background-color: #f55;
}
DIV.yjshopping UL LI.shoplinkamazon {
	background-color: #f90;
}
DIV.yjshopping UL LI.shoplinkrakuten {
	background-color: #c00;
}
DIV.yjshopping UL LI.shoplinksofmap {
	background-color: #16f;
}
DIV.yjshopping UL LI.shoplinksofmapused {
	background-color: #3ba;
}
DIV.yjshopping UL LI.shoplinknaturum {
	background-color: #084;
}
DIV.yjshopping UL LI.shoplinkhonto {
	background-color: #4af;
}
DIV.yjshopping UL LI.shoplink7net {
	background-color: #153;
}
DIV.yjshopping UL LI.shoplinkiyec {
	background-color: #153;
}
DIV.yjshopping UL LI.shoplinkwowma {
	background-color: #f71;
}
DIV.yjshopping UL LI.shoplinkkakakucom {
	background-color: #02d;
}

Debug

LocalSettings.php ファイルに下記を追加すると、ログを出力するようになり、簡単なデバッグができる。

/* for debug Extension:YJShopping */
define( 'YJSHOPPING_DEBUG', 'yjshopping' );
$wgDebugLogGroups[YJSHOPPING_DEBUG] = $IP . '/extensions/YJShopping/debug.log';

常時ONにしておくとサーバの負荷が増大し、デバッグログファイルも非常に大きくなるので、通常は無効にしておくことを推奨。

Dependency

FAQ

レスポンシブですか?スマートフォン向けサイトでも使えますか?
対応しています。使えます。ただし表示はお使いのSkinに依存する部分が大きいので、実際に試してみて表示に不都合があれば #Common.css を書き換えて調整してください。
BOXを縦長にできますか?
#Common.css を書き換えてできます。
Common.css を書き換えられません。
MediaWiki 1.32 以降では、CSSの書き換えに特別な権限が必要になったので、Special:UserRights から追加してください。
Common.css の書き換えを不要にできませんか?
できなくはないものの、初期設定が一層煩雑になってしまいます。Extension をインストールできてCSSの書き換えができない状況を想定できないので、対応予定はありません。
ビックカメラへのリンクを設定したいのですが。
リンクシェアで提携し、本スクリプトにビックカメラ用の設定を追加すれば、ソフマップ同様の方法でできると思われます。ただし、作者は動作確認を兼ねてビックカメラに提携申請したものの2度にわたり拒否されてしまったので、対応予定はありません。
対応リンクを自分で追加する際の注意点は。
ValueCommerce の場合、MyLink に対応している広告主は追加できます。
LinkShare の場合、リンクビルダー対応している広告主は追加できます。
もちろん、両者とも、広告主の通販サイトがフリーキーワード検索に対応しており、そのURLを取得できる必要があります(あまり無いとは思いますが、POSTやJavaScript等でしか検索できない通販サイトには対応できません)。
Amazonでしか取り扱いのない商品のリンクを置きたいのですが。
Amazon専用の姉妹ツール AmazonSearch を作ったので、そちらでどうぞ。
ただし、Amazon の API は利用制限が厳しいので、定期的に一定以上のアフィリエイト収益が上がるサイト以外では使い物にならないと思われます。
このツールの利用は無料ですか?
無料で使っていただけます。一切の保証やサポートはありませんので自己責任で何とかできる人向けですが、BSDライセンスで配布しますので、その範囲でご自由にご利用ください。
Tweeki のSkin領域で使えますか?
残念ながら使えません。Tweekiのページを参考にして自作するか、下記のブログツールを埋め込んで使うなどしてください。
MediaWiki以外で使いたい
2019年6月頃より、バリューコマースが『MyLinkBox』という、本ツールとそっくりさん(見た目が似ているだけで中身は別物、こちらはPHPであちらはJavaScript)を提供し始めたので、そちらを使うと良いのでは。

Bugs

  • 本Extensionから出力されたHTMLがMediaWiki内で中途半端にescapeされる(例:URLの一部 & が &amp; になっている)ことがある。継続調査中(未解決)。でもWebブラウザでは正常動作しているから不思議…
  • API側が障害等で止まっているときにこちらに影響が及ぶ(ので、そのうちタイムアウトの設定等考えたい)。
  • リンクボタンの数が多いと、はみ出すなど、表示が見にくくなることがある(CSSでうまく調整して使ってください)。
  • 他にもいろいろ手抜きし放題。
  • 英語があちこち壊れているのはいろいろ諦めてくださいorz
  • その他にも気づいた点があれば直して使ってください:-)

History

2019.07.10 (v1.1.3-2)
ナチュラム (LinkShare) に対応
2019.07.06 (v1.1.3)
イトーヨーカドーネット通販 (ValueCommerce) に対応
urlencode()rawurlencode() に変更(空白のエンコードを + から %20 に変更)
JAN指定時に Sofmap.com, Sofmapリコレ(中古)を出ないようにした
display:table; を解除、#Common.css にて float:left; 指定
API呼出URLの生成に http_build_query() を使う処理に変更
→http_build_query() にて PHP_QUERY_RFC3986 を使うため、PHP 5.4.0 以降が必須になった
i18n/en.json を i18n/qqq.json (default) に変更
2019.06.10 (v1.1.2)
楽天市場のリンクをバリューコマースでも設定できるようにした
i18n/*.json のみの変更のため、バージョン番号には変更無し
2019.06.02 (v1.1.2)
楽天市場のリンクをリンクシェアでも設定できるようにした(試験的)
Sofmap.com, Sofmap リコレ!(リンクシェア)に対応
2019.05.30 (v1.1.1)
バージョン番号表記をMediaWikiっぽい形に変更
AmazonへのリンクもValueCommerceのMyLinkに対応(アソシエイトID指定と排他)
本Extensionから出力されたHTMLがMediaWiki内で中途半端にescapeされる問題を継続調査中(未解決)でもWebブラウザでは正常動作しているから不思議…
画像の配置方法を float:left から display:table に変更
2019.05.26 (v1.10)
煩雑になっていた内部処理の整理
$wgYJShoppingPlusのキー名'yj'を'yahoo'に変更
2019.05.24 (v1.00)
初版

参考

関連