@kamatamaudon

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

フリガナ自動変換 漢字→カタカナに変換したい 

解決したいこと

漢字を入力した際、自動でカタカナに変換できるようにしたいです。

こちらの記事を参考に、フリガナを自動変換したいのですが、以下のコードをどの部分に
書いたら良いかわかりません
「return katakana ? katakanaMap[input] || '' : hiraganaMap[input] || '';」を無視して
サイトを作りましたが、ひらがなを入力したら変換はできましたが、漢字を入力しても変換されません。
以下の記事のデモサイトでは、漢字でも変換されるので、コードが誤っていると存じます。
ご教示いただけますと幸いです。

発生している問題・エラー

return katakana ? katakanaMap[input] || '' : hiraganaMap[input] || '';

hiraganaMap.js

const hiraganaMap = {
    'a': 'あ', 'i': 'い', 'u': 'う', 'e': 'え', 'o': 'お',
    'ka': 'か', 'ki': 'き', 'ku': 'く', 'ke': 'け', 'ko': 'こ',
    'sa': 'さ', 'si': 'し', 'su': 'す', 'se': 'せ', 'so': 'そ',
    'ta': 'た', 'ti': 'ち', 'tu': 'つ', 'te': 'て', 'to': 'と',
    'na': 'な', 'ni': 'に', 'nu': 'ぬ', 'ne': 'ね', 'no': 'の',
    'ha': 'は', 'hi': 'ひ', 'fu': 'ふ', 'he': 'へ', 'ho': 'ほ',
    'ma': 'ま', 'mi': 'み', 'mu': 'む', 'me': 'め', 'mo': 'も',
    'ya': 'や', 'yu': 'ゆ', 'yo': 'よ',
    'ra': 'ら', 'ri': 'り', 'ru': 'る', 're': 'れ', 'ro': 'ろ',
    'wa': 'わ', 'wo': 'を', 'n': 'ん'
  };

katakanaMap.js

const katakanaMap = {
  'a': 'ア', 'i': 'イ', 'u': 'ウ', 'e': 'エ', 'o': 'オ',
  'ka': 'カ', 'ki': 'キ', 'ku': 'ク', 'ke': 'ケ', 'ko': 'コ',
  'sa': 'サ', 'si': 'シ', 'su': 'ス', 'se': 'セ', 'so': 'ソ',
  'ta': 'タ', 'ti': 'チ', 'tu': 'ツ', 'te': 'テ', 'to': 'ト',
  'na': 'ナ', 'ni': 'ニ', 'nu': 'ヌ', 'ne': 'ネ', 'no': 'ノ',
  'ha': 'ハ', 'hi': 'ヒ', 'fu': 'フ', 'he': 'ヘ', 'ho': 'ホ',
  'ma': 'マ', 'mi': 'ミ', 'mu': 'ム', 'me': 'メ', 'mo': 'モ',
  'ya': 'ヤ', 'yu': 'ユ', 'yo': 'ヨ',
  'ra': 'ラ', 'ri': 'リ', 'ru': 'ル', 're': 'レ', 'ro': 'ロ',
  'wa': 'ワ', 'wo': 'ヲ', 'n': 'ン'
};

jquery.autoKana.js(GithubからDLしたもの)

// 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 == '' && elKana.val() != '') {
              _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.indexOf(ignoreString) !== -1) {
              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).change();
              }
          }
      };
      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);

vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      input: 'src/jquery.autoKana.js',
      output: {
        entryFileNames: 'jquery.autoKana.min.js',
      }
    },
    outDir: 'dist',
    emptyOutDir: true,
    minify: true
  }
});


0 likes

1Answer

ひらがなを入力したら変換はできましたが、漢字を入力しても変換されません。

漢字をローマ字入力しても、ひらがなカタカナに変換されませんか?
ライブ変換にしていますか?

2Like

Comments

  1. ↓ こちらに、使い方の説明があります。

  2. ↑のリポジトリにある dist/jquery.autoKana.min.js には必要な変更が含まれているので、元の jquery.autoKana.js と入れ替えて使うだけでよさそうですね。

  3. @kamatamaudon

    Questioner

    ありがとうございます!
    ライブ変換OFFにしたらできました!

Your answer might help someone💌