Bookmarkletを作る際に便利なWebツールやソフトウェア

#はじめに
Bookmarkletはとても便利で、日常的に使っていますし、また、ちょっとした作業をする際にサクっと作れると、
単純作業の繰り返しなどがある場合にだいぶ時簡短縮できます。
そんなBookmarkletを作る際に普段使っているWebツールやソフトウェアをまとめてみました。
もっといいやり方あるよ！等、もしあればぜひ教えてください。

#Bookmarkletって何？
そもそもBookmarkletって何なの？という方は使い方も含めて下記をご一読ください。
ブックマークレットの登録方法 - Qiita

一から作ってみる場合、以下のページが分かりやすいかもしれません。
ブックマークレット／Bookmarkletの作り方 - catch.jp-wiki

#注意事項
Web上のツールについては、善意で運営されているものの、外部システムに情報を渡すことになるため、
利用する際には、コードに社外・組織外に出してはいけない情報が含まれないようにしてください。

#開発の流れ

1. 目的に近いサンプルBookmarkletやJavascriptのコードを探す
2. コードをOnline JavaScript beautifierで人間が見やすいフォーマットに変換する。
3. コードをテキストエディタに貼り付け。（私の場合はNotepad++）
4. 貼りつけたコードを編集する。
5. bookmarklet makerにコードを貼りつけて動作テスト。
6. 4-5の繰り返し。
7. コードの編集完了。
8. bookmarklet makerの最下部に生成されるBookmarkletをブラウザのブックマークバーにドラッグアンドドロップで挿入する。
9. 完成！

#開発時に使うツール

bookmarklet maker
その名の通り、書いたJavascriptのコードからBookmarkletを生成してくれるもの。改行とスペースを削除してくれる。

Online JavaScript beautifier
元々はJavaScriptのコードの体裁を整えてくれるものですが、Bookmarkletのコードを再び読みやすいフォーマットに戻すのにも使えます。

テキストエディタ「Notepad++」の使い⽅ 【初⼼者向け】 | TechAcademyマガジン
JavaScriptなどのコードを色分けして見やすくしてくれる他、様々な機能で楽に開発することが出来ます。
正規表現を試したりするのに、TextFXというプラグインがとても便利です。

Regexper
正規表現の可視化ツール。
Bookmarkletを作成する際、割と正規表現を良く使いますが、頭が疲れていて正規表現で煮詰まったり、考えたくないときに、
作った正規表現をとりあえず放り込むと、構造を可視化してくれて、理解が進みます。

正規表現チェッカー PHP: preg_match() / JavaScript: match()
テキストエディタでもできますが、こういう形式のツールを使ったほうが楽なことがあります。

URL エンコード/デコードフォーム 2
Bookmarkletで扱う文字列などにあえてスペースを入れたい場合などに使用。
※Bookmarkletの場合、Bookmarklet Makerによってスペースが削除されたり、実際呼び出すときにスペースが無視されるので、
スペースを%20といったURLエンコーディングされた形式に変換して扱う必要がある。

#リファレンス
慣れてくるとあまり見なくなるかもしれませんが、参考になるサイトの一例。
###ブックマークレット集

Hatena::Let

###正規表現サンプル集
便利な正規表現 | Shinta's Site
正規表現サンプル集

###正規表現の早見表
そのうち更新予定

#おまけ
例えばGoogle Chromeの場合、Bookmarkletの開発をするときに使うツールを一つのフォルダにまとめて入れておいて、
そのフォルダを右クリックして「すべてを開く」とすると、良く使うツールを一気に開けて、開発時の段取りが一瞬で終わり便利です。