【コラム】

日本語で10行プログラミング

83 アスキーアート地図エディタ

 

83/90

メールにちょっとした地図を入れたいと思ったことはありませんか? ちゃんとした地図なら、Wordやペイントで書いて、添付すれば良いのですが、そんな大したものではなく、ちょっとしたアスキーアートで地図を入れたい時があります。そこで今回は、アスキーアートで地図を書くのに便利な10行プログラムを作ってみたいと思います。

なお、本連載の第30回でアスキーアートエディタを作っているので、今回はこれを改良して、さらに地図に特化したものを作ってみようと思います。

アスキー地図エディタのアイデア

「本当にちょっとした図が作りたい時」という命題に基づいて、欲しい機能を考えてプログラムを設計してみます。設計に際して、どんな場面で使いたいかを想像してみましょう。

例えば、友達と待ち合わせをする時、「駅前の喫茶店で待ってるよ」などとメールに書いて送ります。このときの待ち合わせ場所が、分かりにくく人も多い場所なので、一応詳しい説明を入れておこうと思います。

そんな時は、Webにある地図のURLを貼り付けて終わりにする場合も多いのですが、もうちょっと細かく注釈を入れておきたいこともあり、待ち合わせ付近の様子を罫線や四角で書いています。

メールにちょっとアスキーアートを書く場合、「きごう」や「けいせん」とタイプして、記号を漢字変換の候補から選んで図を描いていくのですが、なかなか、面倒な作業です。

ですので、地図に使える便利な記号を気軽に配置できるようにすることができるようにするのは必須条件でしょう。あと、なかなか「気軽に使える」という条件が難しくて、入力インタフェースも工夫が必要になるかと思います。

画面デザインを考える

本連載の第30回で作ったアスキーアートエディタは、画面の上側でタイルを配置すると、画面の下側にアスキーアートが表示されるというユーザーインタフェースでした。

上が操作画面、下が完成したアスキーアート

しかしこれだと、もう少し縦長の図を作りたいときに不自由ですし、何より、縦横の桁数が決めうちで、使いづらいものでした。そこで、今回は、操作画面だけを表示して、「完成」ボタンを押すと、アスキーアートが表示されるという2画面で構成することにしました。

画面全部が描画領域で、完成ボタンを押すとアスキーアートが出る

プログラムの仕組み

プログラムの骨組みとなる部分は、前回作ったものとほぼ同じで問題ないと思います。プログラムの前半で、初期設定を行い、マウスに応じた処理や、ボタンを押したときの処理を順に記述していく感じです。

アスキーアートでは、1文字を画像の1ドットのように扱うように考えると、作成が楽です。行と列の二次元の要素を持つ配列変数を作っておきます。そして、ユーザーがマウスでアクションを起こすたびに、この配列変数へどの文字を表示するのかを記録していきます。最後に、配列変数をアスキーアートに変換するという処理を行います。

流れをまとめてみると、以下のような感じです。

変数の初期化や、画面の設計

  1. アスキーアート管理用の配列変数を初期化
  2. 画面描画のための設定を行う

マウスが押された時の処理

  1. マウスが押された座標を取得
  2. アスキーアート管理用の配列変数に文字を設定
  3. 画面への描画を行う

完成ボタンが押された時の処理を行う

  1. アスキーアート管理用の配列変数の各要素をチェック
  2. 配列変数をCSV形式に変換して、余分な区切り文字を消す
  3. 結果を画面に表示する

10行プログラム ~ 地図エディタ(雛形)

それでは、実際のプログラムを見ていきましょう。以下が、今回のなでしこ10行プログラムです。

実行すると、いつものようにフォームが表示されます。これをマウスでクリックすると、四角を描画できます。そして、完成ボタンを押すとアスキーアートがメモ帳に表示されます。

結果=空。WH=15。文字サイズは12。筆=「■」。#1
母艦のマウス押した時は~#2
 XX=INT(母艦のマウスX÷WH)。YY=INT(母艦のマウスY÷WH)。#3
 結果[YY,XX]=筆。白色で画面クリア。#4
 ROWを0から(結果の表行数-1)まで繰り返す #5
  COLを0から(結果の表列数-1)まで繰り返す #6
   結果[ROW,COL]=(結果[ROW,COL]&「 」)から2バイト左部分。#7
   (COL×WH),(ROW×WH)へ結果[ROW,COL]を文字表示。#8
