Yado

Extension:Yado は、楽天トラベルのキーワード検索APIを使って宿泊施設リンクをMediaWiki記事中に埋め込むための即席Extension。

特徴

できること

• フリーキーワード検索
• 画像、宿泊施設名、施設特色、最寄駅とレビューを表示
• 楽天アフィリエイトリンクを設定可（任意）
• 見た目の変更はスタイルシートで → #Common.css

できないこと

• 楽天トラベルのAPIを使うため、楽天トラベルに登録されていない宿泊施設は表示できない
• 価格はあえて表示していない
• 複数商品の表示（キーワード検索してAPIが返した最も上位1軒のみ、または上位30軒からランダムで表示する）
• 記事中から自動でキーワードを拾うといった機能は持たせていないので、記事中の埋め込みたい場所に所定のタグを記述する必要がある。
• 一切の保証・補償とサポート（ご利用は自己責任でどうぞ）
• 日本語以外（英語を含む）での説明書きや問い合わせ対応

できたら良いこと

• 楽天トラベルに登録されていない宿を何とかしたい
• 見た目の調整（試行錯誤中）

経緯

鉄道路線記事を書いていると宿に触れることが少なからずあるので、リンクを貼れたら便利。でもそんなExtensionを作っている人がいるとも思えないので自作した:)。

筆者がよく利用している中で、フリーキーワードによる商品検索APIを提供している手配サイトは、楽天トラベルくらい？探し方が悪いのかな…じゃらんはキーワード検索NGっぽいので保留。

記述例 Usage

フリーキーワード（最上位表示）

<yado>只見線</yado>

会津柳津温泉　瀞流の宿　かわち

奥会津の玄関口、会津柳津温泉の宿。只見川の眺めや会津の郷土料理（桜刺し・鯉の甘煮・岩魚等）が楽しめる

4.79

最寄り駅：会津柳津駅

フリーキーワード ランダム表示

<yado selecttype="random">只見線</yado>

旅館　みな川

【只見駅より徒歩4分の好立地】ビジネス・観光の拠点に最適☆当館自慢の「地鶏五目おこわ」は大好評！

5

最寄り駅：只見駅

フリーキーワード 安い順

<yado sort="+roomCharge">北濃駅</yado>

大日荘

ダイナランド・高鷲スノーパークアクセス抜群♪平日にご宿泊の方に冬季期間限定でカップラーメン付き♪

4

最寄り駅：北濃駅

初期設定 Setting

Download

• Yado_20190527.zip (5KB)

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.

/* Yado */
require_once "$IP/extensions/Yado/Yado.php";
$wgYadoRakutenAppID = '※';
$wgYadoRakutenAffID = '▲';
$wgYadoStationBaseURL = 'http://ja.wikipedia.org/wiki/';
$wgYadoRate = true;
$wgYadoRateSize = 16;

• 【必須】※印には、ここで取得した楽天アプリIDを入れる。
• 【任意】▲印には、楽天のアフィリエイトIDを入れる。省略可。
• 【任意】$wgYadoStationBaseURL を指定すると、内部に該当ページが存在しない場合に、ウィキペディア日本語版へのリンクを設定できる（省略するとリンクが設定されない）。
• 【任意】$wgYadoRate を true にすると、宿泊施設のレビューとその平均点を表示する（要CSS）。
  これを使う場合は $wgYadoRateSize の設定が必須になる。CSSの P.yado-rate-mark SPAN:after の font-size と一致していないと、★表示がずれてしまう。

And check Special:Version on your wiki.

Common.css

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

/* Extension:Yado */
DIV.yado {
	clear: both;
	width: 100%;
	margin: 0 auto;
	padding: 0.5em;
	border: 1px solid #444;
}
DIV.yado IMG.yadoimg {
	float: left;
	margin: 0.2em 0.5em 0.2em 0;
	width: 180px;
}
DIV.yado P.yadoname {
	margin: 0;
	font-size: 90%;
}
DIV.yado P.yadospecial {
	margin: 0.2em 0 0 1em;
	font-size: 72%;
}
DIV.yado P.yadostation {
	margin: 0.5em 0 0 0;
	font-size: 80%;
}
DIV.yado-rate {
	display: inline-block;
	margin: 0;
	text-align: center;
}
PRE.yado-rate-mark {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	margin: 0;
	line-height: 20px;
	width: 80px;
	font-size: 16px;
	border: none;
}
PRE.yado-rate-mark SPAN.back {
	position: absolute;
}
PRE.yado-rate-mark SPAN.back:after {
	content: '★★★★★';
	color: #ddd;
}
PRE.yado-rate-mark SPAN.front {
	position: relative;
}
PRE.yado-rate-mark SPAN.front:after {
	content: '★★★★★';
	overflow: hidden;
	display: inline-block;
	color: orange;
}
DIV.yado-rate P.yado-rate-score {
	margin: 0.5em auto;
	line-height: 18px;
	font-size: 16px;
	white-space: nowrap;
}
DIV.yado DIV.yado-review {
	display: inline-block;
	position: relative;
	margin: 0.5em 0 0 3em;
	padding: 17px 13px;
	border-radius: 12px;
	background: #def;
	min-width: 120px;
	max-width: 50%;
	font-size: 12px;
	vertical-align: center;
}
DIV.yado DIV.yado-review::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 18px; 
	left: -24px;
	border: 12px solid transparent;
	border-right: 12px solid #def;
}
DIV.yado DIV.yado-review P {
	margin: 0;
	padding: 0;
}

Dependency

• MediaWiki 1.28+ (using LinkRenderer)
• Rakuten Travel keyword hotel search API (Japanese)

Bugs

• 表示が難しい（CSS試行錯誤中）。特に画像が縦長の時にどうするかな。tableにするしかないのかな？
• 備忘録を兼ねて一応掲載したものの、まだ未完成度合いが高く、設定も（特にCSSが）ちょいと複雑で、今後ちょくちょく変えると思うので、ご承知おきを。
• いろいろ手抜きし放題。
• 英語があちこち壊れているのはいろいろ諦めてくださいorz
• その他にも気づいた点があれば直して使ってください:-)

History

2019.05.27 (v1.00)

• 初版

Thanks a lot

• CSSでレート評価(★)を表現してみる - あずまや
• CSSで作る！吹き出しデザインのサンプル19選

参考

• mw:Manual:Extensions
• 楽天トラベルキーワード検索API
• 楽天トラベル

関連

• MediaWiki