今回はアスキーアートを作成するプログラムを作ってみます。アスキーアートとは、テキスト文字だけを使って絵を表現するものです。顔文字などもアスキーアートの一つと言えます。テキストが主体であるメールや掲示板におけるコミュニケーションでは、アスキーアートを使うことによって文章を優しく見せたり語句を強調させることができ、よく使われています。

しかし、こうしたアスキーアートを作るために、手作業で記号を入力するのは非常に大変です。そこで、グラフィックソフトのように操作して文字を配置できるような「アスキーアート・エディタ」を作ってみましょう。

画面設計

まずは、どんな操作でアスキーアートを作るのか、画面設計を考えてみます。テキストが入力できるWindows標準のテキストエディタを利用して、そのエディタの任意の位置に記号を挿入できれば都合が良いのですが、この方法だと、Windowsが提供するエディタを高度に操作する必要が出るので、プログラムが難しくなってしまいます。

そこで、画面の上半分にグラフィックソフトのようなグリッドを作り、そこにコマを配置するようにします。さらに、グリッドに描画した結果を、画面下半分のテキストエディタに反映させるようにします。

こうすれば、ユーザーはグリッドへマウスで絵を描くように描画を行うことができ、また、Windows標準のエディタを操作することなく、結果表示だけをテキストエディタに出力するということができるというわけです。

プログラムの設計

画面設計に応じてプログラムを作っていきます。プログラムは大きく分けると、前半、後半の2つからなります。まず、プログラムの前半では、グリッドを描いたり、エディタを作ったりと画面を描画するようになります。そして、後半はユーザーがマウスを操作しマウスボタンを押した時にどうするのかというプログラムを作ります。では、箇条書きでまとめてみます。

• 前半: 画面設計
1. 文字のサイズや描画のための色などを設定
2. 作成結果を表示するためのテキストエディタを画面下部に作る
3. グリッド画面を描画する
• 後半: マウス操作への対応
1. マウスのボタンが押された時以下の処理を行う
2. グリッドのどの位置でボタンが押されたのか座標を計算する
3. 画面上と実際のテキストの両方を更新して画面を描画する

二次元配列変数の利用

アスキーアートとは、テキストデータの連続なので、テキストデータを使ってデータを操作することになります。こうした縦(列)と横(行)のあるデータを扱うとき、右からC文字目、上からR文字目の文字を知りたいと思ったら、(R×横文字数+C)文字目の文字を操作するという計算を行う必要があります。

しかし、列と行のある二次元のグリッド上のデータ操作ならば、二次元配列変数を利用することができます。「変数名【行,列】＝値」の書式で二次元配列変数を操作することで、グリッドのデータを管理するのです。

また、なでしこなら、二次元配列変数をカンマ「，」で区切ったCSV形式に変換することができます。アスキーアートとして出力する場合には、CSV形式からカンマ「，」を消したものを使えばよいということです。

10行プログラム: アスキーアートエディタ

以下が実際のなでしこのプログラムです。(バージョン1.395で動作確認しています)

1行目から2行目では、表示するフォントの書体やサイズ、色などを指定しています。

3行目では、結果メモという名前でテキストエディタを作っています。そして、その大きさを画面の下半分になるように指定します。

4行目から6行目では、画面へグリッドを描画しています。「繰り返す」構文を入れ子状に配置し、左上から右下へと繰り返しグリッドのマスを描画しています。また、二次元配列変数変数「結果【行,列】」を「□」で初期化しています。

7行目以降ではマウスを押した時、どうするのかを定義しています。

8行目では、マウスのX座標、Y座標を、グリッドの幅であるWで割り算し、何番目のグリッドがクリックされたのかを得ます。「INT」関数は数値の小数点以下を切り捨てる命令です。

9行目では、画面と二次元配列変数「結果」を更新しています。そして、10行目で二次元配列変数「結果」をCSV形式に変換し、これのカンマを消して、画面下部にあるエディタに表示します。

改造のヒント

今回の10行プログラムでは、■と□だけのアスキーアートしか作れません。しかし、これでは、メールマガジンのタイトルを作ることくらいしかできないでしょう。もっといろいろな文字が利用できるようにし、「アスキーアート作成エディタ」という名に恥じないものを作りたいものです。

そして、操作感に関しても、10行ではコマを置くことしかできなかったので、コマを消すことができるようにします。アイコンエディタに採用されているようなインタフェースを参考にして、以下のように操作できるようにしてみました。

• 左クリックでコマを置く。ドラッグで塗りつぶしができる
• 右クリックでコマの状態を取得する

以下は50行になってしまいましたが、マウス操作を改良し、ペンの種類に●や▼を置けるようにしたプログラムです。

030.nako

これを、さらに改造するなら、アスキーアートの縦横の大きさの指定や、さらに使える文字種類を増やしてみてはどうでしょうか。また、ファイルへの読み込み・保存に対応も必要でしょう。CSV形式で読み込み、保存の処理を作れば良いので2、3行追加することで対応できますね。

それでは、今回もいろいろと改良して、自分だけのアスキーアートエディタを作ってみてください。