Webサービスに英数字の修飾機能を追加しました

細々と開発・運用を続けているWebサービスに英数字の修飾機能を追加しました。

はじめに

🅗🅔🅛🅛🅞 🅦🅞🅡🅛🅓 やH̶E̶L̶L̶O̶ ̶W̶O̶R̶L̶D̶ 、ᗡ˥ᴚOM O˥˥ƎH のように英数字のデザインを変更することができます。
SNSへの投稿やハンドルネームなどで自由に利用することが出来ます。(通常の文字とは異なるため、システムによっては検索結果に反映されない場合もあるのでご注意ください)

モチベーション

たまにSNSで見かける装飾された文字を扱ってみたくなったので変換器を作ってみました。
思っていたよりも装飾の種類が多いのですが、大文字のみ・小文字のみに対応している装飾もあるので、少々使い勝手が悪いです。

技術的な話

最初は変換対象の文字のユニコードをビットシフト演算して様々な装飾が施されたユニコードに変換して…ということを考えていました。しかしユニコードではそのような画一的なルールで装飾されている文字が定義されているわけではないので、以下のように変換前後の文字を1対1で紐づけて変換しています。
ちょっと泥臭いですね。もう少しスマートな方法があればいいのですが…

    toEnclosedAlphanumericsText(str) {
      const enclosedAlphanumericsChars = {
        'A': '🄰', 'B': '🄱', 'C': '🄲', 'D': '🄳', 'E': '🄴', 'F': '🄵', 'G': '🄶', 'H': '🄷', 'I': '🄸', 'J': '🄹', 'K': '🄺', 'L': '🄻', 'M': '🄼',
        'N': '🄽', 'O': '🄾', 'P': '🄿', 'Q': '🅀', 'R': '🅁', 'S': '🅂', 'T': '🅃', 'U': '🅄', 'V': '🅅', 'W': '🅆', 'X': '🅇', 'Y': '🅈', 'Z': '🅉',
      };
      return str.split('').map(char => enclosedAlphanumericsChars[char] || char).join('');
    },

今後

ひらがな、カタカナも装飾できるようにしたいところです。

フィードバック

全体のソースコードは以下で公開中です。
https://github.com/foresukecom/toolbox/blob/main/src/views/TextStyler.vue

他の装飾などがありましたが、コメントやSNSなどで教えてもらえると助かります。