PR

 本連載では、趣味や仕事に役立つプログラムを作りながら、プログラミングの便利さを体験していきます。プログラミングというと難しい印象がありますが、日本語プログラミング言語「なでしこ」を使って、見た目にも読みやすく、分かりやすいプログラムを作っていきます。

 今回は、なでしこでオリジナルWebブラウザを作ってみようと思います。ただのWebブラウザを作るだけだとつまらないので、Webページをキャプチャして、画像として保存する機能をつけてみたいと思います。

 本題に入る前に、ちょっと余談ですが、先日、日経パソコンの連載で対談した兼宗先生を含め、情報教育に携わっている先生たちの前で話をする機会がありました。そこでは、私が作った「テキスト音楽サクラ」というフリーの音楽製作ソフトについて紹介しました。

図1 テキスト音楽「サクラ」

 テキスト音楽サクラは、テキストエディタに向かって「ドレミーソミレド」と書くと、その通りの音楽を演奏するという音楽製作ソフトです。ワープロ感覚で音楽が作れるので、とても楽しく作曲を行うことができます。

 情報教育と音楽というと、ちょっとミスマッチなもののように感じます。ですが、音楽の構成要素には、フレーズの繰り返しがあったり、音の選択があったりと、音楽製作はとてもプログラミング的な要素が強いのです。

 ですので、プログラミングはやってみたいけど、何かきっかけが欲しいという方が居れば、音楽プログラミングからはじめると、知らず知らずのうちに、プログラミング能力が養われることでしょう。

 そんなわけで「音楽からプログラミングを学ぶ」のはとても面白そうだと、先生たちと盛り上がったのでした。おもしろそうだと思った方は「サクラ」のページからダウンロードしてみてください。ユーザーの方々が作った5000曲以上のデータも公開しています。

 ※ちなみに、サクラは平成18年度の高校の情報Aの教科書(東京書籍)に掲載されました。

Webページのキャプチャソフトをするプログラム

 それでは、今回のプログラムを見ていきましょう。はじめに、「キャプチャ機能付Webブラウザ」のプログラムをお見せします。以下のプログラムをなでしこのエディタにコピーして実行してみてください。

【プログラム】

【プログラムソース1】

# --- (1)ブラウザを作成
WEB部品とはブラウザ。
そのサイズは「0,0,500,400」
そのURLは、「http://nadesi.com」。
# --- (2)キャプチャボタンを作成
キャプチャボタンとはボタン。
そのサイズは「510,10,630,42」
# --- (3)保存用のイメージ部品を作成
保存用とはイメージ。その可視はオフ。
# --- (4)ボタンの動作
キャプチャボタンをクリックした時は
  保存用へWEB部品のハンドルを窓ハンドルキャプチャ。
  保存用を「{デスクトップ}キャプチャ.png」に画像保存。
  「{デスクトップ}キャプチャ.png」を起動。

図2 実行してみたところ。キャプチャボタンを押すと、その時表示していたWebページをキャプチャしてファイルに保存します

【使い方】

 「なでしこ」のホームページが表示されましたか。このプログラムを実行すると、簡易Webブラウザが動きます。普通のWebブラウザと同じように、リンクをクリックすることで次のページに移動できます。

 そして、気に入ったページがあれば、「キャプチャ」ボタンを押してみてください。表示しているページを画像にキャプチャしてデスクトップの「キャプチャ.png」というファイルに保存することができます。

【プログラムの流れ】

 このプログラムは、以下のような4つの部分に分けることができます。

(1)ブラウザを作成する
(2)キャプチャボタンを作成する
(3)保存用のイメージ部品を作成する
(4)ボタンの動作を定義する

 このうち、今回解説するポイントは「ブラウザの作り方」と「ボタンを押した時に反応させる方法」の2つです。

