javascript - URIのasin:スキームを実装する

とっくに発明されてていい車輪でありながら、どうも見当たらなかったので作りました。

ご自由にご利用ください。出来ればアフィリエイトIDはblogsofdankog-22のままで:-p

<script type="text/javascript" src="http://blog.livedoor.jp/dankogai/js/asinjp.js"></script>
<script>ASINjpHandler('blogsofdankog-22');</script>

まるごとJavaScript & Ajax ! Vol.1
小飼弾他

とするだけで、

<a href="asin:4844323644">
<img src="asin:4844323644"><br>
まるごとJavaScript & Ajax ! Vol.1</a><br>
<a href="asin:search">小飼弾</a>他

が←のようになります。ここでは、

<style>
a.asin:after { content:url(http://www.amazon.co.jp/favicon.ico); margin-left:0.25em }
img.asin { border:outset 1px; padding: 2px }
</style>

も指定してあります。

解説

やっていることは単純で、asin:で指定されたURIを、実際のAmazon JapanのURIに変換して、class="asin"を設定しているだけです。

ソースコード

http://blog.livedoor.jp/dankogai/js/asinjp.js

使い方

以下のコードを任意の場所に貼るだけです。

<script type="text/javascript" src="http://blog.livedoor.jp/dankogai/js/asinjp.js"></script>
<script>ASINjpHandler('blogsofdankog-22');</script>

ASINjpHandler()の引数は、見てわかるとおりAmazonアソシエイトIDです。引数を省略しても動きます。

追記:以下のページにデモも用意しました。

• Expand asin: scheme

追記:ASINjpHandler()に二番目の引数に1を指定すると、onloadイベントを待たずに変換が実行されます。

例: <script>ASINjpHandler('blogsofdankog-22', 1);</script>

この場合、上記のコードを埋め込んだ上の部分のみが書き換えの対象となります。本blogのように、他のサイトから多数のスクリプトやオブジェクトをロードしている場合、onloadイベントはこれらのロードが完了するまで実行されないのですが、こうすることによって書き換えを高速化することが出来ます。

ただし、この場合はコードの埋め込み場所に注意が必要なので、デフォルトではonloadイベントで書き換えを実行するようにしてあります。

<a href="asin:123456789X"....>

個別ページへのリンクとなります。

例:<a href="asin:4844323644">まるごとJavaScript & Ajax ! Vol.1</a> → まるごとJavaScript & Ajax ! Vol.1

<a href="asin:search"....>

aタグの中身を検索ワードとするリンクになります。

例:<a href="asin:search">JavaScript</a> → JavaScript

<img src="asin:123456789X.size"....>

インライン画像です。.sizeの指定は以下のとおりです。

s

サムネイル。

<img src="asin:4844323644.s">

m

標準サイズ。指定がない場合もこれになります。

<img src="asin:4844323644.m">

<img src="asin:4844323644">

l

最大サイズ。

<img src="asin:4844323644.l">

数値

任意のサイズ。この場合、画像は正方形になります、サイズは一辺の長さになります。

<img src="asin:4844323644.200">

その他

Amazonの画像処理コマンドとして解釈されます。

<img src="asin:4844323644._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight, 45,-64_OU09_AA240_SH20_SCLZZZZZZZ_V44861159_">(実際は改行ナシ)

<img src="asin:noimage.size"....>

「イメージがありません」へのリンクです。.sizeを指定して任意のサイズに出来ます。省略した場合には128が指定されます。

<img src="asin:noimage.64">

<img src="asin:noimage">

Enjoy!

Dan the Amazon Associate JavaScripter

Comments

一瞬、画像が「×」で表示されたので、
「またIEだけハブにされてるのか！」
と思ったけど、単にonloadイベントにくっつけてたせいで表示が遅れてるだけでした…。Win XP SP2+IE7で動作。

新規スキームを実装するというのは「いいかも！」とぼくも思ってやったことがあるんですが…（画像までは考えなかったけど）。onloadされるまでのあいだ×になる点について何か解決方法がないですかね。

とりあえずスキームを使うのはやめ、srcに確実に存在するリソースを参照させといて、a, imgにasin属性を作るという方向性なら…とは思うんですが、直感的じゃないしあんまり面白くないですね。

Posted by Bar at 2007年03月19日 22:28

Barさん、
報告ありがとうございます。
「即時書き換えモードを追加しました。今度は待たずに表示されると思います。
Dan the JavaScripter

Posted by 弾 at 2007年03月19日 22:47

対応早っ！
せっかくぼくなんかでもDISれるポイントを見つけたというのに。

単純ですが、これなら
「おしりのほうに埋め込んでおいてくれ」
と言って配布するblogパーツとして、いろいろ作れそう。あとはどんなスキームがあるかな。rakuten:、youtube:…。

Posted by Bar at 2007年03月19日 22:57

画像のリンク切れが多いなと思ったら、これのためですか。
このサイトでは、JavaScript ON が推奨ということで。
ちなみに、Windows Live Carol が現れてからはこちらのサイトをJavaScript OFF で閲覧していたのですが、あれはもう辞めたのでしょうか。

とりあえず、一閲覧者としては、何処かにアナウンスでもあると有難いなーとか。まあ、お金払ってる訳じゃないんでユーザビリティとかはどうでもいいんですが。

Posted by at 2007年03月20日 02:16

""さん、
>このサイトでは、JavaScript ON が推奨ということで。
一応は。Carolの一件はすみませんでした。
なお、本pageはasin:リンクをasinjp.jsに展開させていますが、本日から他のページで使ったasin:の例は、JavaScript Offに配慮して、試行錯誤の末、展開済みのHTMLを投稿することにしました。
コメントありがとうございました。
Dan the UI Illiterate

Posted by 弾 at 2007年03月20日 02:55

http://www.akatsukinishisu.net/itazuragaki/id/urn_isbn_and_javascript
こういうのなら…

Posted by y-Aki at 2007年03月20日 12:07