Hangul IMEの内部構造

Hangul IMEをリリースしてから2年がたっていますが、様々な試行錯誤を通して実装したのに、その過程を記したドキュメントを残していなかったので今更ながら書いてみることにしました。
不足な点も多々ありますが記してみます。

※この文章は今後編集・加筆が加えられる可能性があります。

概要

Hangul IMEは、Javascriptが動作するWebブラウザにおいて韓国語を入力可能にするスクリプトです。以下のようなコンセプトで実装を行いました。

韓国語を入力できる。

韓国語IMEがなくてもブラウザだけで入力できます。

シンプルである。

余計なインターフェースは実装しません。
起動コードもすっきり1行です。

インライン入力ができる。

視線を動かすことなく、自然に入力できます。

高速に反応する。

読み込みも早く、PDAでも動作する演算量です。

クロスブラウザである。

IEだけでなく、FirefoxやSafariでの動作確認をしています。

ブラウザのみで韓国語を入力する必要性があるのは、韓国語環境以外で韓国語を入力する場合に限定されるため、シンプルでかつ確実に入力できるスタイルにこだわっています。
そのため、高速に入力できることや、OSに実装されているIMEとほぼ同じ動作をするよう繰り返しチューンしました。LinuxやMacでの利用も考え、クロスブラウザにすることも優先順位を高くしました。

実際の利用にはすべての関連ファイルを読み込んだ後、以下のように1行だけで起動させることができます。

この仕様によってBookmarkletとしての動作も可能であり、様々なページの入力フォームを乗っ取ることができます。

実装するきっかけ

元々私は韓国語を勉強していた一方で、趣味でJavascriptの小物を量産していたので、それらの要素を組み合わせて何かを作ろうとするのは自然なことでした。韓国語も日本語と同様に入力のためにはIMEが必要であり、特に海外での共用PCなどを用いた環境での入力には苦労がありました。

もしJavascriptで実装できれば、韓国語環境がないPCはもちろん、Sigmarion等のPDAにおいても韓国語を入力できるので、とても便利だと思い実装を決意しました。

最初はハングルを入力補助程度のものでしたが、経験を積みながら完璧なIMEを目指して実装を進めました。完成したのは2005年冬で、それから細かい修正を加え、現在の形に落ち着いています。

内部構成

Hangul IMEは、テキストボックスにおけるキーイベントを乗っ取って制御を行うIMEフレームワークと、文字列の結合処理を行いフレームワークに返す言語処理部分を重ねた構造をとっています。Hangul IMEを構成するクラス群は次の様になります。

browser オブジェクト

ブラウザ判定処理をするオブジェクト。

keycode オブジェクト

キーコードの文字種などを判定する関数を含んだオブジェクト。

selectionSupport オブジェクト

テキストボックスのカーソル処理を乗っ取り、カーソル前後の文字の挿入や削除をする関数を含んだオブジェクト。
インライン入力実装には必須である。

JS_IM クラス

テキストボックスを乗っ取ってキーボード関連のイベントを取得する。
JS_IM_Methodに必要なパラメタを渡し、出力文字列を処理する。

JS_IM_Method クラス

JS_IMの入力言語を多様化するためのクラス。このスケルトンを継承・拡張して多言語に対応する。

JS_IM_hangul オブジェクト

JS_IM_Methodを拡張し、johab.jsをラップするオブジェクト。

johab.js

chiyuさんが開発されたハングルオートマトン。ハングルの母音と子音の結合と分解を行う。

ブラウザ固有の問題

長押しによる連打取得がIMEの入力の快適さを決める要素の一つであり、IEではこれをonkeydownによって取得し、それ以外ではonkeypressによって取得します。そのためブラウザの仕様の違いに応じて利用するイベントを変えて実装しました。

また、IEとその他のブラウザでは、文字列選択の実装方法が異なるので、それ差異を埋める必要も生じます。本スクリプトでは文字列挿入と文字列の後退処理をクロスブラウザで実装したselectionSupport.jsを利用します。

さらにFirefoxのLinux版においてはonkeyupイベントがじゃまをして文字列が崩れてしまう現象があったので、falseを常に返すようにして回避しました。

今後の展望

フレームワークの汎用化し、多言語環境を作る。
アイヌ語IMEや日本語IMEの実装を行う。
ハングル漢字変換機能を実装する。

どれも簡単ではありませんが、時間の許す限りがんばります。

参考文献など

実装上参考にしたものは以下の通りです。

現在、その他のJavascriptによる韓国語IME実装として以下のものを把握しています。

検索

Hangul IMEの内部構造 Hangul IMEの内部構造