Webブラウザに関して

 わずか、数行でWebブラウザが完成するなんて!と驚かれた方も居ると思います。こんなことができるのも、MicrosoftのInternet Explorer(以下IE)のおかげです。というのも、IEのWebブラウザ機能が「コンポーネント」として提供されているからです。

 (※コンポーネントというのは、プログラムの機能の一部を切り出したもので、他のプログラムから利用したりと再利用可能な状態で提供されている部品を指します。)

 IEのコンポーネントを利用することで、自分のソフトにWebブラウザの機能を追加することができるのです。IEコンポーネントは高機能な上に、自分のソフトに組み込みが簡単なので多くのソフトで利用されています。

 また、IEコンポーネントを利用して作られたブラウザは多く、タブブラウザとして人気の、SleipnirLunascapeもこれを利用して作られています。

オリジナルブラウザを作る3行プログラム

 さて、なでしこで、IEコンポーネントを画面に貼り付けるには、「(部品の名前)とはブラウザ。」と一行書くだけです。以下のプログラムでは、ブラウザ部品を画面に作成し、なでしこのページを表示します。

【プログラムソース2】

WEB部品とはブラウザ。
そのレイアウトは「全体」。
そのURLは、「http://nadesi.com」。

 この通り、たった3行で、Webブラウザの完成です。1行目でブラウザを「WEB部品」という名前で作成し、2行目では、WEB部品を配置する時の大きさを指定します。レイアウトに「全体」を指定すると、画面全体に配置されます。3行目では、URLを指定して、ページを表示しています。

ボタンを押したら反応する仕組みを作る

 次に、ボタンを押したら反応する仕組みを紹介します。

 まず、画面にボタンを作る方法ですが、これは「(部品の名前)とはボタン」と書きます。そして、クリックした時に何か反応する時には、以下のように「(部品の名前)をクリックした時は」と書いて、その時にすることを記述します。

【プログラムソース3】

挨拶ボタンとはボタン。
挨拶ボタンをクリックした時は
  ※ここにクリックした時に行う動作を記述
  「こんにちは」と言う。

図3 ボタンをクリックすると挨拶をします

 上のようにクリックした時の動作を書くときは、字下げ(インデント)して書くようにします。

 これを応用して、西暦を和暦に変換するプログラムは以下のように書くことができます。例えば、エディタ部品に1976と入力して、和暦変換ボタンを押すと昭和51年と和暦を得ることができます。

【プログラムソース4】

西暦エディタとはエディタ。
和暦変換ボタンとはボタン。
和暦変換ボタンをクリックした時は
  西暦エディタを和暦変換して答えに代入。
  「{西暦エディタ}年は、{答え}です!」と言う。

図4 西暦を和暦に変換します。

 「(名前)とはエディタ」と書くとエディタ部品が画面に作成されます。

 エディタ部品とボタン部品を組み合わせれば、この和暦西暦変換プログラムの他に、単位変換プログラムなども手軽に作ることができるでしょう。

まとめ

 今回は、Webページのキャプチャソフトを作ってみました。IEコンポーネントを利用することで、オリジナルブラウザがささっと作れることが分かりました。

 また、ボタンを押した時に反応して何か動作を行うプログラムの作り方も見てきました。

 次回は、画像のキャプチャについて詳しく説明するつもりです。お楽しみに。

はじめてこの連載を読む方へ
 この連載では、日本語でプログラムが書ける「なでしこ」というツールを使って仕事に役立ちそうなプログラムを紹介しています。なでしこのプログラムエディター(なでしこエディタ)に、記事中で紹介しているプログラムソースをコピー・アンド・ペーストし、実行ボタンを押すだけで、プログラムを動作させることができます。詳しい内容は本連載第1回をご覧ください。


【PCオンライン編集部からのお願い】
「なでしこ」は個々のユーザーの責任において利用してください。
コラムで紹介するなでしこのプログラム動作については編集部でも確認していますが、すべてのユーザーのパソコン環境で同じように動作することを保証するものではありません。
申し訳ありませんが、紹介する内容について、個別のご質問にはお答えしかねます。なでしこの公式ページでは詳しいマニュアルや質問を受け付ける掲示板が提供されていますので、そちらをご参照ください。
よろしくお願いいたします。