ブックマークレット

| | コメント(0) | トラックバック(0)

書いたつもりでいたけど、書いてなかったみたいなので、書き込み。

ブックマーク(お気に入り)に「Javascript:」で始まるURLを登録して、ブラウザに色々な機能を追加するものです。

簡単な例

ブラウザのアドレス(Location)に以下の様なJavaScriptを入力すれば、表示しているサイトのCOOKIEを表示することが出来ます。

javascript:void(alert(document.cookie));
javascript:void(alert(document.cookie.replace(';',';\n')))

Webページの最終更新日時を表示します。

javascript:void(alert(document.lastModified))

また、私はこのblog書いてる時、リンク用にタイトルを取得するのに以下のブックマークレットを頻繁に使ってます。(プロンプトを表示させて、Ctrl+Cでコピーしている)

javascript:void(prompt(%22タイトル%22,document.title))

注意点

・Bookmarklet - ブックマークレットを作成する際のポイント
http://www.teria.com/~koseki/memo/bookmarklets/tips.html

  • 値を返してはいけない
    →void()を使いましょう
  • ブックマークレットで使う変数はローカル変数になるようにする
    →無名ファンクションのインスタンスを生成して、呼び出しましょう
    javascript:(function(){var hoge;XXX();})();
    
  • スクリプトの長さに気をつける
    →ブラウザによって異なるけど、あまり長くならないように

などの注意点がありました。

※上記COOKIEの例などでalert()をvoid()の引数にしていますが、alert()は返り値がないかも?まぁ、void()があっても害はないでしょう。。

利用例 (PC View)

例えば、「PC View」の今月の(月毎の)記事一覧は毎月URLが変わってしまいます。(年月がURLに含まれるため)

こんな bookmarklet はいかがでせう?その月のURLを自動生成します。 <a href='javascript:now=new Date();y = now.getYear();m =now.getMonth() + 1;if (y > 2000) { y -= 2000 }else{y-=100}if(y < 10){y = "0" + y }if (m < 10) { m = "0" + m}today=y+""+m;location.replace("http://www.pc-view.net/News/"+today+"/Security.html");'>PC View(今月)</a>
(2003-11-16) [めも] PC View (けんのぼやき)」ののださんのコメント

「PC View」を定期的に見ようと思うので、上記の注意点を取り入れて私なりに書き換えてみました。

javascript:(function(){var now=new Date();var y=now.getYear();var m =now.getMonth()+1;if(y > 2000){y-=2000;}else{y-=100;}if(y<10){y="0"+y;}if(m<10){m="0"+m;}var today=y+""+m;var loc="http://www.pc-view.net/News/"+today+"/Security.html";location.href=loc;})();

使用例 (TBS News-i) (2004/05/01 追記)

「TBS News-i」の過去のニュースは7日分とってあるようです。
「TBS News-i」の昨日のニュースを表示するブックマークレットを作ってみました。

javascript:(function(){var now=new Date();var targetDate=new Date();targetDate.setTime(now.getTime()-60*60*24*1000);var y=targetDate.getFullYear();var m=targetDate.getMonth()+1;var d=targetDate.getDate();if(m<10){m="0"+m;}if(d<10){d="0"+d;}var today=y+""+m+""+d;var loc="http://news.tbs.co.jp/"+today+"/tbs_main.html";location.href=loc;})();

使用例 (hidden→text) (2004/08/14 追記)

自作ブックマークレット (When The Rain Falls Silver)を見て、「おお、なるほど」と思ったので、ちょっと変更して書いてみました。

inputの「type=hidden」を「type=text」に変更します。
更に、色つけて、altタグを付けてみました(マウスを乗せるとnameが分かる)。

document.formsで取得したフォームの要素をsetAttributeすると、セットした要素が配列の最後に移動するみたいなので、 for で回した場合、順番が狂いおかしくなる?

javascript:(function(){var inp,i;inp=document.getElementsByTagName('input');for(i=0;i<inp.length;i++){if(inp.item(i).getAttribute("type")=="hidden"){inp.item(i).setAttribute("type","input");inp.item(i).setAttribute("alt",inp.item(i).getAttribute("name"));inp.item(i).setAttribute("style","background-color:#ffffcc;");}}})()

Firefox 0.9.3で確認。
IE6 SP1では動かないみたい?(setAttributeでエラーになってるみたい。)

DOM ([JavaScript]All About Japan)から始まる連載や、www.w3.orgへのリンクを参照しつつ。

使用例 (Cookie表示) (2005/09/15 追記)

「TM=」や「LM=」の値を固定長で指定してるとか、サイトチェックしてないとか、色々手抜きがあるけど、Googleのページを開いて普通に実行する分には問題ないと思う。
そのうち、解析(?)する時用。

あれ?日付の計算方法が全然違うのかも。

