文字コード変換 JavaScript の説明
戻る


このプログラムは,テキスト データの文字コードの変換を行うものです.JavaScript の文字列とファイルのテキスト データとの間で文字コードの変換を行います.
JavaScript の文字列の内部コードは UTF-16 です.外部(ネットワークやファイルなど)のテキスト データを JavaScript で扱うためには,それらで使われている文字コードと内部コードを変換する必要があります.他の Unicode(UTF-8 など)との変換は単純な規則で可能ですが,それ以外の文字コードとの間で変換を行うには,一般には変換テーブルを用意する必要があります.
TextEncoder/TextDecoder API を使用可能なブラウザなら,それらを使うこともできますが,TextEncoder は UTF-8 への変換しかできません.
このプログラムでは,変換テーブルを使わずに JavaScript の機能の範囲で(無理やり)変換を行います.

このプログラムは,次の二つの処理を行います.

使い方

● ファイルからの読み込み

「入力文字コード」に,変換したい文字コード(ISO-2022-JP,UTF-8 など)を入力します.使用しているブラウザが対応している文字コードであれば,何でも指定できます.
「入力文字コード」の右側の「選択」ボタンを押すと,よく使われる文字コードを一覧から選ぶことができます.一覧に無い文字コードでも,直接キー入力すれば入力できます.
「読み込み」ボタンを押してファイルを選ぶと,ファイルの内容がコード変換されて,画面下方のテキスト入力エリアに表示されます.
ファイル内のテキストの改行コードは LF/CR/CR+LF の何れでも構いません.JavaScript での改行コードに変換されます.

● ファイルへの書き出し

画面下方のテキスト入力エリアに,変換するテキストを入力します.
「出力文字コード」に,変換したい文字コードを入力します.(ファイルからの読み込みの場合と同様)
「改行」で,ファイルに出力する改行コードを選びます.
「書き出し」ボタンを押すと,テキスト入力エリアの内容をコード変換し,ファイル ダウンロードの形でファイルに保存します.


変換の仕組み

● ファイルのコードから内部コードへの変換

ファイルから取得した File オブジェクトのデータに文字コードを何らかの方法で指定して,作業用のフレームにロードします.
ファイルのテキストは指定した文字コードに従って変換され,フレームにレンダリングされます.
フレームから変換結果のテキストを取り出します.

Firefox の場合

Firefox では,取得した File オブジェクトに該当文字コードの MIME タイプを付加した Blob オブジェクトを作成して使用します.

Opera の場合

Opera では Firefox と同じ方法は使えません.Blob の MIME タイプに文字コードを指定しても効果が無く,現在のドキュメントの文字コードに従って変換されてしまいます.
また,"data" URL も使えません.Opera では,"data" URL は同一オリジン ポリシーにより制限されるので,"data" URL を使ったのでは,フレームからテキストを取り出すことができません.
そこで Opera の場合は,指定した文字コードのドキュメントを動的に生成し,そのドキュメント内に作業用のフレームを置いて,それを使って変換するようにします.
具体的には,Blob でこのような HTML を作成し,作業用のフレームにロードします.(実際に作成する HTML には改行は入っていません.)
<HTML>
<HEAD>
<META CHARSET='CCCC'>
</HEAD>
<BODY>
<IFRAME … ></IFRAME>
</BODY>
</HTML>
CCCC の部分には指定された文字コード名を入れます.
この HTML 内のフレームに変換したいデータをロードすれば,META タグで指定した文字コードに従って変換されます.
最初はこの HTML を document.write() で作成しようとしたのですが,document.write() だと META タグの文字コード指定が有効になりませんでした.

● 内部コードからファイルのコードへの変換

フォーム送信時のコード変換機能を使います.
フォームは通常は入力データをサーバーに送信するために使うものですが,サーバー以外の送信先を指定しても「それなり」に動作します.このプログラムでの使い方では,フォームの ACTION 属性に指定するものはダミーで,必要なのは送信時に生成される URL のクエリー文字列の部分です.
フォームの METHOD 属性を GET(デフォルト)にして送信すると,フォーム内の送信対象項目の内容が(URL エンコードされて)送信先 URL にクエリー文字列として付加されます.フォームの ACCEPT-CHARSET 属性に文字コードを指定すると,クエリー文字列は指定した文字コードに変換されたものになります.
フォームの TARGET 属性に作業用のフレームを指定し,変換したいテキストをフォーム内の送信対象項目にして送信します.
フレーム内のドキュメントからそのドキュメントの URL を取得し,クエリー文字列の部分から変換されたテキストのデータを取り出してデコードし,変換後のテキストを得ます.

関連する部分の HTML はこのような感じになります.
<FORM ACTION="UUUU" ACCEPT-CHARSET="CCCC" TARGET="target">
<TEXTAREA NAME="d" … ></TEXTAREA>
</FORM>
<IFRAME NAME="target" … ></IFRAME>
UUUU の部分は,後述のように何らかのダミーの URL を指定します.
CCCC の部分には指定された文字コード名を入れます.(実際には JavaScript でセットしています.)

たとえば,文字コードが ISO-2022-JP で,TEXTAREA 項目に“あいう”と入力して送信すると,フレーム内のドキュメントの URL がこのようになります.
UUUU?d=%1B%24B%24%22%24%24%24%26%1B%28B
“?d=”の後ろの部分が,“あいう”が ISO-2022-JP に変換され,URL エンコードされたものです.

ダミーで ACTION に指定できる URL の候補には,以下のようなものがあります.
"data:,"
Firefox 版では,Firefox 57 より前のバージョンの場合,"data:," を指定しています.Firefox 57 以降では,"data" URL が同一オリジン ポリシーにより制限されるようになったため,"data:," は使えなくなりました.
Opera では,"data" URL は同一オリジン ポリシーにより制限されるので,"data:," は使えません.
"about:blank"
Opera 版では "about:blank" を指定しています.
Opera 20 以降では,ACTION が "about:blank" の場合でも URL にクエリー文字列が付きます.
"about:blank" は Firefox でも Opera でも同一オリジン ポリシーの条件を満たしますが,Firefox では "about:blank" にはクエリー文字列が付かないので,Firefox で "about:blank" を使うことはできません.
ダミーの Blob の URL
Firefox 版では,Firefox 60 以降の場合,ダミーの Blob を作成して,その URL を指定しています.Firefox 60 より前のバージョンでは,Blob の URL にはクエリー文字列が付きません.
Opera の場合,Blob の URL を指定すると,Opera 20 より前のバージョンではクエリー文字列が付かず,Opera 20 以降ではエラーになります.
Opera 20 以降でも,普通に Blob をフレームにロードした場合はフレーム内のドキュメントにアクセスできるので,Blob が同一オリジン ポリシーの条件を満たさないということではないと思うのですが,フォームの ACTION で使用した場合はエラーになってしまいます.
その他,同一オリジン ポリシーの条件を満たすリソース
上記の何れの方法も使えないブラウザの場合は,同一オリジン ポリシーの条件を満たすリソースを何かダミーで指定すれば,同様の処理ができる可能性があります.
たとえば,元のドキュメントのファイルと同じディレクトリに空ファイルを置いておいて,その URL を指定するという方法が考えられます.
または,元のドキュメント自体の URL を指定することもできます.その場合は,ダミーのファイルを別に用意する手間は省けますが,元のドキュメントを再度フレームにもロードすることになるので,無駄なロードが発生することになります.

戻る