Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

技術情報

選択した文字列を7種類もの形式に変換してくれるブックマークレット「SelectConvert.js」

投稿日:


いままで、ちょっと便利になるブックマークレットを色々作ってきたんだけどブラウザのブックマークツールバーがゴチャゴチャしてきちゃったので、まとめたいなぁと思っていました。
そこで、WEBページ上で選択した文字列から他の形式に変換させるブックマークレットを集めて少し高機能なものを作ってみました。
SelectConvert.js Dialog
SelectConvert.jsというベタな名前にしてみましたw
WEBページ上の文字列を選択した状態でブックマークレットを実行すると、LightBox風(?)にダイアログがでてきて各種変換した文字列をコピーする事ができます。

Bookmarkletのインストール

SelectConvert
上記リンクをブックマークして下さい。
・IEの場合は、右クリックして「お気に入りに追加」
・Firefoxの場合は、右クリックして「このリンクをブックマーク」
・Safariの場合は、ブックマークバーにドラッグ&ドロップしてみて下さい。

使い方/機能紹介

SelectConvert.js Layout
WEBページ上の変換したい文字列を選択した状態で、ブックマークを実行するとページ全体がグレーアウトして、上記のような変換用ダイアログが画面左上あたりに表示されます。
同時に7種類の変換結果を表示してくれます。
1)URLエンコード
2)URLデコード
3)数値文字参照(例:&#xxxxx;)
4)MD5
5)HTMLエスケープ(例:<html> → &lt;html&gt;)
6)TinyURL(短いURLを元のURLに)※選択文字列がTinyURLの場合しかでてきません
7)英日、日英翻訳
タブを押すと1)〜7)の順にフォーカスが移動するので必要な変換結果を簡単にコピーできます。
コピーし終わったら、ダイアログの右上にある×印を押すか、半透明の余白部分を押すか、Escボタンを押す事でダイアログが消えます。

技術情報

7種類の変換ロジックはそれぞれ流用がきくかもしれないので気になる人はソースでも見て下さい。
http://labs.creazy.net/bookmarklet/selectconvert.js
結構長いですが・・・。
それから、MD5については唯一外部のライブラリを同封させてもらいました。
md5.js (mitsunari@cybozu labs)
あと、下記のページ(自サイトばっかですが)を参考にしました。
第13回:URLエンコードとURLデコードを簡単にするブックマークレット
Javascriptで数値文字参照の値を求める方法
第6回:TinyURL の遷移先が怖くて開けない場合の対処法
英→日、日→英を自動的に判断して翻訳してくれるYahoo!Pipesとブックマークレット
昨夜の英日翻訳APIはこのために作ったんですねw

まとめ

とりあえず、自分用に作ったブックマークレットなのですが誰かの役に立ったら嬉しいです。
JavaScriptやJSON API経由で変換できそうなネタがあったら便利そうか判断した上でどんどん追加して行こうと思いますので、情報頂けるとありがたい。
ちなみにURLエンコードとかHTMLエスケープとか、地味に便利なのを集めているのでその辺考慮した上でアイデア募集中です♪

-技術情報

執筆者:


  1. よしきみ より:

    base64なんかも、時々、Web上のエンコーダーを使ったりしますね。

  2. yager より:

    >よしきみさん
    base64ですか。オレはあんまり使わないけど、JSライブラリはあるのでやってみようかな。

よしきみ へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

関連記事

YouTubeがようやくオレのアイデアをパクりだした

タイトルは釣りです。調子こいてスミマセン>< 今、YouTubeみてたら微妙な変化に気付きまして。 トップとか検索結果画面の一覧で、HD画質に対応している動画のタイトル横に白い「HD」アイコンが追加さ …

no image

「勝手にブログ評論」されてみた

ネタですが。 土曜日、ぼーっとしているついでに検索エンジンの高速化をするにはどうすればいいのか考えた挙げ句、固有名詞を抜き出すプログラムを書いて、その実験を繰り返していたところ、実験の方が面白くなって …

2012年末のブラウザシェア、あるいは、IEそろそろ無視していいか問題

さて、長年ウェブ開発者を悩ませているIE(Internet Explorer)のおかしな挙動とデザイン崩れ。デザイナー・マークアップエンジニアにおきましては、新しいWEBサイトを作る度に推奨環境にIE …

「二つ名メーカー」で別名を作ってみた

二つ名メーカーというのがあったのでやってみました。

Firefox拡張の「Ubiquity」で簡単マッシュアップ呼び出し

UbiquityというFirefox拡張が話題になっていたので使ってみました。 「何じゃこりゃ!」と感じた方も多いかと思います。Ubiquityはブラウザ上でのありとあらゆる操作をスマートにこなせるよ …

スポンサードリンク

スポンサードリンク