Amazon画像リンクをちょっと簡単にするBookmarklet(まわりこみつき)

 CDやDVDについて言及する場合、ジャケット画像のリンクがあったほうがわかりやすい、ページが派手になる、ということでAmazonの画像を使うわけですが。投稿時のタグ作成を簡単にするためのBookmarkletです。
●インストール方法
 以下のリンクをクリックして、画面の指示に従います。
 Windows XP SP2だとブロックされちゃうんで、そこはポップアップブロックをOFFにしてください。
●使い方
 使い方はamazletツールとほぼ同じ。ただ、回り込みを含んだタグが生成されます。
 具体的にいきましょう。リンクをクリックすると、Amazonアソシエイトのための「アソシエイトID」を入力するためのタグが開きます。そこに、最後が「-22」で終わるアソシエイトIDを入力します(AmazonアソシエイトIDを取得してない人には伝わらないかも、ですが。そこは各自)。で、「OK」ボタンを押すとさらにウィンドウが開きます。
 そこには2つのリンクが出てくるので、それらを個別にBookmark(IEならお気に入り)に追加します。これで、「amL」と「amR」というBookmark(お気に入り)ができるはずです。これを「Bookmarklet」といいます。
 ここで、一応、インストールは終了です。
 以下は、普段のblogの更新時の話です。
 言及したタイトルがあったら、Amazonのサイトに行って、個別リンクのページに行きます。
 そこで、上記のBookmarkletをリンクバーとか「お気に入り」から立ち上げると、ダイアログが開きます。
 そこでWindowsなら[Ctrl]+[C](コピーコマンド)を押して、コピーされた文字列をblogの記事投稿時に貼り付ければ、Bookmarkletらしい動作になるわけです(途中でめんどくさくなったので、省略)。
 というわけで、下のリンクをクリックすると意味がわかると思います。
●インストール用リンク

amL-Rの登録

●例を挙げてみる
Amazon.co.jp: DVD: tokyo incidents vol.1 こんな感じ。「amL」を使ってリンク。
 さらにリンクを作りたい場合には、まわりこみが邪魔になることもある。
 そんなときは
<br clear="all">
を使ってください。これでまわりこみを解除。


Amazon.co.jp: 音楽: ライヴ・アルバム 〜サッポロ OMOIDE IN MY HEAD 状態 で、「amR」リンクを張ったリンクのあとのテキストがここにあるようになるのだな。例ですから。いま、Amazonのトップにあるリンクを適当にはってみました。
 ついでに言っとくとこれまでの最近の画像リンクもすべてこれを使ってやってきました。
 過去のエントリーを見れば、なるほど、と思えるかも、です。
Amazon.co.jp: 音楽: KAELA (初回盤 特典DVD付) [LIMITED EDITION]『KAELA』初回版。
 WebのCD通販で。先週土曜日に届きました。
 で、すげーいい。アイゴン参加。だったのだな。そんなこんなで。
 初回版じゃなくても曲はいっしょだと思われるので。
 改めて。すげーいい。
 てな感じでCDレビューとかを書くときに使えばいいような気配。


●作るまでの話
 ここは音楽とかDVDのタイトルの感想とかをメインにしたい。と考えているのですが。そんなときに、ジャケットの画像があるとちょっと華やかになっていいな、と思うわけです。そんな時に著作権とか肖像権とかを考えると、勝手に写真を撮って掲載、というわけにはいかないと思うわけです。
 で、便利だな、と思ったのがAmazonアソシエイトだったのでした。そこでは画像をリンクするためのタグを生成してくれるのですが、ちょっと手順が多くて面倒だったのです。そこでいろいろ検索してると見つけたのが、G-Toolsだったり、amazlet.comが提供してるBookmarklet(ブックマークレット)だったのです。「これはいい!」ということで、両者を使いまくってここまできたわけです。
 しかし、画像の配置を考えると面倒なことも多かったわけです。テキスト情報はいらない。画像を「にぎやかし」のために使いたいだけなんだよな、と思ってたりしたことも多かったのです。毎回タグを書き換えて、右にまわりこませたり左にまわりこませたりするのが面倒なわけです。それを単純化できないものか? と思ってたわけです。
 でも、一からそのためのスクリプトが作成できるはずもありません。また検索するわけです。理解できる範囲で改変可能なものはないか? と。Amazon Web Serviceというのがあるとわかったのですが、それはだいぶ敷居が高いのです。という話は前にしました
 そしたら、改変で自分が好きなようにできるようなソースを、画面に見える状態で掲載しているサイトを見つけたわけです。
 それが、hail2u.netAssociate This (with image)!だったわけです。
 ああ、なんてわかりやすいんだ! ソースも見えるようにしてあるし! というわけで勉強が始まりました。
 で、できたのが、上記のスクリプトです。