完成ボタンとはボタン。そのY=330。そのクリックした時は~#9
  結果を表TSV変換して、タブを空に置換して、メモ記入。#10

実行してみたところ

1行目では初期設定を行います。文字サイズを12ピクセルにするものの、文字と文字の間隔をしていする変数「WH」に15ピクセルを指定しています。

2行目以降の字下げ(インデント)している部分では、マウスボタンが押された時の処理を書いています。

3行目では「母艦のマウスX」と「母艦のマウスY」を参照して、アスキーアートの座標を取得しています。

4行目では、アスキーアートの各ドットを管理する変数「結果」に描画する文字を代入して、一度画面を初期化します。

5行目から8行目では、各ドットを1つずつ見て文字を描画します。アスキーアートの1ドットは、漢字1文字(つまり2バイト)なので、7行目では、半角文字で余りが出ないように2バイトに調節しています。

9行目から10行目では、完成ボタンを作り、これをクリックした時に、アスキーアートへ変換してメモ帳に表示します。変換の方法は、まず、管理用配列変数「結果」をTSV形式(タブ区切りデータ)形式に変換して、タブ区切りのタブを削除すると、アスキーアートが完成します。

改造のヒント1 ~ 筆を選べるようにしよう

それでは、この10行プログラムを元に、もっと使えるものに改良していきましょう。まずは、上のプログラムでは、筆は、「■」だけで変更ができませんでしたので、変更できるように考えてみます。

よく使う記号の一覧があって、そこから筆が選べると親切ですので、リスト部品をフォーム上に配置して、そこに、さまざまな形の記号を登録しておきましょう。これによって、地図が書きやすくなります。以下の数行を10行プログラムに追加してみましょう。

筆リストとはリスト。そのXは400。そのYは10。そのHは200。
そのアイテムは「■ ●○│─┌┐└┘┼├┬┤┴」を文字列分解したもの。
そのクリックした時は~筆は、筆リストのテキスト。

1行目では、リストを作り、画面の右側に配置します。2行目ではリストに記号文字をセットします。そして3行目では、リストをクリックしたときに筆を変更します。

改造のヒント2 ~ マウス操作をなめらかに

これを使っていてストレスに感じるのは、とにかく1文字配置するごとに、クリックをしなくてはならず、とても不便です。そこで、マウスでなぞったところに文字を配置するように改良してみます。

このためには、今までは、イベント「マウス押した時」にすべてのイベントを設定していたのですが、「マウス押した時」「マウス移動した時」「マウス離した時」のイベントを組み合わせて、マウスが押されているかのフラグをうまく利用することで実現できます。

こうした改造を加えた完成版を以下に示します。

# --- 初期設定
結果=空。WH=15。文字サイズは12。筆=「■」。
# --- マウス処理
母艦のマウス押した時は~フラグはオン。母艦のマウス移動した時。
母艦のマウス離した時は~フラグはオフ。
母艦のマウス移動した時は~
 もし、フラグ≠オンならば、戻る。
 XX=INT(母艦のマウスX÷WH)。YY=INT(母艦のマウスY÷WH)。
 もし、(XX<0)または(YY<0)ならば、戻る。
 結果[YY,XX]=筆。白色で画面クリア。
 ROWを0から(結果の表行数-1)まで繰り返す
  COLを0から(結果の表列数-1)まで繰り返す
   結果[ROW,COL]=(結果[ROW,COL]&「 」)から2バイト左部分。
   (COL*WH),(ROW*WH)へ結果[ROW,COL]を文字表示。
# --- 完成ボタン処理
完成ボタンとはボタン。そのY=330。そのクリックした時は~
  結果を表TSV変換して、タブを空に置換して、メモ記入。
# --- 筆の選択肢
筆リストとはリスト。そのXは400。そのYは10。そのHは200。
そのアイテムは「■ ●○│─┌┐└┘┼├┬┤┴」を文字列分解したもの。
そのクリックした時は~筆は、筆リストのテキスト。

アスキー地図エディタの完成図

他にも、今回は、2文字以上の地図記号に対応できませんでしたが、筆リストに、複数文字の地図記号を入れたり、説明用のテキストや吹き出しが入れられたら、より便利に使えると思います。ぜひ、改造に挑戦してみてください。

83/90

インデックス

