Gaiji.JJWorkshop [TOPICS]

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

ブラウザで外字を含む文字の入出力を実験してみました。といってもかなり実用レベルに近い実験です。表示実験と同じくかなりシンプルな構成です。

前回の表示実験では、外字と内字が明らかに見た目で判別できたのですが、今回はどちらの文字もレンダリングにアンチエイリアスをかけたので、ほぼ見た目で区別つかないようになりました。

なにはともあれ、実験結果を見てみて下さい。
入力については簡単な説明をページに付けてあるので、実際に入力操作してみて下さい。
J2SEランタイムが未インストールの場合はダウンロードするか聞いてきます。
IE6_SP2 / NN7.1 / Firefox1.5.0.1 (Mozilla/5.0) で稼働確認
（J2SE Runtime Environment 5.0 Update 6 を使用）
　
ブラウザが IE の場合：　<OBJECT> タグで記述（各サンプルはこちらで説明）
　入力実験（ test_static.html の表示）
　表示実験（ test_static.html の表示）
　
ブラウザが IE/NN/Firefox の場合：　<APPLET> タグで記述
　入力実験（ test_static_a.html の表示）
　表示実験（ test_static_a.html の表示）

この環境は、CGIが利用できるサーバが使えれば、どこでも構築することができます。
実験してみたければ、下記ダウンロードを利用して下さい。
（Perl ソースを UTF-8 で記述しているため、Perl のバージョンは v5.8.x 以上）

　ダウンロード

　　ダウンロードファイルの中身
　　
　　nph-cgij2.cgi　　　（アプレットとの通信用ＣＧＩ）
　　EUDC.EUF 　　　　　（外字フォントビットマップデータ）
　　EUDC.TTE 　　　　　（外字フォントファイル）
　　EUDC.YMI 　　　　　（外字読みファイル）
　　test_static.htm　　（外字表示サンプルページ）
　　test_input.ht　　　（外字入力サンプルページ）
　　test_input.cg　　　（外字入力確認サンプルＣＧＩ）
　　jclasses
　　　|
　　　eudcApl_v101.jar　　　（外字処理アプレットアーカイブ）

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

　　/cgi-bin　　　　　　　　　　　　　　　　　　　　　　　　
　　　　|
　　　　nph-cgij2.cgi 　　（755）
　　　　EUDC.EUF　　　　　（644）
　　　　EUDC.YMI　　　　　（644）
　　　　test_static.html　（644）
　　　　test_input.htm　　（644）
　　　　test_input.cgi　　（755）
　　　　/jclasses
　　　　　　|
　　　　　　eudcApl_v101.jar　　（644）

　
◆サーバへのインストールファイル説明

「nph-cgij2.cgi」は、アプレットとの通信用ＣＧＩです。
入力用も表示用もこのＣＧＩ１つで処理しています。非常にシンプルです。
処理効率を考えると、外字データをＤＢ化した方がよいと思いますが、「EUDC.EUF」「EUDC.YMI」を未加工のまま利用したかったので、ＣＧＩによるファイルアクセスで外字データを抽出しています。

「EUDC.EUF」ファイルは Windows標準の外字エディタを利用して外字を作成すると、「EUDC.TTE」と必ずペアで作成されるファイルです。通常このファイルはシステムフォルダの「Fonts」フォルダにあります。
エクスプローラからは見ることが出来ないので、コマンドプロンプトから「dir eudc.*」で探してみて下さい。（取り出すには copy eudc.euf ...）

「EUDC.YMI」は「外字ザウルス」もしくは「EudcBrowser」で作成することができます。
「外字ザウルス」は外字サーバで外字作成をすると、インストールフォルダの「SHARE_FOLDER」フォルダ内に同ファイルを作成します。
「EudcBrowser」は、読みの管理を行うと指定した場合に、対象としている外字ファイル（通常は「EUDC.TTE」）と同じフォルダ内に同ファイルを作成します。

「EUDC.TTE」はアーカイブには入ってますが、このシステムでは利用しません。
テストするときに外字を確認したければ、このファイルを外字フォントとしてリンクして利用して下さい。外字のインストール及びリンクは「EudcChanger」が利用できます。

「eudcApl_v101.jar」は、アプレットのアーカイブです。

