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) […]

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

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

  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 […]

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

  24. WinXP IE8でエラーがでます。

    http://www.ecosci2008.com/toiawase.html

    コメント by片山博文MZ — 2011/6/10 金曜日 @ 13:42:45
  25. At this time it looks like Movable Type is the top blogging platform available right now. (from what I’ve read) Is that what you are using on your blog?

    コメント byTesha Pofahl — 2011/7/17 日曜日 @ 1:33:39
  26. This web site is awesome. I constantly discover interesting things & distinct here. I appreciate you for that info.

    コメント byChadwick — 2011/9/13 火曜日 @ 6:28:24
  27. I enjoy your website! Maybe you have a myspace or fb page? I’d like to get together and focus on a pair of things. Appreciate all of your work.

    コメント byChester — 2011/9/15 木曜日 @ 1:25:55
  28. […] ふりがな javascript 自動交換 漢字 → カタカナ or ふりがな カテゴリー: Javascript タグ: コメント (0) トラックバック (0) […]

    ピンバック byTECHSARA » 漢字 ふりがな javascript — 2012/1/6 金曜日 @ 13:21:02
  29. これはいいと思ったのですが、
    ローマ字変換で「ながい」と入力すると「ナガイ」とカナになりますが、カナ変換だと「ナカガイ」となります。
    つまり濁音だと濁音なしの文字と濁音ありの文字の2文字が表示されます。

    コメント bynaga — 2013/2/4 月曜日 @ 15:24:22
  30. 投票もおちついたころ、2組目akutagawaの準備がととのったようだ。ギター、ベース、ドラムと、それぞれの楽器がなりはじめ、徐々に客席の電気が落ちてゆく。ギターの歪みが会場内に満ちあふれ、akutagawaのステージが幕を開けた。まず披露されたのは、RPGの世界に迷い込んだかと思うほどの世界観、壮絶な曲展開と、夕日の物悲しさを音にしたようなギターのアルペジオが印象的な「陽が沈む」。そして「残像」と続いてゆく。MCでは、このイベントに出演することが決まるまでの裏話が話され、「(主催者の)高山さんから、一人の男としてメールさせていただきました。っていう、オファーのメールが来て(笑)」と、会場を沸かせた。MCが終わると、突如ステージが真っ赤になり、「ハッピーエンド」が始まった。変拍子のオンパレードに、激しくうねるギター、絞り出すように歌うヴォーカルが印象的だ。そしてラストの「夜明け前」。ギターのリフにのって、力強いドラムのキックがずしずしと腹を突く。akutagawaのライヴは、轟音をたてながら、車輪を回転させて進む列車のよう。客席から歓声が上がり、今にも爆発しそうなひりひりとした焦燥感が会場全体を包む。そして最後の美しいコーラスとともに、akutagawaのパフォーマンスは幕をとじた。あと2曲は聴きたい、そう思わせるような圧巻のステージだったakutagawaのステージが終わると、次のアーティスト、NETWORKSのセッティングがはじまった。ステージ上には、キーボード、ドラム、ギターが三角形に向かい合うようにセットされる。そんななか、会場では着々と投票が行われている。すると「キャー」という声とともに、ジェンガが崩れる音が! ライヴと同じく、投票も盛り上がっているようだSEもなく、NETWORKSの3人がふらりとステージに姿を現すと、拍手と歓声で迎える。静かにキーボードがリズムを刻みだす。後を追うようにハイハット、シンバルが繊細にリズムを刻み出す。ころころと、きらきらと、放射線状に音楽の光をきらめかせながら、曲はどんどん顔色を変えてゆく。「見た限り、初めての方が多いようなのですが、このご縁をありがたく存じます」という挨拶のあと、楽曲は「C」へと続く。水の粒が広い空間に一気に解き放たれたように、勢いよくはじまるこの楽曲。さきほどの「Y」をまばゆく回転するミラーボールとたとえるならば、上へ上へと上ってゆく螺旋とでもいえるだろう。そして、浮遊感のあるシンセが壮大な宇宙空間を感じさせる「A」へと続き、最後に演奏されたのは「D」。綿密に計算され、みっちりとつまったパズルの難しい攻略式のような音の構成が光る。あたりをみると、目を閉じて音に体を委ね、揺らしているオーディエンスたち。回りだしたミラーボールの光は星のようにも見え、宇宙にいるかのような錯覚を覚えた。演奏が終わると、3人はすくっと立ち上がり、会場からわれんばかりの歓声と、拍手で見送られ、ステージを後にしたmalegoat 新曲で新境地を披露

    コメント byサムスン ケース — 2013/10/15 火曜日 @ 18:57:33
  31. 何か入力→空白を入力→また何か入力→直前の入力を消す→また何か入力

    結果は三回目の入力のフリガナ残って、最後の入力とくっついた

    コメント bykidmysoul — 2014/1/29 水曜日 @ 17:39:54
  32. tiffany jewellery wholesale
    wholesale jewellery http://american-chineseceo.org/tiffany/wholesale-jewellery.html ,

    コメント bywholesale jewellery — 2014/2/12 水曜日 @ 11:42:26
  33. http://www.petan.org/Polo/

    コメント bywww.petan.org/Polo/?id=66 — 2014/4/23 水曜日 @ 15:30:13
  34. […] 2行+αでラクになる!フリガナ入力を自動化するJavaScript by 小橋川誠己/アスキーネタ帳編集部 2008年7月4日 16時28分 2行+αでラクになる!フリガナ入力を自動化するJavaScriptASCII.jp 先日、HTMLフォームの入力作業を便利に楽しくしてくれるJavaScriptを紹介した。地図で都道府県名を選択すると、それがフォームに自動入力されるという画期的なものだったが(関連記事)、このたび、またまた便利なJavaScriptが登場した。SOURCE Lab.作の「AutoRuby.js」がそれ。フォームの名前入力欄に、フリガナを自動入力してくれるJavaScriptだ(作者のブログ)。 […]

  35. “And then, what about the fact that we’re made of 70% water? And then the whole ocean reacts to the full moon, right? In a serious way. Everything’s ticking around that moon and if we’re 70% water I must be having some — at least homeopathic — relationship with the changing cycles of the moon.
    KD Scarpe http://shop.ivdc.it/it-khsitaliaah8079.asp?nike-basketball-scarpe-kd-scarpe-c-42_44.html

    コメント byKD Scarpe — 2014/10/29 水曜日 @ 2:51:44
  36. […] AutoRuby.js(prototype.jsベースのフリガナ自動変換スクリプト) […]

    ピンバック by【JavaScript】自動カナ入力 at softelメモ — 2014/11/3 月曜日 @ 11:13:55
  37. […] ・ajaxな住所入力フォーム ・フォームのフリガナを自動入力するAutoRuby.js […]

  38. 初めましてrtnと申します。
    このサイトは初めてなので仕様がいまいち分からない点があります。
    “、サンプルファイルをZIPで固めて…”のリンクにロックがかかっていまして、アクセスをしたいのですがどなたが見れますが?

    コメント byrtn — 2015/10/26 月曜日 @ 14:49:12
  39. I can’t hear antyhing over the sound of how awesome this article is.

    コメント byNikolay — 2015/10/28 水曜日 @ 11:00:48
  40. Id forever want to be update on new articles on this internet site, bookmarked ! . cadeckeekfec

    コメント byJohnf383 — 2015/12/21 月曜日 @ 20:22:13
  41. Your weblog is among the far better blogs I

    コメント byBoyce — 2016/2/6 土曜日 @ 9:40:35
  42. That’s a well-thought-out answer to a challenging question

    コメント byhttp://5060466.ru/amy-car-insurance.html — 2016/4/6 水曜日 @ 7:56:08
  43. People probably see youtube links and go "aint nobody got time for that" I’m speaking as someone who has both had that mentality and is a friend of Corridordigital and laments content ripping

    コメント bysunflower wedding invitations cheap — 2016/6/7 火曜日 @ 21:51:35

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

コメントをどうぞ


チャレンジ25

空室検索CT