HIMITSU NO ANGOUをWebページ上で生成してみる

はじめに

こんにちはあるいはこんばんは、エンジニアの皆さん。
メタップスアドベントカレンダー17日目の記事です。

何の記事を書くかずっと悩んでいたところ、ふと某アニメのワンシーンが頭を過りましたので
本日はタイトルの通り、秘密の暗号をWebページで生成してみようと思います。

画面

見た目はこちら

成果物

実際のコードや動作させてみたい方はこちらから閲覧できます。
https://codesandbox.io/s/himitsu-no-angou-f8jwz0

秘密の暗号の仕組み

const shuffled = computed(() => shuffle('ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'.split('')))

事前に、取りうる値をシャッフルした状態で配列として持っておきます。

const v$ = useVuelidate(
    {
      plainText: {
        required,
        inputRegex,
        maxLength: maxLength(255),
      },
    },
    {plainText},
)

入力を受け付ける時、取りうる値以外のものを入力されても困りますので
ここではvuelidateを用いてバリデーションを定義しておきます。
半角英数字、（）と改行を受け付けます。

const onClickGenerate = () => {
  cryptoText.value = plainText.value
      .split('')
      .map((e) => {
        if (e === '\n') {
          return '<br>'
        }
        if ([' ', '(', ')'].includes(e)) {
          return e
        }
        const index = shuffled.value.indexOf(e.toUpperCase())
        const x = (index % 6) + 1
        const y = Math.floor(index / 6) + 1
        return `${x}${y}`
      })
      .join(' ')
}

入力された文章を1文字ずつ取り出し、配列上のインデックスを検索します。
返ってきた位置からx座標とy座標を割り出します。
1文字ずつ割り出した座標を連結し、それ暗号文としています。

出てきた暗号文を生成した表と突き合わせて解読する。という感じです。

最後に

某アニメのワンシーンの暗号表を真似してつくってみただけなのですが、
この表ちゃんと元があって、「ポリュビオスの暗号表」というらしいですね。知りませんでした。
もうちょっと拡張して、漢字やひらがなに対応したり、全部の文字を網羅するではなく入力された文章をカバーしながら
ランダムに他の漢字をピックアップした表を作るとかでも面白いかもしれません。

よかったら、皆さんも好きなキーワードを入れて友人に遊んでもらうなど楽しんでください。
それではごきげんよう。