ホームページ制作・運営のヒント

2008/7/1 火曜日

フォームのフリガナを自動入力させるAutoRuby.js

企業のホームページや、ショップのホームページ等を作る際、必ずあるのが、「お問い合わせフォーム」。

しかし、よくあるのが、入力項目が大量にあるフォーム。
これでは問い合わせをしようとした方も、面倒になり、途中で入力をやめてしまう可能性があります。

フォームをできるだけ簡潔にしたほうが、コンバージョン率は高くなります。

そこで、入力を少しでも簡潔にするために、こんなJavaScriptを作りました。
名づけて 「フリガナ自動変換スクリプト／AutoRuby.js」
ためしに、以下のフォームに名前を入力してください。

▼お名前 ：

▼フリガナ：

■設置の仕方
以下の2つのJavaScriptをダウンロードしてください。

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




ヤフー検索スタッフブログ

2008/07/02：追記
思った以上の反響ありがとうございます。
一番多かったのは、やはり（？）はてなからのアクセスでした。

さて、いくつか、ご意見に関するコメントを。

・Rubyというのは、ルビの事ですね。言語のRubyと間違えてアクセス頂いた方も多く居たようです。
・このスクリプトは、ベースは元からあります。ソレを、導入しやすいように今回焼き直しさせてもらいました。
・「実装がちょっと残念」→　すみません。生粋のプログラマじゃないので、正しい実装を知りません。良かったら、実装し直して下さい。
・「サーバーに投げた方が」→　正直、やり方が分かりません。
・「途中で間違えたら逆に面倒」→　その通りです。
・「環境によってバグる」→　うっ。
・「そんなに斬新か？」→　いや、ギミックとしてはありがちです。ただ、WEBでは今のところ多くのブラウザに対応できる方法はこれくらいしかない気がします。
・「jsが競合しなければ」→prototype.jsが競合の元なら、auto_ruby.jsの$をdocument.getElementByIdに変えれば動くと思います。
・「氏名入力はひらがなかローマ字にすればいい」→ ………その発想はなかったわ。