●追加説明したいことがら
 前述したとおり、hail2u.netのソース(これをオリジナル、とします)を元にしたわけですが。名前はあえて変えました。
 というのも。
 ツールバーのリンク(IE用語ですな)に追加したときに名前が短い方が、スペースをとらない、ということで。
 また、amazletはリンクタグ生成までのステップが多すぎる!と感じていたため、個別に右と左用のリンクを作りました。Bookmarkletを選ぶ手間は、これが増えても変わらない。だったら「左にまわりこみ」「右にまわりこみ」を選ぶのも手間は変わらないわけです。ということで。
 出来上がってから考えてみると、Bookmarklet自体はオリジナルとぜんぜん変わっておらず(回り込みのための指定が追加されただけ)。
 自分が作ったのは、「Associate This(with image)」のインストーラだということがわかりました。ありゃりゃ。でも、そのインストーラがすげー手間がかかったんですよ。というお知らせ。一番たいへんだったのは「実態参照」というもんもでした。勉強始めたばっかりだったので、理解するのに時間がかかったのでした。まあ、ほんとに有用なコードを書いたのはオリジナル版の作者だな。やっぱり。ってことで。
 余計な話が多い気がしますが、このBookmarklet自体はけっこう便利。というのも。
 最初にこのツールをみつけたときに、友達に紹介しまくったんですが、JavascriptはおろかHTMLもわからない人ばっかりだったので、そういう人たちにも使えるように、なんとかしたいと思って作ったのが、これ、なわけです。こっそり公開したところ、友達にもちょっと好評を得ました。それで、公開にいたったわけです。オリジナル版の作者の方にも公開を快諾していただきました(ありがとうございます)。
 ということで、みなさんに試していただきたいと思います。
 なんか要望とかありましたら、コメントでお願いします。
 ちなみに、動作確認はWindows XP+SP1,Windows 2000+SP1+IE6.0で行ないました。MacOS XのSafariでは動かないようですが、MacOS X用IEでは動くようです。という情報を友達から得ました。
 あと、エラー処理はなんも行なってません。アソシエイトIDを入れなくてもがんがん進みます。
 それから、クッキーとかCGIは使っておらず、アソシエイトIDはたんにBookmarkletだけに記録されます。うまく動かなくても、こちらは責任を負いません。ご了承ください。
(追記)
 我ながらまわりくどい表現ばっかりだなあ。無駄に長い。いろいろ修正。
 あと、Amazonアソシエイトをやってない場合、アソシエイトIDの入力ダイアログで、何も入力しない(「-22」を消す)で次に進めばいいみたいです。スラッシュが重なったURLでも問題なくページに到達できるようなので。たぶん。
(追記12.27)
 小さい画像が貼りたいよ、という方はAmazonの小さいジャケット画像を使いたいっていうエントリをご覧ください。個人的にはこっちの方がよく使うかも。
(追記2005.01.10)
無駄なコードがあったのを削除。で、ついでにそのまま[Enter]でいってもブックマーク作成できるように変更。どうでしょう? 文句があればコメントでよろしく。

コメント

  1. kazumin より:

    初めまして。
    amL-RとamL-Rmini、お借りしました。
    「古い記事でもトラックバック/コメント歓迎」
    ということでしたので、トラックバックも^^
    便利に使わせていただきます。
    ありがとうございます。

  2. point より:

    わざわざどうもです。そちらのエントリも見させていただきました。たいへんうれしく思います。

    ほんとありがとうございます。

    久々のレスポンスでかなり喜んでます。

    ちなみに、検索結果から複数商品のリンクを作るには
    http://fun9.net/
    がいいみたいです。最近お気に入り。

  3. kazumin より:

    お返事遅れてスミマセン。
    こちらも便利そうですね。
    教えていただいてありがとうございます。

  4. point より:

    あっ、わざわざ返事なんかいらないですよ。お気になさらぬよう。

    といいつつ、そちらにもコメントさせていただきましたが。