-日本語プログラミング言語「なでしこ」公式サイト頼まれて文章を書くとき、「何文字くらいで書いてください」と言われることが多いものです。学校の作文やレポートだったり、会社の社内報だったり、いずれも文字数を指定されます。そこで、日本語でプログラミングできる「なでしこ」を使って、文字数をカウントするツールを作ってみましょう。以下のようなツールを作ります。文字数をカウントします指定文字数を超えると背景が赤くなって警告しますテキストエディタを表示する方法ブラウザで動くなでしこ3で、文字数カウントツールを作るには、HTMLに用意されているテキストエディタの部品(TEXTAREAタグ)を利用することになります。そこで、エディタを表示するだけのプログラムから見てみましょう。今回も、簡易なでしこエディタを使ってプログラムを作ってみます。Webブラウザで、なでしこ簡易エディタにアクセスしたら、以下のようなプログラムを記述して実行してみましょう。「#nako3_div_1」にHTMLを、DOM_HTML設定。#---(*1)TEXTAREAタグを簡易エディタの下に表示したところこのプログラムの一番のポイントは、(*1)の部分です。「DOM_HTML設定」命令を利用して、任意のHTMLタグを書き込みます。id="nako3_div_1">」というタグがあるので、そこにHTMLを書き込みます。それで、エディタを表示するHTMLタグは、以下のようなものです。</textarea>ここで、cols属性は一行に何文字表示するかの列数を、rows属性は何行表示するかの行数を指定します。HTMLでは、他にも、チェックボックスやセレクトボックスなど、さまざまな部品を利用できます。なでしこから、どのようにして、その部品(DOM要素)にアクセスすることができるでしょうか。いくつか方法はありますが、簡単なのは、ID属性を振っておくことです。id="名前">のような形式で記述します。以下のプログラムは、テキストエディタにID属性として「a_txt」を与えて、そのエディタに書かれているテキストを取得して表示する例です。「#nako3_div_1」にHTMLを、DOM_HTML設定。「#a_txt」のDOM要素取得。A_TXTのDOMテキスト取得して表示。『「#id」のDOM要素取得』と書くことで、任意のID属性を持つ、DOM要素を取得できます。『DOMテキスト取得』命令を使うと、エディタなどのテキストデータを取得できます。テキストエディタでキーを押した瞬間を捉えるそして、文字数カウンターを作る上で欠かせないのが、定期的に現在の文字数を数えるという処理です。その時に使えるのが、ユーザーがキーを押した瞬間に処理を行う、onkeyupイベントです。エディタのイベントを処理するには「DOMイベント設定」命令を使います。以下のプログラムは、キーが押されたタイミングで、エディタの文字数を調べて表示するものです。「#nako3_div_1」にHTMLを、DOM_HTML設定。「#a_txt」の「onkeyup」に「カウント処理」をDOMイベント設定。「#info」へ「{CNT}文字」をDOMテキスト設定。id="info">の二つの要素を定義したHTMLをDOMに設定します。続く(*2)の部分では、エディタ「#a_txt」でキーを押す度に発生する「onkeyup」というイベントを処理するために、『DOMイベント設定』命令を記述します。プログラムを完成させようそれでは、文字数カウンターのプログラムを完成させましょう。以下が、プログラムです。エディタ部分のHTMLを工夫し、文字数のカウント処理の部分を作り込んだものです。「#nako3_div_1」にHTMLを、DOM_HTML設定。Aの「onkeyup」に「カウント処理」をDOMイベント設定。「#info」に「{CNT}文字」をDOMテキスト設定。Aの「background-color」に「red」をDOMスタイル設定。Aの「background-color」に「#fffff0」をDOMスタイル設定。言え、前回のプログラムとほとんど同じです。(*1)の部分ではスタイル属性を設定するなどして、見栄えが多少よくなるように工夫しています。(*2)の部分では、指定文字数に合わせて、エディタの背景色を差し替えるようにしています。『DOMの「プロパティ」に「値」をDOMスタイル設定』命令使うと、スタイルを手軽に変更することができます。(*1)の部分でエディタを配置している処理はHTMLなので、かなり自由にカスタマイズできるでしょう。まとめ以上、今回は、文字数カウントツールを作ってみました。HTMLを知っていることが前提ですが、「DOM_HTML設定」などの命令を使うことで、なでしこから、自由にHTMLを操作するプログラムを作ることができます。プログラム上達のヒントは、実際にプログラムを改造してみることです。今回のプログラムを改良して、オリジナルの文字数カウントツールを作ってみると良いでしょう。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。テキスト音楽「サクラ」など。※本記事は掲載時点の情報であり、最新のものとは異なる場合があります。Corporation。