【kintone】jquery.autoKana.jsで自動カナ入力（カスタマイズ編）

前回の記事でkintoneで自動フリガナ入力機能を作りました。今回はその応用編です。
入力欄を増やす方法や、カタカナとひらがなを切り替える設定を紹介します。

ちなみに、前回作ったコードがこちら。

jQuery.noConflict();
(function($) {
"use strict";

// 追加・編集表示イベント
 kintone.events.on(["app.record.edit.show","app.record.create.show"], function(event) {
 var name = $(".value-5520505 input");　//漢字氏名番号
 var kana = $(".value-5520506 input");　//カナ氏名番号
 var autoKana1 = $.fn.autoKana(name,kana,{ katakana : true });
 
 var name2 = $(".value-5520508 input");　//会社名番号
 var kana2 = $(".value-5520509 input");　//会社名カナ番号
 var autoKana2 = $.fn.autoKana(name2,kana2,{ katakana : true });

 // 入力欄を一度フォーカスしないとなぜか動作しない事象の回避
 kana.focus();
 name.focus(); //最初にカーソルを置きたい入力欄を最後に指定する
 return event;
 });
})(jQuery);

自動カナ入力できる入力欄を増やす

真ん中らへんにあるコードを規則性に従って複製すれば何個でも増やせます。
例えば、3つにするなら下のような感じです。

 var name = $(".value-5520505 input");　//漢字氏名番号
 var kana = $(".value-5520506 input");　//カナ氏名番号
 var autoKana1 = $.fn.autoKana(name,kana,{ katakana : true });
 
 var name2 = $(".value-5520508 input");　//会社名番号
 var kana2 = $(".value-5520509 input");　//会社名カナ番号
 var autoKana2 = $.fn.autoKana(name2,kana2,{ katakana : true });

 var name3 = $(".value-xxxxxxx input");　//項目3番号
 var kana3 = $(".value-xxxxxxx input");　//項目3カナ番号
 var autoKana3 = $.fn.autoKana(name3,kana3,{ katakana : true });

ここで、value-xxxxxxxの部分は入力欄に合わせて都度入力しなければならないのと、3行目はカッコの中に変数名を使っているので、修正漏れにご注意ください。

カタカナとひらがなを切り替える

自動入力されるフリガナは、これまでカタカナで設定していました。
ひらがなに切り替える場合は、katakana : true の部分を修正して false にします。

// カタカナ
var autoKana1 = $.fn.autoKana(name,kana,{ katakana : true }); 
// ひらがな
var autoKana1 = $.fn.autoKana(name,kana,{ katakana : false });

以上、前回の記事でつくったkintoneの自動カナ入力をカスタマイズする方法でした。

kintoneでjQueryを利用してさらにパワーアップできますが、設定がうまくいかなかったりで困っている方が多いみたいです。今回はカスタマイズ初心者でもつまづかないようわかりやすく説明しました。ぜひ挑戦してみてくださいね。

なお、kintoneなどでIT化やデジタルシフトのお手伝いをしています。お気軽にご相談ください。
お問い合わせはこちら