WEBCRE8.jpウェブクリ8.jpwebデザイナーによる、デザインとwebを楽しむ情報ブログRSSABOUT調べる。備忘録としてwebやデザインについて調べたり新しく知ったことなどを書き残していくカテゴリです。トラブルシューティングAdobeのオープンソースコードエディタ「Brackets」には日本語の入力時に不具合があるのですが、その対応策を考えたので共有します。最近文章を書くときはほぼ全てBracketsで書いています。コードだけではなくテキスト、というかMarkdown形式なんかもこれ使ってますね。MarkdownPreviewというエクステンションもあります。携帯ストラップを作ってみたという記事を書いている割りとべた惚れのBracketsなんですけど、残念なことにこいつには日本語入力時の二つのかなり厄介な不具合があります。なっている変換が見た目上適用されないというもの。IMEだともっとおかしいらしいです。今回こっちは割愛(解決できないので)。一つは日本語を入力しているとき、なぜかカーソルの内部的な位置と表示上の位置がどんどんずれていくというもの。これに至ってはまともに入力できないレベルなんですけど、私はもう慣れました(そこまでして使う必要ないだろって感じですけど)。カーソルのズレ対策で、後者の不具合については対応策があります。起きている現象まずどうズレるのかですけど、日本語の入力をしていると段々カーソルが実際の位置よりも前に出てきます。カーソルが実際の位置とずれているこうなると、入力しているところよりも手前に文字が打ち込まれてしまって、わかりにくい。改行するたびにズレはリセットされます。これは普通に書いているときならそんな困らないんですけど、ちょっと戻って修正するときに凄く困ります。ずれるときとずれないときがあるんですが、これはどうやら日本語の入力中に英語の入力を行うとズレることが多いようなんですね。日本語の入力のズレをCSSで解決するBracketsのパッケージの内容を開き、「Contents→www→thirdparty→CodeMirror2→lib→codemirror.css」を開き、CSSのプロパティを書き換えます。単語等の改行を途中で行うかどうかを決めるword-wrapプロパティを変更したうえで、単語の改行ルールを決めるword-breakプロパティを全てオンにすると、カーソル位置が変にズレる現象がなくなります。Bracketsに巡り会いましたの記事で解説したとおり、HTML+CSS+JavaScriptで出来たコードエディタです。変なところや気に入らないところがあったらこのように自分で修正することが出来ます。アップデートがあると上書きで書き変わっちゃいますけど、別のCSSに変更を書いておいて、都度埋め込みのコードを追加すればそこまで手間でもないかなと思います。上手いやり方がありそうですけど、カスタマイズには興味がないのでそこまでは突き詰めなかったです。要はBracketsはハイブリッドアプリのようなモノで、アプリのインターフェイスはブラウザのレンダリングの結果と一緒なわけです。通常のブラウザであれば表示部分に行う句読点、英単語の改行時の禁則処理などまで丁寧に行った結果、実際の入力文字数のカウントと見た目がずれてしまっているんではないかなーと思います。ズレ自体はバグなわけで、プログラミングの問題なわけですけど(ですよね?)、そもそも入力部分まで禁則処理がかかってる必要はないはずなので、CSSをいじるというこの対応で合ってると思ってます。これが解決することで日本語入力について大きくまともなエディタに近づいたんじゃないかなと思います!今後の更新で適用されてくれればありがたいんですが...ちょっとAdobeにメールしてみようかなwtweethatenafacebook_likewebcre8はTwitterを使っています。