YJShopping

提供:きまぐれ手記 Kimagurenote
移動先: 案内検索
当サイトではアフィリエイト広告を掲載しています
この記事は、最終更新日よりおよそ 7 ヶ月経過しています。 公式サイトなどで最新情報を確認してください。(最終更新:2023年11月)
English information available at mw:Extension:YJShopping

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

特徴

できること

YahooのAPI不具合により、ISBN検索はJAN検索として暫定処理している。これに伴い旧10桁ISBNでの検索は動作しない。
「au PAY マーケット」(旧「Wowma!」)はValueCommerceからLinkShareに変更になったため、引き続きリンクを貼りたい場合はLSでの提携と設定の書き換えが必要。

できないこと

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

できたら良いこと

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

経緯

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

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

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

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

記述例 Usage

フリーキーワード

<yjshopping>Anker PowerCore PD Redux</yjshopping>

  • (v1.3.1-) フリーキーワードに "anker" が含まれているため、Anker Japan のリンクボタンが自動的に追加されている($wgYJShoppingMatchAddbtn を参照)。

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

<yjshopping seller_id="ankerdirect">Anker PowerCore PD Redux</yjshopping>

  • 旧APIの store_id が指定された場合は、新APIの seller_id に読み替えられる。

フリーキーワード+リンクボタン追加

<yjshopping addbtn="sofmap sofmapused">AQUOS wish2</yjshopping>

  • (v1.3.0-) LocalSettings.php で $wgYJShoppingDefaultButtons を指定しておき、規定で非表示のリンクボタンは必要に応じ addbtn で追加することができる。
  • $wgYJShoppingDefaultButtons が未指定の場合は全てのリンクボタンが表示されるので、addbtn 指定は意味をなさない。
  • (v1.3.1-) 所定のキーワードに対応して自動的にボタンを追加することもできる($wgYJShoppingMatchAddbtn を参照)。

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

<yjshopping genre_category_id="10488">豚公爵</yjshopping>

  • 旧APIの category_id が指定された場合は、新APIの genre_category_id に読み替えられる。

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

<yjshopping genre_category_id="10268" condition="new">豚公爵</yjshopping>

<yjshopping genre_category_id="10268" condition="used">豚公爵</yjshopping>

  • カテゴリを指定し、さらに新品のみ/中古品のみを検索する例
  • 追加されるリンクボタンをクリックした先では、カテゴリや新古を問わず全商品が検索対象になる

フリーキーワード+book指定

<yjshopping querytype="book">豚公爵</yjshopping>

  • キーワード検索で honto, 7net などの書籍販売サイトを表示したい場合には querytype="book" を指定する。
  • ebookjapan(電子書籍専門サイト)は querytype="book" 指定時にのみ表示される。
  • 書籍を扱っていないサイトは表示されなくなる。

ISBN

<yjshopping querytype="isbn">9784040724218</yjshopping>
<yjshopping querytype="isbn">978-4-04-072421-8</yjshopping>

  • ISBNのハイフンは不要だが、付けたままでもOK
  • 書籍を扱っていないサイトは表示されない
  • querytype="book" 指定との違いは、紙の本も扱っているhontoは表示されるが、電子書籍専門ebookjapanはISBN非対応なので表示されない
原則として紙の本と電子書籍には別個のISBNを振ることになっているが、現状電子書籍でISBNはあまり使われておらず、ebookjapanでISBNを検索しても返答は得られない。hontoやamazonでは紙の本と電子書籍を関連づけて互いに行き来できるようになっているが、こうした機能はサイト側で構築しているもの。

JAN

<yjshopping querytype="jan" shipping="free" sort="+price">4988003579395</yjshopping>

初期設定 Setting

Download

YJShopping_20231128.zip (12KB)

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.

English installation guide is here.

LocalSettings.php

Edit LocalSettings.php file to add below.

LocalSettings.php 
/* 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['ebookjapan']['sid'] = '※';
$wgYJShoppingPlus['ebookjapan']['pid'] = '※';
$wgYJShoppingPlus['7net']['sid'] = '※';
$wgYJShoppingPlus['7net']['pid'] = '※';
$wgYJShoppingPlus['wowma']['lsid'] = '●';
$wgYJShoppingPlus['nttxstore']['a8mat'] = '△';
$wgYJShoppingPlus['qoo10']['sid'] = '※';
$wgYJShoppingPlus['qoo10']['pid'] = '※';
$wgYJShoppingPlus['anker']['sid'] = '※';
$wgYJShoppingPlus['anker']['pid'] = '※';
$wgYJShoppingPlus['mercari'] = '☆';
$wgYJShoppingPlus['kakakucom'] = true;

/* (option) */
$wgYJShoppingDefaultButtons = [ 'yahoo', 'amazon', 'rakuten', 'mercari' ];
$wgYJShoppingBookButtons = [ 'yahoo', 'amazon', 'rakuten', 'honto', 'ebookjapan', '7net', 'mercari' ];
$wgYJShoppingMatchAddbtn = [
	"anker" => "anker wowma",
	"中古" => "sofmapused mercari",
	"保護フィルム" => "wowma qoo10",
	"自転車" => "naturum",
	"キャンプ" => "naturum"
];

