更新日:2006.10.27  [blog]


このページは様々な用途で利用できるBookmarkletをご紹介しています。もしこのページで紹介しているBookmarkletが気にいったら是非このページをあなたのホームページとリンクしてください。そしてもっと多くの人にBookmarkletのおもしろさを伝えてください。リンクに許可は必要ありません。またこのページで紹介しているBookmarkletの多くは海外サイトで紹介されているコピーフリーなものです。ですから自由にコピーして使ってください。

ニュース&お知らせ

6月27日:「カウンタ」を追加しました。

3月18日:「DOMのソースを見る」を追加しました。

1月26日:「nofollow属性のリンクを強調」を追加しました。

9月22日:「友達にこのURLを知らせる」を追加しました。

8月3日:「ズーム表示」を追加しました。

 

JavaScript」で検索してこのページにこられた方、求めているものとはちょっと違うかもしれませんが、息抜きにちょっとだけBookmarkletの世界を体験してみてください。

Bookmarkletとは

Bookmarkletとは、 JavaScriptで記述された小さな(1行で記述される)プログラムで、ブラウザのブックマーク(お気に入り)から利用することができるものです。Bookmarkletを利用すれば、あなたが見ているWebページの背景色を変えたり、特定のキーワードだけ強調表示させたり、ページ中のリンクを抽出したりすることができるだけでなく、電卓のような簡単なプログラムをブラウザの中で簡単に利用することができるようになります。


BookmarkletはJavaScriptが利用できるWebブラウザで利用できるのでWindowsやMac、UNIX,LINUXとどんなOSででも利用することができます。

Bookmarkletの使い方

Bookmarkletの使い方は簡単です。下で紹介している使いたい機能(Bookmarklet)にマウスのカーソルを持っていき左クリックしたままそのリンクをブラウザのツールバーまでドラッグしたり、右クリックして「お気に入り」に登録します(Macの人はマウス長押しですね)。そしてその機能を利用したいページで「お気に入り」からその機能を選択します。すると・・・あとは次の「サンプル」でBookmarkletのおもしろさを堪能してください(このページの多くはそのままクリックするだけでその効果がみれます)。Bookmarkletを使用して効果をみた後、元に戻すにはページをリロードしてください。

学習書

JavaScriptの学習に役立つ書籍をまとめています。レベルに合わせてご参考ください。ページを開く⇒

動作を確認したブラウザのバージョン IE6:IE6 NS7:NS7

new カウンタIE6NS7(2005.6.27)
クリックするたびにクリックした場所に[1][2]・・・と番号を表示していきます。このページではクリックした場所にうまく表示できないので別のサイトで試してみてください。

new DOMのソースを見るNS7(詳しい説明)(2005.3.18)
JavaScriptを使用して作成されたHTML要素を含むページのソースコードを表示します。JSファイルでタグを記述しているような時にそのJSの中身を見るときなどに便利です。

new nofollow属性のリンクを強調IE6NS7(詳しい説明)(2005.1.26)
スパム対策用に<a>タグにnofollow属性がついたリンクを強調表示します。[テスト用リンク](このリンクにはnofollow属性がついています)

友達にこのURLを知らせるBookamrkletの作成IE6(詳しい説明)(2004.9.22)
/*このブックマークレットはまだリンクバーにドラックしないでください。*/
以下のリンクをクリックすると送信先のメアドとそのBookmarkletの名前をどうするか聞いてきますので、それぞれ設定してください。その後、その設定でリンクが作成されますので、そのリンクをブラウザのリンクバーに登録してご利用ください。

ズーム表示IE6(詳しい説明)(2004.8.3)
倍率を指定してページを拡大/縮小表示させることができます。

リンクをリスト化してフッター表示IE6(詳しい説明)(2004.7.14)
ページ内で使用しているリンクの番号付き一覧をページのフッター部分に表示させます。番号はボディ部にも表示されます。

Gmailで送信IE6NS7(詳しい説明)(2004.6.29)
Gmailのメール作成画面を呼び出します。

