Chrome で使える便利なブックマークレット!2011年 11月

ブックマークレットで新しい体験
最近はマジックとかの気分なのでトランプ風にw

便利ですよ〜ブックマークレット!

Chrome が重い〜と感じたらすぐチェック!

以前に上記のような Chrome を軽くする為のチェック記事を書いたのですが、そこに「おすすめ ブックマークレット」で Google へのリンクを貼っていたところ結構クリックされているみたいで、みなさん興味があるんだな〜と思い今回のような記事を書いてみました!

今回の内容はわたしのブックマークに登録されているブックマークレットです。ブックマークレットってこんな感じなんだな〜、こんな種類あるんだな〜と興味を持っていただけたら幸いです!

ブックマークレットとは?

ブックマークレット一覧

一言で言うとプログラム(JavaScript)です!それをブラウザのブックマークに登録しておき、使いたい時に使うって感じです。仮面ライダーが敵と戦う時に変身しますよね?あれと一緒です!ブックマークレットは変身ベルトです!違いますね?違いますw

Chrome の拡張機能を入れてなくても拡張機能っぽいことが出来るようになります。

ブックマークレットを使うメリット!

例えば、はてな公式の「はてなブックマーク GoogleChrome 拡張」って拡張機能ありますよね? これを入れて有効にした状態で www.google.co.jp を開きます。

Chrome の タスクマネージャ

そうすると何もしていない状態で「26.9MB」メモリが使われています。

Chrome の タスクマネージャー

さらにはてぶの小窓でブックマークするタブを開いた状態だと「70.9MB」使われています。

Chrome の タスクマネージャー

これを拡張機能では無くブックマークレット(はてぶ公式の物があります)で開くと「56.1MB」です。ただしこの値は、google.co.jp を開いてさらにブックマークレットを使っているタブ全体の物です。

ブックマークレットを使っていない状態だと「51.0MB」なので、ブックマークレットが使っているメモリは「56.1 – 51 = 5.1」で「5.1MB」になります。

同じ目的のことをするにも「70.9MB」と「5.1MB」では結構違うと思いませんか〜?

拡張機能とは違い、ブックマークレットは常時読み込まれている訳ではないのでメモリの節約にもなります!拡張機能のみを使っていて Chrome が重いなーと感じたら置き換えられそうなブックマークレットを探して使ってみてください。少しの慣れで使えるようになりますし、小さな節約もコツコツと重ねると大きく変わってくるってもんですw

おすすめの使い方!

SpellBook - Execute Bookmarklets from Right Click

なんと言ってもこちらの「SpellBook」って拡張機能です!右クリックメニューからブックマークレットが使えるようになりますのでおすすめです〜w

SpellBook

「SpellBook」を入れるとブックマークに「Bookmarklets」のフォルダが自動で作られますので、そこにブックマークレットを入れると右クリックメニューで「SpellBook」を展開した時に、そのブックマークレットが表示されます。

右クリックで使えるようになるだけの機能なんですが、これがとても便利です!是非入れてみてください。

Chrome Web Store – SpellBook

ブックマークレットの登録方法!

登録方法は主に2パターンあると思います。
★「javascript:」で始まる文字列
★リンクで表示されている

javascript:alert('ブックマークレットのテスト!');

このように「javascript:」で始まるコードが表示されている場合と、文字や画像でリンクになっている場合です。

ブックマークレットのテスト!

リンクだとこんな感じです。通常なら「http://」とかで始まりますが「javascript:」から始まります。Chrome でしたらマウスオーバーでリンク先がウィンドウ左下に表示されますよね?そこを見て判断してみてくださいw

ブックマークバーに登録すると

ほとんどの場合は後者のリンクで表示されていると思います!リンクの場合はそれを Chrome のブックマークバーにドラッグします、するとリンク文字のブックマークレットが追加されます。上のブックマークレットのリンクだと「ブックマークレットのテスト!」って名前で登録されます、試してみてくださいw