/* (option) */
#$wgYJShoppingAcceptParams = [ 'genre_category_id', 'brand_id', 'seller_id', 'start', 'shipping', 'payment', 'delivery_area', 'delivery_day', 'delivery_deadline', 'sort', 'condition' ];

/* (option) Link target */
$wgYJShoppingTarget = '_blank';

/* (option) Lazy loading */
$wgNativeImageLazyLoading = true;

And check Special:Version on your wiki.

備考

hontoとebookjapan(いずれもValueCommerce)は、新規購入しか成果が発生しないものと、購入ごとに成果が発生するものの2種類がある。

hontoは「新規購入専用」でない方、ebookjapanは「【定率】」が付いている方と提携すると、購入ごとに成果が発生する。

Common.css

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

MediaWiki:Common.css 
/* Extension:YJShopping */
DIV.yjshopping {
	clear: both;
	width: 100%;
	min-height: 180px;
	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::before {
	background-color: #bbb;
	border-radius: 10%;
	color: #fff;
	font-size: smaller;
	padding: 0 0.5em 0 0.5em;
	margin-right: 0.5em;
	content: "広告";
}
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: 10em;
	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.shoplinkebookjapan {
	background-color: #f46;
}
DIV.yjshopping UL LI.shoplink7net {
	background-color: #153;
}
DIV.yjshopping UL LI.shoplinkwowma {
	background-color: #f71;
}
DIV.yjshopping UL LI.shoplinknttxstore {
	background-color: #06a;
}
DIV.yjshopping UL LI.shoplinkqoo10 {
	background-color: #5af;
}
DIV.yjshopping UL LI.shoplinkanker {
	background-color: #2ae;
}
DIV.yjshopping UL LI.shoplinkmercari {
	background-color: #f00;
}
DIV.yjshopping UL LI.shoplinkkakakucom {
	background-color: #02d;
}

Debug

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

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

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

Dependency

FAQ

レスポンシブですか?スマートフォン向けサイトでも使えますか?
対応しています。使えます。ただし表示はお使いのSkinに依存する部分が大きいので、実際に試してみて表示に不都合があれば #Common.css を書き換えて調整してください。
何も表示されませんが?
設定が不十分か誤りがある場合と、Yahoo!JAPAN API がエラーを返した場合には、何も表示されません。設定を見直すとともに、LocalSettings.php に error_reporting( E_ALL ); を追加してみてください。
Warning: file_get_contents(https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch?…): Failed to open stream: HTTP request failed! HTTP/1.1 429 Too Many Requests in /path/to/your/mediawiki/extensions/YJShopping/YJShopping.php on line 315
APIがエラーを返した場合は、このようにエラー内容が表示されます(上記の例はAPIを立て続けに呼びすぎて一時的に規制されている状態)。
BOXを縦長にできますか?
#Common.css を書き換えてできます。
Common.css を書き換えられません。
MediaWiki 1.32 以降では、CSSの書き換えに特別な権限が必要になったので、Special:UserRights から追加してください。
Common.css の書き換えを不要にできませんか?
できなくはないものの、初期設定が一層煩雑になってしまいます。Extension をインストールできてCSSの書き換えができない状況を想定できないので、対応予定はありません。
対応リンクを自分で追加する際の注意点は。
ValueCommerce の場合、MyLink に対応している広告主は追加できます。
LinkShare の場合、リンクビルダー対応している広告主は追加できます。
A8.net の場合、商品リンクに対応している広告主は追加できます。
もちろん、いずれの場合も広告主の通販サイトがフリーキーワード検索に対応しており、そのURLを取得できる必要があります(あまり無いとは思いますが、POSTやJavaScript(Ajax)等でしか検索できない通販サイトには対応できません)。
また、規定の文字コードはUTF-8ですが、時々認識されないサイトがあるので(例えばビックカメラはSJISしか認識しない)、その場合は文字コード変換処理を追加する必要があるかもしれません(ビックカメラ (LinkShare) の処理を参考にどうぞ)。
Amazonでしか取り扱いのない商品のリンクを置きたいのですが。
Amazon専用の姉妹ツール AmazonSearch を作ったので、そちらでどうぞ。
ただし、Amazon の API は利用制限が厳しいので、定期的に一定以上のアフィリエイト収益が上がるサイト以外では使い物にならないと思われます。
商品写真や商品名のリンクをクリックすると、以前は「Yahoo!ショッピング」に飛んでいましたが、いつからか「PayPayモール」に飛ぶようになっています。
Yahoo!ショッピング 商品検索API側で、PayPayモールを優先するように仕様変更が為されたようです。PayPayモールに無い商品の場合は、従来通りYahoo!ショッピングに遷移します。また、PayPayモール出店ストアの注文もアフィリエイト成果対象になるそうです。
「PayPayモール」終了に伴い、リンクは「Yahoo!ショッピング」に転送されています。
このツールの利用は無料ですか?
無料で使っていただけます。一切の保証やサポートはありませんので自己責任で使える人向けですが、BSDライセンスで配布しますので、その範囲でご自由にご利用ください。
Tweeki のSkin領域で使えますか?
残念ながら使えません。Tweekiのページを参考にして自作するか、下記のブログツールを埋め込んで使うなどしてください。
MediaWiki以外で使えるものはありますか?
こちらでは用意していません。
2019年6月頃より、バリューコマースが『MyLinkBox』という、本ツールとそっくりさん(見た目が似ているだけで中身は別物、こちらはPHPであちらはJavaScript)を提供し始めたので、そちらを検討してみてください。
Yahoo!ショッピング 商品検索API v1 の提供終了予告(2020年 6月30日まで)が出ていました。 5月 8日に公開された新しい API v3 には対応していますか?
2020年 5月12日に、新APIに対応しました。新しいバージョンをダウンロード・上書きインストールすれば、新APIに切り替わります(追加設定不要)。
なお、何らかの理由で旧APIを使いたい場合は、YJShopping_v1.php を YJShopping.php に名前を変えて使うことで、しばらくは旧APIを使えます。⇒API v1 終了に伴い削除しました。
商品検索API v1 から v3 に変わったことで、記事中に埋め込んだタグの書き換えは必要になりますか?
旧 API v1 から変更があったパラメータのうち、よく使われているであろう category_id と store_id は新 API v3 のパラメータに読み替える処理を入れてありますので、多くの場合、そのまま動作すると思います。
上記以外は読み替えられませんが、必要であれば LocalSettings.php で追加することもできます(ご利用は自己責任でどうぞ)。例:
$wgYJShoppingChangeParams['affiliate_from'] = 'affiliate_rate_from';
これはあくまで後方互換性を確保するための機能なので、今後新たに執筆される記事においては、新APIのパラメータを利用することをお勧めします。
画面表示を早くしたい(遅延読み込み (Lazy loading)にしたい)
v1.2.8 より、$wgNativeImageLazyLoading = true; になっている場合には、商品画像に loading="lazy" を付加するようになりました。
なお、v1.2.8 より、この設定値にかかわらず計測用画像(一部リンクに付加されている width="1" height="1" のもの)には loading="lazy" を付加します。
SEO対策としては、CSSmin-heightを指定しておくなどの CLS (Cumulative Layout Shift)対策もおすすめです。
キャッシュされる?
v1.2.7 よりキャッシュに対応しましたが、かえって動作が遅くなる場合もあるため、v1.2.9 より規定でキャッシュ無効にしました。キャッシュしたい場合は LocalSettings.php に設定が必要です。
$wgYJShoppingCaching = true;
また、MediaWikiのObjectCacheを使っているので、本Extensionのためにデータベースの改変などは不要ですが、LocalSettings.php で $wgMainCacheType を適切に設定しておく必要があります。
キャッシュの保存時間は?
規定で3600秒(1時間)になっています。LocalSettings.php にて変更できます。
$wgYJShoppingCachingTime = 600;	/* 600秒(10分) */
タイムアウト時間は?
PHPの規定によります。規定値は60秒と長いため、php.ini の default_socket_timeoutを変更しておくことをお勧めします(ちなみに作者は5秒に設定していますが、YahooのAPIは反応が早いため、もっと短くてもいいかも)。
「広告」表記を入れたい
CSSで入れることができます。
メルカリアンバサダーガイドラインに抵触しませんか?
作者が本Extensionに追加したい旨問い合わせたところ、ガイドラインの禁止事項に該当しない旨の回答が得られたので、機能追加しました。とはいえ、ガイドラインも変わる可能性がありますし、利用方法にもよるでしょうから、自己責任での利用をお願いするとともに、もし問題があれば適宜対応してください。

Bugs

History

参考リンク

API障害情報

関連記事