読者です 読者をやめる 読者になる 読者になる

ひ孫

犬のこととか書いていきたい

ReactでautoKanaみたいなことやるやつ作った

node.js reactjs javascript

まだまだβな感じだけどあらかた出来たので晒していく。

できたもの

React以外では試していないが、おそらくcoreとして独立させたhistorykana方は他の2way-bindingなフレームワークでも使える気がする。

作った動機

  • この記事で紹介されているような自動カナ入力を、Reactでやりたいと思った。
  • 頑張ればjquery.autokanaを使うことも出来そうかなとも後で思ったけど、割りと最終手段感がある。
  • autokana, autoruby共にモバイル時代のものではないので、スマホの入力に耐えられるものではなさそうだった。

使い方

Readmeにざっくりソースは書いたが、重要な所を抜粋するとこんな感じ

var Example = React.createClass({
  onUpdateKana(data){
    this.setState({
      kana : data.kana
    })
  },
  render(){
    return (
      <div>
        <div>
          <AutoKana onUpdate={this.onUpdateKana} />
          <input value={this.state.kana} />
        </div>
      </div>
    )
  }
})
  • AutoKanaのモジュールの中身はInput。ただしそのinput自体はカナの変換元(例えば漢字の名前)が入力される想定
    • 正直ここのあたりは若干悩んだ。AutoKanaといいつつカナを入力するフィールドがあるわけではないんだよなあという。
    • 結果、カナが入力されるようなinputフィールドまでAutoKana側で持ってしまうと若干重い気がしたのでカナ自体は外で受け取る形にした。
  • <AutoKana>がカナを特定した際にonUpdateが発火され、kanaというプロパティでカナ入力を受け取れる仕組み。あとは外でお好きにという感じ。
  • 今のところカタカナにするオプションはつけていない
    • japaneseモジュールを使えば簡易にカタカナに変換できる。

以下おまけ

historykana(coreライブラリ)でやっていること

今回実装する上で、下記の思想にもとづいて実装を考えた

  • Reactであれば、全ての連続的な入力が取得できる。
  • 入力履歴を全て追っかければふりがなが抽出できるはず。
    • 全てといっても前提としてそんなにふりがなとして組み立てる文字数は長くないはず(履歴といってもたかが知れているはず)

なのでcoreライブラリは、 入力履歴をもらってふりがなを抽出する。 というシンプルな仕組みにしている 当然これは元祖のautoKanaやautoRubyとはだいぶ違っているし、富豪的なプログラミングの仕方をしている。

だいたいの処理の流れ

下記のような感じで入力の履歴をバババッととっていく。

["", "あ", "あk", "あか", "赤", "赤あ", "赤あお", "赤青", "赤k青", "赤き青", "赤きい青", "赤きいr青", "赤きいろ青", "赤黄色青"]

これをなんやかんやして、各漢字の変換の区切り位置を抽出する。 だいたいこんな感じ

[ [ '赤', 'あか', 'あk', 'あ', '' ],
  [ '黄色', 'きいろ', 'きいr', 'きい', 'き', 'k' ],
  [ '青', 'あお', 'あ' ] ]

ここから各要素のひらがなで一番最新のを抽出すると、こうなる

あかきいろあお

やった!ひらがなが取り出せた!こんな感じ。

Google IMEなどでは「よしお」などの変換候補の中に「よしを」があったりする部分など、細かい問題はなるべくはうまいこと補正をかけたりしている。 作成途中にそれなりにパターンは試したのでそれほどおかしな挙動はしない・・・はず・・・

学びとか感想とか

  • Reactのテストは思ったよりスマートでもなかった。けどできるのはやっぱ良い。
  • Reactのパッケージ、そのままjsxで配布している形にしているけどあっているのか割りと不安。
  • 日本語入力、世界で多分このモジュールが必要なの日本語だけ?なので情報が当然無い。
  • しかし意外と日本語関連のモジュールはnpmで充実していたりする。