例の暗号メッセージを生成してみる

説明するのもアレなので省略.最初に見たときに「すぐに作れるよね」と思っていたら,案の定すぐに作って公開した人がいるっぽい.いまさら感がありますがせっかくなので.


動機

  • ぱっと作れそうな感じだったので
  • 息抜き

目的

  • 明確な目的はなし.息抜き

暗号メッセージ?

  • 色付きの数字が,その色名(英語)の文字位置にある1文字を表している,というもの(一つの色付き数字が一つのアルファベットに対応する)

暗号例(この場合は toyohashi)

暗号例(この場合は toyohashi)

カラーネームについて

Web standard 16 colors をベースに考えてみる.そのカラーネームにおいて,どの英文字がどの位置に現れるかを求めてみると次のような感じ(ExcelでFIND関数を使って整理).

カラーネームと文字出現位置(今回はオレンジ塗りつぶしセルを採用)

カラーネームと文字出現位置(今回はオレンジ塗りつぶしセルを採用)

  • navy, teal, lime, aqua, fuchsia, olive, maroon は日本人にはピンとこない(わかりづらい)ので不採用.
  • gray と silver も判断に困るのでどちらか一択 → 今回は s と v を使いたいので silver を採用(gray の使用回避).
  • 結果的に,f, j, m, q, x, z を含むカラーがないので,これらの文字は暗号化されないことに.それ以外については,上表のオレンジで塗りつぶしたセルの値(とカラー)を使うことにする.

JavaScriptで書いてみる

こんな感じでベタに書いてみる.
今回はcanvasを使って描くことに.フォームに入力された文字列から1文字ずつ取り出して,事前に定義した変換(テーブル)ルールに従って出力する.f, j, m, q, x, z, スペースはそのまま出力する.フォントサイズや文字送り幅は適当に設定.


htmlソースはこんな感じでどうでしょう.

<canvas id="cv" width="400" height="100" style="display:none;"></canvas>

<form name="myform">
	<input type="text" id="inputtext" placeholder="半角英小文字とスペース" pattern="^[a-z\s]+$" title="半角英小文字とスペースを入力してください" size="15" maxlength="15">
	<input type="button" value="暗号化" onclick="genImg();">
</form>

<div>
<img id="out">
<div id="msg"></div>
</div>

canvasの描画内容を画像(PNG)として出力させることにした.
(遊んでみたい人向けの注意!上記スクリプトはcanvasタグより後ろに記述 or 読み込むこと.)

結果

感想

  • さあ仕事しよう

参考サイト

あわせて読みたい