URLを見た目のままコピーする方法
2021/12/192023/05/28
Abstract
日本語URLをコピペするとエンコードされた長いURLになる問題を解決するため、URLデコードツール(bookmarklet)を作成。ブラウザの開発者ツールで`decodeURIComponent(location.href)`を実行する方法を簡略化。ブックマークにJavaScriptコード`javascript:(()=> {window.alert(decodeURIComponent(location.href))})();`を登録し、URLをデコードして表示、コピー可能にする。オンラインファイル共有時のURL共有に便利。
Introduction
日本語を含むURLをブラウザのURL欄からそのままコピー&ペーストすると…、こんなことが起きませんか？
- URL欄上
https://www.dropbox.com/home/ドキュメント/資料- コピー&ペースト結果
https://www.dropbox.com/home/%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1…
これはブラウザ内部では、実際にはエンコーディングされた非常に長く人が読めない形となっていて、単純なコピペでは、エンコーディングされたままの文字列が取得されてしまうため起こる事象です。
昨今、関係者とファイルのやり取りをする際、（悪名高き）パスワード付zipに代わり、ブラウザベースのオンラインファイル共有サービスを利用する機会が多いかと思います。メール等で格納先URLを展開する際、長く読めないものではなく、（エンコーディングされていない）短く読めるURLを利用したい。
そんなことを思い、現在ページのURLをデコードして、コピー&ペーストできるようにする簡易ツール(bookmarklet)を作ってみました。
実現方法
エンコーディングされていないURLは、URLをデコードすることと同義故に、URLをデコードする方法を考えます。たとえば、javascriptの関数 decodeURIComponent にURLを渡してあげるのはどうだろうか。またURLも location.href から取得することができるので、WEBブラウザの開発者ツール上で
decodeURIComponent(location.href)
を実行してあげれば、デコードされたURLを取得できます。でもちょっとめんどくさい。
そこで今回は、WEBブラウザのブックマークからjavascriptコードを実行できるbookmarklet という仕組みを利用して、上記方法で取得したデコード済URLを画面表示する仕組み作ります。
設定方法
- ブラウザのブックマーク追加画面を開く
- URL欄に、下記のコードを貼り付けて、ブックマーク追加する（名前は任意の名前を）
- 完了
javascript:(()=>{window.alert(decodeURIComponent(location.href))})();
使用法
- URLをコピーしたいページを開く
- decodeURI.js を設定したブックマークをクリックする
- popup画面が立ち上がり、URLが表示される
- コピーする
- 「OK」でpopupを閉じる
- 好きなところにペーストする
ワンクリックで、デコードされたURLが取得できる、些細なことですが、個人的には重宝しています。
Tech-TIPS
Comments