• 管理人へのメール

  • crossbreed tumblr.  ※画像をクリックして拡大できます tumblr-タンブラーって何?tumblrの始め方
    最新記事ヘッドライン (※画像をクリックして拡大できます)
    お前らってどうやって嫌な事乗り越えてるの? この記事を読む → お前らってどうやって嫌な事乗り越えてるの? http://crossbreed.tv/archives/201501150028.php キモ美しい街並みを集めてみたよ(Googleマップ付) この記事を読む → キモ美しい街並みを集めてみたよ(Googleマップ付) http://crossbreed.tv/archives/201501101258.php みんなのビヤホールCMがリア充過ぎる件 この記事を読む → みんなのビヤホールCMがリア充過ぎる件 http://crossbreed.tv/archives/201501101122.php 【DJMIX】Bar KNAT FINAL MIX この記事を読む → 【DJMIX】Bar KNAT FINAL MIX http://crossbreed.tv/archives/201411300014.php イタリアのヴァイオリン修復師さんと 日本の鋸職人さんの話 この記事を読む → イタリアのヴァイオリン修復師さんと 日本の鋸職人さんの話 http://crossbreed.tv/archives/201411272130.php
    同カテゴリ内最新記事ヘッドライン (※画像をクリックして拡大できます)
    伊集院光さんによる、「Ingress」の面白さの説明が超わかりやすい この記事を読む → 伊集院光さんによる、「Ingress」の面白さの説明が超わかりやすい http://crossbreed.tv/archives/201408091111.php Amazonファッションサイトが期間限定で10%オフ この記事を読む → Amazonファッションサイトが期間限定で10%オフ http://crossbreed.tv/archives/201405261944.php Plug.djで誰でもDJになろう この記事を読む → Plug.djで誰でもDJになろう http://crossbreed.tv/archives/201402072048.php Autopagerizeでロードされるキーワードが違う場合の対処方法 この記事を読む → Autopagerizeでロードされるキーワードが違う場合の対処方法 http://crossbreed.tv/archives/201401250842.php 容量無制限のクラウドストレージ「Bitcasa」の有料プランを使ってみたレビューと使い方 この記事を読む → 容量無制限のクラウドストレージ「Bitcasa」の有料プランを使ってみたレビューと使い方 http://crossbreed.tv/archives/201309011102.php

    7月
    20
    2006

    web2.0時代のhtmlタグ作成方法(bookmarklet等)その2

    カテゴリ:web |

    STARを押してこの記事を評価お願いします→つまんないイマイチ普通まあまあよかった! (評価して下さい!)
    Loading ... Loading ...

    さて、前回の単語登録によるタグ入力はいかがだったでしょうか。フツーにブラインドタッチで文章を入力できる方なら劇的に作業効率が上がったのではないかと僕は思うのですがいかがでしょうか。 今回はそれを一歩進めた、ブックマークレットを活用したリンクタグ作成方法を書いてみる事にします。

    リンク作成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=&quot;_blank&quot; href=&quot;';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+'&quot;>'+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=&quot;_blank&quot; href=&quot;';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+'&quot;><img border=&quot;0&quot; src=&quot;http://images-jp.amazon.com/images/P/'+a+'.09.MZZZZZZZ.jpg&quot; onload=&quot;if(this.width==\'1\') this.src=this.src.replace(\'.09.\',\'.01.\')&quot; /><br />'+t+'</a>';}else{z=r+u+'&quot;>'+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://crossbreed.tv/js/lnk.jsとしてアップしました) 3.以下のスクリプトをbookmarkletとして登録します。 ■lnk.js
    javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="http://crossbreed.tv/js/lnk.js";document.body.appendChild(s)})();
    4.使います。 これでどんなに長いスクリプトも動作可能になります。レスポンスも思ったよりも上々です。まあ、タグを作成するのはブログスペースやwebのスペースを持っている方達だろうかと思いますので、この辺は問題ないのではないでしょうか。 とにかく、一度使い出したら元の環境には戻れないことは確かです。特にアマゾンの個別商品を紹介することが多いブログな方は一度使ってみることをオススメします。 あと、余談ですが、正常に登録された際の「ok」メッセージがウゼエ、という方は、上記スクリプトから「windows.alert('ok');」の部分を削除してやってみてください。メッセージのダイアログは表示されないはずです。 他にもこんな便利なbookmarkletを使ってるよ!という方がいらっしゃいましたら、コッソリコメント欄にて教えてください宜しくお願いします。 ・ ・ ・ ・ ・ ・ あ! ・ ・ web2.0の事は結局わかりませんでした(泣

    当サイト関連

    ■web2.0時代のhtmlタグ作成方法(amazonリンクタグ作成方法)その1
    商品無料仕入戦隊『電脳卸』

    この記事を読んで頂きありがとうございます。
    コメント欄も設けておりますが、
    よかったらtwitterやfacebookなどでつぶやいたりシェアして頂けると嬉しいです。

    STARを押してこの記事を評価お願いします→つまんないイマイチ普通まあまあよかった! (評価して下さい!)
    Loading ... Loading ...

    Written by ayu in: web |

    2件のコメント »

    • むき より:

      はじめまして。
      いつも楽しく読ませていただいてます!
      このブックマークレット&JS、早速使わせていただきました。
      アソシエイトリンクを作るのに、いつもかなり面倒な思いをしていたので、かなり助かりました!どうもありがとうございます。
      余談ですが、たまーに「MZZZZZZZ.jpg」ではなく「_SCMZZZZZZZ_.jpg」というのがありますね。法則性はわかりませんが(> <)

    • 管理人ayu より:

      >むきさん
      えええ、そんなのもあるんですねえ。やっぱり簡単に画像ファイルを利用されたくないアマゾンのキモチもよくわかるのですが、もっと使いやすくしてほしいですねえ。

    RSS feed for comments on this post. TrackBack URL


    コメントして下さい

    同一カテゴリ内記事

    最近買ったモノ


    Template: TheBuckmaker.com Blog Themes | Website Hosting, Gesundheitspapst

    Optimization WordPress Plugins & Solutions by W3 EDGE