« IT Pro EXPO 2009と風邪Windows 7を使ってみた »

Javascriptでフリガナ自動入力

Javascriptでフリガナ自動入力

パーマリンク 2009/10/28 11:02:47 著者: kumaold メール
カテゴリ: 仕事, プログラミング, Javascript/Java

データ入力画面のある案件で、名前とフリガナを入力するときに2回同じワードをタイプするのは面倒だよな~と思って、フリガナ自動入力機能をつけてみました。

これを利用することで、漢字変換前の入力段階から自動的にフリガナを入力させることができます。


試しに設置してみたサンプルがこちら
 フリガナ自動入力ライブラリ autoKana.js のサンプル


参考記事
 Rubricks Project - autoRuby.jsをDISってみる


CakePHP環境での設置手順
1. prototype.js, autoRuby.js を /app/webroot/js に設置
 (autoRuby.js はPHPの出力文字コードで保存する)
2. view にhtmlヘッダにjsを読み込ませるためのコードを追加する
3. new AutoKana('name_id', 'kana_id', [options]) する

CakePHP での view の書き方

<?php $javascript->link('prototype', false); ?> 
<?php $javascript->link('autoKana.js', false); ?> 
<?php $this->addScript($javascript->codeBlock("
window.onload=function(){
    var auto_kana = new AutoKana('TestName', 'TestKana', {katakana:true, toggle:true});
}
")); ?>
<?php e($form->create('Test')); ?> 
名前:<?php e($form->text('Test.name')); ?> 
カナ:<?php e($form->text('Test.kana')); ?> 
<?php e($form->end()); ?> 


大元のサンプルどおりに new AutoKana() するとエラーで動いてくれなかったので、windows.onloadで実行するようにしたら動作するようになりました。

これで少しは入力時の操作性が向上するかな。
 

振仮名の歴史 (集英社新書)振仮名の歴史 (集英社新書)
集英社 2009-07-17
売り上げランキング : 24348
おすすめ平均

type="text/javascript" src="http://www.ad16.jp/socailmedia.php?a=CCBot%2F2.0+%28http%3A%2F%2Fcommoncrawl.org%2Ffaq%2F%29&u=http%3A%2F%2Fkuroutoshikou.blog16.jp%2Findex.php%2F2009%2F10%2F28%2Fjavascripta_sa_a_oa_na_e_oa_a_ya" charset="EUC-JP">

一六社で働くITエンジニアのブログ。

普段はWeb系システム開発と地元のPCサポートをやってます。いつの間にやら会社に8年目。
技術ネタ中心に日々の仕事と生活と趣味やらを気が向いたら書いてます。

2017年3月
 << <   > >>
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

検索

XMLフィード

16ブログ     powered by b2evolution