作成したデモはこちら
https://kalaxity.github.io/jsfuck-asciify/
概要
「プログラムのソースコードとしても動作するアスキーアート」を作成する試みがある。
- Pythonの例：https://www.m3tech.blog/entry/python_quine
- JavaScriptの例：https://monpoke1.hatenablog.com/entry/2018/12/06/020115
非常に面白い試みではあるが、現状はこうしたAAを 完全自動 で、そして 手軽に 生成する仕組みは存在しない。
※厳密にいえば、上記記事のようにJupyter Notebook上で作成する方法は存在する。しかしこれはPythonの実行環境を別途用意する必要があり、手軽さには欠ける。 また、必要に応じてコードを微修正する必要もある。
そこで今回は、これを完全自動化するWebサイトの作成を目標とする。
完成品
完成したWebサイトはGithub上で公開しており、自由に使用できる。
https://kalaxity.github.io/jsfuck-asciify/
ユーザが(1)画像と(2)JavaScriptプログラムを入力すると、AA化された画像の1文字1文字にプログラムが割り当てられ、「JavaScriptプログラムとして動作するAA」が自動で出力される。
以下に、作成時の苦労や今後の改善点をまとめる。
自動作成の手順
自動作成は以下の3つの手順からなる。
ここで問題となるのは以下の2点である。
- どうやってプログラムに空白・改行が入っても実行できるようにするか
- どうやってアスキーアートとプログラムの文字列長を揃えるか
問題1. プログラム内の空白・改行を無視するには？
一般にプログラムは空白や改行が混入すると正しく実行できない。そのため、空白が入っても問題なく実行できる形式に直す（つまり「空白耐性」をもたせる）必要がある。
今回は簡単に空白耐性をもたせるために、「JSFuck」という難読プログラミング言語を用いる。
JSFuckは+![]()の6文字のみを用いたJavaScriptプログラムであり、用いる文字の特性上、どこに空白・改行が含まれても問題なく実行できる。そのため、任意のJavaScriptプログラムをJSFuckに変換すれば、空白耐性をもったプログラムを簡単に生成することができる。
問題2. AAとプログラムの文字数を合わせるには？
文字列長を揃える方法は以下の2つが考えられる。
- AAを調整：AA自体のサイズを調整し、プログラムの文字列長に合わせる
- プログラムを調整：プログラムを何かしらの方法で水増しあるいは削減する
今回はこの両方を採用する。
つまり、まず前者で大雑把にサイズを揃え、残りの差を後者（具体的には//による水増し）で厳密に調整する方針をとった。
現状の問題
- プログラム長が長すぎ → jsfuckの文字セットを拡張or別の難読化手法を使用
- プログラム長の最適な調整方法を探す必要がある
- 2値化の閾値が適当 → ユーザが調整できるようにしたい