Goolge検索結果の番号表示IE6NS7(詳しい説明)(2004.6.9)
Googleの検索結果を番号表示します。

消す!IE6NS7詳しい説明)(2004.5.18)
クリックした部分の要素を消します。

画像を表示IE6NS7(詳しい説明)(2004.4.12)
画像を表示(IE 6用)
画像を表示 (Netscape用)
imagesといったフォルダにブラウザからアクセスしたときにファイル名がリスティングされる時にファイル名ではなくく画像そのものを表示されることができます。

Flashのコントロール(詳しい説明IE6NS7(2004.3.31)
ポーズ
巻き戻し
高速先送り
5秒戻す
5秒進める
オリジナル:http://www.squarefree.com/bookmarklets/flash.html

ルーラを表示(WinIE6)IE6(v6のみ)(詳しい説明)
マウスをクリックしてそのままドラッグするとその座標情報を表示します。色は英語でredとかblueまたは#FF0などと指定してください。(2004.1.7)
オリジナル:http://slayeroffice.com/tools/ruler_WinIE6/ruler.html

要素を表示IE6NS7(詳しい説明)
タグ(要素)が割り当てられている部分を好きな色で囲みます。色は英語でredとかblueまたは#FF0などと指定してください。(2003.10.27)

JavaScriptを無効化IE6詳しい説明
ページで使われているJavaScriptを無効化します。(2003.10.9)

Google Cacheで検索IE6NS7詳しい説明
Googleがキャッシュしている現在見ているページの情報を表示します。(2003.9.25)

行間を広げるIE6NS7詳しい説明
ページ全体の行間隔を広くします。(2003.9.25)

HTTPリクエスト&レスポンスヘッダを見るIE6NS7詳しい説明
HTTPのリクエストおよびレスポンスヘッダの内容を見ることができます。(2003.9.16)

最初からonMouseOverIE6NS7
画像で最初からマウスを重ねた状態のページにして表示させることができます。(2003.9.11)

サイトへgo(Safari専用バージョン)Safari詳しい説明
ページ内に記述されているURLなどを選択して実行するとそのサイトに移動します。たとえば、Bookmarklet.daa.jp/blog/、とかhttp://www.yahoo.co.jp/、ttp://Bookmarklet.daa.jp/といった文字列をマウス選択して実行してみてください。[注意]ブックマークに登録して使わないと文字列の選択が解除されるので注意してください。(2003.9.8)

サイトへgoIE6NS7(詳しい説明)
ページ内に記述されているURLなどを選択して実行するとそのサイトに移動します。たとえば、Bookmarklet.daa.jp/blog/、とかhttp://www.yahoo.co.jp/、といった文字列をマウス選択して実行してみてください。(2003.9.3)

altのない<image>をリストアップIE6NS7(詳しい説明
ページで使用している画像でALT属性のない画像をリスト表示します。(2003.8.15)

使用している色をリスト表示IE6
ページで使用している色を別ウィンドウに16進数でリスト表示します。(2003.8.1)

リンクをURLで表示IE6NS7
リンク形式で表示されているテキスト部分にそのリンク先URLを表示します。例えばこのページで試してみてください。リンク先URLをコピーするのにいちいちソースを表示して該当先を検索する手間が省けます。(2003.7.23)

Appleのsafariで利用できるMovable Type用Bookmarklet(Safari専用)(2003.7.14改定版)Safari
Movable Type(MT)の普段のインターフェイスを使わずに、Safariでone-click で post, publish できるようにする Bookmarkletです。
以下のテキストエリア内の「mt.cgiまでのパス」部分をご利用しているMTのパスに変更後、「リンクを作成」ボタンを押してください。クリック後表示されたページ内の「Port to MT Weblog」のリンクをブックマークに登録してご利用ください。

取得したタイトル、選択文字列の文字化けに関してはMTのlib/MT/App/CMS.pmも変更したほうがよいようなので、cottonさんが書かれた掲示板の「SafariのMT用Bookmarkletの文字化け 7月11日(金)11時53分」をご参考ください。掲示板で情報をくださったポトフさんとs,sawada、そしてcottonさん、どうもありがとうございました。


ルーラーを表示IE6(v6不可)NS7
マウスをクリックしてそのままドラッグするとその座標情報を表示します。(2003.6.26)

スタイルをテストIE6NS7
ブラウザベースでスタイルをリアルタイムにいろいろ試してみることができます。例えば次のコードをペーストしてbackgroundの色を000なんかにしてみてください。(2003.6.17)

body {
background:#fff;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
background-image:
background-repeat:repeat-x;
font-family:MS Pゴシック, Osaka,Hiragino Kaku Gothic Pro W3,trebuchet MS, trebuchet, verdana, arial, sans-serif;
font-size: 11px;
color: #666;
}

エレメントの構造を表示IE6NS7
ブラウザのステータスバーに現在マウスが乗っている部分のエレメントの構造を表示します。(2003.6.17)

電卓IE6NS7
電卓を表示します。電卓はいろいろあるので一番よさそうなのを http://ostermiller.org/calc/calculator.htmlからいただいてきました。キーボードショットカット(Alt-Cなど)も使えるようなので是非ページを訪れてみてください。(2003.6.6)

スタイルシートを表示IE6NS7
外部CSSファイルを表示します。 (2003.5.29)

CSS解除IE6NS7
CSSを適用しないようにします。元のレイアウトがどうなっているのか知りたいときに便利です。(2003.5.29)

DIVのid部を表示IE6NS7
CSSの<div>タグの範囲をそのid名と一緒に表示します。CSSデザインを分析するときに便利です。(2003.5.22)

DIVにclassが定義されているものだけを表示IE6NS7
上の「DIVのid部を表示」と同じ動きをしますが、classが定義されている部分だけをラベルつきで表示します。(2003.5.22)

ソースを表示2IE6
以前紹介したこのページの下のほうにある「ソースを表示」はNetScapeでも使えますし、ブラクラのチェック用に使うと便利なんですが、IEですぐにソースをみたいときはワンクッション入ってしまうのでちょっといやだなあ、という人向けのBookmarkletです。

選択したテキストをGoogleで検索IE6
ページ内で選択した単語などをGoogleで検索します。以前日本語はだめバージョンをのっけてたのですが、これは日本語・英語OKです。「conf」さん、掲示板での情報ありがとうございました。(2003.4.21)

英語ページを日本語に2IE6NS7
以前同じBookmarkletをのっけていましたが、Infoseek側がページ翻訳のシステムをAMIKAIに変更したので、それに伴いこのBookmarkletを更新します。以前のだと使えないのでこれに置き換えてください。 (2003.4.21)

ターゲット先を変更IE6NS7
クリックしたときの表示先(新規ウィンドウ、今のウィンドウ)を指定します。一度実行するとそのページはずっとそのモードで動作します。ウィンドウがたくさん開いてうざいとお考えの方、逆にページを比較したいときなど、臨機応変ご利用ください。(2003.4.16)

リダイレクトを削除IE6NS7
よく一度どこかにリダイレクトしてから目的のサイトに飛ばすURLがありますが、そのリダイレクト部分を削除します。よく一度ランキングサイトに飛ばしてから目的のサイトに誘導するリンクがありますが、そういうのに効果的です。(2003.4.16)
(例:http://rd.yahoo.co.jp/shopping/ymain_cbox/left/?http://shopping.yahoo.co.jp/food_and_drink/

英語ページを日本語に
Excite翻訳を利用して英語ページをまるごと日本語に翻訳します。

[広告]JavaScriptポケットリファレンスが手元にあるとなにかと便利です。 (Amazon)

HTTPトランザクションの内容を表示
Webサーバとブラウザ間でどういうデータがやりとりされているのかを見ることができます。

選択したテキストをGoogleで検索NS7
テキストを選択してからこのBookmarkletを実行Googleでの検索結果が表示されます。
Googleツールバーが利用できないNetScapeなどで便利です。

訪問済みリンクを非表示
クリック済みリンクを非表示にします。

リンク先によって色を変える
内部リンクは赤に、外部リンクは青に、そしてページ内リンクをオレンジに変えます。

イメージを拡大
ページ内のイメージ画像を拡大します。利用するたびに拡大していきます。

イメージを縮小
ページ内のイメージ画像を縮小します。利用するたびに縮小していきます。

  • すべての画像を表示 IE6NS7
    ページ内で使用している画像を表示します。<img>タグを抜いているだけなので同じ画像が何度も表示されることがあります。
[広告]JavaScript & DHTMLクックブック―Webエキスパート必携テクニック集 。この本で上級者をめざしましょう。(Amazon)
  • ページの拡大 IE6
    スタイルシートを使ってフォントサイズ固定しているとブラウザの「文字のサイズ」メニューを使ってもフォントサイズは変更されません。このBookmarkletを使えば小さくて読みにくいページでも拡大して読むことができるようになります。
  • ページの縮小 IE6
    「ページの拡大」の反対です。ページが縮小されて表示されます。
  • DIV部分を表示 IE6
    HTMLで<DIV>タグで囲まれているところをブラウザで強調表示します。
  • Table部分を表示
    HTMLで<table>タグで囲まれている範囲を表示します。border=0でテーブルの構成がどうなっているかわからないページなどで有効です。
  • ウィンドウを800X600にリサイズ
    ウィンドウのサイズを800x600に変更します。何が嬉しいかというと、HTMLデザイナーがページをデザインするときにターゲットサイズが800x600だったりするときのプレビュー用に利用すると便利です。
  • ページの背景色を変える(フレームバージョン) NS7
    ページの背景色を変えます。文字が読みにくいフレームを利用したサイトで利用すると便利です。
  • ページの背景色を変える(フレームバージョン) IE6
    ページの背景色を変えます。文字が読みにくいフレームを利用したサイトで利用すると便利です。
  • テキストの色を変える IE6
    テキストの色を好きな色に変えることができるようになります。(例:red,green,blachなど)
  • テキストの色を変える(フレームバージョン) IE6
    テキストの色を好きな色に変えることができるようになります。(例:red,green,blachなど)
  • 468X60のバナー広告を隠す IE6
    バナー広告で利用されている468X60というサイズを指定することでバナー広告を非表示にします。数値を変えることで他のサイズのバナー広告にも応用することができるでしょう。
  • 468X60のバナー広告を隠す NS7
    バナー広告で利用されている468X60というサイズを指定することでバナー広告を非表示にします。数値を変えることで他のサイズのバナー広告にも応用することができるでしょう。
  • フレーム内の最も大きなページだけ表示 IE6
    よく左側にメニュー、上部にバナー広告があるフレームを利用したサイトがありますが、このBookmarkletを利用すればメインのページだけを表示させることができるようになります。
  • 下線を表示/非表示 IE6
    このページのようにリンクに下線がついていないような場合に、このBookmarkletを利用するとどれがリンクなのかがわかりやすくなります。
  • ページ内リンクにランダム・アクセス IE6NS7
    ページ内に記述されているリンク先をランダムに選択してリンク先に移動(実行)します。このページでやると紹介しているBookmarkletのどれかを実行するので怖いですね。
  • ページ内に絵を描く IE6
    クリックしたらこのページの一番上までスクロールしてください。マウスで絵がかけます。

オプション1
オプション2
オプション1

ID: Passwd:

  • うざい色を正常化 IE6NS7
    テキストを黒に、背景を白に、リンクはブルー、クリック済みはパープルにする
 
【リンク】
Yahoo! Japan::プログラミング言語

最終更新日:2005.6.27. This page is link free. Enjoy the power of Bookmarklet.


since 2003.3.21