別ウィンドウでリンク先ページを開くときよく書くJavaScriptは以下のようなものです。
<a href="page.html" onclick="window.open(this.href)">リンク</a>
でもこれだとメンテナンス性があまりよくありません。
そこでCSSを利用したページデザインのメンテナンスのような方法でこうしたリンク先を指定する方法です。ページのロードの終了時にJavaScriptでDOMを操作します。
まず、適当にpage1.htmlといったファイルを作っておいて、以下のHTMLを試して見てください。
<HTML><HEAD><TITLE>TEST</TITLE>
<script language="JavaScript" type="text/JavaScript">
<!--
function doPopup() {
if (!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for (var i=0; i < links.length; i++) {
if (links[i].className.match("popup")) {
links[i].onclick = function() {
window.open(this.href);
return false;
}
}
}
}
window.onload = doPopup;
//-->
</script>
</HEAD>
<BODY>
<a href="page1.html" class="popup">別ウィンドウで表示</a>
<a href="page1.html">同じウィンドウで表示</a>
</BODY>
</HTML>
非常にシンプルになりました。
/*このブックマークレットはまだリンクバーにドラックしないでください。*/
現在見ているサイトのURLを特定の友達やML、またはモブログ用のアドレスにメール送信するためのBookmarkletです。
以下のリンクをクリックすると送信先のメアドとそのBookmarkletの名前をどうするか聞いてきますので、それぞれ設定してください。その後、その設定でリンクが作成されますので、そのリンクをブラウザのリンクバーに登録してご利用ください。
誰にでも便利かどうかはわかりませんが、とりあえず私はいくつかのステップが省略されるので便利に利用しています。
IEとFirefox 1.0PRで動作を確認しています。
GeckoをベースとしたMozillaやFirefox、そしてOperaではControl++キーでページの表示サイズを変えていくことができるのですが、IEではそれができません。
このBookmarkletを使用すれば現在見ているページの表示の大きさを好きな倍率で拡大・縮小させることができます。
このBookmarkletを起動したら「何倍にしますか？」と聞いてくるので、「2」とか「1.2」、「0.8」と好きな倍率を指定してください。
IEには無い機能なのでIE専用です。他のブラウザの方はControl++でお楽しみください。
O'REILLYのサイトで紹介されている「Google Hack」の中で登場するBookmarkletです。
このBookmarkletをお気に入りに登録しておき、Googleの検索結果ページで利用すると、検索結果を「順位」「サイト名」「キャッシュ」「関連ページ」でURL付きで別ウィンドウに表示してくれるようになります。
Googleの検索結果をHTML形式以外で保存しておきたいときに便利です。
O'RELLYのサイト内のスクリプトなので扱いをどうしていいのかわからないので、とりあえずこちのブログで「紹介」という形にしてみました。
IE、Mozilla、Operaでの動作を確認しました。
Googleの無料メールサービス「Gmail」のメール作成画面を呼び出します。
ダイレクトにメール作成画面を起動できるので便利です。
IE6,Netscape、Operaで動作確認をしました。
Movable TypeやTypePad、およびそれのOEMであるココログ、ブログ人、そしてWordPress、Bloggersにクイック投稿するためのInternet Explorerのコンテキストメニュー用スクリプトです。
（Bookmarkletとはちょっと違います）。
このスクリプトを利用すれば上記WeblogシステムへIEの右クリックから簡単に対現在見ているページを対象とした記事を簡単に作成できるようになるのですが、上記システムが提供しているBookmarkletと違い、Bloglinesで読んでいる記事からも同じようにクイック投稿することができるようになります。
以下の「Download file」をクリックするしてcompost-0.1.zipをダウンロードしてください。
その後、INSTALL_J.txtファイルに記載されている手順にしたがって使用しているWeblogシステムごとに必要なパラメータをcompost.htmlファイル内で設定してください。
説明は全部日本語です。
compost.htmlファイル内ではTypePadでの設定の仕方が説明されていますが、私はココログとブログ人での設定がこのまま使えるのかわからないので、TypePadのままにしておきます。
このスクリプトはクレジットさえ変えなければ変更したり再利用することが可能のようなので、ココログやブログ人で使えるようにしたい方は自由にトライしてみてください。
このスクリプトのオリジナルはhttp://blog.warmbrain.com/compost/です。感謝。
Bloglinesを愛用されている方にはとても便利かもしれません。
Googleの検索結果の項目に番号を表示させます。例えば、SEOなどをしているときに目的とするキーワードでそのサイトが第何位に表示されるかなどを調べるときに便利です。
現在のYahoo検索やGoogleを利用しているISPでは利用できません。
IE6、Netscape、Operaで動作確認をしました。
このBookmarkletを使用すると、ページ内の見たくないエレメント要素部分を選択的に消すことができます。
このBookmarkletを起動後、ページ内の画像やテキストやテキストフィールドにマウスを重ねるとその部分がグレーの選択状態になりますので、クリックすると選択部分が画面から消えてなくなります。
スクロールせずに読んだものから消していく、という読み方ができるので便利かもしれません。
WindowsのIE6とFirefox 0.8、そしてOperaで動作確認しました。
画像を表示（IE 6用）
画像を表示 （Netscape用）
ブラウザでimagesフォルダなどにアクセスした時にファイル名がリスト表示されますが、それぞれのイメージファイルはクリックしてみないとどんな画像なのかわからないのですが、いちいちクリックするのは面倒です。そんな時にこの‘Bookmarkletです。
アクセスしてそのフォルダ内でファイルがリスティングされるときにこのbookmarkletを使用すると画像そのものに置き換えて表示します。
Blogをやっていると「archives」といったフォルダの下にイメージファイルが溜まっていきますが、それを一度に確認するときなどに便利でしょう。不幸にして当サイトでは画像はまったく利用していないので、どこか別のサイトでご確認ください。
FlashアニメーションをコントロールするためのBookmarkletです。タイトル通り、進めたり戻したりすすことができます。
リンクバーではイメージは使えないので「●」とか「◎」、「▲」、「▲▲」といった名前をつけておくとそれっぽいかもしれません。
つまらないアニメーションをみなくちゃ先に進めないサイトなどでは「高速先送り」が便利でしょう。
IE6とNetscapeで動作を確認しました。
実際に使ってみたい方は宇多田ヒカルのサイトのFlashでためしてみるとよいかと思われます。
オリジナルはhttp://www.squarefree.com/bookmarklets/flash.htmlにあります。
掲示板でNorickさんより以下の情報をいただきました。
管理人様、いつもお世話になります。 safari用MTブックマークレットがPanther+Safari v1.2で文字化けするようになりました。 Javaの知識はなかったのですが、掲示板を参考に下記のようにしたら直りましたので報告しておきます。 document.title の部分を escape(document.title) に変更
つまりPanther+Safari 1.2で文字化ける人は以下のスクリプトにすれば大丈夫みたいです。
（未確認です。すいません）
(以下のスクリプトは1行で書いてください)
javascript:void(create_weblog=window.open('http://mt.cgiまでのパス/mt.cgi?
is_bm=1&bm_show=trackback,category,allow_comments,allow_pings,convert_breaks,excerpt,text_more
&__mode=view&_type=entry&link_title='+escape(document.title)+
'&link_href='+escape(window.location.href)+'&text='+escape(window.getSelection()),
'_blank','scrollbars=no,width=400,height=760,status=yes,resizable=yes,scrollbars=yes'));
create_weblog.focus();
この文字化けする件ですが、いろいろなBlogサイトを読んでてもあまり話題になってないようなのですが、皆さんどうされていたんでしょうか？
以前BlogrollingとBlogPeopleの２つのサイトにサイトを登録するBookmarkletをご紹介したのですが、その記事に対してALABAMAさんよりトラックバックを頂きました。
ALABAMAさんがBlogPeopleとMyblogList の両方にサイトを登録するためのBookmarkletを作成されたとのことで、それをご紹介します。
Blogサイトを見ていると両方のサービスを利用されている方もいらっしゃるようですので、どちらも同じリスト内容にしておきたい、という場合には便利かもしれません。
ご活用ください。
元ネタ：http://slayeroffice.com/tools/ruler_WinIE6/ruler.html
久しぶり（10月27日ぶり）に本家JavaScript::Bookmarkletを更新しました。自分が便利だと思うBookmarkletを掲載していたらもう十分便利になってしまって不自由を感じなくなってしまいました。が、ようやく更新のきっかけを見つけました。
「ルーラを表示（WinIE6)」というBookmarkletですが、実は以前にMizillaとIE5用のはご紹介していました。ただIE6では動作しないため、困っていました（私はIE6を使っています）。
このBookmarkletを使用すると画面上にルーラというか矩形を教示させることができます。
これを使うとWebページをデザインしているときにどれぐらいの大きさ（サイズ）の画像を用意してやればいいかとかDIVのWidth指定やダイナミックHTMLの座標指定の時などに便利に使えます。
また実行時にalt+uでサイズの単位を変えることもできるので、いろいろ臨機応変に利用できます。
是非一度お試しください。
またスクリプトはhttp://bookmarklet.daa.jp/ruler_ie6.jsにありますので、ローカルに保存して各自好きにご利用ください。うちのサイトがいつなくなっても大丈夫なように（笑
追記：
この記事をエントリーして試してみたのですが、私の環境ではこのページではうまく動きませんでした。他のページでも動作するページと動作しないページがあるみたいです。ご注意ください。
今回ご紹介するのはこのBlogでも利用しているMovable TypeというBlogシステムをお使いで、かつ、こういうのがあるといいなあ、と思ってらした方が対象になりますので、あまりおもしろくないかもしれません。
Blogサイトを回っててコメントを書いたりすることがありますが、頻繁にいろいろなところにコメントを書いているとどこにどんなコメントを書いたかわからなくなることがあります。そういう場合の１つのソリューションとして以下のサイトであるBookmarkletが紹介されています。
Yoz Grahame's Cheerleader: Commentblogger bookmarklet
英語なので日本語に直しながらこのBookmarkletについて説明していきます。
Commentblogger bookmarkletは、コメントを書く際にそのコメントのエントリーをMTの記事作成の時のBookmarkletのように使うことで、自分ローカルでつけたコメントの管理をするというものです。
ただし条件があります。
自分がつけたコメントの履歴を他人に見られたくない場合は新規でもう１つそれ用のBlogを用意してあげなければなりません。作成したBlogは内緒にしていれば誰にも気づかれないでしょう。
新しくBlogを作成したら以下のBookmarkletをリンクバーまでドラッグ＆ドロップします。
その後、リンクのプロパティでYOURMTPATH の部分をあなたのBlogのmt.cgiまでのパスに変更します。
ここで注意が１つ。コメント履歴用のBlogを作成したら「新しいエントリーを投稿したときの投稿 の状態のデフォルトの設定」を「公開」に設定しておいてください。
それでは試してみましょう。
ポップアップ式のコメントウィンドウが開くとこのBookmarkletは利用できないので、まずパーマリンクをクリックしてその記事そのものを表示させます。そしてコメントを書いたら、このBookmarkletをクリックしてみてください。「MTへ投稿」Bookmarkletを利用したときと同じようにポップアップウィンドウが起動するのでログインが必要な場合はログインしてみてください。
記事へのURLとあなたが書いたコメントが引用されていますので、問題なければそのままサブミットしてみてください。
この方法でどんどん自分がつけたコメントを管理していくことができます。
なお、このBookmarkletの作者ページでは、あのDave Winer氏が「そんなのBlogger APIとかMetaWeblog API 使ってやればどんなBlogシステムでも使えるじゃん。」とか別の人は「俺はFirebirdを使っているんだけど、コメント書いたときはそのURLをブックマークして”Watch Page”っていうフォルダに入れて定期的に更新状況をチェックしているよ」といったコメントがついていますが、人それぞれだと思いますので、興味のある人はこのBookmarkletを使ってみてください。
というわけで今年1年、ありがとうございました。これにて今年の更新は終了させていただきます。また、来年もよろしくお願いします。
この記事のコメント欄に書かれていたのですが、Activity Memoさんで楽天アフィリエイト用のリンク作成 Bookmarkletが紹介されています。
コメントいただいてからちょっと様子を見ていたのですが、いろいろ自己責任でやならきゃいけない事があるようなのですが、状況が落ち着いてこられたようなのでここでご紹介することにしました。
ちょっとサイト内の記事をいくつか読まなければならないのですが、楽天アフィリエイトやられている方にはきっと便利なことでしょう。
私はやっていないので確認しようがないので、使用感などをコメントいただけると他の人が助かると思いますので、よろしくお願いします。
http://www.popjisyo.com/WebHint/ja/help/Bookmarklet.aspx
掲示板で紹介の依頼を受けていたのですが、企業様が提供されているサービスなのでちょっと紹介を躊躇していましたが、まあ、確かに便利なので、助かる人もいると思うので、ご紹介することにしました。
英単語の受けにマウスを重ねるとその意味をツールチプ形式で表示するというbookmarkletなのですが、表示される「意味」が辞書的ではなく現実的な意味を表示するので「使える」と思います。
ということで多少宣伝になっているみたいですが、ネタ不足なのでお許しください。
blogの更新通知サービスとしてはBrogRollingが有名ですが、ここ数日アクセスできなかったり、リンクリストが書き換わっちゃたりしてちょっと困ったことになっています。
同様のサービスはざっと見た感じ日本のBlogpeopleぐらいしかないのでこれを利用してみることにしました。
ただ、Blogpeopleも落ちる可能性はあるので、バックアップの意味でとりあえず両方使ってみることにしました。そうすると問題なのは両方のリンクリストにお気に入りのサイトを登録しなければならない点です。
両方ともBookmarkletを利用して1クリックで今見ているサイトをリストに追加できるのですが、BlogRollingのbookmarkletとBlogpeopleのbookmarkletをそれぞれクリックするのが面倒なので1クリックで両方の登録ウィンドウが開くbookmarkletを作ってみました。それがこの「同時登録」です。
1クリック分お得ですし、どっちかへの登録し忘れもなくなると思います。
尚、実行すると2つのポップアップウィンドウが同じ場所に開くので１つしかウィンドウが開かないような気になりますが、ちょっとウィンドウを移動させてあげると下に隠れているウィンドウが見えますので、そのあたりよろしくお願いします。
IE、Netscape、Operaで動作を確認しています。
＊現時点で相変わらずBlogRollingは新規サイト登録機能がつかえないみたいなので最終的な確認をしていないのですが、まあ、動くでしょう。
ちなみにこのBlogの更新が途絶えがちなのは単なるネタ不足だからです。何か紹介してよいBookmarkletを開発された方はここでも紹介させていただきますので教えてください。
このbookmarkletはページ中のＨＴＭＬのタグが割り当てられている部分を強調表示します。
このbookmarkletをクリックすると「何のタグ？」と聞いてくるので「DIV」とか「a」とか「img」とか、いわゆるＨＴＭＬのタグを入力し、次にそのタグがあてがわれている部分を囲む色を指定します。色はredとかblueといった色名を指定してもいいですし＃ＦＦ０みたな感じで指定してもかまいません。
「a」を指定すると隠しリンクなどを見つけることもできるようになるのでなかなかおもしろいものがあります。
ＩＥとネットスケープで動作を確認しました。Operaではだめでした。
テキストを黒に、背景を白に、リンクはブルー、クリック済みはパープルにするbookmarkletです。
とにかくページをどんな色でデザインしていようとも上記のように変えてしまうので、別に読みずらくないサイトでもこのbookmarkletを使ってみると、見慣れたサイトも雰囲気が変わってみえてなかなかおもしろいものがあります。是非お試しください。
blogなのになかなか更新できなくてすみません。無理なくマイペースでやらせていただければと思います。
よくHTMLのソースをみれないようにするためにマウスで右クリックできないようにしているサイトがあったりします。ソースを見る場合は右クリックでなくてもメニューから「ソースを表示」を実行してあげればいいのですが、例えば「ショートカットをコピー」とか「画像を保存」みたいなメニューまで利用できなくなるとそれはそれで不便さを感じ時があります。
このbookmarkletを利用すれば、とにかくページ内で利用されているJavaScriptの機能が停止します。
JavaScriptを利用してブラウザ判定をしてスタイルシートを選択しているような場合だとページのレイアウト＆デザインがへんになってしまう場合がありますが、まあ、それは副作用ということでがまんしなければなりませんが、それは目的を達成した後にリロードすれば済む話なのでちょっとだけがまんしましょう。
マウスの右クリックやリンクにマウスをもっていったときのステータスバーへのリンク先URLの表示等が禁止されていてもこのスクリプトであれば大丈夫です。ほかにもきっといろいろな使い道があることでしょう。
フレームでは動作しません。ご注意ください。
IEでのみ動作を確認しています。
Movable Typeが標準で提供しているエントリー作成用のbookmarkletはAppleのSafariでは動作しないのですが、以下のbookmarkletだと利用することができます。
以下のテキストエリア内の「mt.cgiまでのパス」部分をご利用しているMTのパスに変更後、「リンクを作成」ボタンを押してください。クリック後表示されたページ内の「Port to MT Weblog」のリンクをブックマークに登録してご利用ください。
またこれとは別に、MTのシステムに作らせてしまうという方法もあるようでその方法がoobaさんのblogであるBricklife.Weblogで
紹介されていますので、こちらのほうも合わせてお読みください。
Googleのキャッシュで現在みているページを検索します。
ブックマークしておいたページで以前掲載されていた情報が削除されてしまった場合などがあったときにこのbookmarkletを使用すれば（運がよければ）その情報を再び見ることができるかもしれません。
またSEO対策などを施したページをもっているような場合、現在Googleがどの時点でのページを保存・検索対象にしているかがすぐにわかるのでそれ系の人にも便利なことでしょう。
ちなみに今日の時点でこのbookmarkletを使ってこのページを検索してみたら9月4日の記事がトップでした。全然巡回されてないですね（笑
これもそうですがbookmarkletって他のサイトが提供しているサービスを利用するときに便利ですね。Mac OS Xユーザだったらわかると思うのですが、ちょうどMac OS Xの「サービス」メニューのような感じですね。
先日ご紹介した「HTTPリクエスト＆レスポンスヘッダを見る」ですが、スターダストさんと名乗る方から問題点を指摘されました。転載許可もいただけたのでそのメールの1部をここで公開します。
＝＝＝
なかなか便利なブックマークレットですね。さっそく登録させて
頂きました。
ところで、試用しているうちに、ある、
クロスサイトスクリプティング脆弱性が存在していることが
判明いたしました。
たとえば、
http://www.idefense.com/_vti_bin/shtml.exe/</title><script>alert('---')</script>
のようなURLを見た後、ブックマークレットを使うと
http://webtools.mozilla.org/web-sniffer/view.cgi?verbose=on&url=http%3A//www.idefense.com/_vti_bin/shtml.exe/</title><script>alert('---')</script>
というＵＲＬにアクセスしてしまい、WindowsIEなどでは、javascriptが起動して
しまうことがわかります。
これはブックマークレットの脆弱性ではなく、
http://webtools.mozilla.org/web-sniffer/view.cgi?
のクロスサイトスクリプティング脆弱性であるとわかりました。
＝＝＝
ということでこのbookmarkletを使用する場合はちょっと注意が必要となります。
また、http://webtools.mozilla.org/web-sniffer/view.cgi?の脆弱性についてmozilla.orgの誰かに連絡をしたいと思いますので、もしその方法をご存知の方がいればその方法を教えてください。
mozilla.orgではブラウザとかメーラとかのバグ情報は受け付けてくれそうなのですが、こうした過去のツールについては？？？です。
サイトへgo(Safari専用バージョン）
9月4日の記事でご紹介したbookmarklet「サイトへGO(改）」のAppleのWebブラウザ「Safari」版です。
ちょっとがんばれば１つの「サイトへgo」でブラウザを気にすることなくできるのですが、すいません、へたれで。
上記「サイトへgo」bookmarkletをSafariのブックマークに登録したら以下の文字列を選択して実行してみてください。登録しないで利用しようとすると文字列選択が解除され、URLを入力するパネルが表示されてしまいますので注意してください。
ttp://www.yahoo.co.jp/
bookmarklet.daa.jp
http://www.yahoo.com/
コメントでアドバイスをくださったoobaさん、ありがとうございました。
昨日の記事で紹介した「サイトへgo」bookmarkletですが、コメントで日本のRDF・RSS界の第1人者（CNetより）であられるmiyagawaさんよりttp://www.yahoo.co.jpといった頭の「h」なし記述にも対応すると便利かも、というコメントをいただきました。Bulknewsは私の毎日の巡回先なので恐縮しまくりです。(汗
たしかにそういう記述はよくみかけ、そのURLをコピーしてはいちいち「h」を入力してからペーストしてたりする現実があります。
そこで、昨日のbookmarkletを改造してttp://に対応できるようにしました。
以下の文字列のいづれかを選択してこのbookmarkletをクリックしてみてください。
うまく飛べればOKです。
ttp://www.yahoo.co.jp/
bookmarklet.daa.jp
http://www.yahoo.com/
miyagawaさん、アイディアありがとうございました。
Webページ内に記述されているURLやサイト名すべてにリンクが施されているわけではありません。多くの場合、そのURLを選択しアドレスバーにコピーしてやる必要があります。
http://の記述がないような場合だとそれを入力してあげないといけないというのも面倒です。
まあ、そんなたいしたことない作業ない事だとは思うかも知れませんが、PCに任せられる面倒なことは人間がやらずにPCにやらせてしまえ、がソフトウェアの基本ですし、BSD UNIXの/bin/ucb/下のコマンド群などはまさにこの精神の塊であり、Bookmarkletもそのスピリッツを引き継ぐものだと思っています。
みなさんはあまり便利だと思わないかもしれませんが、いいんです、自分に便利であれば。
例えば、以下のURLを選択してこのbookmarkletを実行してみてください。それがよくわかることでしょう。
www.yahoo.co.jp
http://bookmarklet.daa.jp/
IEとNetScapeで動作を確認しました。Operaではだめでした。
その他のブラウザで動作を確認された方、このBookmarklet以外でも動作が確認されたものがあったらコメントにご記入ください。