コードが表示されている場合は、それを全部選択した状態でブックマークバーにドラッグします!リンクの場合と違い、ブックマークの名前は空で追加されますので、名前を付ける必要があります!

<a href="javascript:alert('ブックマークレットのテスト!');">ブックマークレットのテスト!</a>

話はそれますが、ブックマークレットのリンクを表示したい場合は上のように、アンカータグで href 属性に書くだけで良いみたいです。

色々なブックマークレット!

前置きが長くなってしまいましたが、わたしが登録しているブックマークレットの紹介です!

冒頭でも書きましたがブックマークレットは短いとは言え一応プログラムです!なので、今回は(ライセンスとかあれなので)紹介文とリンクのみを書かせていただいています。お手数ですが、リンク先のページよりブックマークレットの入手を行なってください!

基本的にはそのブックマークレット名でリンクが置かれていると思いますので、そちらをブックマークバーにドラッグして試してみてください。リンクは CSS などでボタン風に装飾されている場合もあるかと思います。

面白いブックマークレット!

実用性よりインパクトってことでまず面白いな〜と思う物です!

HTMLが崩壊するブックマークレット

HTMLが崩壊するブックマークレット

名前からして凄そうなんですが、実際やってみるとなんか「かわいい&楽しい」体感になってしまいます!ページ内の画像に重力がかかって下に落ちていってバウンドしてたりします!まさに崩壊してしまいますw

ワリオランドシェイクみたいに HTML が崩壊するブックマークレット(とそのソースコード) – てっく煮ブログ

Katamari!

Katamari!

これ個人的にすごく好きです!
「塊魂」って名前のゲームがナムコ(現バンダイナムコゲームス)から発売されているみたいなんですが、それのような物?を好きなウェブ上で遊べてしまいます! wikipedia には、ロマンチックアクションゲームと書かれていましたw ロマンチックアクションゲームってなんですかww

ブックマークレットを実行すると設定用の小窓が開きますので、とりあえず「start」のボタンを押してみてください!右クリックで小さな球体がコロコロと転がりますので、あとはお好きなように〜w ちなみに BGM も再生されますので気をつけてください〜、職場とかw

Katamari Hack

便利なブックマークレット!

次はブックマークレットの本命、便利だな〜と思う物です!

Evernote Webクリッパー

Evernote Webクリッパー

説明も必要ない程有名だと思います、Evernote の公式のブックマークレットです!拡張機能とかクライアントに直接貼り付けるとかクリップする方法はあると思うんですけど、とりあえずこのページをクリップしたい!って場合には便利だと思います〜w あとこちらで紹介されている、公式ではないブックマークレットもかなり便利だと思います!

アカウントひとつでたくさんのデバイスに対応。 | Evernote Corporation

PrintWhatYouLike

PrintWhatYouLike

こちらも結構有名だと思うんですけど、すんごく便利です!!海外の PrintWhatYouLike.com のブックマークレットです!

シチュエーションで例えると「おーい君!ここのページを A4、1枚に納めて印刷しといてっ!」が数分で出来ちゃいます!慣れてくると1分以内とかもいけます〜w

ブラウザで開いているベージをその画面で編集して印刷プレビューに表示して印刷できます。不必要な要素の削除、リサイズ、その部分のみピックアップ、フォントサイズの変更、編集した物を PDF や HTML で保存…と多機能です!とりあえず会社の PC には入れておくといいですよー!デモで色々試すとすぐに理解できます〜w

Bookmarklet « PrintWhatYouLike.com

Markup

markup.io

こちらも海外の Markup のサービスのブックマークレットです!実行すると右上に編集用のバーが表示され、今開いているページ上にメモしたり絵が描けたりします!!編集後「PUBLISH」のボタンを押すと URL が発行されますので、それを誰かに教えると自分が編集した画面が見れてシェアできます〜w

今回わたしが落書きした物はこちらです。

※こちらのブックマークレットは「SpellBook」から使うと何故か動きません、ブックマークバーから使ってみてください。

