画像提供:マイナビニュース

写真拡大

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

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

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

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

HTML=『

↓エディタ






「#nako3_div_1」にHTMLを、DOM_HTML設定。#---(*1)

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

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



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

○特定のDOM要素を取得する

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

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

# --- HTMLを書き込み ---

HTML=『





「#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=『







「#nako3_div_1」にHTMLを、DOM_HTML設定。

# --- イベントを設定 --- (*2)

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

●カウント処理

S=「#a_txt」のDOMテキスト取得

CNT=Sの文字数

「#info」へ「{CNT}文字」をDOMテキスト設定。

ここまで

プログラムの(*1)の部分では、文字数を数えるために用意したと、文字数を表示するために
の二つの要素を定義したHTMLをDOMに設定します。

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

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

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

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

指定文字数=150

# --- エディタ部分のHTML --- (*1)

HTML=「



{指定文字数}文字のカウンター:










「#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なので、かなり自由にカスタマイズできるでしょう。

○まとめ

以上、今回は、文字数カウントツールを作ってみました。HTMLを知っていることが前提ですが、「DOM_HTML設定」などの命令を使うことで、なでしこから、自由にHTMLを操作するプログラムを作ることができます。

プログラム上達のヒントは、実際にプログラムを改造してみることです。今回のプログラムを改良して、オリジナルの文字数カウントツールを作ってみると良いでしょう。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2005年IPAスーパークリエイター認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。