エンコードとデコード
エンコードというのは「一定の規則に従って文字を変換すること」です。
エンコードすることを「エンコーディング」といいます。
反対に変換したものを元に戻すことを「デコード(デコーディング)」といいます。
URLエンコード(URLエンコーディング)
エンコードの代表は「URLエンコード(URLエンコーディング)」です。
変換後の文字列に「%」が使われるので、「パーセントエンコード」とも呼ばれてます。
URLエンコードとは、URLの日本語の部分を一定の規則で変換することをいいます。
(ちなみに「動画エンコード」というのもありますが、これは単に動画を圧縮してサイズを小さくする変換のことをいいます)
URLというのは日本語が含まれた場合、ブラウザによっては日本語部分が認識できずに正しくリンクされないことがあるんです。
これは指定されたURLを判別してサーバーへ要求するブラウザが基本的には半角英数字や一部の半角記号しか扱えないからです。
最近のブラウザは日本語URLにも対応してきていますが(ブログの記事などでURLが日本語になっているのを見たことあると思います)、実はブラウザ側で半角英数字や記号に変換して処理しているだけなんです。
日本語URLに対応していないブラウザもあるので、どんなブラウザでもちゃんと見れるようにしたいならURLに日本語が含まれる場合には初めから半角英数字・記号に変換しておく方がいいです。
例えば、「ウェブカツ」という日本語をURLエンコードはこんなふうになります。
1 2 3 4 5 |
// URLエンコード前 ウェブカツ // URLエンコード語 %e3%82%a6%e3%82%a7%e3%83%96%e3%82%ab%e3%83%84 |
URLエンコードすると「%xx」といった3文字がずらっと並んでいる感じになってますね。
こんな風にURLエンコードは文字列を「16進数」に変換するので「%xx」という形式になるんです。
16進数はネットワーク部でやってるので、そっちを参考にしてください。
ちなみにネットワーク部でやったブラウザとサーバー間の通信も日本語は使えないので、下記のように実際の通信では日本語はURLエンコードされています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
POST /percent_encode.html?mode=%83e%83X%83g HTTP/1.0 Host: localhost User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11 Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9, text/plain;q=0.8, image/png,*/*;q=0.5 Accept-Language: ja,en-us;q=0.7,en;q=0.3 Accept-Encoding: gzip,deflate Accept-Charset: Shift_JIS,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Proxy-Connection: keep-alive Referer: http://localhost/percent_encode.html?mode=%83e%83X%83g Content-Type: application/x-www-form-urlencoded Content-Length: 56 name=%83N%83E&address=%93%8C%8B%9E%93s&button=%91%97%90M |
URLエンコードと文字コード
ちなみにURLエンコードは日本語を16進数の形式に変換するものなので、「その日本語が何の文字コードで書かれたのか」によって変換結果が違います。
これもネットワーク部でやった内容ですが、文字コードには「UTF-8」やWindowsで一般的に使われる「Shift_JIS」など色々あります。
「文字コード」というのは、日本語を機械が分かるように2進数に変換するものでしたね。
変換の仕方としてUTF-8やShift_JISなど色々な「文字コード」と呼ばれる変換方法があるんでした。
なので、同じ日本語として表示されている「文字」も実際の機械の中では文字コードによって違うので、URLエンコードする際にも文字コードによって変換結果が違ってきます。
さっきの「ウェブカツ」をUTF-8とShift_JISで変換した場合、こんな感じになります。
1 2 3 4 5 |
// UTF-8でURLエンコードした場合 %e3%82%a6%e3%82%a7%e3%83%96%e3%82%ab%e3%83%84 // Shift_JISでURLエンコードした場合 %83E%83F%83u%83J%83c |
UTF-8の方が長ったらしくなるんですね。
ちなみにIE11(InternetExplorer11)までは、URLに2038文字までしか使うことができません。(ChromeとかSafariは大丈夫です)
なので、例えば下記のようにリンクなんかにURLエンコードしたURLを使うと文字数オーバーする場合があるので注意が必要です。
1 |
<a href="https://webukatu.com/%e3%82%a6%e3%82%a7%e3%83%96%e3%82%ab%e3%83%84%e3%82%a6%e3%82%a7%e3%83%96%e3%82%ab%e3%83%84%e3%82%a6%e3%82%a7%e3%83%96%e3%82%ab%e3%83%84%e3%82%a6%e3%82%a7%e3%83%96%e3%82%ab%e3%83%84%e3%82%a6%e3%82%a7%e3%83%96%e3%82%ab%e3%83%84%e3%82%a6%e3%82%a7%e3%83%96%e3%82%ab%e3%83%84...">リンクです</a> |
そんな長いリンク使うことあるの?と思うかもしれませんが、リンクをクリックしたら自動でメールソフトを立ち上げて定型文が入っていたり、LINEの送るボタンのようにボタンをクリックしたら定型文を表示したい場合は、リンクの中に定型文をURLエンコードして入れておく必要があるので、定型文自体は2038文字なくてもURLエンコードしたら2038文字を超えてしまうということはありえるんです。
HTMLエンティティ
同じようなエンコードの仲間で「HTMLエンティティ」というものがあります。
これも、「HTMLの特殊文字」でやったように「HTMLのタグなど特殊な意味を持つ文字」を普通に画面に表示できるよう変換することをいいます。
「エンティティ化」とかいったりします。