Gaiji.JJWorkshop [TOPICS]

§外字フォントを導入せずブラウザに外字を表示（実験-１）

ブラウザで外字を表示するために、簡単な実験をしてみました。
個々のＰＣに外字フォントを導入していないで共通の外字を表示するのが目的です。

なるべく簡単な環境で実装するため、ＣＧＩはＰｅｒｌを、ブラウザはＪａｖａアプレットにて実装することにします。
ブラウザは、IE6とFirefox v1.5で実験しました。
Javaは「java version "1.5.0_04"」です。
サーバは、僕が借りてるレンタルサーバで「PERL(ver.5.8.0)」を利用します。
Macintosh でも動くかなぁ・・と思ったのですが、どうもアプレットに問題があるようで、現在はWindows環境のみで稼働します。

簡単な図で説明すると、下記のような構成になります。

非常にシンプルで、サーバに必要なのは、外字データとなる「EUDC.EUF」と、アプレットと通信し表示データをエンコードするＣＧＩだけです。（たった２つのファイル）
「EUDC.EUF」は、Windowsで外字作成をするときに自動的に作成される外字のビットデータのファイルです。
「EUDC.TTE」とペアで作成され、通常は「Fonts」の中に作成されます。

詳細を説明する前に、まずはこちらの実験結果を見て下さい。

実験結果（ test.htmlの表示）

実験結果（ test2.htmlの表示）
↑J2SEのラインタイムがインストールされてない環境の場合（2006.2.14追記）

どうでしょう　正しく外字混じりの文字が表示されたでしょうか？
もとの外字は、下記のデータを利用しています。
ユニコード外字が正しく表示できるかどうか、S-JISには無いコードの外字も登録しています。

この環境は、CGIが利用できるサーバが使えれば、どこでも構築することができます。
実験してみたければ、下記ダウンロードを利用して下さい。

　ダウンロード

　　ダウンロードファイルの中身
　　
　　nph-cgij.cgi　（CGI）
　　test.html　　 （サンプルページ）
　　EUDC.EUF　　　（外字フォントビットマップデータ）
　　EUDC.TTE　　　（外字フォントファイル）
　　jclasses
　　　|
　　　eudcSetting.class　　　（通信設定アプレット）
　　　eudcSetting.java 　　　（　〃　ソースコード）
　　　eudcStaticText.class 　（外字を含むテキスト表示アプレット）
　　　eudcStaticText.java　　（　〃　ソースコード）

　
サーバにアップロードするときの構成は、下記のようになります。()はパーミッションです。

　　cgi-bin　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　|
　　　　nph-cgij.cgi　（755）
　　　　test.html　　 （644）
　　　　EUDC.EUF　　　（644）
　　　　jclasses
　　　　　　|
　　　　　　eudcSetting.class　　　（644）
　　　　　　eudcStaticText.class 　（644）

「EUDC.EUF」はサンプルですから、実際に使っている「EUDC.EUF」を利用すると良いかもしれません。

Javaアプレットは、設定用と表示用の２つになっています。
アプレット間通信を利用して、表示用アプレットは設定用アプレットから情報を取得します。
（設定用アプレットのパラメタ「name=eudcSetting」は通信用の指標です）
ページに、設定用アプレットは１つで、表示用アプレットはいくつあっても構いません。
「test.html」を見ると、どのように利用しているか分かると思います。
　
　
設定用のアプレットは、「URL」パラメタでサーバ上の「nph-cgij.cgi」の位置を指定します。
また、「PORT」パラメタでHTTP通信のポート番号を指定します。

<!-- 設定用のアプレット -->
<APPLET codeBase=./jclasses height=0 width=0 code=eudcSetting.class name="eudcSetting" VIEWASTEXT> 
<param name=URL value="http://gaiji.jjworkshop.com/cgi-bin/gaiji/nph-cgij.cgi">
<param name=PORT value="80">
</APPLET>

　
表示用のアプレットは、「STL」パラメタで表示スタイルを指定します。
「STR」パラメタで外字を含む文字データを指定します。
外字の入力は、利用する「EUDC.EUF」と対の「EUDC.TTE」を何れかのフォントにリンクして、IMから直接入力します。
表示サイズは、APPLET の「height/width」の値で調整して下さい。

<!-- 外字表示アプレット -->
<P><APPLET codeBase=./jclasses height=120 width=600 code=eudcStaticText.class VIEWASTEXT>
<param name=STL value="size=18,bgcolor=ffff99,color=ff0000,align=center,padding=0,valign=center"> 
<param name=STR value="■■■">
</APPLET></P>

　
スタイルは、下記の設定が利用できます。

