例の暗号メッセージを生成してみる
説明するのもアレなので省略．最初に見たときに「すぐに作れるよね」と思っていたら，案の定すぐに作って公開した人がいるっぽい．いまさら感がありますがせっかくなので．
動機
- ぱっと作れそうな感じだったので
- 息抜き
目的
- 明確な目的はなし．息抜き
暗号メッセージ？
- 色付きの数字が，その色名（英語）の文字位置にある1文字を表している，というもの（一つの色付き数字が一つのアルファベットに対応する）
暗号例（この場合は 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, スペースはそのまま出力する．フォントサイズや文字送り幅は適当に設定．
今回は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 読み込むこと．）
結果
感想
- さあ仕事しよう