で、上でも書きましたが、Javascriptにそう詳しい訳でもなく。。。。
ただ、精度が上がれば便利なモノだとは思うのです。
そこで、詳しい方がいらっしゃったら、実装し直していただければ、みんな幸せになります。


  1. 意図した動作かわかりませんがフィードバックです。
    変換をするたびに文字列が追加されていきます。

    てすとと入力→変換候補を変える→てすと→テスト→てすと
    という操作をするとテキストボックスに「テストテストテスト」と入ります。

    Mozilla/5.0 (Windows; U; Windows NT 6.0; ja; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14

    コメント bytaku — 2008/7/2 水曜日 @ 3:31:13

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

    ピンバック bylinks for 2008-07-01 « 個人的な雑記 — 2008/7/2 水曜日 @ 7:42:10

  3. JavaScriptでフォームのフリガナを自動入力させる…

    http://ceo.sourcelab.jp/archives/97 すごい。… (more…)

    トラックバック bykawama.jp — 2008/7/2 水曜日 @ 11:31:26

  4. コメントありがとうございます。
    >意図した動作かわかりませんがフィードバックです。
    >変換をするたびに文字列が追加されていきます。

    >てすとと入力→変換候補を変える→てすと→テスト→てすと
    >という操作をするとテキストボックスに「テストテストテスト」と入ります。

    ああ、なるほど－。でも、普通は名前だとそういう変換はないと思うのですがいかがでしょう？

    コメント byadmin — 2008/7/2 水曜日 @ 18:45:29

  5. 入力後、変換リストを表示した後でESCでキャンセルすると同じ言葉が入るようです。

    例）
    入力：
    さとう→変換→ESC

    結果：
    サトウサトウ

    コメント byd — 2008/7/2 水曜日 @ 19:12:55

  6. はじめまして。

    この機能って簡単なようでなかなか難しいですね。

    非常に興味があったので、プログラムを一部修正してみましたが、それをこのコメントに入れるのもなんなので、勝手ながら自分の「はてな日記」に掲載させていただきました。

    コメント bya_horuru — 2008/7/2 水曜日 @ 20:28:03

  7. [Javascript][便乗ネタ]auto_ruby.js…

    これ昔チャレンジしたけど、IEでしか動かなかったのに加え、気にいらない点が多くて断念した企画だ。非常に興味深く読ませてもらったので、便乗させていただくとしようか。 フ (more…)

    トラックバック bya_horuruの適当なJSジャンクプログラム日記 — 2008/7/2 水曜日 @ 20:33:39

  8. autoRuby.jsをDISってみる…

    フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント ちょうどRubricksのユーザやグループの読み仮名の仕様を見直している (more…)

    トラックバック byRubricks Project — 2008/7/2 水曜日 @ 22:01:55

  9. 余計なお世話な気がしますが、名前の最初の三文字を入れただけで推測変換に出るので(よく入力しますから)確定すると、
    フリガナが三文字に…。

    例
    なむ → 南無阿弥陀仏
    フリガナ：ナム

    省入力・推測変換機能はけっこう前のATOKから付いている機能です。

    コメント byはと — 2008/7/2 水曜日 @ 22:48:52

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

    ピンバック byBluebeck blog - links for 2008-07-02 — 2008/7/3 木曜日 @ 0:32:59

  11. はじめまして。導入を前提に検討してみたところ、主に実装方法に関して使いづらい点がありましたので、自分でもコードを書いてみました。

    コメント byUta — 2008/7/3 木曜日 @ 7:49:46

  12. 皆様コメントありがとうございます。
    Uta様のブログにありましたが、ライセンスに関してですが、
    特に考えて居ませんでしたし、オリジナルでもありませんので、
    お好きに改変・再配布していただいて結構です。

    >d様
    ああ、なるほど。
    ありがとうございます。

    >a_horuru様
    ありがとうございます。
    あ、コメントに直接書いてもらって良かったんですけど。
    色々。確かに。ですね。
    コメントさせていただきます。

    >はと様
    推測変換については、確かにそうなんです。
    というか、私もATOKユーザーでして。。。

    >Uta様
    おお。。。内容はよく分かりませんが、ほぼ完璧ですね。
    コメントさせていただきます。

    コメント byadmin — 2008/7/3 木曜日 @ 9:33:59

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

    ピンバック bydiigo2ZerockBlog 07/03/2008 « ZerockBlog — 2008/7/3 木曜日 @ 9:34:03

  14. […] ホームページ制作・運営のヒント(http://ceo.sourcelab.jp/archives/97) […]

    ピンバック byB豚の備忘録 - フォームのフリガナを自動入力させる 「フリガナ自動変換スクリプト／AutoRuby.js」 — 2008/7/3 木曜日 @ 13:40:54

  15. 面白いですね。
    phpspotから飛んできました。

    コメント byひでまん — 2008/7/3 木曜日 @ 15:21:34

  16. […] 企業のホームページや、ショップのホームページ等を作る際、必ずあるのが、「お問い合わせフォーム」。 しかし、よくあるのが、入力項目が大量にあるフォーム。 これでは問い合わせをしようとした方も、面倒になり、途中で入力をやめてしまう可能性があります。 フォームをできるだけ簡潔にしたほうが、コンバージョン率は高くなります。 そこで、入力を少しでも簡潔に… original article […]

    ピンバック by次なるもの » Blog Archive » フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント — 2008/7/4 金曜日 @ 1:02:50

  17. すみません。また勝手に改造してしまいました。

    実用性はさておき、面白い動きをするようになったと思います。

    コメント bya_horuru — 2008/7/4 金曜日 @ 22:49:32

  18. わずかなコードでフリガナを自動入力するjavaScript「…

    何かを登録する際、フォームでは必ずと言っていいほど、名前とフリガナを入力しなければいけません。今回紹介するるjavaScript「AutoRuby.js」はそんなフォー (more…)

    トラックバック byDesignDevelop — 2008/7/5 土曜日 @ 17:22:11

  19. こんにちは、こちらのコメント経由でa_horuruさんのスクリプトも拝見しました。形態素解析版も面白いですね。

    当方のスクリプトも少し機能追加しました。自動補完をOn/Offできるチェックボックスを自動生成するようにしてみました。

    コメント byUta — 2008/7/5 土曜日 @ 18:56:37

  20. 微妙にコメント放置してしまいました。

    ＞ひでまん様
    ありがとうございます。
    これからもご贔屓に。

    ＞a_horuru様
    あらー、これまた面白い試みですね。
    形態素解析は、個人的に色々と面白いスクリプトに使えそうだと思ってます。
    ブログにコメントさせてもらいます。

    ＞Uta様
    スイッチあるといいですね。
    ただ、スイッチという要素がまた増えるという、パラドックスが。
    最強の、お問い合せは、電話ですねぇ。。。。

    コメント byadmin — 2008/7/7 月曜日 @ 18:38:39

  21. […] で、こちらの本サイトでも配布していますJSのAPI「フリガナ自動変換スクリプト／AutoRuby.js」 […]

    ピンバック bystudio-fun.net » webページのフォーム入力 — 2008/8/2 土曜日 @ 23:26:18

  22. […] フォームのフリガナを自動入力させるAutoRuby.js […]

    ピンバック byJavaScriptのテクメモ » Blog Archive » 自動でフリガナを入力 — 2008/9/22 月曜日 @ 15:06:42

  23. […] by admin on 12月.17, 2009, under javascript フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営

    ピンバック byフォームのフリガナを自動入力する AutoRuby.js | Design Spice — 2009/12/17 木曜日 @ 14:04:45

コメント RSS トラックバック URL

コメントをどうぞ


ホームページ製作のご案内

ホームページ製作実績

ソースクリエイトの会社案内

other


ホームページ制作。効果の出やすいサイト制作

COPYRIGHT SOURCE Create. Co.Ltd., All Rights Reserved.

福岡県福岡市博多区店屋町5-8 日宝冷泉ビル2F