外観の設計

必要なインターフェース

まず最初の開発のターゲットとして、問題を自動で解くところまでと設定する。その場合に必要となるインターフェースは「問題入力部」「問題を解くのを開始するのを指示する部分」「問題の結果を出力する部分」となる。また本システムでは人間らしく解くことを売りとしているので、解く経緯を出力する部分も必要となる。

問題入力部

私がターゲットとしているのは9×9のナンプレである。数字が入る可能性がある場所は81か所ある。原始的な入力方法としてボタンを9×9に並べて、ボタンを1回押すと数字が1増えるように設計する。9の次は空欄とし、空欄の次は1とする。最低限の方法だが、少なくとも入力方法としては完璧である。しかしこの方法で入力する場合、数字を20か所入れたい場合、ボタンを押す回数が平均4.5回として20×4.59=90回となる。マウスクリックで90回は結構な作業であるし、ファイル保存もできない。

そこで第二の入力方法として、文字列で入力する方法も提供する。

例えば

123456780
234567891
345678912
456789123
567891234
678912345
789123456
891234567
912345678

と9×9のテキストで入力できるようにする。これだけでデバッグは相当やり易くなるはずであるし、テキストファイルで保存しておいてコピペすることも可能となる。これはWeb上ではテキストボックスと取り込みボタン(Importボタン)で事足りると考える。

問題を解くのを開始するのを指示する部分

こう書くとややこしいが、一言で言えば開始ボタンである。つまりボタン一つで良い。ここではExecuteボタンと呼ぶ。

問題の結果を出力する部分

当初問題の結果を出力する部分を計画していたが、ボタンを9×9に並べているので、ここに結果を出力することで対応させることとした。よってこの部分に関しては追加のコンポーネントは不要となった。

解く経緯を出力する部分

これはテキストボックスに出力させることを考える。テキストボックスでなくとも良いが、以降htmlの知識の説明を最小限にするため、テキストボックスにしたことを了承願いたい。

レイアウト

以上で必要なコンポーネントは揃ったので配置する。現在のところ、一番重要なのはナンプレの問題を解けるシステムを作ることなので、あまり凝らずに配置することとする。

私はこのファイルをnanpure.htmlとして保存した。
各部分の説明は次の記事に委ねる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です