普通のサラリーマンのiPhone日記 Rotating Header Image

Bookmarkletを編集して再びBookmarkletにする

Bookmarkletをいじり、再びBookmarkletにする。
これって割と大変なんですが、私はいつも以下の3つのツールを使ってます。

何でこれらのツールが必要なのか?

実はBookmarkletは、改行の無い1行で表現され、すごく見通しが悪い。加えて、2バイト文字は「URLエンコード」されてしまい、見ただけでは何が書かれてるか意味が分からん。私はいつも、この暗号みたいなBookmarkletを見通し良い形に整形し、編集した後に、再びBookmarkletにしてるんです…。実際にやってみましょう。

URLエンコードされた日本語を元に戻す

「URLエンコード」の例を見てみます。

  • 「【1/1】」→「%E3%80%901/1%E3%80%91」

「【」という2バイト文字は「URLエンコード」されると「%E3%80%90」になり、「】」という文字は「%E3%80%91」になります。「%」で始まる文字に変換されるのです。URLエンコードされた文字を元に戻す行為を「URLデコード」と言います。

URL エンコード/デコードフォーム 2」を開きます。他にもURLデコードしてくれるサイトがあるんですが、正確に変換してくれたのがココでした。ちなみに従来版とかFirefoxの検索バーの版は、私の環境だとうまく動きませんでした。なので「2」を使ってます。

110128-0001

「文字列を入力して下さい。」のところにBookmarklet本体をペーストし、モードを「デコード」文字コードを「UTF-8」にして送信を押す。

110128-0002

するとURLデコードされたBookmarkletが出てきます。確かに「【」とか「】」とかに戻ってます。このデコード結果をブラウザ上でコピーしときます。

Bookmarkletを整形する

110128-0003

次にBookmarkletを整形します。「Online javascript beautifier」を開きます。他にも整形してくれるサイトがあるんですが、一番良かったのがココでした。

110128-0004

さっきコピーしたBookmarkletをペーストする。

110128-0005

「Beautify」を押すとBookmarkletに適切な改行が入り見やすくなる。
整形されたBookmarkletを再び再びコピーする。

編集して再びBookmarkletにする

最後Bookmarklet化してくれるサイト。

110128-0006

bookmarklet maker」を開きます。他にもBookmarklet化してくれるサイトがあるんですが、お手軽だったのがココでした。

110128-0007

さっきコピーした整形されたBookmarkletをペーストする。そして編集。

これだけ整形されてれば、例えば「AppHtml」のBookmarkletだとテンプレートのファイル名を変えたりするのも楽にできます。逆に整形されてないと探すのは大変っす。

110128-0008

編集が終わったら、一番下に「bookmarklet」と書かれたリンクがあるんで右クリでリンクURLをコピーする。これで新しいBookmarkletがクリップボードに入る。

110128-0010

最後にブックマーク内のBookmarkletを置き換える。これで完成。
他の皆さんはどうやってるんだろう…。興味津々。

-

タグ: Bookmarklet, URLエンコード, URLデコード, 整形

Similar Posts:

7 Comments

  1. [...] iPhoneに関する、はてなブックマーク新着情報です。 Bookmarkletを編集して再びBookmarkletにする | 普通のサラリーマンのiPhone日記 [...]

  2. [...] Bookmarkletを編集して再びBookmarkletにする | 普通のサラリーマンのiPhone日記 1月 28th, 2011 @ 10:48 pm › tyudon ↓ Leave a comment Bookmarkletを編集して再びBookmarkletにする | 普通のサラ [...]

  3. [...] Bookmarkletを編集して再びBookmarkletにする | 普通のサラリーマンのiPhone日記 [...]

  4. [...] Bookmarkletを編集して再びBookmarkletにする | 普通のサラリーマンのiPhone日記 [...]

  5. [...] Bookmarkletを編集して再びBookmarkletにする | 普通のサラリーマンのiPhone日記 [...]

  6. [...] 活用 Bookmarkletを編集して再びBookmarkletにする via: 普通のサラリーマンのiPhone日記 [...]

  7. [...] Bookmarkletを編集して再びBookmarkletにする | 普通のサラリーマンのiPhone日記@hiro45jp兄貴のエントリー!大いに参考にさせてもらいました。 [...]

コメントをどうぞ

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>