javascript:(function(){with(document.cookie){var strID=substr(indexOf("PREF=ID=")+8,16);var strTM=substr(indexOf(":TM=")+4,10);var strLM=substr(indexOf(":LM=")+4,10);var strS=substr(indexOf(":S=")+3,16);}alert("ID="+strID+"\nTM="+d(strTM)+"\nLM="+d(strLM)+"\nS="+strS);function d(myTime){var myDate=new Date();with(myDate){setTime(myTime*1000);return getUTCFullYear()+"/"+getUTCMonth()+"/"+getUTCDay()+" "+getUTCHours()+":"+getUTCMinutes()+":"+getUTCSeconds();}}})();

使用例 (Yahoo!のブリーフケースの表示) (2006/01/14 追記)

時々「Yahoo!のブリーフケースの中に写真が入ってるから見て」と言われるけど、URLがを教えてもらえない(書かれていない)事があったので作成しました。
相手のYahoo!IDが分れば、その人のブリーフケースをすぐに表示できるようにするブックマークレット。
(もちろんその人のブリーフケースが公開になっていて、Y!サービスにログインする必要があります)

プロンプトで何も入力しないでOKすれば、ログインしている人(ログイン画面が表示された場合はログインする人)のブリーフケースが表示されます。

javascript:(function(){var Yid=prompt(%22表示したいブリーフケースのYahoo!IDを入力してください%22,%22%22);loc=%22http://briefcase.yahoo.co.jp/bc/%22+Yid.replace(/ /g,%22%22)+%22/%22;location.href=loc;})();

(2006/02/27 追記 ここから)
ちょっと変更があったみたいなので、修正。こんな感じでいいかな?↓

・Yahoo!ブリーフケース

javascript:(function(){var Yid=prompt(%22表示したいYahoo!ブリーフケースのYahoo!IDを入力してください%22,%22%22);loc=%22http://briefcase.yahoo.co.jp/%22+Yid.replace(/ /g,%22%22)+%22/%22;location.href=loc;})();

・Yahoo!フォト

javascript:(function(){var Yid=prompt(%22表示したいYahoo!フォトのYahoo!IDを入力してください%22,%22%22);loc=%22http://photos.yahoo.co.jp/%22+Yid.replace(/ /g,%22%22)+%22/%22;location.href=loc;})();

(2006/02/27 追記 ここまで)


使用例 (はてなのキーワード表示) (2006/01/14 追記)

「はてな」の用語説明機能。(正式名称はなんだろう?)
日本語が入力された時のURLエンコードは行ってなくて、ブラウザ任せ。
IE6SP2とFirefox1.0.7では勝手にURLエンコードして送ってた。

javascript:(function(){var word=prompt(%22「はてな」で調べたいキーワードを入力してください%22,%22%22);loc=%22http://d.hatena.ne.jp/keyword/%22+word.replace(/ /g,%22%22);location.href=loc;})();

リンク

・Jesse's Bookmarklets Site
http://www.squarefree.com/bookmarklets/
「Zap Bookmarklets」「Web Development Bookmarklets」は特に有用だと思います。
使わせてもらってます!
(2004/08/10 追記 ここから)
「Flash Bookmarklets」の「seek bar」も良いですね。
FLASHアニメーションの下にSeek barが出て、任意の場所まで巻き戻し、早送りができます。
(2004/08/10 追記 ここまで)

・b-Max ブックマーク・アクセサリー
http://www.jscript.net/accessories/
「javascript:」を使用するサンプル集

(2004/12/03 追記 ここから)
・POP辞書.com - Bookmarklet
http://www.popjisyo.com/WebHint/ja/help/Bookmarklet.aspx
「Googleの辞書、路線、etc...検索」のエントリの「pop辞書」さんのコメントより。
現在表示しているページをPOP辞書化してくれます。
マウスを乗せるとポップアップで辞書機能が表示されます。
お手軽にPOP辞書が使えていいかも。
「リンクバー」(IE)や、「ブックマークツールバーフォルダ」(Mozilla)に登録しておくと、すぐに使えてなお良いかも。

・JAVASCRIPT::BOOKMARKLET
http://bookmarklet.daa.jp/
サンプルたち。
(2004/12/03 追記 ここまで)

トラックバック(0)

このブログ記事を参照しているブログ一覧: ブックマークレット

このブログ記事に対するトラックバックURL: http://kinshachi.ddo.jp/mt/mt-tb.cgi/269

コメントする


画像の中に見える文字を入力してください。

このブログ記事について

このページは、ikeが2004年4月19日 01:08に書いたブログ記事です。

ひとつ前のブログ記事は「RegGlass」です。

次のブログ記事は「PHPのchm形式ヘルプファイルの作成方法」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

最近のコメント

Powered by Movable Type 4.261