Javascript プログラミング

textareaへの入力で日本語の括弧を自動補完させる

日本語の括弧の入力が面倒くさい

VS codeなどの開発用のエディタの多くは、クォーテーションや括弧の前だけを入れれば後ろは自動補完してくれます。

日本語の文章を書く時にもこれが欲しいなぁと思っていました。

日本語の場合、変換が絡むので余計に面倒です。

括弧やクオーテーションを中の文字と一緒に入力すると、別の括弧類に変換されて困ったりします。

このため、まず括弧類を「」のように単体で入力しておき、カーソル位置をひとつ戻して中身を入力することが多くなります。これって感覚的にも不自然でちょっと居心地が悪いです。

そんなわけで括弧類の前半だけを入力すれば、後ろ半分は自動補完して、カーソルを括弧の間に置いてくれるWebアプリを作ってみました。

 

すぐに試してみたい方は、こちらへ。

Japanese Quote Auto Completion (github pages)

ソースコード（github）

 

compositionstartとcompositionendでIMEの動作を監視できる

そもそもそんなことできるのかなと、調べてみると textareaなどの入力要素で "compositionstart", "compositionend" というイベントを使えばIMEの動作を監視できることが分かりました。

例えば、input_element という要素に対して，以下のようにイベントをセットします。

 javascript
//入力開始時にコンソールに表示
input_element.addEventListener('compositionstart', function (e) {
console.log("input start!");
}

 

また、compositionend でたは e.data でIMEで確定した文字列が取得できます。

 html
//確定した文字列をコンソールに表示
input_element.addEventListener('compositionend', function (e) {
conole.log(e.data);
}

 

今回のアプリでは、この文字列をswitch文でチェックして、前括弧であれば補完するようにしています。

このイベントが素晴らしいのは、IME専用イベントなので半角直接入力は無視できることです。

 

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Japanese Quote Auto Completion</title>

  <style type="text/css">
    #text-area {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <h1>日本語の括弧類を自動補完する</h1>
  <p>テキストエリアに「　”　【　などの前括弧類を単体で入力すると、後ろ括弧を自動補完してカーソルを間に置きます</p>
  <textarea name="" id="text-area" cols="30" rows="10"></textarea>

  <script>
    window.addEventListener('DOMContentLoaded', function () {
      const input_element = document.getElementById('text-area');

      // 入力終了時に内容をチェックして置き換える
      input_element.addEventListener('compositionend', function (e) {
        const data = e.data;
        switch (data) {
          case "「":
            complete_quote(input_element, '」');
            break;
          case "\”":
            replace_quote(input_element, '“”');
            break;
          case "｛":
            complete_quote(input_element, '｝');
            break;
          case "『":
            complete_quote(input_element, '』');
            break;
          case "’":
            replace_quote(input_element, '‘’');
            break;
          case "【":
            replace_quote(input_element, '】');
            break;

          case "［":
            replace_quote(input_element, '］');
            break;
          case "（":
            replace_quote(input_element, '）');
            break;

          default:
            break;
        }

      });

      //後ろに補完する関数
      function complete_quote(element, charactor) {
        const content = element.value;
        const len = content.length;
        const pos = element.selectionStart;
        element.value = content.substr(0, pos) + charactor + content.substr(pos, len);
        element.setSelectionRange(pos, pos);
      }

      //そっくり入れ替える関数
      function replace_quote(element, charactor) {
        const content = element.value;
        const len = content.length;
        const pos = element.selectionStart;
        element.value = content.substr(0, pos - 1) + charactor + content.substr(pos, len);
        element.setSelectionRange(pos, pos);
      }
    });

  </script>

</body>

</html>

 

補完と置き換えを使い分け

日本語の場合、キーボードから入力すると後ろ括弧になるものがあります。

例えば「”」や「’」といった全角のクオーテーションです。

これに関しては、前を補完する必要があるので別の関数で処理しています。処理としては、補完ではなくペアに置き換えています。

CodePenで動かしてみました。

See the Pen
Complement Japanese parentheses by Ryoji Kimura (@ryjkmr)
on CodePen.

 

使ってみた感じは、ちょっと慣れが必要ですがなかなか良いです。

WordPressのエディタでも使いたいなぁ。入力欄のIDが分かればブックマークレットで対応できないかな。

とりあえず「ちょいメモ」に組み込んでみようと思います

一番使ってる自作アプリ、保存できないメモ「ちょいメモ」

ちょっとテキストを書いたりコピペしたいんだけど、エディタやワープロを立ち上げるのもかったるい。というときにブラウザ上でさくっとメモが取れるWebアプリです。保存機能がないが特徴。単純なコードなので欲しい機能は自分でどんどん追加できます

続きを見る

 

-Javascript, プログラミング