新規投稿
フォローする

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

下記ナレッジのオートコンプリートと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;

});

 

0

11件のコメント

Avatar
Mitsuaki Ando

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);
  }); 

0
Avatar
OKA

Mitsuaki Ando様

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

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

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

0
Avatar
Mitsuaki Ando

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

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;
});

0
Avatar
Mitsuaki Ando

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

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

Mitsuaki Andoにより編集されました
0
Avatar
Mitsuaki Ando

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

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;

});

Mitsuaki Andoにより編集されました
0
Avatar
OKA

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

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

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

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

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

 

0
Avatar
Mitsuaki Ando

そのようです・・・

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

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

 

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

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

 

0
Avatar
OKA

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

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

1
Avatar
OKA

色々調査した結果、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);
   }
  });

 });

});

0
Avatar
Mitsuaki Ando

なるほど!

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

Mitsuaki Andoにより編集されました
0
Avatar
OKA

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

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

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

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

0
ログインしてコメントを残してください。