タイトルは今のところない: CompositionEventを利用してフリガナを取得する(その2)

2016年12月30日金曜日

CompositionEventを利用してフリガナを取得する(その2)

中身や仕様は全く違うけど、一応はautoKana.jsの改変バージョンと言う事でautoKana2.jsとしてみた。(^_^;)

目的

JavaScriptでWindows APIのImmGetCompositionStringの取得結果になるべく近づけること。
.NETでのコーディング例はこちら。
# 汎用性を考えたらTextBoxを継承したカスタムコントロールを作った方が簡単な気もするけど、その辺は好き好きで。

動作仕様

autoKana.jsとI/F互換
日本語IMEの各種入力モード(ひらがな、全角カタカナ、全角英数、半角カタカナ)で入力されたIME変換前の文字列をフリガナとして取得する。
キーボードから入力可能な英数字記号をそのままフリガナとして取得する。
IEおよびEdgeでEnter以外のIME確定時にcompositionendイベントが発生しない不具合に対応。
(例)やまだと入力してIME変換後にEnterを押下せずたろうと入力
IEおよびEdgeで全角SPを入力時にcompositionupdateイベントが発生しない仕様に対応。
IE11およびEdgeでMS-IMEでIME確定前に入力中のテキストボックスをクリックした際にIMEが確定しない不具合に対応。
日本語から英数字記号に変換した場合は最初の日本語をフリガナとして取得する。
(例1)いちと入力して１に変換した場合、フリガナはいちとして取得
(例2)かっこと入力して ()に変換した場合、フリガナはかっことして取得
末尾のＮの不足の自動補正する。
(例)にっさｎと入力して変換した場合、フリガナはにっさんとして取得する
MS-IMEのNとMタイプミスの自動補正された場合、blur時にアラートを表示する。
(例)かせｍじきと入力して河川敷に変換した場合
MS-IMEのIME変換後の確定前でのBSキーによる削除を検出した場合、blur時にアラートを表示する。
(例)やまだと入力して変換キーを押下してIME未確定状態の山田が表示されている際にBSキーを押下して田を削除した場合
Chrome 55.0.x のcompositionupdateイベントで取得出来る入力文字列が1文字づつになった事に対する暫定対応(2017/1/3)
Opera 42.0の挙動がChrome 55.0.xと同じなので同様に対応。
と言うか今は同じエンジン使ってるんですね。(汗)(2017/1/5)
IEとMS-IMEの組み合わせで文字列を入力し変換や確定前にBSキーで削除を行ってから変換せずに確定するとcompositionendイベントのイベント引数で入力された文字列が取得できない問題に対応。(2017/1/6)
FirefoxとMS-IMEの組み合わせで文字列を入力し、IME変換前の状態で入力した文字列をクリックした場合に、compositionendイベントが発生した後に、compositionstart、compositionupdate、compositionendが発生して入力が確定する問題に対応。(2017/1/7)

動作確認

jQuery 1.10.x以降(2.x系でも動作します)

Windows 7
IME:MS-IME(10.1.7601.0) / MS Office IME 2007(12.0.6670.5000)SP3 / Google 日本語入力(2.20.2750.0) / ATOK 2016 for Windows
ブラウザ:IE10 / IE11 / Firefox 50.1.0 / Chrome 54.0.x / Chrome 55.0.x / Chrome 56.0.x / Chrome 57.0.x / Chrome 58.0.x / Opera 42.0.x / Safari 5.1.7

Windows 10
IME:MS-IME
ブラウザ:IE11 / Edge

Mac OS Yosemite
ブラウザ:Safari 8.0.3
IME:標準IME / Google 日本語入力(2.20.2700.1)

macOS Sierra
ブラウザ:Safari 10.0.2 / Firefox 50.1.0 / Chrome 54.0.x / Chrome 55.0.x
IME:標準IME(ライブ入力オフ) / Google 日本語入力(2.20.2700.1)

iOS 10.2 (iPad mini4 / iPhone SE)
ブラウザ:Safari 10.0/ Firefox 5.3 / Chrome 54.0.x 以前 / Chrome 55.0.x / Opera mini 14.0

Android 4.1.2 (富士通 ArrowsX F-02E)
ブラウザ:Firefox 50.0 / Chrome 54.0.x 以前 / Chrome 55.0.x

Android 5.1(Huawei MediaPad T2 7.0 Pro LTE)
ブラウザ: Chrome 43.0.x

New ニンテンドー 3DS LL
ブラウザ: Mobile NintendoBrowser 1.8.10156.JP

上記以外の環境で動作確認が取れた場合は、御一報頂けると助かります。 IMEはAtokなども試して貰えると嬉しいです。

非対応ブラウザ

動作確認をして動作しなかった環境とブラウザを列挙しています。
~~Windows Chrome 55.0.x~~
~~macOS Chrome 55.0.x~~
~~Android 4.1.2 Chrome 55.0.x~~
Android 4.1.2 / 5.1 Opera mini 21.0.x (Prestoエンジンは未対応)
Android 4.1.2 標準ブラウザ
Android 5.1 ドルフィンブラウザ 11.6.4

※Chrome 55.0.xは個別に対応しました。55.0以降のバージョンはリリースされ次第挙動を確認します。(2017/1/3)
56.0のβを試した限りでは改善されてませんでした。
一応、Chromeの「問題を報告」とリリースノートの記事に問題を指摘しましたが反映される事はあるのかな。。。(2017/1/6)
開発版の57.0を試したら改善されていました。(嬉) (2017/1/6)

非対応IME

Mac OS X El Capitan以降の標準IMEのライブ入力