「test_xxx.xxx」の３ファイルは今回のテスト用サンプルです。
実装では、アプレットを使った動的なページを作成することで、ＤＢやファイルに書き込んだりします。
今回のサンプルＣＧＩ（test_input.cgi）はＰｅｒｌを利用しましたが、ＰＨＰでもＡＳＰ．ＮＥＴでも、なんでも構いません。
ただし、アプレットが UTF-8 の入出力を前提としているので、ＣＧＩも UTF-8 で入出力する必要があります。
　
◆HTMLの記述の説明
　
外字表示アプレットの記述サンプルです。
アプレットを含むページを作成する時は、かならず UTF-8 でアプレットにデータが渡るようにして下さい。
（つまり、「STR」パラメタの内容[表示文字]が UTF-8 でなくてはなりません）
赤字の部分が記述するパラメタになります。それ以外は規定値です。

<object
classid = "clsid:CAFEEFAC-0015-0000-0004-ABCDEFFEDCBA"
codebase = "http://java.sun.com/update/1.5.0/jinstall-1_5_0_04-windows-i586.cab#Version=5,0,40,5"
WIDTH = 600 HEIGHT = 100>
<PARAM NAME = CODE VALUE = eudcStaticText.class>
<PARAM NAME = ARCHIVE VALUE = ./jclasses/eudcApl_v101.jar>
<PARAM NAME = "type" value = "application/x-java-applet;jpi-version=1.5.0_04">
<PARAM NAME = "scriptable" value = "false">
<PARAM NAME = STL VALUE="size=24,bgcolor=ddffff">
<PARAM NAME = STR VALUE="■■■">
</object>

　
スタイル（STL パラメタ）は、下記の設定が利用できます。全パラメタ省略可能です。

　　size=数値　　　　　　　　 （フォントサイズを指定）　　　　　　　　　　　　　　
　　bgcolor=000000～ffffff　　（バックの色をRGB値を指定）
　　color=000000～ffffff　　　（文字の色をRGB値を指定）
　　align=left/center/tight 　（文字の横配置を指定）
　　valign=top/center/bottom　（文字の縦配置を指定）
　　padding=数値　　　　　　　（上下左右の余白をドットで指定）
　　adjust=数値 　　　　　　　（外字位置を調整するため、外字の上下位置を±で補正）　　　　 
　　fontname=フォント名 　　　（表示するフォント名を指定：デフォルト=serif）

　
表示フォントについてはこのサイトなどを参照してみて下さい。
「serif」で明朝体（デフォルト）、「sans-serif」でゴシック体になります。

　
外字入力アプレットの記述サンプルです。
アプレットを含むページを作成する時は、かならず UTF-8 でアプレットにデータが渡るようにして下さい。
赤字の部分が記述するパラメタになります。それ以外は規定値です。

<object
classid = "clsid:CAFEEFAC-0015-0000-0004-ABCDEFFEDCBA"
codebase = "http://java.sun.com/update/1.5.0/jinstall-1_5_0_04-windows-i586.cab#Version=5,0,40,5"
WIDTH = 304 HEIGHT = 54>
<PARAM NAME = CODE VALUE = eudcInputText.class>
<PARAM NAME = ARCHIVE VALUE = ./jclasses/eudcApl_v101.jar>
<PARAM NAME = "type" value = "application/x-java-applet;jpi-version=1.5.0_04">
<PARAM NAME = "scriptable" value = "false">
<PARAM NAME = ANS value="form=FormEudcInput,field=EudcText">
<PARAM NAME = STL value="size=24,column=10">
</object>

　
入力通知フィールドパラメタ（ANS パラメタ）は、下記の設定が利用できます。
このパラメタを省略すると、form=FormEudcInput、field=EudcText をデフォルトで設定します。

　　form=Form名　　　　　　　 （アプレットを記述した FORM の NAME= の値を指定）
　　field=Input名 　　　　　　（入力文字を戻すする上記 FORM中の INPUT の NAME= の値を指定）

　
スタイル（STL パラメタ）は、下記の設定が利用できます。全パラメタ省略可能です。

　　size=数値　　　　　　　　 （フォントサイズを指定）　　　　　　　　　　　　　　
　　bgcolor=000000～ffffff　　（バックの色をRGB値を指定）
　　column=数値 　　　　　　　（入力の有効文字数：全角も半角も１文字）
　　adjust=数値 　　　　　　　（外字位置を調整するため、外字の上下位置を±で補正）　　　　 
　　fontname=フォント名 　　　（表示するフォント名を指定：デフォルト=serif）
　　test　　　　　　　　　　　（アプレットサイズを計算するときに利用）

　　※ test をパラメタに付加すると、最適なアプレットの WIDTHとHEIGHTの値を表示します。
　　　 例：<PARAM NAME = STL value="size=24,column=10,test">

　
FORMタグに記述した実際の、外字入力アプレットは下記のようになります。

