ブックマークレットとは、ウェブ上でアドレスバーなどで簡単に起動できるjavascriptのプログラムミングです。ブックマークレットを使いこなせると仕事が捗ること間違いなしです。
世界一簡単なブックマークレットの作り方と今回はそんな便利なブックマークレットを作成するためのブックマークレットを作ったのでシェアします。
といっても、仕組みは簡単でjavascriptで書いたプログラミングはそのままではブックマークから呼び出せないため、呼び出すように加工したというだけの話です。ものは試しです早速みてみましょう
ブックマークレットの活用例
Google検索が手軽にできるブックマークレットを作成しました。
次のリンクをクリックすると、プログラムが起動してテキスト入力を求められます。何かテキストを入力すると、別ページでGoogle検索が始まります。
これをブックマークバーに登録しておけば、どのサイトでもGoogle検索が素早く行えるというメリットがあります。※ちなみにテキストを選択した状態で押すとそのまま検索もできたりします
もちろんこれは一例で例えば入力もしくは選択しているテキストの文字数を数えたり、みているページをページスピードインサイトに突っ込んだりと、アイデア次第で無限の可能性を持っています。
自分だけのオリジナルブックマークレットを作れるとテンションが上がること間違いなし
コードを書かなくても使い方を知っているだけで業務が大変効率化されます。
便利なブックマークレットは以下の記事でまとめたので、気になったらみていってください。この記事では簡単な作り方についてまとめます。
コンソールを使ってjavascriptを起動する方法
ブックマークレットはjavascriptを記述してウェブ上で実行します。
紹介のための例として、画面上にアラートを出してみるプログラムを書いてみましょう。
alert("画面にポップアップとこのテキストが表示されます");上のコードはただ単にウェブ上で、テキスト付きのアラート画面を表示するものになります。chromeのデベロッパーツールを使うことで簡単に実行できますのでこれもやってみましょう。
まずデベロッパーツールを起動します。起動方法は画面右クリック→検証で開くことができます。
起動した後はコンソールタブに切り替えて、＞が表示されている箇所に先程のコードを書いてEnterを押してみましょう
そうすると入力した文字がポップアップとして表示されます。
これがデベロッパーツールのコンソール画面を使ったjavascriptプログラミングです。
ですが、毎度毎度プログラミングを起動するたびに検証を開くのはめんどくさいでしょう。
別にコンソール画面を開かなくてもブラウザバーからコードを入力することでプログラムを起動する方法があります。次はそれを紹介します。
ブラウザバーからjavascriptを起動する方法
ブラウザバーからjavascriptを起動するには、
ブラウザバーにjavascript:を追記する必要があります。つまりこんな形です。
javascript:alert("画面にポップアップとこのテキストが表示されます");これに変数が加わったりすると予期しない値を参照したりして、プログラムが起動しなくなる可能性があるため、影響を除くよう実際はこのように記載して、ラッピングしていく必要があります。
javascript:(function(){
alert("画面にポップアップとこのテキストが表示されます");
})()見やすいように改行を加えてますが、javascriptは改行は関係ありませんので気にしなくて良いです。
ただし、ブックマークレットの時は１行にする必要があるので後々除く必要があることだけはいっておきます。
はい、ラッピング部分が少々複雑に見えますね。このようにプログラミングした外側を包み込んで記載を加えていく必要があります。これでブラウザ上でも動くようになります。
実際にこれをコピペして起動してみる際に注意点があります。それはコピペだけでは「javascript:」の記載が勝手に消されてしまう点です。
chrome側で予期せぬプログラムを防ぐための処理だと思いますが、このままでは実行できないので、コピーした後にjavascriptを繋げて書きましょう。そうすれば実行できます。
ここまでできたら後はブックマークレットを作ってみましょう！
実際にオリジナルなブックマークレットを作ってみる
ここまでで、やってきたことを押さえておくと
- javascriptをコンソール画面で実行
- 作ったjavascriptをラッピングする
- ブラウザバーで実行
までできました。次はブックマークに登録するところです。
このページでいいのでまずはブックマークをしましょう。どのページでもOKです
マックユーザーは「Command+D」
windowsの人は 「Ctrl + D」を押してブックマークを保存します。
その後保存したブックマークを編集していきます。名前の欄に好きな名前をつけ、URL欄に先程作ったプログラムを入れ込み保存します。
これでブックマークレットが完成です。後はこれをブックマークバーから選択すればプログラムが動作します。
後は、先程のラッピング部分の中身に好きなプログラムを放り込めばなんでもブックマークレットにすることができます。意外とすんなりできたのではないでしょうか。
一つ注意点があります。ブックマークレットを作るにあたって一つの行で収まれば良いですが、少しプログラムを書いていると１行ではとてもみにくいので複数行で書く必要が出てきます。
ブックマークレットでは複数行NGです。なので改行しているものを除去していく必要があります。
この作業を手作業で行うことはとても非効率なので、ブックマークレットに変換するサイトを使うか、
これから私が紹介する作ったプログラムを使うかのどっちかが良いでしょう。
この後は作ったプログラムを最短でブックマークレットする方法（私のブックマークレット）を紹介します。
ブックマークレットを作るためのブックマークレット
名付けてブクマのためのブクマです。
コードからブックマークレットを作る上で、ラッピング作業と改行除去作業が最低限必要になります。
この作業を自動で行うブックマークレットです。
下記ブックマークレットの登録かリンクを押してみてください
起動するとテキストを要求されます。ここにコードを打ち込んでください。
そうするとブックマークレットが生成されますので、そのまま、ブックマーク登録すればオリジナルなブックマークレットを簡単、最速に作ることができます。
ぜひ使ってみてください
コメント