JavaScriptでIMEの注目文節を取得したい

###前提・実現したいこと
HTMLの<input type="text">等で日本語を入力するとき、IME(Input Method Editor)を使っていると思います。IMEでは、入力中->文節変換->(文節確定)->全文確定という流れになっています。

さて、変更される文字列、入力中の文字列、文節変換中の文字列、全文確定後の文字列はComposition Eventsを使えば取得できます。

UI Events#4.7. Composition Events
CompositionEvent - Web APIs | MDN
CompositionEvent - Web API インターフェイス | MDN

しかし、これらのイベントで取得できるのは全ての文字列であるため、文節変換中の注目文節(アンダーバーが太かったり、色が変わったりしている部分)を区別して取得することができません。

注目文節を取得する方法は無いのでしょうか？特にChrome(正確にはChromium)で。

###発生している問題・エラーメッセージ
Composition Eventsでは文節変換途中の注目文節がどこなのかわからない！

###該当のソースコード
CompositonEventの動きを試す場合はこちらを使ってください。(注意: IEでは動きません)
https://jsbin.com/tuhojibumu/edit?html,output

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>IMEから取得したい</title>
6  <style>
7    ul#log {
8      border: 1px solid;
9      padding-left: 0;
10      list-style-type: none;
11      overflow: scroll;
12      height: 30rem;
13    }
14    ul#log li {
15      white-space: pre;
16      font-family: monospace;
17    }
18  </style>
19</head>
20<body>
21  <input id="input" type="text">
22  <ul id="log"></ul>
23  <script>
24    const addLog = (node, msg) => {
25      const logNode = document.createElement("li");
26      logNode.textContent = msg;
27      node.appendChild(logNode);
28    };
29    const inputNode = document.getElementById("input");
30    const logNode = document.getElementById("log");
31    inputNode.addEventListener("compositionstart", ({data}) => {
32      addLog(logNode, `start: ${data}`);
33    });
34    inputNode.addEventListener("compositionupdate", ({data}) => {
35      addLog(logNode, `update: ${data}`);
36    });
37    inputNode.addEventListener("compositionend", ({data}) => {
38      addLog(logNode, `end: ${data}`);
39    });
40  </script>
41</body>
42</html>

###試したこと
Input Method Editor APIというWDがあるのですが、現在実装しているのはIEとEdgeのみとなっています。Chromeは開発中のようです。

これを使えば解決できそうな気もしますが、Chromeでの開発がいつ完了するかもわかりません。

###補足情報(言語/FW/ツール等のバージョンなど)
最終的な目標はAtomで注目文節がわかるようにすることです。現在のAtomでは、インプットを見せずに、Composition Eventsを利用して取得した文字列をエディタ内に表示する方法を取っています。しかし、文節変換では注目文節がどこかわからず、未確定と確定しか区別できません。これをなんとかしたいというのが今回の質問の目的です。なので、AtomというかElecrtronというかChromiumでできることが前提となります。

同じElectron製のVisual Studio Codeはインプットを上に被せる形で表示するため、区別が付きます(ただ、デフォルトのテーマだと凄く見づらいですけど)。

raccy

2016/12/29 22:27

「やってほしいことだけ」と指摘された方へ。あと、一体何をやれば良いのかを教えてください。

行動規範の内容に同意します

回答1件

chromiumのソースを見ましたが、
代替できそうなものは見受けられませんでした。
変換という文化が世界共通ではないからですかねぇ。

chromium - イベントリスナーリスト
 chromium - IMEInputEventクラス

https://jsbin.com/tuhojibumu/edit?html,outputを
Windows7, Windows10, Mac(sierra)で確認しましたが、
IMEのバージョンや種類、OS?によって挙動が変わるみたいです。

OK - Windows7(Google日本語入力)
NG - Windows10(Google日本語入力)
NG - MacOS(標準IME)

OK - 部分的に取得が可能
NG - 全文字列が取得される

OKと記載していますが嘘です。
というのは動作を見る限り、内部では文字列比較を行っているように見受けられました。
(ソースまでは見てませんが。。)
下記は、「テスト」の候補で変換しています。

1: てすとだよ
2: テストだよ => テスト
3: てストだよ => て ※本来は「てスト」が表示されるべき

上記の仕様の場合、
代替としてパッと思いつくのは、
keyupイベント等で変更される値を比較する。
ですが、意味をなさないですね。

回答ではないですが、ご参考までに。。

投稿2016/12/19 14:04

編集2016/12/19 14:42

mukkun

総合スコア882

raccy

2016/12/19 14:14

ぬぬぬ、Chromiumではやはりまだ開発途中という段階なのでしょうか… 解析しても考えたのですが、形態素解析するのにMeCabでも入れておくのか？ってぐらい現実的じゃ無いかなと思っています。macOSでさえ動けばもうどうでも良いんですねー。ここはChromiumにパッチを…うー、オラの技術力じゃ無理っす＞＜