AngularでautoKanaみたいなの実装

2019年5月28日2020年2月7日

• 以下を参考に、実装してみました

historykanaのinstall

npm install historykana

component.tsでの実装

• importの追加

import * as historyKana from 'historykana';

• 入力履歴と変換後のカナを入力する変数用意

  history: string[] = [];
  kana = '';

• historyの登録、入力文字⇒カタカナ変換処理

  public onInput(value: string){
    if(value === '')
    {
      this.history = [];  
    }
    else
    {
      this.history.push(value);
    }
    this.kana = historyKana(this.history);
  }

component.htmlでの実装

• inputとkana出力側の記載

<div>
  <div>
    <label>input:</label>
    <input #box id="name" type="text" (input)="onInput(box.value)">
  </div>
  <label>kana:</label>
  <input id="kana" type="text" [(ngModel)]="kana">
</div>

上記で問題なく動きました。 もしひらがなじゃなくて、カタカナにしたい場合には、以下のような形で行けると思います。

• ひらがな⇒カタカナにするメソッド用意

  hiraToKana(hira: string): string {
    return hira.replace(/[\u3041-\u3096]/g, function(match) {
      var chr = match.charCodeAt(0) + 0x60;
      return String.fromCharCode(chr);
    });
  }

• component.tsの記載修正

this.kana = historyKana(this.history);

↓

this.kana = this.hiraToKana(historyKana(this.history));

こんな感じで行けるかと思います。 hiraToKanaメソッドはどっかサービスクラスに作っておいてどこからでも呼び出せるようにしておけばよいかと思います。 私が実装したときには、上記のままだと以下のようなエラーが発生しました。

global is not defined

同じようなエラーが発生したら、polyfills.tsに以下を追加すれば行けるかと思います。

 // "global is not defined"の対応
(window as any).global = window;

軽く動作確認はしていますが、いろいろ試すうちに変な挙動するかもしれませんのでお気を付けください。

今の所確認できている不具合

• 入力中にカタカナに勝手に変換される(macだとなる？)と、カタカナに変換されて以降の入力がうまく変換されないっぽい。
• ライブ変換っていうらしいですね。これが走っちゃうとひらがなとしてhisotoryに追加されないからうまく行かないのかと思います。

ソースはgitに上げてます https://github.com/kanazawanao/angular-auto-kana-sample