スタートページ＞ Javascript＞

日本語ファイルの取扱

ファイル名に「リンク先.html」とか「画像.jpeg」のようにファイル名（やフォルダ名）に日本語を使いたくなります。
ローカル環境ではＯＳのファイル管理機能が日本語をサポートしているので、日本語ファイルをそのまま使えます。
しかし、インターネット環境では、半角英数字や半角記号（ＵＲＬコード）しか使えません。日本語ファイルはそのままでは認識できないのです。
それで、サーバにある日本語ファイルをブラウザでアクセスするには、ブラウザのプログラム（JavaScript）で日本語をＵＲＬコードに変換（エンコード）させる必要があります。

ＵＲＬエンコード関数

JavaScriptでは、encodeURI(), encodeURIComponent() の２つの標準関数があり、これらのＵＲＬエンコードは UTF-8 になっています。
多くのブラウザがこの関数をサポートしています。
サーバのファイル管理機能が UTF-8 であれば、ブラウザのJavaScriptでencodeURI(), encodeURIComponent()で変換すればよいので、比較的容易に日本語ファイルをアクセスすることができます。

それに対して、他の Shift_JIS などの日本語文字体系に関しては標準のエンコード関数はサポートされていません。公開ライブラリなどからエンコードツールをダウンロードして使うことになります、

歴史的理由により、これまで、Shift_JIS　が広く用いられてきました。
ブラウザでのＨＴＭＬ（JavaScript）記述では Notes（メモ帳）が広く用いられています。近年は UTF-8 がデフォルトになっていますが、以前はShift_JIS でしたので、多くのＨＴＭＬが日本語をShift_JIエンコードツールで変換していました。
また、Ｗｅｂサーバの提供側では、Shift_JIS を標準にしていることが多いのです。
自分が公開したＷｅｂサイト内での利用に限定したのであれば、サイト内での文字コードが分かるので、自作のＨＴＭＬで日本語ファイルを使うことはできますが、他人が作成した日本語ファイルをアクセスするのは困難です。

私の環境

残念なことに、私の環境では、ローカル環境では UTF-8 なのに、サーバ環境では Shift_JIS になっています。
そのため、Ｗｅｂページはローカル環境では正常に動作しますが、インターネット環境では　Not Found になってしまいます。
逆に、インターネット環境で Shift_JISエンコードしたＷｅｂページはローカル環境で使えません。

　 日本語       URLエンコード(UTF-8)　　　　　　　　　Shift_JIS　                    
　"リンク先"    %E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88  %83%8a%83%93%83N%90%e6
　"画像"        %E7%94%BB%E5%83%8F                    %89%e6%91%9c

例
    var エンコードＵＲＬ = encodeURI("リンク先.jpeg"); // %E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88.html
    location.href = エンコードＵＲＬ; // <a href=> の機能
　　
    var エンコード文字列 = encodeURIComponent("画像");
    location.href = エンコード文字列　+ ".jpeg";

Shift_JIS 指定の例

ここでは、次の４ケースを考えます。

• Ａ＝エンコードしないリンク先
  <a href="リンク先.html">リンク先.html</a>
  リンク先.html
  ローカル環境では正常表示されるが、インターネット環境では表示されない
• Ｂ＝エンコードしたリンク先
  <a href="%83%8a%83%93%83N%90%e6.html">リンク先.htmlへ</a>
  リンク先.htmlへ
  ローカル環境ではエラーになるブラウザがあるが、インターネット環境では正常表示される
• Ｃ＝エンコードしていない画像
  <img src="画像.jpeg">
  
  ローカル環境では正常表示されるが、インターネット環境では表示されない
• Ｄ＝エンコードした画像
  <img src="%89%e6%91%9c.jpeg">
  
  ローカル環境ではエラーになるブラウザがあるが、インターネット環境では正常表示される

UTF-8 → Shift_JIS 変換関数

この種の公開ツールは多くありますが、ここでは、ヌルコムアーカイブス・デジタル制作室さんの、ecl.js（Escape Codec Library）を拝借しました。

ecl.jsをダウンロードして、このＨＴＭＬのスクリプト部に、
　　　<script src="ecl.js"></script>
としておきます。
　ecl.jsにはいくつかの関数がありますが、Shift-JIS→ＵＲＬコードのエンコードには、EscapeSJIS()を用います。
　　　x = EscapeSJIS("リンク先")
とすれば、x = "%83%8a%83%93%83N%90%e6" となります。

リンク

ここでは、リンク先のＵＲＬ「リンク先.html」のうち「リンク先」だけをＨＴＭＬで指定し、scriptで「.html」を付加することにします。

Ａ：エンコードしないとき

通常のファイルへのリンクです。「scriptによるリンク」を参照してください。
script部
　　function Ａ(ファイル名) {
　　　　var リンク先ＵＲＬ = ファイル名 + ".html";　　・・・ア
　　　　location.href = リンク先ＵＲＬ;
　　}
ＨＴＭＬ部
　　<p>詳細は<span onClick="Ａ('リンク先');" style="border-bottom:solid 1px blue;">リンク先.html</span>にあります。</p>

実行

詳細はリンク先.htmlにあります。

Ｂ：エンコードしたとき

Ａのアの部分を赤字にように変更します。
script部
　　function Ｂ(ファイル名) {
　　　　var リンク先ＵＲＬ = EscapeSJIS(ファイル名) + ".html";
　　　　location.href = リンク先ＵＲＬ;
　　}
ＨＴＭＬ部
　　<p>詳細は<span onClick="Ｂ('リンク先');" style="border-bottom:solid 1px blue;">リンク先.html</span>にあります。</p>

実行

詳細はリンク先.htmlにあります。

画像

ここでは、表示する画像ファイル「画像.jpeg」のうち「画像」だけをＨＴＭＬで指定し、scriptで「.jpeg」を付加することにします。

Ｃ：エンコードしないとき

通常の画像ファイルの場合です。「画像の読込表示」を参照してください。
script部
　　function Ｃ(ファイル名) {
　　　　var 画像 = document.getElementById("Ｃ表示場所");　　・・・ア
　　　　画像.src = ファイル名 + ".jpeg"; 　　　　　　　　　　・・・イ
　　　　画像.onload();
　　}
ＨＴＭＬ部
　　<button type="button" onClick="Ｃ('画像');">Ｃ画像表示</button><br>　・・・ウ
　　<img id="Ｃ表示場所" width="100">　　　　　　　　　　　　　　　　　　・・・エ
ウで与えた「画像」が、イで「画像.jpeg」になります。
アにより、エの位置に画像が表示されます。

実行

Ｄ：エンコードしたとき

Ｃのイの部分を赤字にように変更します。
script部
　　function Ｄ(ファイル名) {
　　　　var 画像 = document.getElementById("Ｄ表示場所");
　　　　画像.src = EscapeSJIS(ファイル名) + ".jpeg";
　　　　画像.onload();
　　}
ＨＴＭＬ部
　　<button type="button" onClick="Ｄ('画像');">Ｄ画像表示</button><br>
　　<img id="Ｄ表示場所" width="100">

実行