使い方
このページにはツールが2つあります。上側は文字列をエンコード・デコードし、下側の「URL構造の分析」は完全なURLを1つ、部分ごとに分けて表示します。2つは互いに影響しません。
上側では、「方向」で「エンコード」か「デコード」を選んだあと、次の2つを決めます。
- 「エンコード方式」：「値ひとつ」はクエリパラメータの値のようにURLへ差し込む断片に、「URL全体」はすでにアドレスの形になっている文字列に使います。違いは次のセクションで説明します。
- 「+ を空白として扱う（application/x-www-form-urlencoded）」：HTMLフォームが送るデータを扱うときだけオンにします。
エンコードでは「元のテキスト」に入れた文字列が「エンコード結果」に、デコードでは「エンコードされた文字列」が「デコード結果」に出ます。€ をエンコードすると %E2%82%AC です。この文字はUTF-8で3バイトなので、%XX が3つ並びます。「結果をデコード入力へ」「結果をエンコード入力へ」は、いま出た結果を逆方向の入力へ移します。
「値ひとつ」と「URL全体」では、残す文字が違います
どちらの方式も、URLにそのまま書けない文字を % と16進数2桁に置き換えます（パーセントエンコーディング）。違うのは、/、?、& のようにURLの構造を区切る文字の扱いです。「値ひとつ」はJavaScriptの encodeURIComponent、「URL全体」は encodeURI と同じ結果になります。
| エンコード方式 | 変換せずに残す文字 |
|---|---|
| 値ひとつ | 英字、数字、- _ . ! ~ * ' ( ) |
| URL全体 | 上の文字すべてと ; / ? : @ & = + $ , # |
同じ入力 https://example.com/café?q=crème brûlée&page=1#menü を2つの方式でエンコードすると、次のように分かれます。
- URL全体：
https://example.com/caf%C3%A9?q=cr%C3%A8me%20br%C3%BBl%C3%A9e&page=1#men%C3%BC - 値ひとつ：
https%3A%2F%2Fexample.com%2Fcaf%C3%A9%3Fq%3Dcr%C3%A8me%20br%C3%BBl%C3%A9e%26page%3D1%23men%C3%BC
1つ目はそのままアドレスとして使えます。2つ目はアドレスとしては使えませんが、別のURLのパラメータの値（?redirect=...）へ丸ごと入れられます。反対に、検索語 a/b&c をクエリの値に入れるときに「URL全体」を使うと、& がそのまま残り、次のパラメータの始まりと読まれてしまいます。この場合は「値ひとつ」で a%2Fb%26c を作らなければなりません。
デコードにも同じ違いがあります。「URL全体」でデコードすると、構造を区切る文字のエンコードは解きません。a%2Fb%3Fc%26d%23e%20f を入れると、「値ひとつ」は a/b?c&d#e f を、「URL全体」は a%2Fb%3Fc%26d%23e f を返します。デコードしたのに %2F や %26 が残っているなら、エンコード方式を「値ひとつ」に変えてみてください。
「値ひとつ」でも ! ' ( ) * は変換されない点には気をつけてください。これらの文字までエンコードするよう求めるサーバーに送る値なら、結果を自分で %21、%27、%28、%29、%2A に書き換える必要があります。
+ を空白として扱う
HTMLの <form> が送るデータ（application/x-www-form-urlencoded）は、空白を %20 ではなく + で書きます。この形式を作ったり読んだりするときに、「+ を空白として扱う」をオンにします。
| 方向 | 入力 | オプションがオフ | オプションがオン |
|---|---|---|---|
| エンコード（値ひとつ） | a+b c |
a%2Bb%20c |
a%2Bb+c |
| エンコード（URL全体） | a+b c |
a+b%20c |
a%2Bb+c |
| デコード（値ひとつ） | a+b%2Bc |
a+b+c |
a b+c |
オプションをオンにすると、原文にあった + は空白と区別できるように %2B になります。「URL全体」の方式はふだん + をそのまま残しますが、このオプションがオンのときは同じく %2B に変えます。オプションがオフのデコードでは、+ はただの + です。検索結果のアドレスからコピーした q=crème+brûlée のような値をデコードして + が残ったなら、このオプションをオンにしてやり直してください。URLのパスやファイル名では + は空白を意味しないので、オフにしておいてください。
「URL構造の分析」に表示される値
「完全なURL」の欄に、https:// のようにプロトコルから始まる完全なURLを入れると、「プロトコル」「ホスト」「パス」が表示され、ある場合だけ「クエリ文字列」と「ハッシュ」が加わります。その下の表には、クエリパラメータが「キー」と「値（デコード済み）」で1行ずつ並びます。example.com/path のようにプロトコルがないと、「プロトコル（https:// など）を含む完全なURLではありません。」と表示されます。
表示されるのは入力した文字そのままではなく、ブラウザがURLを解釈して整えた値です。https://Example.COM:443/a/../b/café?q=hello%20world&tag=a&tag=b&x=1+2#top を入れると、次のようになります。
| 項目 | 表示される値 | 入力から変わった点 |
|---|---|---|
| プロトコル | https |
|
| ホスト | example.com |
小文字になり、httpsの既定のポート443は省かれます |
| パス | /b/caf%C3%A9 |
/a/.. が整理され、é はエンコードされた形で出ます |
| クエリ文字列 | ?q=hello%20world&tag=a&tag=b&x=1+2 |
入力のまま |
| ハッシュ | #top |
表には q = hello world、tag = a、tag = b、x = 1 2 の4行が出ます。同じキーが何度も出てくれば、行もその数だけになります。x の値からわかるように、この表は上側の「+ を空白として扱う」チェックボックスに関係なく、+ を常に空白として読みます。クエリ文字列はフォームデータの形式として解釈する、というのがURL標準の決まりだからです。
補足が2つあります。ASCII以外の文字を含むドメインは「ホスト」にPunycodeで表示されます（https://café.example/ → xn--caf-dma.example）。また、http://user:pw@host:8080/p のようにアドレスにIDとパスワードが入っていると、その部分はどの項目にも表示されず、「ホスト」には host:8080 だけが出ます。
デコードに失敗する入力
デコードが成功するのは、% のあとに16進数が2桁続き、そうして集まったバイトがUTF-8の文字として成り立つときだけです。ひとつでも外れると、結果は出ずに「パーセント（%）エンコーディングが正しくありません。」で始まる案内が表示されます。
| 入力 | 失敗する理由 |
|---|---|
100% |
% のあとに何もありません。パーセント記号そのものは %25 と書く必要があります |
%zz |
zz は16進数ではありません |
%E2%82 |
3バイトで1文字になる €（%E2%82%AC）の、最後の1バイトが欠けています。長いアドレスを途中で切ってコピーしたときに起こります |
エンコードのほうは失敗しません。片割れだけ残った絵文字のように、それだけでは文字にならない入力も、エラーにせず置換文字（%EF%BF%BD）としてエンコードします。