すごく面白い機能だね。
■ autoRuby.jsをDISってみる
http://d.hatena.ne.jp/rubricks/20080702/1215003705
フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント
ちょうどRubricksのユーザやグループの読み仮名の仕様を見直している際にこの記事がホッテントリにあったので興味を持った。着眼点はとても素晴らしい。ギミックはありがちと謙遜されているが、自分は今までWEBアプリでは見たことがなかった。しかし、導入も視野に入れてコードを読んでみたらこれが実にいただけない。
1. 編集候補の切換時、平仮名を含む候補が出る度にカナが追加されていく
2. 名前用、カナ用のテキストボックスを各1つしか指定できないため複数設置が不可能
3. 設定のためにJSファイルを編集しなければならない
4. ライセンスが記述されていないので開発者としては使いにくい
5. グローバル領域の関数・変数で構成されているので変数名衝突の可能性が高い
6. タイマー流しっぱなし(その割にsetIntervalじゃなくてsetTimeout)
7. 'name'と'ruby'というDOM-IDがハードコーディングされている (バグなのですぐ修正されると思う)
番号が少ないほど導入の障壁になると個人的には感じる。少なくとも4以下はどうにかしたい。というわけで、これらを解消するものをスクラッチで書いてみた。
▼ ソースコード
▼ サンプルサイト
▼ ライセンス
(近いうちにSpinelzに格納)
▼ 動作確認済の環境
WindowsXP-Fx3
▼ 使用法
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追加
▼ 関係各所
・小柄な人
2005/10/27 「Kuwa.net」さんのコードを改良したものを公開
2008/07/01 「小柄な人」さん等を参考にautoRuby.jsを公開
2008/07/02 autoRuby.jsを改良したものを公開
2008/07/04 autoRuby.jsに形態素解析を合わせたものを公開
2008/07/11 形態素解析＋人名DBで類似の機能を実現するものを公開
2008/07/03 autoKana.jsをjQuery版にしたものを公開
2008/07/07 イベントドリブンな読み仮名自動入力JSを公開
フォームのフリガナを自動入力させるAutoRuby.js
企業のホームページや、ショップのホームページ等を作る際、必ずあるのが、「お問い合わせフォーム」。
しかし、よくあるのが、入力項目が大量にあるフォーム。
これでは問い合わせをしようとした方も、面倒になり、途中で入力をやめてしまう可能性があります。
フォームをできるだけ簡潔にしたほうが、コンバージョン率は高くなります。
そこで、入力を少しでも簡潔にするために、こんなJavaScriptを作りました。
名づけて 「フリガナ自動変換スクリプト／AutoRuby.js」
ためしに、以下のフォームに名前を入力してください。
prototype.js（オフィシャル）
auto_ruby.js
Head内に読み込みます。
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="auto_ruby.js"></script>
名前のフィールドのidを[name]に、フリガナのidを[ruby]にします。
ただし、フォームのあるページはUTF-8のみの対応です。
（読み込み時 charset="Shift_JIS"で対応出来る気もしますが。）
※auto_ruby.jsの上の方に、設定項目があります。
「ふりがな（ひらがな）」で表示したい場合は、var convFlag = 0;
「フリガナ（カタカナ）」で表示したい場合は、var convFlag = 1;
にして下さい。
面倒な人の為に、サンプルファイルをZIPで固めておいておきます。
参考サイト：
http://d.hatena.ne.jp/kuwa/20051027/p1
http://d.hatena.ne.jp/shogo4405/20070929/1191052110
0 件のコメント:
コメントを投稿