Rubricks Project このページをアンテナに追加 RSSフィード

Rails製CMS Rubricksの開発についてつらつらと書き連ねるブログです

2008-07-02 autoRuby.jsをDISってみる

autoRuby.jsDISってみる

フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント

ちょうどRubricksのユーザやグループの読み仮名の仕様を見直している際にこの記事がホッテントリにあったので興味を持った。着眼点はとても素晴らしい。ギミックはありがちと謙遜されているが、自分は今までWEBアプリでは見たことがなかった。しかし、導入も視野に入れてコードを読んでみたらこれが実にいただけない。


1. 編集候補の切換時、平仮名を含む候補が出る度にカナが追加されていく

2. 名前用、カナ用のテキストボックスを各1つしか指定できないため複数設置が不可能

3. 設定のためにJSファイルを編集しなければならない

4. ライセンスが記述されていないので開発者としては使いにくい

5. グローバル領域の関数・変数で構成されているので変数名衝突の可能性が高い

6. タイマー流しっぱなし(その割にsetIntervalじゃなくてsetTimeout)

7. 'name'と'ruby'というDOM-IDがハードコーディングされている (バグなのですぐ修正されると思う)


番号が少ないほど導入の障壁になると個人的には感じる。少なくとも4以下はどうにかしたい。というわけで、これらを解消するものをスクラッチで書いてみた。


ソースコード

autoKana.js


▼ サンプルサイト

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を公開

uta

auto_ruby.js中の人auto_ruby.js中の人 2008/07/03 09:53 auto_ruby.jsの中の人です。
コメントありがとうございました。

書かれてあるコード拝見させていただきました。
なるほどー。勉強になります。

正直、私レベルでは読むのに一苦労。

残課題の
1に関しては、他のアプリケーションでも同様なんで、許容レベルじゃないでしょうか。
2に関しては、解決法が思いつきません。日本人の名前の漢字と読みの全部をDBに持っておくとか・・・でも、オートコンプリートのイベントが取得できないかも。

rubricksrubricks 2008/07/04 08:38 >中の人
あ、ご来訪頂きありがとうございます。
そうですねぇ、1・2に関しては「課題」としておきながら自分でも解決の糸口すら思い浮かばない状態なのです。

個人的には1が解決できれば十分かなとは思っています。2に関しては名前をオートコンプリートするならカナもするだろうから、そもそも入力自体しないんじゃないかな、と。昨夜も少しいじってみたんですが、一筋縄ではいきそうにないですね。

a_horurua_horuru 2008/07/11 21:24 こんばんは。

また性懲りも無く2例を試作してしまいましたので、ご報告に伺いました。

http://d.hatena.ne.jp/a_horuru/20080711/1215778413

あらぬ方向へ突き進んではおりますが、ご覧になっていただければ幸いです。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証