ゼロからはじめてみる日本語プログラミング「なでしこ」(12) 文字数カウントツールを作ってみよう


日本語プログラミング言語「なでしこ」公式サイト

頼まれて文章を書くとき、「何文字くらいで書いてください」と言われることが多いものです。学校の作文やレポートだったり、会社の社内報だったり、いずれも文字数を指定されます。そこで、日本語でプログラミングできる「なでしこ」を使って、文字数をカウントするツールを作ってみましょう。以下のようなツールを作ります。

文字数をカウントします

指定文字数を超えると背景が赤くなって警告します

テキストエディタを表示する方法

ブラウザで動くなでしこ3で、文字数カウントツールを作るには、HTMLに用意されているテキストエディタの部品(TEXTAREAタグ)を利用することになります。そこで、エディタを表示するだけのプログラムから見てみましょう。

今回も、簡易なでしこエディタを使ってプログラムを作ってみます。Webブラウザで、なでしこ簡易エディタにアクセスしたら、以下のようなプログラムを記述して実行してみましょう。

 HTML=『
 <div>↓エディタ</div>
 <textarea cols="60" rows="6">
 ここに文章を入力
 </textarea>
 』
 「#nako3_div_1」にHTMLを、DOM_HTML設定。#---(*1)

TEXTAREAタグを簡易エディタの下に表示したところ

このプログラムの一番のポイントは、(＊1)の部分です。「DOM_HTML設定」命令を利用して、任意のHTMLタグを書き込みます。その際、なでしこ簡易エディタのすぐ下には、「<div id="nako3_div_1">」というタグがあるので、そこにHTMLを書き込みます。

それで、エディタを表示するHTMLタグは、以下のようなものです。

 <textarea cols="列数" rows="行数">
     エディタに表示する文章
 </textarea>

ここで、cols属性は一行に何文字表示するかの列数を、rows属性は何行表示するかの行数を指定します。HTMLでは、他にも、チェックボックスやセレクトボックスなど、さまざまな部品を利用できます。

特定のDOM要素を取得する

ところで、HTMLでエディタ部品などを記述した場合、なでしこから、どのようにして、その部品(DOM要素)にアクセスすることができるでしょうか。いくつか方法はありますが、簡単なのは、ID属性を振っておくことです。HTMLでID属性を振るには、<tag id="名前">のような形式で記述します。

以下のプログラムは、テキストエディタにID属性として「a_txt」を与えて、そのエディタに書かれているテキストを取得して表示する例です。

 # --- HTMLを書き込み ---
 HTML=『
 <textarea id="a_txt" cols="60" rows="6">
 いろはにほへと
 </textarea>
 』
 「#nako3_div_1」にHTMLを、DOM_HTML設定。
 # --- DOM要素取得 ---
 A_TXT = 「#a_txt」のDOM要素取得。
 A_TXTのDOMテキスト取得して表示。

『「#id」のDOM要素取得』と書くことで、任意のID属性を持つ、DOM要素を取得できます。そして、『DOMテキスト取得』命令を使うと、エディタなどのテキストデータを取得できます。

テキストエディタでキーを押した瞬間を捉える

そして、文字数カウンターを作る上で欠かせないのが、定期的に現在の文字数を数えるという処理です。その時に使えるのが、ユーザーがキーを押した瞬間に処理を行う、onkeyupイベントです。そして、エディタのイベントを処理するには「DOMイベント設定」命令を使います。

以下のプログラムは、キーが押されたタイミングで、エディタの文字数を調べて表示するものです。

 # --- HTMLを書き込み --- (*1)
 HTML=『
 <textarea id="a_txt" cols="60" rows="6"></textarea><br>
 <div id="info"></div>
 』
 「#nako3_div_1」にHTMLを、DOM_HTML設定。

 # --- イベントを設定 --- (*2)
 「#a_txt」の「onkeyup」に「カウント処理」をDOMイベント設定。

 ●カウント処理
     S=「#a_txt」のDOMテキスト取得
     CNT=Sの文字数
     「#info」へ「{CNT}文字」をDOMテキスト設定。
 ここまで

キーを押したタイミングで文字数をカウントするプログラム

プログラムの(＊1)の部分では、文字数を数えるために用意した<tetarea id="a_txt">と、文字数を表示するために<div id="info">の二つの要素を定義したHTMLをDOMに設定します。

続く(＊2)の部分では、エディタ「#a_txt」でキーを押す度に発生する「onkeyup」というイベントを処理するために、『DOMイベント設定』命令を記述します。

プログラムを完成させよう

それでは、文字数カウンターのプログラムを完成させましょう。以下が、プログラムです。エディタ部分のHTMLを工夫し、文字数のカウント処理の部分を作り込んだものです。

 # --- 文字数の指定 ---
 指定文字数=150

 # --- エディタ部分のHTML --- (*1)
 HTML=「
 <div style="padding:10px; border: 1px solid silver;">
   <div>{指定文字数}文字のカウンター：</div>
   <textarea id="a_txt" cols="60" rows="6"
     style="font-size: 1em"></textarea><br>
   <div id="info"></div>
 </div>
 」
 「#nako3_div_1」にHTMLを、DOM_HTML設定。
 # --- DOMイベントを指定 ---
 A = 「#a_txt」のDOM要素取得
 Aの「onkeyup」に「カウント処理」をDOMイベント設定。

 ●カウント処理
     # --- 文字数のカウント ---
     S=AのDOMテキスト取得
     CNT=Sの文字数。
   「#info」に「{CNT}文字」をDOMテキスト設定。
     # --- 文字数に合わせて背景の色を変更 --- (*2)
     もし、CNT>指定文字数ならば
         Aの「background-color」に「red」をDOMスタイル設定。
     違えば
         Aの「background-color」に「#fffff0」をDOMスタイル設定。
     ここまで
 ここまで。

とは言え、前回のプログラムとほとんど同じです。(*1)の部分ではスタイル属性を設定するなどして、見栄えが多少よくなるように工夫しています。

(＊2)の部分では、指定文字数に合わせて、エディタの背景色を差し替えるようにしています。『DOMの「プロパティ」に「値」をDOMスタイル設定』命令使うと、スタイルを手軽に変更することができます。

特に、(＊1)の部分でエディタを配置している処理はHTMLなので、かなり自由にカスタマイズできるでしょう。