JavaScript で URL エンコード、デコード。

日本語名のファイル

例えば、上記「ひまわり畑.jpg 」のような、日本語名がついた画像ファイルを、 WordPress の投稿編集画面に挿入するのに「ひまわり畑.jpg 」を WordPress の /wp-content/uploads フォルダにアップロードするわけですが、その際、ファイル名を日本語のままにしておくか、それとも英語というか、 a-zA-Z0-9.-_ の文字のみを使用して命名するべきか悩んでいます。どちらかで統一をするべきか。

目次まで戻る

日本語名のまま

WordPress では、日本語のファイル名のまま、アップロードから保存、使用まで可能で、実際に「ひまわり畑.jpg 」をアップロードして、 WordPress 管理画面 ≫ メディア ≫ ライブラリを見てみても「ひまわり畑.jpg 」の名前で保存されています。 FTP ソフトで見ても同様です。

2018.02.05 追記：日本語のファイル名のままだと、 FTP ソフトでダウンロードできないこともあるかもしれないので、やはり、日本語のファイル名はやめておいたほうが良いかもしれません。

FTP ソフトのサーバ側 /wp-content/uploads フォルダのスクリーンショット

今の時点で、「ひまわり畑.jpg 」のファイル名、 URL の情報は以下のようになっています。

ファイル名 :
ひまわり畑.jpg

画像の URL :
https://pulogu.net/wordpress/wp-content/uploads/2016/08/%E3%81%B2%E3%81%BE%E3%82%8F%E3%82%8A%E7%95%91.jpg
※「ひまわり畑」の文字は URL エンコードされている。

添付ファイルページの URL :
https://pulogu.net/fixed-page/javascript-experiment-collection/image-file-name/attachment/%e3%81%b2%e3%81%be%e3%82%8f%e3%82%8a%e7%95%91/
※「ひまわり畑」の文字は URL エンコードされている。

目次まで戻る

URL エンコード

上記で出てきた URL エンコードとは、通常 URL として使用されない日本語などの文字を URL に適した文字に変換することです。上記の例では、「ひまわり畑」の文字が「 %E3%81%B2%E3%81%BE%E3%82%8F%E3%82%8A%E7%95%91 」に変換されています。

パーセントエンコーディング - Wikipedia

上記の「 https://pulogu.net/wordpress/wp-content/uploads/2016/08/%E3%81%B2%E3%81%BE%E3%82%8F%E3%82%8A%E7%95%91.jpg 」をブラウザで表示すると、ブラウザのアドレスバーの URL は、「 https://pulogu.net/wordpress/wp-content/uploads/2016/08/ひまわり畑.jpg 」になっているかもしれません。

しかし、ブラウザのアドレスバーの URL をクリップボードにコピーして、メモ帳に貼り付けてみると URL エンコード済みの %xx の形式になっています。これは、ブラウザが URL エンコード済みの URL を人が見てわかりやすいように変換して表示してくれているからだと思われます。

私もよくわかっていないので、以下に JavaScript で URL エンコード、 URL デコードを行うための変換フォームを設置してみました。エンコード処理で元の文字列が %xx の形式に変換され、デコード処理で元の文字列に戻るはずです。

良ければテストしてみてください。