最近文章を書くときはほぼ全てBracketsで書いています。コードだけではなくテキスト、というかMarkdown形式なんかもこれ使ってますね。MarkdownPreviewというエクステンションもあります。

Bracketsにある二つの日本語の不具合

今までも[アイコン]Adobe Brackets の携帯ストラップを作ってみたという記事を書いている割りとべた惚れのBracketsなんですけど、残念なことにこいつには日本語入力時の二つのかなり厄介な不具合があります。

まず変換時の変換候補選択中、現在候補となっている変換が見た目上適用されないというもの。これが地味に不便。デフォルトのIMEだとまだマシらしいんですけど、Google IMEだともっとおかしいらしいです。今回こっちは割愛(解決できないので)。

もう一つは日本語を入力しているとき、なぜかカーソルの内部的な位置と表示上の位置がどんどんずれていくというもの。これに至ってはまともに入力できないレベルなんですけど、私はもう慣れました(そこまでして使う必要ないだろって感じですけど)。

カーソルのズレ対策

で、後者の不具合については対応策があります。

起きている現象

まずどうズレるのかですけど、日本語の入力をしていると段々カーソルが実際の位置よりも前に出てきます。

カーソルが実際の位置とずれている

こうなると、入力しているところよりも手前に文字が打ち込まれてしまって、わかりにくい。改行するたびにズレはリセットされます。これは普通に書いているときならそんな困らないんですけど、ちょっと戻って修正するときに凄く困ります。

ずれるときとずれないときがあるんですが、これはどうやら日本語の入力中に英語の入力を行うとズレることが多いようなんですね。

対策

日本語の入力のズレをCSSで解決する

Bracketsのパッケージの内容を開き、「Contents→www→thirdparty→CodeMirror2→lib→codemirror.css」を開き、CSSのプロパティを書き換えます。

.CodeMirror-wrap pre {
word-wrap: break-word;
white-space: pre-wrap;
word-break: normal;
}

.CodeMirror-wrap pre {
word-wrap: normal;
white-space: pre-wrap;
word-break: break-all;
}

単語等の改行を途中で行うかどうかを決めるword-wrapプロパティを変更したうえで、単語の改行ルールを決めるword-breakプロパティを全てオンにすると、カーソル位置が変にズレる現象がなくなります。

考察

BracketsはSublime Text2との恋を見送り、Adobe Bracketsに巡り会いましたの記事で解説したとおり、HTML+CSS+JavaScriptで出来たコードエディタです。なので、変なところや気に入らないところがあったらこのように自分で修正することが出来ます。アップデートがあると上書きで書き変わっちゃいますけど、別のCSSに変更を書いておいて、都度埋め込みのコードを追加すればそこまで手間でもないかなと思います。もっと上手いやり方がありそうですけど、カスタマイズには興味がないのでそこまでは突き詰めなかったです。

要はBracketsはハイブリッドアプリのようなモノで、アプリのインターフェイスはブラウザのレンダリングの結果と一緒なわけです。で、通常のブラウザであれば表示部分に行う句読点、英単語の改行時の禁則処理などまで丁寧に行った結果、実際の入力文字数のカウントと見た目がずれてしまっているんではないかなーと思います。

つまりズレ自体はバグなわけで、プログラミングの問題なわけですけど(ですよね？)、そもそも入力部分まで禁則処理がかかってる必要はないはずなので、CSSをいじるというこの対応で合ってると思ってます。

これが解決することで日本語入力について大きくまともなエディタに近づいたんじゃないかなと思います！今後の更新で適用されてくれればありがたいんですが…ちょっとAdobeにメールしてみようかなw