Poco a Poco

dream.phpのふりがなを自動入力するためのハウツー

「な、名前……」や「な・ま・え！」など、多彩な名前変換を可能にしてくれるdream.php。
こうした機能を利用するにはふりがなの入力が不可欠ですが、「jquery.autokana.js」を使えばふりがなを自動で入力することができます。

デモページとして、当サイトインデックスの名前変換フォームを見てみましょう。
「名字」を入力すると「みょうじ」が、「名前」を入力すると「なまえ」が自動で入力されます。便利ですね！

あなたも名前入力の手間を減らせる「jquery.autokana.js」を導入してみませんか。

導入方法

1. プラグインをダウンロード
   1. GitHub - harisenbon/autokana
      上記リンク先のClone or download（緑のボタン）をクリック→Download ZIPをクリック→保存します
   2. 解凍します
   3. jquery.autokana.jsをサイト用のフォルダに移動しておきます（任意）
2. 名前変換ページを編集する
   下記のコードを名前変換フォームのあるページ（当サイトの場合はindex.php）の</body>直前に書きます。
   

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="./js/jquery.autoKana.js"></script>
   <script>
   <!--
   $(function() {
   	$.fn.autoKana('#NAME-INPUT0', '#NAME-INPUT2');
   	$.fn.autoKana('#NAME-INPUT1', '#NAME-INPUT3');
   });
   // -->
   </script>
   

   行1,2で必要なファイルを読み込み、行3以降で自動入力するフォームを指定しています。
   ※書き換える必要があるかもしれない箇所
   • 行2…ファイルをアップロードする場所と対応させてください。
   • 行6,7…変換フォームの数と内容によっては変えてください。上記は#NAME-INPUT0（名字）を入力したときに#NAME-INPUT2（みょうじ）を、#NAME-INPUT1（名前）を入力したときに#NAME-INPUT3（なまえ）を自動入力するための記述です。ご自分の「dream_fix.ini」を参照し、連動させたい項目番号を記入してください。
   • 行1,2,3…HTML4.01をお使いの場合はscriptをscript type="text/javascript"としてください（HTML5では省略できるので）。
3. 編集した名前変換ページとjquery.autokana.jsをアップロード