<form name="FormEudcInput" method="post" action="./test_input.cgi">
<object
classid = "clsid:CAFEEFAC-0015-0000-0004-ABCDEFFEDCBA"
codebase = "http://java.sun.com/update/1.5.0/jinstall-1_5_0_04-windows-i586.cab#Version=5,0,40,5"
WIDTH = 304 HEIGHT = 54>
<PARAM NAME = CODE VALUE = eudcInputText.class >
<PARAM NAME = ARCHIVE VALUE = ./jclasses/eudcApl_v101.jar >
<PARAM NAME = "type" value = "application/x-java-applet;jpi-version=1.5.0_04">
<PARAM NAME = "scriptable" value = "false">
<PARAM NAME = ANS value="form=FormEudcInput,field=EudcText">
<PARAM NAME = STL value="size=24,column=10">
</object>
<input type="hidden" NAME="EudcText" value="■■■">
<input type="submit" NAME =".submit" value="入力確定">
</form>

　
上記のように、外字入力アプレットは、FORMタグの中に記述します。その FORM に必ず入力値を戻す INPUTタグを「hidden」で記述して下さい。外字入力アプレットは、FORM の NAME値と、その FORM に記述した INPUTタグの NAME値を指標として、指定した INPUTタグの VALUE に入力文字をフィードバックします。
その INPUTタグの value= に文字列（外字を含んでも可）を指定すると、その文字列が初期設定値となります。
　
注意：
アプレットの「PARAM NAME = ANS」に指定する FORM名、INPUT名は大文字小文字を判断します。この指定が間違っていると、アプレットは例外処理で終了します。
　
　
外字処理設定アプレットの記述サンプルです。
外字表示アプレット、および外字入力アプレットを記述したページに、必ず１つだけ、この設定用アプレットを記述します。
このアプレットはどこに記述しても構いませんが、WIDTH/HEIGHTを０（ゼロ）にして非表示にします。
「URL」パラメタに、アプレット通信用ＣＧＩ「nph-cgij2.cgi」のURLを指定します。
「PORT」パラメタに、HTTP通信のポート番号（通常は80）を指定します。

<object
classid = "clsid:CAFEEFAC-0015-0000-0004-ABCDEFFEDCBA"
codebase = "http://java.sun.com/update/1.5.0/jinstall-1_5_0_04-windows-i586.cab#Version=5,0,40,5"
WIDTH = 0 HEIGHT = 0>
<PARAM NAME = CODE VALUE = eudcSetting.class >
<PARAM NAME = ARCHIVE VALUE = ./jclasses/eudcApl_v101.jar>
<PARAM NAME = NAME VALUE = "eudcSetting">
<PARAM NAME = "type" value = "application/x-java-applet;jpi-version=1.5.0_04">
<PARAM NAME = "scriptable" value = "false">
<PARAM NAME = URL VALUE="http://gaiji.jjworkshop.com/cgi-bin/eudc/nph-cgij2.cgi">
<PARAM NAME = PORT VALUE="80">
</object>

　
◆入力アプレットの動作についてもう少し詳しく

前回の表示実験で利用したＣＧＩを拡張し、同じアーキテクチャで読みデータもサーバから受け取れるようにしています。
読みは、外字入力アプレットで、外字の読みをかなで入力後、文字表示部分を右クリックしたときに、ＣＧＩへ読みを通知し、対応する外字のビットイメージを戻してもらい、ポップアップメニューにイメージを作画して選択できるようにしています。
現在は最大１６件を超える読みがあると、それ以降のデータは破棄します。

入力値の受け渡しは、「◆HTMLの記述の説明」の「外字入力アプレット」の説明を見ると分かると思いますが、FORM のINPUTタグを利用してページとアプレットのデータをやりとりしています。
なので、FORM の ACTIONパラメタで指定したＣＧＩへ、外字入力アプレットで編集した外字を含む文字データを渡すことができます。
このINPUTのVALUE値は、UTF-8でエンコードされたUnicode文字が入ります。ですから、このデータを処理するＣＧＩは UTF-8 のデータを受け取ることになります。
　
◆外字サンプルデータについて
　

今回のテストで利用している外字データのは、上記のような読みを登録しています。
外字入力アプレットのテストで実際によみを入れると、これら外字が入力（表示）できます。

このデータは、フリーの「EudcBrowser」を利用すると簡単に作成することができます。
（シェアウェアの、「外字ザウルス」でも作成可能）

サーバへ設定してテストする場合は、これらツールを利用して、実データでテストしてみると良いかと思います。
　
◆最後に・・

ダウンロードしたアプリケーションの利用に関して、とくに制約を設けませんが、実験以外の目的で利用する場合は、メールにて連絡を下さい。

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