　　size=数値　　　　　　　　 （フォントサイズを指定）　　　　　　　　　　　　　　
　　bgcolor=000000～ffffff　　（バックの色をRGB値を指定）
　　color=000000～ffffff　　　（文字の色をRGB値を指定）
　　align=left/center/tight 　（文字の横配置を指定）
　　valign=top/center/bottom　（文字の縦配置を指定）
　　padding=数値　　　　　　　（上下左右の余白をドットで指定）

　
注意：
「test.html」は必ず UTF-8 で保存して下さい。S-JISで保存すると正しく動きません。
　
　
◆データの流れを詳細に説明すると

「nph-cgij.cgi」へのデータ入出力でみるとわかりやすいので、このCGIのI/Oを説明します。たとえば、「あ[E000]」の文字列のデータは下記のようになります。
（[E000]は Unicode外字の最初の文字）
　
入力
２バイト（16進）で１文字を構成します。前後のバイトが入れ替わっているので、実際のコードは「feff　3042（あ）　e000」で、最初の「feff」はBOMです。

ff,fe,42,30,0,e0

※ 実際は HTTP のヘッダとか入力に付加してますが、シンプルにデータだけ説明してます。詳細はソースコードを確認して下さい。
　
出力
「あ」は Unicode で「3042」でこれの１０進で「12354」が先頭にきます。
「e000」は外字になるので、これに該当するビットデータを、「EUDC.EUF」より、バイトの並びとして取り出し、「xサイズ:yサイズ:バイト列」の文字列にします。
文字データは、空白１バイトで区切られています。

12354 64:64:FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF9FFF3FFFFFFFFFFF8
1FF03FFFFFFFFFF83FF07FFEFFFFFFF87FF0FFFC7FFFFFF87FF0FFF81FFFFFF87F
F0FFF00FF800007FF0000007F800007FF0000007FFFFF87FF0FFFFFFFFFFF87FF0
FFFFFFFFFFF87FF0FFFFFFFFFFF87FF0FFFFFFFFFFF87FF1FFFFFFFFFFF87FFE7F
EFFFFFFFFCF3FE0FE7FFFFFFCFF8FE0FC1FFFE3F87FC7E3FC1FFFE0001FC3E3F87
FFFE0001FE1E3F9FFFFE1F87FF1C3F3FFFFE1F87FF1C3E7DFFFE1F87FFFC7CF87F
FE1F87FFF87FF03FFE1F87800000001FFE1F87800000001FFE1F87FFF8E7FFFFFE
1F87FFF8E7FFFFFE0007FFF0F7FFBFFE0007FFF1F3FF1FFE1F87FFF1F9FE0FFE1F
87FFE3F8FC03FE1F870000000003FE1F870000000003FE1F87FF8FFE7FFFFE1F87
FF8FFE3FFFFE1F87FF1C1F1FFFFE1F87FE3C0F8FFFFE1F87FC7C3FC3FFFE0007F8
FC3FE1FFFE0007F1FC3E707FFC3F87E1FC3C381FFC3F87C27C381C07FC3F878E1C
30FE03FC3F873F1C27FF8FFC3F847F1C0FFFDFFC3F87FF9C3FFFFFFC7F87FFFC3F
FFFFFC7F87FFFC0FFFFFF87F87FFF820FFFFF8FF87FFE43C1FFFF8FF87FF1C3E0F
FFF1FF87F87C3F83FFF1FF8700FC3FC3FFF3F00783FC3FE1FFE7F807CFFC3FE1FF
E7FF07EFFC3FF3FFCFFF8FFF803FFFFFDFFFFFFFF03FFFFFFFFFFFFFF87FFFFFFF
FFFFFFF9FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF

　
◆最後に・・

実験とはいえ、十分実用できる実装になっていると思います。
ページを作成するときは、外字入力用に外字フォントが必要になりますが、いったん外字を作成し、その「EUDC.EUF」さえサーバにアップロードしてしまえば、外字フォントが導入されていないＰＣでも、ブラウザで外字が表示可能になります。

今後は同じアーキテクチャを利用し、ブラウザからの外字入力も作ってみようかと思っています。
今回の表示版はまだβ状態ですが、入力版ができたらパッケージにしようかとも思ってます。

ソースコードの利用に関して、とくに制約を設けませんが、実験以外の目的で利用する場合は、メールにて連絡を下さい。

[TOP] [前のTOPIC] [次のTOPIC]