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

Facebooktwittergoogle_plus

ある会員サポートの業務用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で受け取ったカタカナをカナフィールドに入れる。

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

フォーム部分:

mecab.php:

以上です。