知らないと損する!bookmarkletのすすめ!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

bookmark

ブックマークレットとは

ブックマークレットはjavascriptをブックマークのように登録するものです。
そこからjavascriptを走らせることでブラウザに色々な機能を追加することが出来ます。
今回はその中でも便利だと思ったものをいくつか紹介したいと思います。
全体的にWeb制作に関わっている人向けです。

Chrome用ですが、今回紹介しているブックマークレットをまとめてエクスポートしたファイルをアップロードしておきます。ご自由にお使いください。
bookmarklet.html

登録方法

何でもいいので適当なページをブックマークします。そのURL部分をそれぞれのjavascriptに書き換えます。 その後、登録したブックマークをクリックすることで対象のjavascriptを動かすことが出来ます。

XRAY :: for web developers

XRAY

表示しているページのCSSプロパティを表示してくれるブックマークレットです。
クリックした場所のCSSプロパティを表示してくれます。


javascript

Wirify – The web as wireframes

wirify

表示しているページをワイヤーフレーム化してくれるブックマークレットです。
かなり精度が高く、Web制作をしている人がこのページはどんなワイヤーが切られているんだろうと見てみるのに便利です。


javascript

Edit Any Web Page in your Browser Just Like a Wiki

edit

Webページを擬似的に書き換えることが出来ます。ここの文字数を長くしたらどうなるんだろう?とか思った時にすぐに試せるのがとても便利です。

javascript

SEOチェキ!

SEO

PR

表示しているページをSEOチェキ!で解析することが出来ます。
ブックマークレットとして登録することでより気軽に解析できるようになっているので、ハードルがすごく下がっています。

javascript

あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット

Web speed

表示しているページを表示するのに、サーバー側とブラウザ側のどこで時間がどれぐらいかかっているのかを、わかりやすく表示してくれるブックマークレットです。

javascript

OGPタグチェック

OGP

twitterやFacebookに通知するために必要なOGP。それがどのようにセットされているかを確認できるブックマークレットです。

javascript

Google Personalized Off

Googleで検索すると、自分に最適化した検索結果をgoogleさんは自動で出してくれます。
しかし、Web制作をしていると自分が制作したサイトがちゃんと検索上位に出てくるのかが気になります。
それを確認するためのブックマークレットです。

javascript

ブログカード

前までページをシェアする時はShare HTMLを使っていたのですが、より便利で綺麗なものが有りました。
OGPを見てブログカードを自動で作成してくれるブックマークレットです。この記事で紹介しているページのタグは全てこれで生成しています。

javascript

ページのURLをMarkdown記述に変換

markdown

現在表示しているページをMarkdown形式のリンクに変換してくれるブックマークレットです。
Markdownのリンクって作るのがちょっと面倒だったりするんですが、これなら一瞬!

javascript

PR

この記事が気に入ったら
いいね ! しよう

Twitter で
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。