日本語プログラミングで野鳥カウンタを作ろう

今回は、野鳥を数えることで有名な『カウンタ』ツールを作ってみたいと思います。会場に何人いるか数えたり、ドラマを見ていてお気に入りの人物が何回登場するかを数えたり、とカウンタの使い道は様々です。もちろん、100円ショップでも買えますが、身近なツールを自作するのは、楽しいものです。本稿を参考に挑戦してみてください。

• 野鳥で有名な『カウンタ』ツールを作ってみよう

最もシンプルなカウンタを作ってみる

それでは、最初に最も単純な仕組みのカウンタを作ってみましょう。まずは、なでしこ簡易エディタにアクセスし、以下のプログラムをエディタに貼り付けてみてください。

値＝1
オンの間
  「カウンタの値 : {値}」を二択。
  もし、それがいいえならば、抜ける。
  値＝値＋1
ここまで。

そして、[実行]ボタンを押します。すると、以下のように、Webブラウザ上のダイアログが表示され、そこにカウンタ値が表示されます。

• プログラムを実行するとダイアログに値が表示されます

この時、[OK]と[キャンセル]の二つのボタンが表示されるので、[OK]ボタンを押すとカウンタの数値が一つずつ加算され、[キャンセル]ボタンを押すとカウンタは終了します。

• [OK]ボタンを押すと加算、[キャンセル]で終了します

プログラムを確認してみましょう。このプログラムは、「オンの間 ... ここまで」構文を利用して、永遠にプログラムを繰り返す仕組みを利用しています。そして、変数「値」を利用して、その値を一つずつ加算することで、カウントを行います。画面への表示は「二択」命令を利用します。

「二択」命令を使うと、メッセージと共に[OK]と[キャンセル]のボタンを持つダイアログを表示します。戻り値は、変数「それ」に代入されます。[OK]ボタンを押すと、はいの値、[キャンセル]ボタンを押すと、いいえの値が得られます。

「元気ですか？」と二択。
もし、それがはいならば、「良かった」と表示。
もし、それがいいえならば、「お大事に」と表示。

上記プログラムを簡易エディタで実行してすると以下のように表示されます。

• [キャンセル]ボタンを押した時

HTML設定について

とは言え、Webブラウザ標準のダイアログでは、なんだか味気ないですよね。せっかく、自作のツールを作るのですから、もう少しデザインに凝りたいものです。なでしこのプログラムは、Webブラウザ上で動きます。つまり、Webサイトの記述言語であるHTMLを利用してデザインを作り、そこになでしこで動きを加えることができます。

なでしこのプログラムで、HTMLを差し込むには、以下のように記述します。例えば、HTMLでタイトルを表す「<h1>こんにちは</h1>」を差し込んでみましょう。このように書くと、HTML文書内の「#nako3_div_1」というIDが振られた要素のHTMLを書き換えることができます。

「#nako3_div_1」に「<h1>こんにちは</h1>」をHTML設定。

ちなみに、「#nako3_div_1」というのは、なでしこ3簡易エディタで、エディタ利用者の皆さんが、HTML設定で任意のHTMLを設定できるように用意されているものです。しかし、覚えにくいので、簡易エディタには最初から、この値が『DOM親要素』という変数に入っています。

DOM親要素に「<h1>こんにちは</h1>」をHTML設定。

上記のプログラムを実行すると、以下のように表示されます。

• HTML設定の利用例

HTMLで見栄えの良いカウンタ画面を作ろう

それでは、HTML設定を利用したカウンタを作ってみましょう。

# --- 変数の設定 --- (*1)
値 = 0
# --- カウンタ画面を作成 --- (*2)
カウンタ画面＝『
  <style> #counter { font-size:32px; line-height:32px; } </style>
  <h1>カウンタ</h1>
  <div id="counter">0</div>
  <div><button id="count_btn">カウント</button></div>
』
DOM親要素にカウンタ画面をHTML設定。
# --- イベントを設定 --- (*3)
「#count_btn」をクリックした時には
  値 = 値 + 1
  「#counter」に値をHTML設定。
ここまで。

簡易エディタで、上記のプログラムを実行すると、以下のようになります。

• ボタンを押すたびにカウントアップ

プログラムを確認してみましょう。(＊1)の部分では、変数「値」を0で初期化します。(＊2)の部分では、HTMLで画面を作成します。そして、(＊3)の部分では、ボタンをクリックしたときに、値がカウントアップするようにイベントを設定しています。

ここで重要のは、HTMLで画面を設定する際に、値を書き換えたり、イベントを設定したい要素には、ID属性を指定しておくことです。そして、IDを振っておくと、プログラムの(＊3)に書いているように、ボタンクリックのイベントを記述できます。この時、割り振ったIDを指定するには「#ID」のように記述します。

まとめ

以上、今回は、身近なツールである『カウンタ』を自作してみました。最初は、Webブラウザのダイアログを利用したものを作り、次に、HTMLを利用して独自の画面を持つツールを作りました。HTMLを工夫すれば、もっとデザインに凝ったツールにすることもできます。そして、なでしこ3で作るなら、自分のスマートフォンでも動かすことができます。本稿を参考に、身近なツールの作成に挑戦してみてください。