More than 5 years have passed since last update.

Aceエディタで日本語入力時のちらつきを解消する

Last updated at 2018-05-09Posted at 2017-04-10

#Ace Editor で日本語入力時のちらつきを解消する

2018/5 更新解決方法が新しくなっています。2018年リリース以降(1.3x?) のAceエディタの場合は以下のリンク先をご確認ください。（42993_さん感謝）

これから導入予定の方、MSが嫌いではない方はmonaco-editorもおすすめです。練習がてら導入した記事がこちら。
JSON同士の比較はYAMLが良い - WEBツール(JS)で「JSON⇒YAML」変換時に完全なエスケープ戻しを目指す

Ace 1.2.6時点のバージョンは以下の流れで解決できる（はずです・・）

Ace Editorとは

言わずと知れたブラウザ上で動作するテキストエディタです。Cloud9というクラウド開発環境向けに作られたエディタなので、とっても高機能です。
詳細は: https://ace.c9.io/

日本語入力における諸問題

海外で作られているだけあり、日本語などで利用されるIME(入力補助機能)は例外視されがちです。環境によっては一部変換操作において、Enterで確定しない限り未確定文字が繰り返し出現したり、実装に踏み切ることができなかったケースも少なくないでしょう。
最近（私が確認した時点で）はクリティカルな問題は解消されていますが、まだ、日本語を扱う場合にストレスになる問題が残っていました。

日本語入力時のちらつきとは

IMEモードでキー入力する度に左へカクカクする現象。四角文字が出たり消えたりする事によりちらついているように見えます。
IME制御上は問題ないですが、日本語入力をする上でストレスとなる現象です。

以前はフォントの指定によって発生する事象でしたが、ブラウザのバージョンアップによって顕著になっているようです。

試行、再現が確認できる環境

Ace 1.2.6 (当時最新ビルド,https://github.com/ajaxorg/ace-builds)
Windows10 (標準のIME)
Chrome, Firefox

事象と対策

四角文字の正体は[SOH(x01)]Start Of Headingという制御コードが機種依存文字扱いで表示されている事。

該当の制御コードにあたる文字のみを収録したウェブフォント(.woff)を作成、もちろんx01は横幅0にしています。

CSS定義でフォント定義及び上書きを行う事により対応。

ace_ime_jp_font.css

  /* IME Fix */
  @font-face {
    font-family: 'ime_jp_rp';
    src: url('path/to/ime_jp_rp.woff') format('woff');
  }
  .ace_editor > .ace_text-input {
	padding-top: 1px;
	padding-left: 1px;
	letter-spacing: 1px;
	font-family: ime_jp_rp, Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
  }

※CSSは適宜調整となります。
結果→ライブデモはこちら( http://grepreptips.ltside.com/ )

まとめ・ソースコード

① 以下のフォントファイルをダウンロード、任意の公開領域に配置
http://grepreptips.ltside.com/ime_jp_rp.woff
（ライセンスはApacheLicense(2.0)に準拠します）

② CSSでフォントを定義。

ace_ime_jp_font.css

  /* IME Fix */
  @font-face {
    font-family: 'ime_jp_rp';
    src: url('path/to/ime_jp_rp.woff') format('woff');
  }
  .ace_editor > .ace_text-input {
	padding-top: 1px;
	padding-left: 1px;
	letter-spacing: 1px;
	font-family: ime_jp_rp, Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
  }

「path/to/ime_jp_rp.woff」は①で指定された位置を指定。