autoRuby的なやつを実装してみた。今更。 #JavaScript

東京でへっぽこフロントエンドエンジニアやってるshun1982です。

近頃、所属プロジェクトで「氏名」->「フリガナ」の入力補助機能を実装することになった。。OTL
ふつふつと湧き上がる今更感は否めませんが、とりあえず個人用にメモ。。

[jquery.autoKana.js]https://github.com/harisenbon/autokana
も視野に入れたけど、なんか個人的には最終兵器的な感じがしてたので、jQuery挟んでますが、独自実装。

想定するDOM

<input type="text" name="name_first" class="js-nameFirst"> #姓
<input type="text" name="name_ruby_first" class="js-nameRubyFirst"> #セイ

こんな感じの「姓」と「セイ」のフィールド。
PCとかSPとかで、「姓」に入力してたら自動的にフリガナ入力してくれたらいいな(・∀・)

方針

考えたのは、姓の入力って、
予測変換とかでさくっと入れられちゃう場合を除いて、PC・SP・英語入力・日本語入力問わず、
田中さんだったら、「た」→「たな」→「たなか」→「田中」となる気がする。

ということで、
この「たなか」を取得すれば、あとはカタカナ変換すればいいだけだし、なんとかなるんじゃないかという予感。

コード

var autoInputNameRuby = function(inputName, inputNameRuby) {
    var ruby = $(inputName).val();
    if (ruby.match(/^[\u3040-\u309F]+$/) || ruby === '') {
        ruby = ruby.replace(/[ぁ-ん]/g, function(str) {
            return String.fromCharCode(str.charCodeAt(0) + 0x60);
        });
        $(inputNameRuby).val(ruby);
    }
};  
$('.js-nameFirst').on('keyup', function(e){
    autoInputNameRuby(e.target, '.js-nameRubyFirst');
});

こんな感じで、

keyupの度に値を取得して、ルビにするかどうかを都度見るように。
取得した値が、漢字になったらもういらない(-_-)/~~~ピシー!ピシー!
という感じにした。

なんかいい他の方法ないでしょかね。

おわり