住所の漢字入力をリアルタイムでカタカナにも表示してみた

Facebooktwitter

ある会員サポートの業務用WEBアプリを管理していますが、漢字で住所を入力ながら自動的にカタカナも別の入力フィールドに入れられないかと言う依頼がきました。
この仕様、実は6年前に断った仕事です。

当時難しく考えすぎてて、IMEが変換する前のキーコードをJavaScriptで横取りし、それをリアルタイムでカタカナに置換できないかなんて考えていました。
見積にも∞の数字をいれて担当者をこまらせたものです。はは。

さて、今回同じ依頼が来たときに、100％は期待できないですが、という前提で別の方法を思いつきました。漢字変換済みの文字列をAJAXでサーバに送り、サーバ側でカタカナに変換したものを受け取って、カタカナのフィールドに入れればできそうですね。

【準備するもの】

  • サーバ側：　mecab（形態素解析エンジン）
    kakasiとmecabのどちらがいいか迷いましたが、「長野市北尾張部」を正しくカタカナに変換できたmecabを採用しました。ダウンロードとインストール方法ははこちらから。ちなみに、普通にすんなりコンパイル/インストール出来ました。
  • サーバはCentOS5です。
  • クライアント側：jQuery
    必須ではないですが、今更非同期通信部分を自分で書くつもりはありません。これもprototype.jsとどちらがいいか迷いましたが、ま、時流です。prototype.jsの方がフットプリントが小さいので好きなんですが。。。


【手順】

  1. 住所に入力し、EnterキーかBack Spaceキーが押されたらデータをJavaScriptでサーバに送信
  2. サーバ側ではpostで受け取った住所をmecabでカタカナに変換し、ブラウザに返す。
  3. JavaScriptで受け取ったカタカナをカナフィールドに入れる。

実際のソースコードはこうなります。
ヘッダ部分:

    <script type="text/javascript" src="lib/jquery/js/jquery-1.5.1.min.js"></script>
    <!-- jqueryのパスは実際の環境に合わせて下さい -->
    <script>

    $(function() {
    $('#address').keyup(function(event) {
    var kc = event.keyCode;
    if (kc == 13 || kc == 8 ) { //EnterかBack Spaceキーが押されたらフォームを送信
    var post_data = $("#form1").serialize();//入力フィールドが２つしか無いので全部送ってる。手抜き
    $.post('mecab.php', post_data,//postで送信
    function(data) {
    $('#kana').val(data);//戻ってきた文字列をkanaフィールドの値にセット
    }
    );
    }
    });
    $('#address').focus();//小さな親切
    });

    </script>

フォーム部分:

    <form id="form1" name="form1" >
    住所：<input name="address" id="address" autocomplete="off" size="60" type="text" /><br />
    カナ：<input name="kana" id="kana" autocomplete="off" size="60" type="text" /><br />
    </form>

mecab.php:

    <?php
    $macab = '/usr/local/bin/mecab';

    $text = $_POST['address'];
    $text = mb_convert_encoding($text, 'euc', 'utf8');//mecabはデフォルトではEUCで動作
    exec("echo ".$text." | ".$macab." -Oyomi", $hiragana, $res);

    print mb_convert_encoding($hiragana[0],'utf8', 'euc');
    ?>

以上です。