Draw on any webpage. Share thoughts. Move ideas. – Markup

Chrome Dual View

Chrome Dual View

タブ内で画面を分割して表示するブックマークレットです!内容を比較したりするのに重宝します。大きいモニター使われている方なら便利だと思います。Chrome の拡張機能でも似たような物が結構あったりします。WEBマーケティングブログさんで紹介されていました!

Google Chromeで画面分割できるブックマークレット「Dual View」 – WEBマーケティング ブログ

YouTubeRepeat

YouTubeRepeat

こちらを何気に1番活用している気がします、YouTube って何故かリピート機能無いですよね〜?1つの動画をリピートしたい場合におすすめです!

わたしは仕事中にも音楽かけっぱなしで、どちらかと言うと気に入った曲はヘビロテする方なので、youtuberepeat.com を使っていたのですが、さらに便利に使えるこちらのブックマークレットはお気に入りです。

使い方はリピート再生したい YouTube を開きブックマークレットを使うだけです!わたしはその後「タブを固定」にしてちっちゃくしていますw

YouTubeでリピート再生したいときに使うブックマークレット – Silent Power

Google Reader に登録

Google Reader に登録

わたしは Feed の購読に Google Reader を使っています。このブックマークレットを知るまでは、Feed のアイコン探したり、見つからない場合はわざわざ HTML ソースを見て Feed の URL 探して Google Reader 開いて登録!みたいなことをしていたんですけど、このブックマークレットなら1発です!

現在開いているブログをGoogleリーダーに一発登録できるブックマークレット : ライフハッカー[日本版]

ソーシャル系のブックマークレット!

SNS 関連のブックマークレットです!ほとんど公式の物で、結構数あります。

はてブに追加

ブックマークレット – はてな

はてブコメント表示

ブックマークレット – はてな

delicious に追加

※こちらも「SpellBook」からだと動かないのでブックマークバーから使用してください。

Delicious.com – Discover Yourself!

Facebook でシェア

※ポップアップがブロックされてしまうので許可が必要です。

ブックマークレットを共有する

Twitter でツイート

※こちらも「SpellBook」からだと動かないのでブックマークバーから使用してください。

共有ブックマークレット | Twitter Developers

ふぁぼったーを表示

Twitter を表示している時に使うと「ふぁぼったー」のそのユーザーページを表示してくれるブックマークレットです!どんなツイートをしてふぁぼられているのかすぐ確認出来て便利です。
おまけで favstar のブックマークレットも公開されています!

【Twitter】ふぁぼったーのユーザごとのページにとぶブックマークレット « AC Adapter Not Found

Blackbird bookmarklet

以前に Twitter でブログにツイートを貼り付ける方法とかないかな〜?と嘆いた時にウェブル@soraiyさんに教えていただきました!ツイートのHTMLソースを生成してくれるブックマークレットです!

すごく便利ー!Fri Oct 28 08:34:40 via web

こんな感じで、簡単にツイートをブログとかに表示出来てすごく便利です!

Real-time curation » Blog Archive » Blackbird bookmarklet: publish a tweet in html

Shorten with bitly

Shorten with bitly

URL の短縮サービスって結構な数あると思うんですが、わたしは bitly を使っています、これは公式のブックマークレットです。

今見ているページを Twitter か Facebook でシェアしたい場合に使うと画面が開きます。bitly を気に入っている点は、シンプルで見やすい、ヘッダーが何気にかわいい、あとこちらが主な理由ですがシェアした結果にどれくらいクリックしてもらえたが分かります。もちろん URL の短縮のみにでも使えます。

※公式のブックマークレットは2タイプあります。
※Standard bitly Bookmarklet だと「SpellBook」から動きません。

bitly | shorten, share and track your links

Komepon!

Komepon!

今見ているページのはてぶ、Twitter(公式)、TOPSY でのシェア状況を確認出来るブックマークレットです!すごく便利です〜w

