web2.0時代のhtmlタグ作成方法(bookmarklet等)その2  このエントリーを含むはてなブックマーク

【はてなブックマーク】:  【カテゴリ】:[ web ]

さて、前回の単語登録によるタグ入力はいかがだったでしょうか。フツーにブラインドタッチで文章を入力できる方なら劇的に作業効率が上がったのではないかと僕は思うのですがいかがでしょうか。

今回はそれを一歩進めた、ブックマークレットを活用したリンクタグ作成方法を書いてみる事にします。

スポンサードリンク

リンク作成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=''+t+'');})();}else{(function(){window.clipboardData.setData('text',r+u+'">'+w+'');})();}window.alert('ok');

■リンクタグ作成 for etc

javascript:(function(){with(top.document){i='ayuk-22';u=URL;w=title;r=''+t+'';b=createElement('div');b.id='y';s=' ';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='';(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='';window.alert('ok');}else{window.alert('no!');};b=createElement('div');b.id='y';s=' ';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='
'+t+'');})();}else{(function(){window.clipboardData.setData('text',r+u+'">'+w+'');})();}window.alert('ok');

■a,imgタグ同時作成 for etc

javascript:(function(){with(top.document){i='ayuk-22';u=URL;w=title;r='
'+t+'';}else{z=r+u+'">'+w+'';}b=createElement('div');b.id='y';s=' ';body.appendChild(b);getElementById('y').innerHTML=s;}})();window.alert('ok');

ここで問題発生です。また文字数制限です。IEのお気に入りには最大507文字しか挿入することができないのです。他のブラウザは大丈夫のようですが、sleipnirを常用している僕は、また悩みが増えました。

そして解決策を探して探して・・・・ありました。

これもサーバを利用するという離れワザなんですが一応書いておきます。

1.上記スクリプトをテキストエディタ等で「sc.js」として保存します。
2.サーバの適当な場所にアップロードします。(ここではhttps://cross-breed.com/js/lnk.jsとしてアップしました)
3.以下のスクリプトをbookmarkletとして登録します。


■lnk.js

javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="https://cross-breed.com/js/lnk.js";document.body.appendChild(s)})();

4.使います。

これでどんなに長いスクリプトも動作可能になります。レスポンスも思ったよりも上々です。まあ、タグを作成するのはブログスペースやwebのスペースを持っている方達だろうかと思いますので、この辺は問題ないのではないでしょうか。

とにかく、一度使い出したら元の環境には戻れないことは確かです。特にアマゾンの個別商品を紹介することが多いブログな方は一度使ってみることをオススメします。

あと、余談ですが、正常に登録された際の「ok」メッセージがウゼエ、という方は、上記スクリプトから「windows.alert('ok');」の部分を削除してやってみてください。メッセージのダイアログは表示されないはずです。

他にもこんな便利なbookmarkletを使ってるよ!という方がいらっしゃいましたら、コッソリコメント欄にて教えてください宜しくお願いします。







あ!


web2.0の事は結局わかりませんでした(泣

当サイト関連

■web2.0時代のhtmlタグ作成方法(amazonリンクタグ作成方法)その1

スポンサードリンク

※このサイトはさくらインターネットのサーバを利用しています。

■gi(ギィー)福岡浄水通りの絣(かすり)と手作り雑貨のセレクトショップ
↑サイト内紹介記事
【PR】BTOパソコンの先駆者 FRONTIER
投稿者 ayu : 2006年07月20日 17:38 | コメントを読む | このサイトを印刷
このカテゴリの最新記事
他サイトよりの参照関連記事(トラックバック)
この記事のトラックバック用URL:
 
※当該記事にリンクのないトラックバックは削除することがあります。トラックバックについてを参考にして下さい。
この記事へのコメント

はじめまして。
いつも楽しく読ませていただいてます!

このブックマークレット&JS、早速使わせていただきました。
アソシエイトリンクを作るのに、いつもかなり面倒な思いをしていたので、かなり助かりました!どうもありがとうございます。

余談ですが、たまーに「MZZZZZZZ.jpg」ではなく「_SCMZZZZZZZ_.jpg」というのがありますね。法則性はわかりませんが(> Posted by: むき at 2006年07月29日 18:23

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

Posted by: 管理人ayu at 2006年08月25日 01:48
是非この記事に対するコメントを下さい









名前、アドレスを次回から入力不要にする? 
(チェックを入れると次回書き込みに便利です)

コメントに返信があった場合メールで知らせる?(現在機能停止中)

※重複トラックバックの削除依頼のコメントは不必要です。こちらで消しますので。

BLOGPEOPLE
アンテナ(リスペクト巡回先)
現在アンテナ表示停止中
はてなアンテナに追加
姉妹サイト
オススメ(ハジメテの方)
BBS / ゲストブック
BBS
Links
powered
このブログのXML


powerd by sakura web







サイト内で迷ったらこちら

■よりぬきクロスブリード
※オススメ記事はコチラから。初めて来た方も是非。

■ランダムピックアップ
※サイト内でランダムに記事を表示します。(ランダムピックアップ設置方法はコチラ