web2.0時代のhtmlタグ作成方法(bookmarklet等)その２
さて、前回の単語登録によるタグ入力はいかがだったでしょうか。フツーにブラインドタッチで文章を入力できる方なら劇的に作業効率が上がったのではないかと僕は思うのですがいかがでしょうか。
今回はそれを一歩進めた、ブックマークレットを活用したリンクタグ作成方法を書いてみる事にします。
リンク作成bookmarkletを使って更に快適に
前回書いた単語登録によるリンクタグ、アマゾン用URL作成は、タイトルやASINコードを自分でコピペしてやる必要がありました。この作業を短縮すべく、bookmarkletというjavascriptを使った方法が便利なのでそれについて書いてみます。勿論、単語登録はいざというときに威力を発揮するはず、そしてリンクタグ以外のタグには十分使えるはず、ですのでいつでも使える状態にしておくことをオススメします。
bookmarklet（ブックマークレット）の登録方法は以下を参照するとよいかと
で、色々考えた結果、ブログの記事を作成するにはクリップボードにコピーする方法が一番便利だと僕は思ったので、作ってみました。IEはクリップボードの制御命令を備えているので簡単でしたが、FireFox、Safari、Operaは簡単にはいきませんでした。というわけで、flashのメソッド「setClipboard」を使用して、無理矢理実現させる方法を見つけました。
その為、flashファイル（swfファイル）をサーバに置いておかなくてはなりません。この辺がちょっと厳しいところでしょうか。現在僕の契約しているサーバに置いてますのでそのままどなたでもこれを利用できますが、できればご自分のサイトにアップして使ってほしいです。
↓ダウンロード
クリップボードセット用swf
これを使ってリンクタグ自動生成スクリプトを組んでみました。
■リンクタグ作成 for IE
javascript:i='ayuk-22';u=document.location.href;w=document.title;r='<a target="_blank" href="';if(u.match(/(http:\/\/www.amazon.co.jp)(.*)/)){o=RegExp.$1;p=RegExp.$2;p.match(/(dp|gp\/product|ASIN)\/([0-9A-Z]+)/);a=RegExp.$2;x=w.indexOf('：');y=w.indexOf(':');t=w.substring(x+1,y);l=o+'/o/ASIN/'+a+'/'+i+'/ref=nosim/';(function(){window.clipboardData.setData('text',r+l+'">'+t+'</a>');})();}else{(function(){window.clipboardData.setData('text',r+u+'">'+w+'</a>');})();}window.alert('ok');
■リンクタグ作成 for etc
javascript:(function(){with(top.document){i='ayuk-22';u=URL;w=title;r='<a target="_blank" href="';if(u.match(/(http:\/\/www.amazon.co.jp)(.*)/)){o=RegExp.$1;p=RegExp.$2;p.match(/(dp|gp\/product|ASIN)\/([0-9A-Z]+)/);a=RegExp.$2;x=w.indexOf('：');y=w.indexOf(':');t=w.substring(x+1,y);l=o+'/o/ASIN/'+a+'/'+i+'/ref=nosim/';}else{l=u;t=w;};z=r+l+'">'+t+'</a>';b=createElement('div');b.id='y';s='<object data="http://crossb.s72.xrea.com/sc.swf" type="application/x-shockwave-flash" width="0" height="0"><param name="src" value="http://crossb.s72.xrea.com/sc.swf" /><param name="FlashVars" value="code='+z+'" /></object>';body.appendChild(b);getElementById('y').innerHTML=s;}})();window.alert('ok');
bookmarkletはお気に入り等に登録し、それを呼び出すことによって仕様できるjavascriptの簡単なプログラムです。ブラウザのリンクバー等に追加することによって劇的に便利に使えると思います。
これを登録することで何ができるかというと、現在見ているページのタイトルとURLのリンクタグを生成してクリップボードへ送ってくれます。そしてなんとamazonのページとそうでないページを判別して、アマゾンのページであれば、上のスクリプト内のi='ayuk-22'の部分を書き換えるだけで、ご自分のidつきのタグを自動生成します！またこれは大切なことなんですが、
そのままayuk-22で使っても構いません！（ニヤケながら
次に前回文字数オーバーで単語登録できなかった、アマゾンの商品画像をもってくるスクリプトを紹介します。いちいちローカルに入れてアップロードして・・・なんて面倒な方法とオサラバ（死語
ですね。
前回も書きましたが、imgタグ作成では、見ているページのアマゾンの商品画像を自動的に「img」タグとして生成します。ここで問題になってくるのがアマゾンの画像ファイルURLの仕様です。アマゾンの画像のURLは現在二種類で現される仕様になっており、これを回避する為の苦肉の策、とでもいいましょうか、ひとつで表示してみてだめならもうひとつ、といったカンジでスクリプトは作ってあります。
■imgタグ作成 for IE
javascript:u=document.location.href;w=document.title;r='<img border="0" src="';if(u.match(/(http:\/\/www.amazon.co.jp)(.*)/)){o=RegExp.$1;p=RegExp.$2;p.match(/(dp|gp\/product|ASIN)\/([0-9A-Z]+)/);a=RegExp.$2;x=w.indexOf('：');y=w.indexOf(':');t=w.substring(x+1,y);l=r+'http://images-jp.amazon.com/images/P/'+a+'.09.MZZZZZZZ.jpg" onload="if(this.width==\'1\') this.src=this.src.replace(\'.09.\',\'.01.\')" />';(function(){window.clipboardData.setData('text',l);})();}window.alert('OK');
■imgタグ作成 for etc
javascript:(function(){with(top.document){u=URL;w=title;if(u.match(/(http:\/\/www.amazon.co.jp)(.*)/)){o=RegExp.$1;p=RegExp.$2;p.match(/(dp|gp\/product|ASIN)\/([0-9A-Z]+)/);a=RegExp.$2;x=w.indexOf('：');y=w.indexOf(':');t=w.substring(x+1,y);l='<img border=\'0\' src=\'http://images-jp.amazon.com/images/P/'+a+'.09.MZZZZZZZ.jpg\' onload=\'if(this.width==\'1\') this.src=this.src.erplace(\'.09.\',\'.01.\')\' />';window.alert('ok');}else{window.alert('no!');};b=createElement('div');b.id='y';s='<object data="http://crossb.s72.xrea.com/sc.swf" type="application/x-shockwave-flash" width="0" height="0"><param name="src" value="http://crossb.s72.xrea.com/sc.swf" /><param name="FlashVars" value="code='+l+'" /></object>';body.appendChild(b);getElementById('y').innerHTML=s;}})();
うまくいきましたでしょうか？
現在確認しているブラウザは
【windows】
IE（IEコンポーネントブラウザ含む）,Opera,Firefox
【mac】
Safari,Firefox
です。他のブラウザでも使用できるといいのですが・・・
そして面倒くさがりの僕はそれを同時にやってのけるscriptを作成しました。なんてことはない二つをあわせただけなんですが、これで今までの労力が一気に短縮されること間違いなしです。
■a,imgタグ同時作成 for IE
javascript:i='ayuk-22';u=document.location.href;w=document.title;r='<a target="_blank" href="';if(u.match(/(http:\/\/www.amazon.co.jp)(.*)/)){o=RegExp.$1;p=RegExp.$2;p.match(/(dp|gp\/product|ASIN)\/([0-9A-Z]+)/);a=RegExp.$2;x=w.indexOf('：');y=w.indexOf(':');t=w.substring(x+1,y);l=o+'/o/ASIN/'+a+'/'+i+'/ref=nosim/';(function(){window.clipboardData.setData('text',r+l+'"><img border="0" src="http://images-jp.amazon.com/images/P/'+a+'.09.MZZZZZZZ.jpg" onload="if(this.width==\'1\') this.src=this.src.replace(\'.09.\',\'.01.\')" /><br />'+t+'</a>');})();}else{(function(){window.clipboardData.setData('text',r+u+'">'+w+'</a>');})();}window.alert('ok');
■a,imgタグ同時作成 for etc
javascript:(function(){with(top.document){i='ayuk-22';u=URL;w=title;r='<a target="_blank" href="';if(u.match(/(http:\/\/www.amazon.co.jp)(.*)/)){o=RegExp.$1;p=RegExp. $2;p.match(/(dp|gp\/product|ASIN)\/([0-9A-Z]+)/);a=RegExp.$2;x=w.indexOf('： ');y=w.indexOf(':');t=w.substring(x+1,y);l=o+'/o/ASIN/'+a+'/'+i+'/ref=nosim/';z=r+l+'"><img border="0" src="http://images-jp.amazon.com/images/P/'+a+'.09.MZZZZZZZ.jpg" onload="if(this.width==\'1\') this.src=this.src.replace(\'.09.\',\'.01.\')" /><br />'+t+'</a>';}else{z=r+u+'">'+w+'</a>';}b=createElement('div');b.id='y';s='<object data="http://crossb.s72.xrea.com/sc.swf" type="application/x-shockwave-flash" width="0" height="0"><param name="src" value="http://crossb.s72.xrea.com/sc.swf" /><param name="FlashVars" value="code='+z+'" /></object>';body.appendChild(b);getElementById('y').innerHTML=s;}})();window.alert('ok');
ここで問題発生です。また文字数制限です。IEのお気に入りには最大507文字しか挿入することができないのです。他のブラウザは大丈夫のようですが、sleipnirを常用している僕は、また悩みが増えました。
そして解決策を探して探して・・・・ありました。
これもサーバを利用するという離れワザなんですが一応書いておきます。
1.上記スクリプトをテキストエディタ等で「sc.js」として保存します。
2.サーバの適当な場所にアップロードします。（ここではhttp://cross-breed.com/js/lnk.jsとしてアップしました）
3.以下のスクリプトをbookmarkletとして登録します。
javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="http://cross-breed.com/js/lnk.js";document.body.appendChild(s)})();
4.使います。
これでどんなに長いスクリプトも動作可能になります。レスポンスも思ったよりも上々です。まあ、タグを作成するのはブログスペースやwebのスペースを持っている方達だろうかと思いますので、この辺は問題ないのではないでしょうか。
とにかく、一度使い出したら元の環境には戻れないことは確かです。特にアマゾンの個別商品を紹介することが多いブログな方は一度使ってみることをオススメします。
あと、余談ですが、正常に登録された際の「ok」メッセージがウゼエ、という方は、上記スクリプトから「windows.alert('ok');」の部分を削除してやってみてください。メッセージのダイアログは表示されないはずです。
他にもこんな便利なbookmarkletを使ってるよ！という方がいらっしゃいましたら、コッソリコメント欄にて教えてください宜しくお願いします。
・
・
・
・
・
・
あ！
・
・
web2.0の事は結局わかりませんでした（泣
当サイト関連
■web2.0時代のhtmlタグ作成方法（amazonリンクタグ作成方法）その１
スポンサードリンク※このサイトはさくらインターネットのサーバを利用しています。
■裏クロスブリード人気記事まとめ2008年2月
■MyMiniCityにクロスブリードの街を作ってみたよ
■裏クロスブリード人気記事まとめ
■名前を入れると脳内を画像化してくれる「脳内メーカー」が凄い
はじめまして。
いつも楽しく読ませていただいてます！
このブックマークレット＆JS、早速使わせていただきました。
アソシエイトリンクを作るのに、いつもかなり面倒な思いをしていたので、かなり助かりました！どうもありがとうございます。
余談ですが、たまーに「MZZZZZZZ.jpg」ではなく「_SCMZZZZZZZ_.jpg」というのがありますね。法則性はわかりませんが(> <)
Posted by: むき at 2006年07月29日 18:23>むきさん
えええ、そんなのもあるんですねえ。やっぱり簡単に画像ファイルを利用されたくないアマゾンのキモチもよくわかるのですが、もっと使いやすくしてほしいですねえ。
はてなアンテナに追加
