-今回は、野鳥を数えることで有名な『カウンタ』ツールを作ってみたいと思います。会場に何人いるか数えたり、ドラマを見ていてお気に入りの人物が何回登場するかを数えたり、とカウンタの使い道は様々です。100円ショップでも買えますが、身近なツールを自作するのは、楽しいものです。本稿を参考に挑戦してみてください。野鳥で有名な『カウンタ』ツールを作ってみよう最もシンプルなカウンタを作ってみるそれでは、最初に最も単純な仕組みのカウンタを作ってみましょう。なでしこ簡易エディタにアクセスし、以下のプログラムをエディタに貼り付けてみてください。それがいいえならば、抜ける。[実行]ボタンを押します。すると、以下のように、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設定を利用したカウンタを作ってみましょう。id="count_btn">カウント</button></div>』DOM親要素にカウンタ画面をHTML設定。「#counter」に値をHTML設定。簡易エディタで、上記のプログラムを実行すると、以下のようになります。ボタンを押すたびにカウントアッププログラムを確認してみましょう。(*1)の部分では、変数「値」を0で初期化します。(*2)の部分では、HTMLで画面を作成します。(*3)の部分では、ボタンをクリックしたときに、値がカウントアップするようにイベントを設定しています。ここで重要のは、HTMLで画面を設定する際に、値を書き換えたり、イベントを設定したい要素には、ID属性を指定しておくことです。IDを振っておくと、プログラムの(*3)に書いているように、ボタンクリックのイベントを記述できます。この時、割り振ったIDを指定するには「#ID」のように記述します。まとめ以上、今回は、身近なツールである『カウンタ』を自作してみました。最初は、Webブラウザのダイアログを利用したものを作り、次に、HTMLを利用して独自の画面を持つツールを作りました。HTMLを工夫すれば、もっとデザインに凝ったツールにすることもできます。なでしこ3で作るなら、自分のスマートフォンでも動かすことができます。本稿を参考に、身近なツールの作成に挑戦してみてください。※本記事は掲載時点の情報であり、最新のものとは異なる場合があります。Corporation。