Komepon! – はてブやTwitterのコメントをワンクリックでチェック!

ウェブなブックマークレット!

ウェブ系のお仕事されている人には便利かも!

HTML CSS 文法チェックなど

1ページに複数のブックマークレットが紹介されていますのでまとめてドバっと!Another HTML-lintブックマークレット、W3C HTML文法チェック ブックマークレット、W3C CSS文法チェック ブックマークレット、CSSを無効化するブックマークレット、CSSを無効化するブックマークレット・改などを公開されています。

※Another HTML-lintブックマークレットは、Another HTML-lint gateway 側で規制されている為使えない状況です。

サイト管理者、lint厨、W3C信者etc向けブックマークレット – LogJET

Visual Event

Visual Event

ページ上で JavaScript の確認ができるブックマークレットです。どこでどんな内容のことをしているか把握できて便利です!jQuery でも分かります。詳しくはリンク先の phpspot 開発日誌さんを見ていただくとよく分かると思います〜w

ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」:phpspot開発日誌

モックアップ作成

モックアップ作成 Wirify bookmarklet

今開いているページのモックアップをサクっと表示してくれるブックマークレットです。Wirify のサービスですご〜く便利です!

ちょっと便利な使い方をご紹介します。こちらのブックマークレットを使った後に、上で紹介しました「Markup」を更に使いますと、なんとモックアップした画面に直接色々書き込めてしまします〜w で、PUBLISH した URL をクライアントさんにメールなどで送ります!便利すぎです〜w

モックアップに Markup を使ったサンプルはこちらです。

見ているサイトをモックアップにするブックマークレット「Wirify」 – WEBマーケティング ブログ

XRAY: look beneath the skin

XRAY: look beneath the skin

クリックすると要素に使われている CSS を確認することが出来るブックマークレットです!便利です!kachibito.net さんで紹介されていました。(いつもお世話になっていますw)他にも色々と便利なブックマークレットが紹介されています〜!

ちなみにこちらも使った後で、更に Markup が使えます。

頻繁に使用している便利なお役立ち系ブックマークレット・19個 – かちびと. net

Crop this!

Crop this!

この記事書いている途中だったので、こってり忘れていたので追記させていただきます。(わたしってドジですw)

Webデザインや配色で悩みの方に役立つ新サービス「Croppy」を本日リリースしました! ぜひご活用いただけると幸いですヾノ。ÒㅅÓ)ノシ http://t.co/QKiUIM4VWed Oct 26 01:30:13 via Echofon

@Stocker_jp さんが 10月 26日にリリースされたウェブサービスで、ウェブ上の好きな部分を切り抜いて共有出来てしまう「ソーシャルスクラップブックサービス」です!詳しくは Webデザインや配色をサポートする新サービス「Croppy」をリリースしました | Stocker.jp / diaryCroppyの使い方 | Croppy をご覧ください!

こちらのサービスもブックマークレットが用意されていて便利に使えます!わたしはウェブ上の気に入った物をクリップする目的で同じようなことを tumblr 使っていたのですが、「Croppy」の方が細かく管理出来るのとウェブデザインに特化されているので利点が多いと思っています。少し触った感じの印象は、「よく作りこまれている!」「ナビゲーションが親切で新鮮!」です。

Croppyにページを追加する | Croppy

ほぼひとりごと

ブックマークって便利ですよね〜、あと組み合わせて使うことで新たな発見があったり!自分で登録している物はどうやって入手したのかと考えると、ブログで紹介されていたり Twitter 経由で知ったりで蓄積されていった感じです。特にブックマークレットを探そう!といった感じで行動したことはないです。

http://marklets.com/

まとめて探す場合は、地道に検索するか、あと「SpellBook」の右クリックメニュー内にある Bookmarklets | Bookmarklet Search Engine とかで探せばいいんでしょうか?(使ったことないのでどうかは分かりませんがw)

ってことでブックマークレットをご紹介しました、良い出会いあるといいですね!