オートコンプリートと漢字ふりがな変換の共存使用

kintone カスタマイズ
1

下記ナレッジのオートコンプリートとautoKanaによる漢字ふりがな変換を両方使用したいのですが、オートコンプリートのみが機能し、ふりがなが表示されません。

同じフィールドに対し適用しているのですが、両機能を使う方法があればご教授いただけないでしょうか。

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

 

＜過去のレコード値を用いてAutocomplete＞

https://developer.cybozu.io/hc/ja/community/posts/360040177771

 

＜コード＞

var autocompleteFields = [ //自動補完するフィールド
{ name:‘氏名’, code:‘氏名’ } //フィールド名, フィールドコード
];
var getFieldInput = function(fieldName) {
var input;
$(‘.control-gaia’).each(function(index, element) {
if ($(element).find(‘.control-label-text-gaia’).text() === fieldName) {
input = $(element).find(‘input’);
}
});
return input;
};

 

kintone.events.on(‘app.record.create.show’, function(event) {

// 漢字かな変換
var name = $(‘.value-5443156 input’); // 氏名フィールド
var kana = $(‘.value-5443157 input’);  // ふりがなフィールド
$.fn.autoKana(name, kana);

kintoneUtility.rest.getAllRecordsByQuery({
app: kintone.app.getId()
}).then(function(response) {
autocompleteFields.forEach(function(field) {
$(getFieldInput(field.name)).flexdatalist({
minLength: 1,
searchIn: ‘value’,
data: response.records.map(function(record) {
return record[field.code].value;
}).filter(function(value, index, values) {
return values.indexOf(value) === index;
}).map(function(value) {
return {value: value};
}),
});
});
});

return event;

});

 

2

https://github.com/harisenbon/autokana

 

上記によると、autoKana はテキストのコピペには未対応となってます。

オートコンプリートでの入力もコピペに近い動作原理なので他の方法を考える形になると思われます。

 

autoKana の動作には keyDown イベントを使っていると書かれているので、オートコンプリートで文字列を確定した直後に keyDown を発生させてみてはどうでしょうか？（すみません、テストしてませんので動かないかも）

