カテゴリー: プログラミング

Javascript Japanese Keyboardを公開したヽ( ･∀･)ﾉ

ただの単漢字変換のみ対応しているだけのVirtual Keyboardだけどね(ﾉ∀`)
いずれ消しちゃうけどここで動作確認出来る。
漢字選択はマウスオンリー。

対応ブラウザは3DSブラウザとchromeとFireFox。
Androidのchromeでも動いた。

だがしかしIE、てめーは駄目だ(・∀・)

XMLHttpRequestとイベントソースとファイル読込のところを
いじらないと駄目なようなのでほっとくことにしたｗ

事の起こり
全てはFoto-Haikingを作っていた時に3DSブラウザの仕様というか
3DSの入力システムの壁にぶち当たったことから始まった。

と言っても入力システムの仕様はFoto-Haikingの機能に対して何の問題もなかった。
問題だったのは特に必要もないのに適当に思いついて実装した入力支援機能(´･ω･｀)

入力支援機能はカーソル位置(selectionstart?)から挿入位置を取得するように
していたのだが、これがいけなかった。
3DSの入力システムはどうも閉じられた空間で文章の編集を行うようで、
入力終了後、カーソル位置は必ず文末になるという仕様だったのだ…＿|￣|○

このままでは入力支援機能は3DSブラウザ上で機能しないヽ(`Д´)ﾉと慌てて対策を考えた。
色々考えているうちに、

「3DSの入力システムに依存しない入力システムがあればいい(　･´ω･｀)」

と閃く。つまりJavascriptの日本語入力システムがあれば(｀・ω・´)

ということで色々ぐぐったが、どうも欲しいものが見つからなかった。
需要がないからか実用性に乏しいからか、はたまたかつては存在したけれども
絶滅したのかJavascriptのVirtual Keyboardというものはヒットしなかった。

ime.jsやGoogle CGI API for Japanese Inputもあることはあったが
「ちょっと使うのが面倒くさそう(´･ω･｀)」と思い回避した。
というか頭の中がいっぱいいっぱいだったのでそれらに手を出す余裕がなかった(ﾉ∀`)

最終的に挿入位置を自分で指定するというド阿呆で屈辱的な実装で誤魔化した(´；ω；｀)

何となく作り始める
なんやかんやで一応Foto-Haikingが完成し、一週間くらいダラダラしようヽ( ･∀･)ﾉっと
思っていたが、何となく頭に引っ掛かるのはJavascriptの日本語入力。

この引っ掛かりをなんと表現していいのかわからないけれども可能性的何か(　･´ω･｀)？
より細かく表現すると可能性とその実装方法のセット？「作ろうと思えば作れる」の
もう一歩進んだ状態の「You 作っちゃいなよ(・∀・)」的状態というか。
自分で言っていてよくわからないが(ﾉ∀`)

まあ別にこれが出来たからと言って実用的でもないし金にもならんし
職にもつながらないんだけども、Javascript 日本語入力というか
Javascript IMEっていうものが有ってもいいんじゃなかろうかという
可能性の視覚化というか具現化をしたくなり、ちょろちょろと作り始める。
一応3DSブラウザで動くことが目標だった。

余裕綽々(・∀・)

入力変換用のテキストフィールドを用意して、押した入力ボタンの文字を格納。
↓
変換ボタンを押す。ヘボン式のアルファベットに変換して変換ルーチンに渡す。
↓
連想配列？みたいな感じに単漢字データを用意して、ヒットした漢字を
コンテキストメニューに表示。
↓
入力変換用のテキストフィールドの内容を選択された漢字に変更する。
↓
確定ボタンを押して、最終的な入力先に追加する。

というような流れは頭にあったので、システム部分はちょこちょこと
コーディングしてたら一週間も経たずに出来た(・∀・)

chromeでも3dsブラウザでも動いた。
FireFoxは最初、漢字選択が動かなかったが、thisでイベントソースを渡したら動いた。
IEはちょっと試したが時間が掛かりそうなので放置した(・∀・)

