web2.0時代のhtmlタグ作成方法(amazonリンクタグ作成方法)その1
猫も杓子もweb2.0とうるさい世の中になってきました。僕にはなんのことやらさっぱりわかりません。そこで僕なりに2.0というものに取り組んでみることにしました。
さて、主にブログ等webサイトを運営している方はリンクタグや画像のタグをどうやって書いているんでしょうか?手入力だったり、オーサリングツールを使っていたり、タグ生成ソフトを使っていたりだと思います。
ブログツール等はリンクタグ作成ボタンがあったりして一見便利ですが、あれも実は便利なようで使っていると超面倒にな事がだんだん分かってきます。
こんなの
ということで、僕はあの手のボタンは一切使った事がないです。
で、色々試してみて便利な方法を模索しておりまして、ようやくカタチになったっぽいので紹介したいと思います。amazonアソシエイトのリンクタグを超カンタンに生成する方法なんかも合わせて書いてます。
スポンサードリンクボタンを使うとこんなに面倒
まず、ブログツールやhtml作成ツール等の機能としてある「リンク作成ボタン」を使用した場合の手順を書いてみます
1.リンクを作成したいページへブラウザで移動する
2.アドレスバーを選択して→コピー
3.リンクさせる文字を入力→マウスで選択
4.ブログ管理画面等の「リンク作成」ボタンを押下
5.たいていの場合「ユーザープロンプト」のダイアログが表示され、URLを入力する(貼付する)
6.OKを押すとリンクタグ「CROSSBREED」が作成されます。
うーん。URLのリンクを作るのが億劫になりますね。
単語登録を使うと意外と便利
僕がずっと使っているのはIME等の単語登録にタグを登録する方法です。結局一番コレが僕にとっては速かったです。やったことない方はぜひ試してみてください。
たとえば、リンクタグの場合は、
これを単語「りんく」等に登録します。上記ステップで書くと1番2番は同じですが
4.""の間にコピーしたURLを貼り付け(CTRLL+V)
5.リンクさせる文字をを">の間に入力
ステップ数はあまり変わりませんが、マウスを握る回数がこの方法だと約一回で済むのです。これは格段の差です。
他のタグ、画像タグの「」引用タグの「
」なんかもすべてURLを除いた部分を単語登録によって対応することで、いちいちタグを覚える必要もありません。なんとも原始的ですが、速いんだからこれを使わない手はないです。是非やってみてください。
アマゾンアソシエイトタグの作成
webサイトやブログを個人で運営している方の8割が加入しているであろう、アマゾンアソシエイトのidつきタグを作成する方法にもちょっとした裏技というかカンタンに入力する方法があります。
アマゾンアソシエイトの管理画面のリンク生成ページで作っている方や、webツールを使って作成している方がほとんどなんではないかと思いますが、実はそんなページでツールを使わなくても自力でURLを作成する事ができるのです。
通常の流れですと、
1.作成したい商品のページへ移動
2.そのページのURLやASINコードをコピー
3.アマゾンアソシエイト管理画面のリンク生成ページへ移動
4.先ほどコピーしたASINコードやURLを貼り付け
5.リンク生成ボタンを押下
6.ID付URLのできあがり
超不便です。いちいちやってられません。
そしてできあがるURLは
なんだこれ!長げえよ!
URLが長すぎてキモチ悪いので、生成されたURLを色々眺めて調べたところ、そのURL自体にも法則がある事がわかります。
http://www.amazon.co.jp/exec/obidos/ASIN/ (ASINコード) /(ユーザーID)
ふむふむ。これで良さそうです。ASINコードというのはアマゾンの各ページについている商品固有のコードです。これで解決のように見えますがしかし、ついでに言うとこれでは商品の個別ページへは飛びません。「こんな商品もおすすめします」のウゼエページが表示されます。(カテゴリによっては個別に飛ぶ場合もあるようですがよくわかりません)
↓
http://www.amazon.co.jp/exec/obidos/ASIN/B000AJ9SWM/ayuk-22
ウゼエ。
というわけで、知っている方には当たり前の事なんですが、URLの後ろに 「/ref=nosim/」
をつけるだけで、ちゃんとした商品個別ページへ誘導できることとなります。うーん便利!
さらに書くと、このアマゾンのURLは以下のようにも書く事ができるようです。
http://www.amazon.co.jp/o/ASIN/ (ASINコード) /(ユーザーID)/ref=nosim/
長かったURLがこんなにコンパクトに!感動すら覚えますね。以上、長々と書きましたが、要はこのアドレスの雛形となる
これを単語登録すればよいという仕掛けになります。あとは、//の間にASINコードをペーストしてやるだけ。一般的に公開されているなんとかツールを使うより圧倒的に速く、そして手軽に利用する事ができるというわけです。だってアソシエイトの管理画面に行く必要もなければ、なんとかツールのリンク生成ページに行く必要もないのですから。
ついでにもっと言うと、先のリンクタグの登録と合体させて、
これで随分と手間が省けるはずです。
次にアマゾンの画像も利用してみます。自分のサーバにダウンロードして使用している方が結構いらっしゃいますが、どうやらアマゾンのサーバのジャケ写真を使ってもいいようですので、使うことにします。
これから仕様変更があったりして、画像のURLが変更になるかもですが、現在のURLは
/images/P/(ASINコード).09.MZZZZZZZ.jpg
/images/P/(ASINコード).01.MZZZZZZZ.jpg
この二つで構成されているようです。[09]と[01]の違いはなんなのかはわかりませんでした。誰か教えてください。
というわけで、imgタグを作成する際にはちょっと一手間入れてやる必要がありました。
これで、上の太字の部分のASINコードを差し替えてやるだけで上手く表示されるはずです。
何をやっているのかというと、通常は[09]で表示しておいて、表示されなければ、onloadで分岐させて、01を利用するようするというものです。単純ですね。
しかし、ここで大きな問題が発生します。
この長いタグを単語登録することができないのです。MS-IMEでの最大文字数は60文字のようなのです。
方法はないこともないのですが、僕はここで一旦この方法は断念して次のステップへ進もうと考えました。
次回は、bookmarkletを使ってさらに簡単にすることができるのでその方法に迫りたいと思っております。
・
・
・
・
・
・
・
あ、web2.0の事すっかり忘れてた!
関連
■最新WebサービスAPIエクスプロ-ラ ~Amazon、はてな、Google、Yahoo! 4大Webサービス完全攻略
■基礎から作るMovable Typeブログデザイン―オリジナルBlogをデザインすることからはじめよう
※このサイトはさくらインターネットのサーバを利用しています。
■gi(ギィー)福岡浄水通りの絣(かすり)と手作り雑貨のセレクトショップ
↑サイト内紹介記事
【PR】BTOパソコンの先駆者 FRONTIER
■トラックバックスパムフィルター「BanNoReferTb」は凄いです
■FeedBurner.jpが開始するらしいのでその前に使ってみた
■サイト内で迷った時はランダムピックアップで
■新手のblogランキング「feed meter」はオススメです
概要 : amazonのマーケットプレイスで1円という本はたくさん.. [Ruby] amazon.co.jpから注目アイテムの発売日を取り出す Amazon.co.jp...
日付 : 2006.08.18
はじめまして!
Y氏と申します。
プログラム?素人の私にとって、
このブログ本当に参考になります。
これからも有益な情報流してください!
それだけですww
Posted by: Y氏 at 2006年10月09日 16:18>Y氏
どうもありがとうございます!
また遊びに来てくださいね。
ちなみにアマゾンのURLはまた変わったみたいです。調査しないとなあ。
Posted by: 管理人ayu at 2006年10月10日 16:52はてなアンテナに追加