最近はマジックとかの気分なのでトランプ風にｗ
便利ですよ〜ブックマークレット！
以前に上記のような Chrome を軽くする為のチェック記事を書いたのですが、そこに「おすすめ ブックマークレット」で Google へのリンクを貼っていたところ結構クリックされているみたいで、みなさん興味があるんだな〜と思い今回のような記事を書いてみました！
今回の内容はわたしのブックマークに登録されているブックマークレットです。ブックマークレットってこんな感じなんだな〜、こんな種類あるんだな〜と興味を持っていただけたら幸いです！
ブックマークレットとは？
一言で言うとプログラム（JavaScript）です！それをブラウザのブックマークに登録しておき、使いたい時に使うって感じです。仮面ライダーが敵と戦う時に変身しますよね？あれと一緒です！ブックマークレットは変身ベルトです！違いますね？違いますｗ
Chrome の拡張機能を入れてなくても拡張機能っぽいことが出来るようになります。
ブックマークレットを使うメリット！
例えば、はてな公式の「はてなブックマーク GoogleChrome 拡張」って拡張機能ありますよね？ これを入れて有効にした状態で www.google.co.jp を開きます。
そうすると何もしていない状態で「26.9MB」メモリが使われています。
さらにはてぶの小窓でブックマークするタブを開いた状態だと「70.9MB」使われています。
これを拡張機能では無くブックマークレット（はてぶ公式の物があります）で開くと「56.1MB」です。ただしこの値は、google.co.jp を開いてさらにブックマークレットを使っているタブ全体の物です。
ブックマークレットを使っていない状態だと「51.0MB」なので、ブックマークレットが使っているメモリは「56.1 – 51 = 5.1」で「5.1MB」になります。
同じ目的のことをするにも「70.9MB」と「5.1MB」では結構違うと思いませんか〜？
拡張機能とは違い、ブックマークレットは常時読み込まれている訳ではないのでメモリの節約にもなります！拡張機能のみを使っていて Chrome が重いなーと感じたら置き換えられそうなブックマークレットを探して使ってみてください。少しの慣れで使えるようになりますし、小さな節約もコツコツと重ねると大きく変わってくるってもんですｗ
おすすめの使い方！
なんと言ってもこちらの「SpellBook」って拡張機能です！右クリックメニューからブックマークレットが使えるようになりますのでおすすめです〜！
「SpellBook」を入れるとブックマークに「Bookmarklets」のフォルダが自動で作られますので、そこにブックマークレットを入れると右クリックメニューで「SpellBook」を展開した時に、そのブックマークレットが表示されます。
右クリックで使えるようになるだけの機能なんですが、これがとても便利です！是非入れてみてください。
ブックマークレットの登録方法！
登録方法は主に２パターンあると思います。
- 「javascript:」で始まる文字列
- リンクで表示されている
javascript:alert('ブックマークレットのテスト！');このように「javascript:」で始まるコードが表示されている場合と、文字や画像でリンクになっている場合です。
リンクだとこんな感じです。通常なら「http://」とかで始まりますが「javascript:」から始まります。Chrome でしたらマウスオーバーでリンク先がウィンドウ左下に表示されますよね？そこを見て判断してみてくださいｗ
ほとんどの場合は後者のリンクで表示されていると思います！リンクの場合はそれを Chrome のブックマークバーにドラッグします、するとリンク文字のブックマークレットが追加されます。上のブックマークレットのリンクだと「ブックマークレットのテスト！」って名前で登録されます、試してみてくださいｗ
コードが表示されている場合は、それを全部選択した状態でブックマークバーにドラッグします！リンクの場合と違い、ブックマークの名前は空で追加されますので、名前を付ける必要があります！
<a href="javascript:alert('ブックマークレットのテスト！');">ブックマークレットのテスト！</a>話はそれますが、ブックマークレットのリンクを表示したい場合は上のように、アンカータグで href 属性に書くだけで良いみたいです。
色々なブックマークレット！
前置きが長くなってしまいましたが、わたしが登録しているブックマークレットの紹介です！
冒頭でも書きましたがブックマークレットは短いとは言え一応プログラムです！なので、今回は（ライセンスとかあれなので）紹介文とリンクのみを書かせていただいています。お手数ですが、リンク先のページよりブックマークレットの入手を行なってください！
基本的にはそのブックマークレット名でリンクが置かれていると思いますので、そちらをブックマークバーにドラッグして試してみてください。リンクは CSS などでボタン風に装飾されている場合もあるかと思います。
面白いブックマークレット！
実用性よりインパクトってことでまず面白いな〜と思う物です！
HTMLが崩壊するブックマークレット
名前からして凄そうなんですが、実際やってみるとなんか「かわいい＆楽しい」体感になってしまいます！ページ内の画像に重力がかかって下に落ちていってバウンドしてたりします！まさに崩壊してしまいますｗ
ワリオランドシェイクみたいに HTML が崩壊するブックマークレット（とそのソースコード） – てっく煮ブログ
Katamari!
これ個人的にすごく好きです！
「塊魂」って名前のゲームがナムコ（現バンダイナムコゲームス）から発売されているみたいなんですが、それのような物？を好きなウェブ上で遊べてしまいます！ wikipedia には、ロマンチックアクションゲームと書かれていましたｗ ロマンチックアクションゲームってなんですかｗｗ
ブックマークレットを実行すると設定用の小窓が開きますので、とりあえず「start」のボタンを押してみてください！右クリックで小さな球体がコロコロと転がりますので、あとはお好きなように〜ｗ ちなみに BGM も再生されますので気をつけてください〜、職場とかｗ
便利なブックマークレット！
次はブックマークレットの本命、便利だな〜と思う物です！
Evernote Webクリッパー
説明も必要ない程有名だと思います、Evernote の公式のブックマークレットです！拡張機能とかクライアントに直接貼り付けるとかクリップする方法はあると思うんですけど、とりあえずこのページをクリップしたい！って場合には便利だと思います〜ｗ あとこちらで紹介されている、公式ではないブックマークレットもかなり便利だと思います！
アカウントひとつでたくさんのデバイスに対応。 | Evernote Corporation
PrintWhatYouLike
こちらも結構有名だと思うんですけど、すんごく便利です！！海外の PrintWhatYouLike.com のブックマークレットです！
シチュエーションで例えると「おーい君！ここのページを A4、1枚に納めて印刷しといてっ！」が数分で出来ちゃいます！慣れてくると１分以内とかもいけます〜ｗ
ブラウザで開いているベージをその画面で編集して印刷プレビューに表示して印刷できます。不必要な要素の削除、リサイズ、その部分のみピックアップ、フォントサイズの変更、編集した物を PDF や HTML で保存…と多機能です！とりあえず会社の PC には入れておくといいですよー！デモで色々試すとすぐに理解できます〜ｗ
Bookmarklet « PrintWhatYouLike.com
Markup
こちらも海外の Markup のサービスのブックマークレットです！実行すると右上に編集用のバーが表示され、今開いているページ上にメモしたり絵が描けたりします！！編集後「PUBLISH」のボタンを押すと URL が発行されますので、それを誰かに教えると自分が編集した画面が見れてシェアできます〜ｗ
今回わたしが落書きした物はこちらです。
※こちらのブックマークレットは「SpellBook」から使うと何故か動きません、ブックマークバーから使ってみてください。
Draw on any webpage. Share thoughts. Move ideas. – Markup
Chrome Dual View
タブ内で画面を分割して表示するブックマークレットです！内容を比較したりするのに重宝します。大きいモニター使われている方なら便利だと思います。Chrome の拡張機能でも似たような物が結構あったりします。WEBマーケティングブログさんで紹介されていました！
Google Chromeで画面分割できるブックマークレット「Dual View」 – WEBマーケティング ブログ
YouTubeRepeat
こちらを何気に１番活用している気がします、YouTube って何故かリピート機能無いですよね〜？１つの動画をリピートしたい場合におすすめです！
わたしは仕事中にも音楽かけっぱなしで、どちらかと言うと気に入った曲はヘビロテする方なので、youtuberepeat.com を使っていたのですが、さらに便利に使えるこちらのブックマークレットはお気に入りです。
使い方はリピート再生したい YouTube を開きブックマークレットを使うだけです！わたしはその後「タブを固定」にしてちっちゃくしていますｗ
YouTubeでリピート再生したいときに使うブックマークレット – Silent Power
Google Reader に登録
わたしは Feed の購読に Google Reader を使っています。このブックマークレットを知るまでは、Feed のアイコン探したり、見つからない場合はわざわざ HTML ソースを見て Feed の URL 探して Google Reader 開いて登録！みたいなことをしていたんですけど、このブックマークレットなら１発です！
現在開いているブログをGoogleリーダーに一発登録できるブックマークレット : ライフハッカー［日本版］
ソーシャル系のブックマークレット！
SNS 関連のブックマークレットです！ほとんど公式の物で、結構数あります。
- はてブに追加
- はてブコメント表示
- delicious に追加
- Facebook でシェア
- Twitter でツイート
- ふぁぼったーを表示
- Blackbird bookmarklet
- Shorten with bitly
- Komepon!
はてブに追加
はてブコメント表示
delicious に追加
※こちらも「SpellBook」からだと動かないのでブックマークバーから使用してください。
Delicious.com – Discover Yourself!
Facebook でシェア
※ポップアップがブロックされてしまうので許可が必要です。
Twitter でツイート
※こちらも「SpellBook」からだと動かないのでブックマークバーから使用してください。
共有ブックマークレット | Twitter Developers
ふぁぼったーを表示
Twitter を表示している時に使うと「ふぁぼったー」のそのユーザーページを表示してくれるブックマークレットです！どんなツイートをしてふぁぼられているのかすぐ確認出来て便利です。
おまけで favstar のブックマークレットも公開されています！
【Twitter】ふぁぼったーのユーザごとのページにとぶブックマークレット « AC Adapter Not Found
Blackbird bookmarklet
以前に Twitter でブログにツイートを貼り付ける方法とかないかな〜？と嘆いた時にウェブルの@soraiyさんに教えていただきました！ツイートのHTMLソースを生成してくれるブックマークレットです！
すごく便利ー！
あくちー
actywav
こんな感じで、簡単にツイートをブログとかに表示出来てすごく便利です！
Real-time curation » Blog Archive » Blackbird bookmarklet: publish a tweet in html
Shorten with bitly
URL の短縮サービスって結構な数あると思うんですが、わたしは bitly を使っています、これは公式のブックマークレットです。
今見ているページを Twitter か Facebook でシェアしたい場合に使うと画面が開きます。bitly を気に入っている点は、シンプルで見やすい、ヘッダーが何気にかわいい、あとこちらが主な理由ですがシェアした結果にどれくらいクリックしてもらえたが分かります。もちろん URL の短縮のみにでも使えます。
※公式のブックマークレットは２タイプあります。
※Standard bitly Bookmarklet だと「SpellBook」から動きません。
bitly | shorten, share and track your links
Komepon!
今見ているページのはてぶ、Twitter（公式）、TOPSY でのシェア状況を確認出来るブックマークレットです！すごく便利です〜ｗ
Komepon! – はてブやTwitterのコメントをワンクリックでチェック！
ウェブなブックマークレット！
ウェブ系のお仕事されている人には便利かも！
HTML CSS 文法チェックなど
１ページに複数のブックマークレットが紹介されていますのでまとめてドバっと！Another HTML-lintブックマークレット、W3C HTML文法チェック ブックマークレット、W3C CSS文法チェック ブックマークレット、CSSを無効化するブックマークレット、CSSを無効化するブックマークレット・改などを公開されています。
※Another HTML-lintブックマークレットは、Another HTML-lint gateway 側で規制されている為使えない状況です。
サイト管理者、lint厨、W3C信者etc向けブックマークレット – LogJET
Visual Event
ページ上で JavaScript の確認ができるブックマークレットです。どこでどんな内容のことをしているか把握できて便利です！jQuery でも分かります。詳しくはリンク先の phpspot 開発日誌さんを見ていただくとよく分かると思います〜ｗ
ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」:phpspot開発日誌
モックアップ作成
今開いているページのモックアップをサクっと表示してくれるブックマークレットです。Wirify のサービスですご〜く便利です！
ちょっと便利な使い方をご紹介します。こちらのブックマークレットを使った後に、上で紹介しました「Markup」を更に使いますと、なんとモックアップした画面に直接色々書き込めてしまします〜ｗ で、PUBLISH した URL をクライアントさんにメールなどで送ります！便利すぎです〜ｗ
モックアップに Markup を使ったサンプルはこちらです。
見ているサイトをモックアップにするブックマークレット「Wirify」 – WEBマーケティング ブログ
XRAY: look beneath the skin
クリックすると要素に使われている CSS を確認することが出来るブックマークレットです！便利です！kachibito.net さんで紹介されていました。（いつもお世話になっていますｗ）他にも色々と便利なブックマークレットが紹介されています〜！
ちなみにこちらも使った後で、更に Markup が使えます。
頻繁に使用している便利なお役立ち系ブックマークレット・19個 – かちびと. net
Crop this!
この記事書いている途中だったので、こってり忘れていたので追記させていただきます。（わたしってドジですｗ）
Webデザインや配色で悩みの方に役立つ新サービス「Croppy」を本日リリースしました！ ぜひご活用いただけると幸いですヾﾉ｡ÒㅅÓ)ﾉｼ http://t.co/QKiUIM4V
なつき
Stocker_jp
@Stocker_jp さんが 10月 26日にリリースされたウェブサービスで、ウェブ上の好きな部分を切り抜いて共有出来てしまう「ソーシャルスクラップブックサービス」です！詳しくは Webデザインや配色をサポートする新サービス「Croppy」をリリースしました | Stocker.jp / diary と Croppyの使い方 | Croppy をご覧ください！
こちらのサービスもブックマークレットが用意されていて便利に使えます！わたしはウェブ上の気に入った物をクリップする目的で同じようなことを tumblr 使っていたのですが、「Croppy」の方が細かく管理出来るのとウェブデザインに特化されているので利点が多いと思っています。少し触った感じの印象は、「よく作りこまれている！」「ナビゲーションが親切で新鮮！」です。
ほぼひとりごと
ブックマークって便利ですよね〜、あと組み合わせて使うことで新たな発見があったり！自分で登録している物はどうやって入手したのかと考えると、ブログで紹介されていたり Twitter 経由で知ったりで蓄積されていった感じです。特にブックマークレットを探そう！といった感じで行動したことはないです。
ってことでブックマークレットをご紹介しました、良い出会いあるといいですね！
