ブラウザに機能追加できるブックマークレットの自作が面白い。勉強がてら作ってみました

みなさん、ブックマークレットって使用されていますでしょうか?

Webからの操作を便利にしてくれる機能であったり、iPhoneをちょっと便利にしてみたり。さらにはブログを書く上ではなくてはならない機能ではないでしょうか。

ちょっと前から興味があって自作できないかと調べているんですけど。自分へのまとめとして記事にまとめてみます。

スポンサーリンク

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

ブックマークレットとは、通常のブックマークだとURLであるところがjavascriptの命令になっていて、ブックマークを選択するように実行するもの。

ブラウザに表示されている情報をもとに他のアプリやサービスへパラメータを渡したり、ブックマークレット自体で加工して表示したり。iPhoneのブラウザ機能を強化できるものだと。

アフリエイトリンクを作成してくれるカエレバヨメレバ、ブログカード形式のリンクを作成してくれるShareHtmlなど使うようになって、このブックマークレットの世界を知ることになりましたよ。

簡単に自作できるのか?

ブックマークレットはjavascriptで書かれているので、javascriptを使えれば、ブラウザに表示されている情報を勉強していけば何とかなりそうとは思っていました。

rubyやperl、java、C++などのプログラムを業務でも触れているのでプログラミングには抵抗感なし。

javascriptで書かれているとわかれば、いつかは自分で作ってみたいと思っていましたし、かねがねiPhoneを使っていてMS-DOSのバッチファイルやUnixのシェルスクリプトのような作業ができればいいと思っていたのでいつかは作ってみたいと。

ただ、ブックマークのURLのかわりに記入する程度のコード量でどれほど複雑なことができるのか懐疑的だったんですけどみなさんの作成されてブックマークレットを使用していただくととっても複雑なことができる。

正規表現を使うことができるのでページ全体を取り込んで1行づつの作業も可能だし、処理量が多ければ外部ファイルに関数を定義しておいてそれを読みだすようにしてもいい。

それを知ってしまったらかなり面白くみえて。

簡単にとはいかないけれど、もともとプログラムの知識があれば何とかなりそうだと。

初めてのブックマークレット

自分の勉強がてら1つブックマークレットを作ってみました。

表示しているページのURLをはてな記法のブログカードとして表示するブックマークレットです。よく見かける課題ですかね。

javascript:(function()%7Bh%3Dlocation.href%3Bh%3D"%5B"%2Bh%2B"%3Aembed%3Acite%5D"%3Bprompt("blogcard"%2Ch)%3B%7D)();

ここでちょっとはまったことはブックマークレットはjavascriptで書かれているのですけど、エンコードしておかないとちゃんと処理されないということ。

さらに、全てを1行ないに記述しないといけないこと。

全てを1行ってのはいいのですけど、エンコードしなきゃいけないってのがはまりました。

エンコードするためのjavascriptを別途用意して、それの出力結果をブックマークレットとして使用したんですけど、エンコードしてくれるサービスがあるんですよね。次はそちらを使おうかな。

まとめ

自作できるとやたらめったらブックマークレットを作成したくなりますね。

あとはコーディングする時間だけかなぁ

タイトルとURLをコピーしました