非対応

予測変換でのIME確定
#これが出来るならmacOSのライブ入力も対応出来る訳で。。。
iOSデバイスとAndroidデバイスでの文節変換
(例)「やまに」と入力して変換候補で「山」で確定した場合、「山に」と確定せず「に」だけが未確定状態で残るため、「やま」と入力して「山」と変換して確定してから「に」と入力した場合との判別が不能のため。

動作せず

iOS Safari(Bloggerのモバイルバージョン)
#この記事のbodyにscriptタグを書いてるせい?

参考サイト

メモ

autoKana.jsの手法とI/Fをパクリしました。
全角変換はKana.jsの半角変換を参考にした際の逆仕様で独自実装しています。
半角/全角変換は色々と見たんですが、JIS X0201の文字とJIS X0208との変換で0xFEE0を足したり引いたりしているかと思うんですが、シングルクォートとダブルクォートって違う文字になりません?(汗)
少なくともIME入力をしてF8/F9で半角←→全角変換をした際に出て来る文字では無いと思うので円マークと共に別処理にしました。
と言うかFEE0を足して変換されるFF02とFF07ってShift-JISだとFA57とFA56なので外字IBM拡張漢字ですよね?
処理中に片仮名に寄せて判定しているのは、ヴヵヶの対象となる平仮名が環境依存文字である事と、通常入力ではゔは出せてもゕゖは出せない(コード入力と辞書登録以外で出す方法があったら教えて下さい)と思ったので片仮名に寄せてます。

デモ

jQuery2.2.4を使用
フリガナ取得デモ(このページで動作しない場合はデモページで試して下さい)

漢字

ルビ

るび

ソース

https://github.com/VeryPinch/autoKana2

デモページ

jQuery.1.11.1を使用
https://verypinch.github.io/autoKana2/

ライセンス

MITライセンス

Usage

autoKana.jsと同じです。(^_^;)

$.fn.autoKana2(kanjiElement, rubyElement, option);

Sample

<script type="text/javascript" src="js/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.autoKana2.js"></script>
<script type="text/javascript">
  $(function(){
    $.fn.autoKana2('#kanji', '#ruby1', { katakana : true});
    $.fn.autoKana2('#kanji', '#ruby2');
  });
</script>
<input type="text" id="kanji" style="width: 300px;" />
<input type="text" id="ruby1" style="width: 300px;" />
<input type="text" id="ruby2" style="width: 300px;" />

連絡先

もし万が一、このページに辿り着いてしまった上に連絡したいなんていう変な気持ちになったら、の話ですが。(^_^;)
一応、ソースに記載してありますが、あまりメールは見ないので、ここにコメントを付けて貰えると助かります。(^_^;)
GitHubの方は更に見ないと思います。(汗)
もっとも、ここにコメントを貰っても気が付くのに数日掛かる事もありますが。

今後の予定

そもそもが仕事でautoKana.jsを使ってフリガナ対応して欲しいと依頼されて、その通りにしたのに結果的に要求仕様を満たさなかった事が発端なので、現在の成果物を仕事先に反映した結果、何か指摘されれば反映するかも。
#客先に凄腕の打鍵者が居て、何度もバグ出しされると言う羞恥プレイ状態なので、きっとフィードバックがあるはず。(^_^;)
(仕事先では別ロジックで実装したんですが今の実装よりもアレなソースなので差し替え予定)
~~Chromeは55.0.x以降のバージョンも挙動が変わらない場合は、もうちょっと頑張ってみようかな、程度。~~
気が向いたら対応を試みようかとは思いますが、先日調べた限りでは英字に未対応とするか1文字づつ入力をチェックする事になりそうなのが面倒なので。。。
~~(と言うか、仕事先でやったアレな実装が1文字づつ入力をチェックする方式なので1周回ってしまうし)~~
と思ってたんですが、突然パッと閃いたのでChrome 55.0.x に対応しました。(^_^;)
一度、離れると駄目な思考から抜け出せる、って感じで。
macOSの標準IMEのライブ入力のフリガナはどうにもならないかと。(^_^;)
入力でいきなり漢字が表示されちゃうんで無理ゲーです。
~~あとグシャグシャっとキーボードを適当に打鍵した際に途中からフリガナが取得出来なくなる事がありますが、対応する気は殆どありません。~~
フリガナ取得の対象となる記号の設定が甘かった為に発生している問題だったので修正しました。(^_^;)

その他

とある方の信者なのでAtokは持ってません。(冗)
入れるとMacの調子が悪くなるそうなので。
上記までの文章とソース内のコメントで半角とか全角とか書いてある場合は、「いわゆる」を補完して下さい。(^_^;)
具体的には、JIS X0201の文字を半角、JIS X0208の文字を全角と呼称しています。
それとWebプログラマでは無いので色々と間違ってる箇所があると思いますので、都度指摘して頂けると助かります。

Webでフリガナ取得
autokana.jsを改修する
CompositionEventを利用してフリガナを取得する(その1)

3 件のコメント:

匿名2017年2月9日 10:24
autokanaだとfirefoxで不具合があったので、調べてたところこちらにたどりつきました。
autokana2を使ってみたところ、firefoxの不具合は解消されていたのですが、chromeで「株式会社」等の「ｘｘｘしゃ」とつくものを入力すると「シャ」だけになってしまいます。
こちらの修正は出来ますでしょうか？
返信削除
返信
匿名2017年2月15日 11:44
Very Pinch さん

早々の修正ありがとうございます！
chromeで無事修正されていることを確認しました。

本当にありがとうございました。
返信削除
返信

コメントを追加