ふりがなが自動入力されるフォームを設定したいのですが、

名前を入力すると、ふりがな(平仮名)が自動入力されるフォームを設定したいのですが、次のJavaScript のプログラムをkintone で使用しても、実行できません。

// Copyright (c) 2013 Keith Perhac @ DelfiNet (http://delfi-net.com)
//
// Based on the AutoRuby library created by:
// Copyright (c) 2005-2008 spinelz.org (http://script.spinelz.org/)
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// “Software”), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
(function ($) {
$.fn.autoKana = function (element1, element2, passedOptions) {
var options = $.extend(
{
‘katakana’: false
}, passedOptions);
var kana_extraction_pattern = new RegExp(‘[^ ぁあ-んー]’, ‘g’);
var kana_compacting_pattern = new RegExp(‘[ぁぃぅぇぉっゃゅょ]’, ‘g’);
var elName,
elKana,
active = false,
timer = null,
flagConvert = true,
input,
values,
ignoreString,
baseKana;
elName = $(element1);
elKana = $(element2);
active = true;
_stateClear();
elName.blur(_eventBlur);
elName.focus(_eventFocus);
elName.keydown(_eventKeyDown);
function start() {
active = true;
};
function stop() {
active = false;
};
function toggle(event) {
var ev = event || window.event;
if (event) {
var el = Event.element(event);
if (el.checked) {
active = true;
} else {
active = false;
}
} else {
active = !active;
}
};
function _checkConvert(new_values) {
if (!flagConvert) {
if (Math.abs(values.length - new_values.length) > 1) {
var tmp_values = new_values.join(‘’).replace(kana_compacting_pattern, ‘’).split(‘’);
if (Math.abs(values.length - tmp_values.length) > 1) {
_stateConvert();
}
} else {
if (values.length == input.length && values.join(‘’) != input) {
if (input.match(kana_extraction_pattern)) {
_stateConvert();
}
}
}
}
};
function _checkValue() {
var new_input, new_values;
new_input = elName.val()
if (new_input == ‘’) {
_stateClear();
_setKana();
} else {
new_input = _removeString(new_input);
if (input == new_input) {
return;
} else {
input = new_input;
if (!flagConvert) {
new_values = new_input.replace(kana_extraction_pattern, ‘’).split(‘’);
_checkConvert(new_values);
_setKana(new_values);
}
}
}
};
function _clearInterval() {
clearInterval(timer);
};
function _eventBlur(event) {
_clearInterval();
};
function _eventFocus(event) {
_stateInput();
_setInterval();
};
function _eventKeyDown(event) {
if (flagConvert) {
_stateInput();
}
};
function _isHiragana(chara) {
return ((chara >= 12353 && chara <= 12435) || chara == 12445 || chara == 12446);
};
function _removeString(new_input) {
if (new_input.match(ignoreString)) {
return new_input.replace(ignoreString, ‘’);
} else {
var i, ignoreArray, inputArray;
ignoreArray = ignoreString.split(‘’);
inputArray = new_input.split(‘’);
for (i = 0; i < ignoreArray.length; i++) {
if (ignoreArray[i] == inputArray[i]) {
inputArray[i] = ‘’;
}
}
return inputArray.join(‘’);
}
};
function _setInterval() {
var self = this;
timer = setInterval(_checkValue, 30);
};
function _setKana(new_values) {
if (!flagConvert) {
if (new_values) {
values = new_values;
}
if (active) {
var _val = _toKatakana(baseKana + values.join(‘’));
elKana.val(_val);
}
}
};
function _stateClear() {
baseKana = ‘’;
flagConvert = false;
ignoreString = ‘’;
input = ‘’;
values = [];
};
function _stateInput() {
baseKana = elKana.val();
flagConvert = false;
ignoreString = elName.val();
};
function _stateConvert() {
baseKana = baseKana + values.join(‘’);
flagConvert = true;
values = [];
};
function _toKatakana(src) {
if (options.katakana) {
var c, i, str;
str = new String;
for (i = 0; i < src.length; i++) {
c = src.charCodeAt(i);
if (_isHiragana(c)) {
str += String.fromCharCode(c + 96);
} else {
str += src.charAt(i);
}
}
return str;
} else {
return src;
}
}
};
})(jQuery);

 

kuro1962 さん

 

こちら で jquery.autoKana.js をトライされていたようですね。可否の結論がありませんが、autoKanaのサンプルとこの知見を組み合わせれば、対応できそうな感じはしますね。

と、書き込んでる間に、追記されたコードは jquery.autoKana.js そのもののようですね。あとは、先程のリンクにあるようなID指定をいずれかの方法で適用することになると思います。

 jquery.autokana.js から参考にしましたが、リンクに出ているID指定の方法もまだ分かっておりませんので、苦労しています。IDとはフィールドコードの事ですか?カスタマイズビューで入力画面の作成方法とは、どうやって作成するのでしょうか?  

 

 

 

ao1962さん

お世話になっております。

サイボウズスタートアップスの武井です。

 

まずカスタマイズビューですが、kintoneアプリ画面右上の歯車マークから

アプリの設定を変更 > 一覧の追加 > レコード一覧の表示形式を「カスタマイズ」にする

そして、「HTML」に適宜inputフォームタグを挿入すること等でカスタマイズビューでの入力画面が作成可能です。

 

ご提示のリンクで書かれているIDとは、ao1962 さんのおっしゃる通りフィールドコードでも代替できます。

こちらのリンクのように、

「var el = kintone.app.record.getSpaceElement(``'space1'``);」

のような形で要素を取得/変更できます。

※ただし、スペースフィールドについては、フィールドコードではなく「要素ID」と呼んでいます。

上記でいうところの「space1」が要素IDとなります。

 

ご提示リンクでソウルウェアさんがおっしゃっている方法は、

表示しているページの中のinput要素を上からn番目の入力フォームに、本フリガナ設定を適用する、

といった意味合いかと思われます。

 

あとは、ソウルウェアさんがご提示のように、上記の方法で取得した要素を、

$.fn.autoKana(名前要素, フリガナ要素);

のような形で指定すればよろしいのかと思います。

 

よろしくお願いいたします。

回答ありがとうございました。

参考にさせていただきます。