2017年04月03日

Webで仕事をする人に捧げるブックマークレット集 2017年春ver.

2017年04月03日
高根千聖高根千聖

はじめに

Webをより便利にするブックマークレット。

Webブラウザのブックマークとして起動し、ブラウザ上で処理を行う。JavaScriptで書かれた簡易的なプログラムを指します。ブラウザを閲覧している時にあると便利な機能を補うことが可能です。

しかし便利な反面、ブックマークレットは仕様変更によりJavaScriptが起動せず使えなくなっていたりするもの。定期的な情報のキャッチアップとメンテナンスが欠かせません。

そこで今回は、デザインやコーディングなど、Webで仕事をするすべての人が使える、便利なブックマークレットを紹介します。

（今回の記事は、Google Chrome 56.0.2924.87にて検証してあります。2017年3月23日時点の情報です）

※ ブックマークレットの設定方法は記事末尾に記載してあります。

1. Quix

特定のショートカットコマンドを入力することで、Web上のさまざまなサービスを検索できるブックマークレットです。検索だけではなく、バックリンクを探したり、SEOに便利なツールとしても活用できます。

検索用コマンド

  • g……Googleで検索
  • img……Googleで画像検索
  • map……Googleでマップ検索
  • yt……Youtubeで検索
  • php……PHP Functionを検索
  • f……Flickrで検索
  • fc……Flickrで商用OKのCCライセンスに絞って検索
  • a……Amazonで検索
  • plugin……WordPress pluginで検索
  • nf……Netflixで検索
  • w……Wikipediaで検索

また、検索以外にも機能はたくさん。さらに知りたい方は公式ページをご覧ください。

  • Quix （リンク先は英語です）

2. 入力された分だけURLのタグを開く

複数ページを一気に表示できるブックマークレットです。表示されたポップアップにURLを入力し、カンマで区切り、さらに別のURLを入力します（同一のURLでも可能です）。入力したURL分、別ウィンドウが開かれます。

3. Googleキャッシュを検索


任意のページを開いた状態でクリックすると、Googleに保存されているキャッシュを検索、表示することができます。すでに消えてしまったページもキャッシュされていれば見れるかもしれません。

4.ソーシャルてんこ盛り！


ソーシャルでどれくらいシェアされているか確認できるブックマークレットです。デフォルトで登録されているサービスは以下のとおり。

  • Twitter
  • はてなブックマーク
  • Facebook
  • Google +
  • Pinterest
  • Pocket

このうち、Twitterとはてなブックマークはシェアされたコメントも確認できます。

5. Slayer Office Favelet Suite


Webページ内で使用している色の一覧をカラーコードとRGBで表示できます。色味を参考にしたいWebページなどで使用しカラーコードをざっくり確認できるのが便利です。

そのほかにもドキュメントツリーや使用しているタグやタグなどの数を集計できる機能もついています。

6. XRAY


WebサイトにおけるHTMLの要素を確認できるブックマークレットです。表示できる要素は以下のとおり。

  • class名
  • width
  • height
  • position
  • float
  • border
  • margin
  • padding

デベロッパーツールを開くよりも早く表示されるため、すばやくwidthやheightのみを確認したいときに便利なツールです。

  • XRAY （リンク先は英語です）

7.サイト内画像を抽出するブックマークレット


ページ内で使用されている画像を抽出できるブックマークレットです。画像URLやwidth、heightも表示できます。

8. [E]dit-t


Webページをブラウザ上でChrome DevToolsのように編集できるブックマークレットです。あくまで開いているページ上での編集ですので、本番反映はされずに再度ページを読み込むと元の画面に戻ります。

クリックした要素のHTMLコードを編集できます。テキストをクリックすると、テキストをリアルタイムで編集し、画像をクリックすると画像URLやwidth、heightを変更できます。

9. Wirify


閲覧しているWebサイトの通りのワイヤーフレームを生成してくれるブックマークレット。モノクロで表示されるので可読性が高いのも特徴です。

  • Wirify （リンク先は英語です）

10.html-highlighter

タグ要素を確認できるブックマークレット。Google Material Designのカラーコードでハイライトされつつ、テキストで「〇〇 | h1」のように、タグ名が追加されます。

おまけ・amazonの金額集計


ここまでWeb仕事を便利にしてくれるブックマークレット群を紹介してきましたが、最後にオマケでひとつご紹介。Webで仕事していると、つい、Amazonを開き衝動買いしてしまうことがあるかもしれません。私は完全にそっちのタイプ。そんな人でも財布の紐を固くするきっかけになるかもしれないブックマークレットがこちらです。

Amazonの「注文履歴」画面で使用すると、Amazonで購入した料金の合計金額を算出してくれます。

ブックマークレットの設定方法

1. ブラウザを開いてブックマーク


はじめに、適当なページを開きブックマークボタンを押します。「ブックマークを追加しました」というポップアップが出てくるので「編集」ボタンを押しましょう。

2. 名称とURLを変更する


編集ボタンを押すと、「名称」と「URL」を変更できます。名称はどんな機能のブックマークレットか分かりやすいものに、URLには「Javascript:」から始まるブックマークレットのコードを入力。これで設定は完了です。

使いたいときにブックマークバーから任意のブックマークレットを押せば起動できます。

人力で計算・集計したり、ソースや元データを確認しなければならなかった作業を簡単に解決できるブックマークレット。うまく業務で活用し、仕事効率化を目指してみてください。