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ライブラリはあるのでやってみようかな。

comment

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

関連記事

Apple Store 銀座 でバッテリーを無償交換

MacBookに色々ガタがきていたのでGenius Barに予約をしておいて、会社帰りにApple Store 銀座に行ってきました。 会社出る時から降ってたけどちょうど銀座着いたあたりでドシャ降りに …

“善”意でつながるブログリレーション「zenback」

去る6/28に参加させていただいたSix Apart Media Dayでシックス・アパート社から発表された「zenback」をブログに導入しました。まだベータ版とのことで申し込み制ですが、順次アカウ …

Mastodon(マストドン)にワクワク/ランキング並び替えブックマークレット

先週あたりからTwitterっぽいSNSとしてMastodonが話題となっています。Githubにオープンソースとして公開されており誰でも自分のサーバーにインスタンスを立ち上げられる「分散型プラットフ …

Google Chrome で CSS Animation して遊んでみた

今日はどこもかしこもGoogle Chromeの話題で持ち切りでしたね。 Chrome はあの Google が開発したブラウザーです。 早速使ってみましたが、噂に違わぬ爆速ぶりでデフォルトブラウザに …

直感勝負1:iPhotoで複数画像からスライドショーを作ってみようの巻

急に思い立って新しいシリーズを開始します。 その名も「直感勝負」シリーズ! 直感勝負シリーズとは、結構メジャーなのにyagerが使った事のなかったソフトウェアやWebサービスを、なるべく予備知識無しに …

スポンサードリンク

スポンサードリンク