autocompleteFields.forEach(function(field) {

// 省略

  $(getFieldInput(field.name)).on(‘select:flexdatalist’, function(event, item, options) {
    console.log(item);
    var e = jQuery.Event( ‘keydown’, { which: $.ui.keyCode.ENTER } );
    $(event.target).trigger(e);
  }); 

3

Mitsuaki Ando様

ご返信いただきありがとうございます。

説明が不足しておりました。オートコンプリートで文字列を確定する前でもふりがな変換されない状況です。

頂いた内容で試してみましたが、確定後でもふりがなは入りませんでした。

4

こちらでもやってみました。

autoKana.js をざっと読んでみると、入力中の文字列を取得してカナのところに表示しているようです。

そのため、入力中の文字列がない状態（＝オートコンプリートからの登録）ではカナが取得できないと思われます。

 

方法を変えて対応するしかなさそうです。

オートコンプリートの情報取得時に、以前入力されたカナも同時に取得する形で対応できそうです。

過去のデータにはカナもちゃんと入っているはずなので、それを使う形です。

 

var autocompleteFields = [ //自動補完するフィールド
  { name:‘氏名’, code:‘氏名’, kanaField: ‘カナ’ } //フィールド名, フィールドコード
];

var getFieldInput = function(fieldName) {
  var input;
  $(‘.control-gaia’).each(function(index, element) {
    if ($(element).find(‘.control-label-text-gaia’).text() === fieldName) {
       input = $(element).find(‘input’);
    }
  });
  return input;
};

kintone.events.on([‘app.record.create.show’, ‘app.record.edit.show’], function(event) {
  // 漢字かな変換
  var name = $(‘.value-5443156 input’); // 氏名フィールド
  var kana = $(‘.value-5443157 input’); // ふりがなフィールド
  $.fn.autoKana(name, kana);

  kintoneUtility.rest.getAllRecordsByQuery({
    app: kintone.app.getId()
  }).then(function(response) {
    autocompleteFields.forEach(function(field) {
      $(getFieldInput(field.name)).flexdatalist({
        minLength: 1,
        searchIn: ‘value’,
        data: response.records.map(function(record) {
          return {value: record[field.code].value, kana: record[field.kanaField].value};
        }).filter(function(value, index, values) {
          return values[index].value !== value;
        }).map(function(value) {
          return {value: value.value, kana: value.kana};
        }),
      });
      $(getFieldInput(field.name)).on(‘select:flexdatalist’, function(event, item, options) {
        console.log(item);
        var dataSet = kintone.app.record.get();
        dataSet.record[field.kanaField].value = item.kana;
        kintone.app.record.set(dataSet);
      });
    });
  });

  return event;
});

5

あ、なんか違いますね・・・

そもそも、flexdatalistが有効だとautoKanaが動かなくなるのが問題でした。

6

これで解決のような気がします。

kintone.events.on(‘app.record.create.show’, function(event) {
  kintoneUtility.rest.getAllRecordsByQuery({
    app: kintone.app.getId()
  }).then(function(response) {
    autocompleteFields.forEach(function(field) {
      $(getFieldInput(field.name)).flexdatalist({
        minLength: 1,
        searchIn: ‘value’,
        data: response.records.map(function(record) {
          return record[field.code].value;
        }).filter(function(value, index, values) {
          return values.indexOf(value) === index;
        }).map(function(value) {
          return {value: value};
        }),
      });
    });
    // 漢字かな変換
    var name = $(‘.value-5443156 input’); // 氏名フィールド
    var kana = $(‘.value-5443157 input’); // ふりがなフィールド
    $.fn.autoKana(name, kana);
  });

  return event;

});

7

度々のご返信ありがとうございます。

上記方法で試したところ、ふりがなが入るようになりました。

ただ、次の文字を打ったタイミングで、前の一文字がふりがなに入りました。

「田中」と打つと、ふりがなは「たな」となります。

「あ～お」の母音だと即時反映になるのですが、子音が入ると難しそうです。

 

8

そのようです・・・

autoKana.js の仕様のようですので、修正のためには autoKana.js のソースを改変していくしかないように思います。

https://github.com/harisenbon/autokana/blob/master/jquery.autoKana.js

 

もしくは、変換用のAPIを使うという方法もあるかと思われます。

https://labs.goo.ne.jp/api/jp/hiragana-translation/

 

9

代替案で再度検討してみたいと思います。

多々ご教授いただきありがとうございました。

10

色々調査した結果、flexdatalistではなくjQuery UIのオートコンプリートを使ってみました。

 

// 漢字かな変換
var name = $(‘.value-5443156 input’); // 氏名フィールド
var kana = $(‘.value-5443157 input’); // ふりがなフィールド
$.fn.autoKana(name, kana);

 

kintoneUtility.rest.getAllRecordsByQuery({
app: kintone.app.getId()
}).then(function(response) {

autocompleteFields.forEach(function(field) {

// オートコンプリート機能を適用
$(getFieldInput(field.name)).autocomplete({
source : function(req, res) {
var re = new RegExp(‘^(’ + req.term + ‘)’),
list = [];

$.each(response.records, function(i, values) {  
 if(values[field.code].value.match(re)) {  
  list.push(values[field.code].value);  
 }  
});  
res(list);

}
});

});

});

11

なるほど！

autoKanaが誤動作するのはflexdatalistの問題だったのですね・・・大変失礼いたしました。

12

相性が良くないのかもしれません。

flexdatalistも便利そうですが、ライブラリを改変するほどの余力がなかったので、

今回はjQuery UIを採用することにします。

ひとまずクローズで、ご返信いただきありがとうございました！

13

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。