autoRuby.jsをDISってみる
http://ceo.sourcelab.jp/archives/97
ちょうどRubricksのユーザやグループの読み仮名の仕様を見直している際にこの記事がホッテントリにあったので興味を持った。着眼点はとても素晴らしい。ギミックはありがちと謙遜されているが、自分は今までWEBアプリでは見たことがなかった。しかし、導入も視野に入れてコードを読んでみたらこれが実にいただけない。
1. 編集候補の切換時、平仮名を含む候補が出る度にカナが追加されていく
2. 名前用、カナ用のテキストボックスを各1つしか指定できないため複数設置が不可能
3. 設定のためにJSファイルを編集しなければならない
4. ライセンスが記述されていないので開発者としては使いにくい
5. グローバル領域の関数・変数で構成されているので変数名衝突の可能性が高い
6. タイマー流しっぱなし(その割にsetIntervalじゃなくてsetTimeout)
7. 'name'と'ruby'というDOM-IDがハードコーディングされている (バグなのですぐ修正されると思う)
番号が少ないほど導入の障壁になると個人的には感じる。少なくとも4以下はどうにかしたい。というわけで、これらを解消するものをスクラッチで書いてみた。
▼ サンプルサイト
AutoKanaサンプル
▼ ライセンス
MIT
(近いうちにSpinelzに格納)
▼ 動作確認済の環境
WindowsXP-Fx3
WindowsXP-IE7
▼ 使用法
1. 任意の場所で「prototype.js」及び「autoKana.js」を読み込む
2. new AutoKana(name_id, kana_id, options);
name_id : 名前を入力するテキストボックスのID
kana_id : かなを入力するテキストボックスのID
options : オプション
katakana => true/false (カタカナで表示する/ひらがなで表示する)
toggle => true/false (かな補完機能の切換を可能にする/しない) ※ 2008/07/04追加
▼ HTMLコード例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AutoKanaサンプル</title>
<script src="./javascripts/prototype.js" type="text/javascript"></script>
<script src="./javascripts/autoKana.js" type="text/javascript"></script>
<style type="text/css">
dl dt {
clear: left;
float: left;
width: 5em;
}
dl dd {
margin: 0 0 0 5em;
}
</style>
</head>
<body>
<form id="auto_kana_form_1" method="POST">
<dl>
<dt>名前</dt>
<dd><input type="text" id="auto_kana_name_1" size="48" /></dd>
<dt>かな</dt>
<dd><input type="text" id="auto_kana_kana_1" size="48" /></dd>
</dl>
</form>
<form id="auto_kana_form_2" method="POST">
<dl>
<dt>名前</dt>
<dd><input type="text" id="auto_kana_name_2" size="48" /></dd>
<dt>カナ</dt>
<dd><input type="text" id="auto_kana_kana_2" size="48" /></dd>
</dl>
</form>
<form id="auto_kana_form_3" method="POST">
<dl>
<dt>名前</dt>
<dd><input type="text" id="auto_kana_name_3" size="48" /><input type="checkbox" id="auto_kana_toggle_3" onclick="auto_kana_3.toggle(event);" checked="checked" /><label for="auto_kana_toggle_3">On/Offのスイッチを直接記述したい場合</label></dd>
<dt>かな</dt>
<dd><input type="text" id="auto_kana_kana_3" size="48" /></dd>
</dl>
</form>
<script type="text/javascript">
var auto_kana_1 = new AutoKana('auto_kana_name_1', 'auto_kana_kana_1');
var auto_kana_2 = new AutoKana('auto_kana_name_2', 'auto_kana_kana_2', {katakana:true, toggle:false});
var auto_kana_3 = new AutoKana('auto_kana_name_3', 'auto_kana_kana_3', {toggle:false});
</script>
</body>
</html>
▼ 残課題
1. 一発変換できない名前の場合、逆に入力の邪魔になる可能性がある
⇒ 補完機能をOn/Off可能にしてみた ※ 2008/07/04追加
2. オートコンプリートでの入力に対応できていない
3. ロジックがまだまだ不完全、というかすっきりしてない
▼ 一部修正
夜のDiscoveryにて指摘頂いた件に対応。prototype-1.6だとIE6で動かなかった模様。※ 2008/08/13追加
▼ 関係各所
・Kuwa.net
2005/05/08 autoRuby.jsの原型を公開
・小柄な人
2005/10/27 「Kuwa.net」さんのコードを改良したものを公開
・ホームページ制作・運営のヒント
2008/07/01 「小柄な人」さん等を参考にautoRuby.jsを公開
・a_horuruの適当なJSジャンクプログラム日記
2008/07/02 autoRuby.jsを改良したものを公開
2008/07/04 autoRuby.jsに形態素解析を合わせたものを公開
2008/07/11 形態素解析＋人名DBで類似の機能を実現するものを公開
・memo wiki +
2008/07/03 autoKana.jsをjQuery版にしたものを公開
・tech.kayac.com
2008/07/07 イベントドリブンな読み仮名自動入力JSを公開
