このページの本文へ

フォームの二重入力はもうさよなら

2行+αでラクになる!フリガナ入力を自動化するJavaScript

2008年07月04日 16時28分更新

文● 小橋川誠己/アスキーネタ帳編集部

  • この記事をはてなブックマークに追加
  • 本文印刷

 先日、HTMLフォームの入力作業を便利に楽しくしてくれるJavaScriptを紹介した。地図で都道府県名を選択すると、それがフォームに自動入力されるという画期的なものだったが(関連記事)、このたび、またまた便利なJavaScriptが登場した。SOURCE Lab.作の「AutoRuby.js」がそれ。フォームの名前入力欄に、フリガナを自動入力してくれるJavaScriptだ(作者のブログ)。

autoruby
作者のブログ。必要なファイル一式をダウンロードできるほか、実際に試せる動作サンプルもある

 さっそく使ってみた。サンプルとして組み込んだのは、前回の記事でも使用したフォーム。作者のブログからファイル一式をダウンロードし、説明に従ってHTMLの<head>~</head>内に、以下の2行を追加する。


■<head>~</head>に追加

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="auto_ruby.js"></script>


 次に、<input>タグにAutoRuby.jsを適用するためのidを指定する。名前(漢字)は「name」、フリガナは「ruby」がデフォルトの設定になっている。これを入力して完成。

■<input>の追記例

<input id="name" name="name" value=""  type="text" />
<input id="ruby" name="ruby" value=""  type="text" />


 実際に組み込んでみたのがこの画面。

autoruby
作成したサンプル。一見、ただのHTMLフォームだが……

 名前の欄(name)にテキストを入力すると、ユーザーが押したキーを取得して、カタカナでフリガナの欄(ruby)に入力(表示)してくれる。リアルタイムにさくさく表示されるので、思った以上に快適。ただ、入力途中、変換候補を表示している状態でESCキーを押すと、フリガナが二重に入力されてしまうなど、まだ若干の問題はあるようだ。


autoruby
キーボードで名前を入力すると、フリガナの欄が即座に自動入力される

 実は、こうした“自動フリガナ入力スクリプト”はまったく新しいものではなく、以前から似たようなものはあった。AutoRuby.jsの特徴は、ごく簡単な手順で組み込めること、クロスブラウザに対応していること。編集部では、Internet Explorer 6、Firefox 3.0、Safari 3.1.2、Opera 9.5で動作を確認した(いずれもWindows版)。

 面倒なフォーム入力の苦痛を(多少)やわらげてくれるこのJavaScript。前回の記事で紹介したjsmapsと併せて、WebフォームのUI改善に役立ててみては?

カテゴリートップへ

ピックアップ