20
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Vue.jsで自動カナ入力する。 autokanaの導入で奮闘してみた。

Last updated at Posted at 2018-06-06

2019/01/26 追記

当初は、これで満足をしていましたが、iPhoneでの入力に問題があることがわかりました。
フォームのふりがなを自動入力する vanilla-autokanaですと、iPhoneでも入力不具合がでませんでしたので、活用させていただいています。

はじめに

アカウントの登録画面を作っていると、名前とふりがなの入力欄がでてきます。
スマホ全盛の時代なので、ふりがななんて入力が面倒なので省かれたりもします。

しかし、偉大なる先人が作られた
jQuery.autokana ~ https://github.com/harisenbon/autokana
があるので、

「ふりがな」は自動で入るでしょ!

って要望も多くいただきます。

さて、jQueryで作っていたときは、そのままサクッと使わせていただいていました。
ほんとに感謝です。

しかし、Vue.jsで作るようになって、困りました。。。。汗

そして検索しまくってたどり着いたのがこちら。。。
http://sui.hateblo.jp/entry/2015/03/30/082621

React向けの記事ですが、ReactもVue.jsも大きく見れば一緒でしょ!
ってことで使ってみました(笑)

せっかちな人向け

簡単なデモとサンプルは以下にありますので、ソースを見てもらればすぐわかると思います。

デモ画面: https://idani.github.io/vue-autokana/
ソース: https://github.com/idani/vue-autokana-sample

2018-06-07_01h27_19.gif

ソース解説?

Vueプロジェクトのテンプレ作成

# vue init webpack xxxxx

historykanaの導入

# npm i historykana --save

vueファイル

ソースをまんま貼り付けますが、こんな感じです。

helloworld.vue
<template>
  <div class="hello">
    漢字:<input type="text" v-model="name" v-on:input="update_furigana">
    ふりがな:<input type="text" v-model="furigana">
  </div>
</template>

<script>
import historykana from 'historykana'
export default {
  name: 'HelloWorld',
  data () {
    return {
      name: '',
      furigana: '',
      history: []
    }
  },
  methods: {
    update_furigana (input) {
      this.history.push(input.target.value)
      this.furigana = historykana(this.history)
    }
  }
}
</script>

hisotrykanaに渡すための入力ヒストリ配列として、「history」があります。
「漢字」と書いてあるInput欄に入力イベントが発生するたびに、v-onで定義した、「update_furigana」メソッドが呼び出されます。

「update_furigana」メソッドの引数の「input」は、v-on側には書いていませんが、$event(イベントオブジェクト)が来ています。

Vue.jsの特性なのか、「update_furigana」メソッドは入力中の確定前も呼び出されますが、v-modelで設定している「this.name」には、確定前の文字が入ってきません。

このためinputと定義しているイベントオブジェクトから入力確定前の文字を取得して、historyに入れています。

そして、historykanaを使ってフリガナを抽出しています。

まとめ

こんな感じで、Vue.jsでも簡単にフリガナの自動入力ができるようになりました。
先人のソースに感謝です。

参考URL

20
25
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?