連載目次
第90回 10行プログラミング最終回~10行プログラミングを振り返って
第89回 フォルダ一括圧縮
第88回 テキストエディタに貼り付けたExcelの表を見やすく整形する
第87回 一発加算電卓
第86回 ブログにHTMLソースを貼れるよう変換する
第85回 カード式メモ帳
第84回 時間電卓を作る
第83回 アスキーアート地図エディタ
第82回 縦書き風テキスト作成ツール
第81回 Excelシートの比較を行う
第80回 ノルマ計算機
第79回 高速バックアップ
第78回 単語帳に読み上げ機能をつける
第77回 ホームページのバックアップツール
第76回 英単語帳を作成する(その2)
第75回 英単語帳を作成する(その1)
第74回 メモリカード挿入でデータをコピーするツール
第73回 モールス信号ソフトの作成
第72回 フォトCDランチャーを作る
第71回 残暑見舞い作成ツールを作る
第70回 画面キャプチャプログラムを作る
第69回 様々なルールに対応するビンゴシートのプログラムを作る
第68回 ビンゴカードを作る
第67回 ビンゴマシンを作る
第66回 パスワードマネージャの作成
第65回 アンドゥ機能をつける
第64回 テキストの比較ツール~FCフロントエンド
第63回 システム情報クリップ
第62回 飲み会電卓を作る
第61回 バイナリエディタの作成
第60回 メールフッタ作成ツール(その2)
第59回 メールフッタ作成ツール(その1)
第58回 プロセス監視ツールを作成する
第57回 TODOメモを作る
第56回 携帯電話をテキストリーダーに使う(2)
第55回 携帯電話をテキストリーダーに使う(1)
第54回 「オープンソースカンファレンス2006 Tokyo/Spring」に参加しました
第53回 10行でチャットソフトを作る(2)
第52回 10行でチャットソフトを作る(1)
第51回 プレゼンタイマーを作る
第50回 カラーピッカーを作る
第49回 簡単な暗号作成プログラム
第48回 お手軽データベース「SQLite」を使う
第47回 CUI(コマンドライン)環境を拡張する
第46回 デスクトップ画像を記録するプログラム
第45回 市外局番で住所を調べる検索プログラム
第44回 コマンドライン型ランチャーを作る
第43回 文字数カウンタを作る
第42回 日本語でバッチ処理
第41回 イベントドリブンと電光掲示板
第40回 なでしこでWindowsの「送る」メニューを使いやすくする
第39回 同人音楽即売会M3に参加して思ったこと
第38回 画像のサムネイル作成
第37回 なでしことExcelで行事予定カレンダーを作ろう
第36回 なでしことExcelで月間カレンダーを作ろう!
第35回 なでしことExcelで年間カレンダーを作ろう
第34回 急な電話にも安心、意外と便利な「手書きメモ」
第33回 携帯電話のアドレスデータを取り出す
第32回 記念日カウンターを作る
第31回 顔文字入力支援ソフト
第30回 アスキーアートのためのエディタ
第29回 HTTPサーバーを作る
第28回 手紙のあいさつ文を作成するプログラム
第27回 ギターコードの構成音を表示
第26回 音楽の再生スピードを変える
第25回 ミニスライドショーを作る
第24回 撮影日で写真を振り分け
第23回 PSP用テキスト画像の作成
第22回 金種計算
第21回 パスワードを自動生成
第20回 携帯メールでWEBを更新する
第19回 時間の使い方を反省するプログラム
第18回 ウェブを画像でキャプチャ
第17回 ラーメンタイマーを作る
第16回 画像のトリミングツール
第15回 ごみの分別カレンダー
第14回 デスクトップ検索ツール
第13回 フォント見本帳
第12回 セピア調の画像ビューワー
第11回 健康チェック
第10回 10行で壁紙にらくがきする
第9回 WEBサイトの更新チェッカー
第8回 WEBページのリンク切れをチェック その2
第7回 WEBページのリンク切れをチェック
第6回 音楽ファイルの整理 - メディアタグから自動フォルダ分類
第5回 請求書の自動作成・印刷~Word連携技
第4回 重要データのバックアップ術
第3回 10行ニュースリーダーを作ろう!
第2回 なでしことは その2
第1回 なでしことは? その1

もっと見る

人気記事

一覧

イチオシ記事

新着記事