ime.sysは凄いけど、中身を理解するのが難しそうなので使わなかった。
Google CGI API for Japanese Inputは一応JSONPで結果を
取得出来るようにはなった。

実際にFoto-Haikingに実装する際には併用型にしようかなと思った。

甘い予測(　･´ω･｀)

さてシステムは単漢字変換だけとはいえども出来上がった。
次に必要なのは辞書データである。単漢字なので読み方だけを対象とした。
問題は何処までを範囲とするかである。

当初は常用漢字だけにしようかと思ったが

常用漢字　1945字（1981年制定）…… 高校教科書はここまで（下限は不明）
第1水準　2965字　…… 都道府県名・市区郡町村名は全部カバー
学校で習う漢字の数は？

とあったので、どうせ単漢字だから第一水準までやってしまうかと考えた。
第一水準まであれば一般的な文章なら大体カバー出来るだろうしと。

どっかからデータを引っ張ってこれたらいいなぁと思ってぐぐった。

仮名漢字変換システムwnnがインストールされたLinuxがあれば、単漢字変換辞書のデータにあります。

kakasidictというデータが使えると思います。
http://kakasi.namazu.org/stable/kakasi-2.3.4.tar.gz
フリガナ付漢字のデータベース

今Linuxのシステムがない…＿|￣|○

kakasidictとその大本にあるskk辞書は良さげだけど、
GPLでライセンス的な問題と内容そのものを流用してもいいのか
よくわからない……ということで自作することにした。
自分の判断で内容を変えられるデータが欲しかったし。

ちょこちょこやればすぐ出来るだろうと考えていた(・∀・)

苦行と後悔(ヽ'ω`)

ということで辞書データを自作を始めたのだけれども、
さすがに一文字一文字を入力しながらやっていくのはきついので
ぐぐってヒットした文字コ-ド表(第一水準漢字)の並びを
コピペ整形して作業を開始した。

単純に並び順に一つの漢字につき一つの読み方(ヘボン式ローマ字)を
付与するだけで3日くらいかかった……(ヽ'ω`)

更にそれだけでは使い勝手が悪かろうと読み方の追加を試みる。
Google日本語入力で出た候補やウィクショナリーや漢字辞典ネット、
その他の辞書サイトなどを併用しつつ音訓がある程度まで揃うようにした。
余りにも使用頻度が低いと思われる読み方等は追加しなかった。
この際に第一水準ではない漢字もちょろちょろと足した。

明確な日数は覚えていないが10日くらいかかった……(ヽ'ω`)
だらだらするどころか苦行の日々であった。
いや、まあゲームとかもちょこっとはやったがどうぶつの森の日課と
リンクの冒険をちょっとやったくらい……

公開と感想

なんやかんやで辞書データも完成したのでGoogle codeに上げて公開した。
やり方忘れてて少し戸惑った(ﾉ∀`)

単漢字変換のコードなんて他の人は要らんやろぉ(・∀・)と思わぬこともなかったが、
折角作ったし、自分でコードを管理し続けられるかというとそれも怪しいので公開した。

作成後の感想としては、意外とJavascript IMEってアリじゃね(　・｀ω・´)であった。

プロトタイプ的作成だったので、色々と手抜きをしているがｗ、
単漢字変換の部分を複文節変換にしたり、辞書データの配列のjoinを使って
複数辞書の併用出来るようにしたりも出来なくはないので、頑張ったら
それなりの実用性を持ったIMEが出来るんじゃないかなと思った。

今回のコードでは3DSブラウザでの使用を目的にしてる為、
マウス向けのUIになっているが、PCキーボード使用にも
対応させることは可能だし。

主に単純作業の方で疲れたけれども、まあ挑戦してみて良かったかな(・∀・)

今度こそダラダラするぞ(ヽ'ω`)