スタートページJavascript

日本語ファイルの取扱


インターネット環境での日本語ファイル

ファイル名に「リンク先.html」とか「画像.jpeg」のようにファイル名(やフォルダ名)に日本語を使いたくなります。HTMLがパソコンにあるローカル環境では、日本語がそのまま使えるのですが、HTMLをサーバに登録してインターネットの環境にすると、アクセスできません。
 インターネットでのURLは、すべて半角英数字(およびいくつかの半角記号)でなければならないという規則があるのです。

Windowsパソコンでの日本語ファイル名はShift-JISの文字コードで記述されます。サーバにアップロードすると、特殊な文字列(ここではURLコードといいます)に変換されるのです(見た目には日本語になっていても、内部ではURLコードになっています。
 そのため、インターネット環境でのHTMLで日本語ファイルをアクセスするには、URLコードで指定する必要があります。
 なお、Shift-JISの1文字は、URLコードでは %xx%yy の形式の6文字になります。そして、
   Shift-JIS→URLコード をエンコード
   URLコード→Shift-JIS をデコード
といいます。

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


エンコードの関数(ecl.js)

日本語の字種は膨大なので、手作業でBやDを記述するのは困難です。それで、先人がエンコードの関数を開発して無料提供してくださっています。ここでは、ヌルコムアーカイブス・デジタル制作室さんの、ecl.js(Escape Codec Library)を拝借しました。

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


リンク

ここでは、リンク先のURL「リンク先.html」のうち「リンク先」だけをHTMLで指定し、scriptで「.html」を付加することにします。

A:エンコードしないとき

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

実行

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


B:エンコードしたとき

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

実行

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


画像

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

C:エンコードしないとき

通常の画像ファイルの場合です。「画像の読込表示」を参照してください。
script部
  function C(ファイル名) {
    var 画像 = document.getElementById("C表示場所");  ・・・ア
    画像.src = ファイル名 + ".jpeg";           ・・・イ
    画像.onload();
  }
HTML部
  <button type="button" onClick="C('画像');">C画像表示</button><br> ・・・ウ
  <img id="C表示場所" width="100">                  ・・・エ

ウで与えた「画像」が、イで「画像.jpeg」になります。
アにより、エの位置に画像が表示されます。

実行



D:エンコードしたとき

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

実行