小学校教員のためのプログラミング入門

Processing導入

 この講義では Processing というプログラミング言語を用いて,プログラミングについて学びます.今回は,プログラミング言語とは何なのかの解説と Processing の導入を行います.

プログラミング言語とは

 コンピュータは与えられた命令に従って動きます.その命令を書き並べたものがプログラムです. WEB ページを見るための WEB ブラウザ,メールを読み書きするためのメーラ,文章を書くためのワープロなどのアプリケーションソフトウェアも,プログラムによってその動作が定義されて動いています.このプログラムを作るという作業がプログラミングです.

 ここでコンピュータはどのような命令を受け取り,実行することができるのでしょうか.コンピュータは「英単語 apple の意味を教えよ」といった命令を直接実行することはできません.コンピュータは数値の加算や減算などの数値演算命令や数値の保存,取り出し,ある数値が正だったら何個先の指示に飛ぶなどの制御命令しか処理することはできません.そして,この命令もコンピュータの中では数値で表されます.つまり,コンピュータが直接解釈することができるプログラムは数値の集合であり,数値の意味に従って,数値を処理するだけの機能しかありません.先の「英単語の意味を教えよ」に答えてその意味を表示させるようにするには,数値演算や制御命令を組み合わせることになります.

 このコンピュータが直接解釈できる命令を機械語(マシン語)と呼びます.前回の仮想計算機の例における16桁の2進数で示した命令がこの機械語です.どのような命令があり,その命令がどのような数値であらわされるかは,コンピュータの中央演算処理装置(CPU)によって決まっています.この機械語のプログラムをスムーズに書くには,命令をあらわす数値などを覚えておく必要があり面倒です.またジャンプ命令等の飛び先を直接書かなければならず,プログラムを変更するとその相対距離が変わってしまうため,そのたびに飛び先も変更しなければなりません.これを解決するために作られたのがアセンブリ言語です.たとえば加算命令だったら ADD という語(ニーモニック)を数値の代わりに書くことができます.また,ジャンプ命令の飛び先などにも名前をつけることができ,人が見てその内容を直感的に理解することができます.アセンブリ言語で書かれたプログラムを実行するには,コンピュータが理解できる機械語のプログラムに変換します.ちなみに,この変換を行うのもプログラムであり,アセンブラと呼ばれています.

 アセンブリ言語はコンピュータが理解できる命令を直接指示することができるので,自由度が高いメリットがありますが,簡単にプログラムを作るという面では非力です. 3+5 という計算をしたい場合,アセンブリ言語では,たとえば

 LOADI 3
 ADDI  5

などと書きますが,単に 3+5 と書けたほうが直感的だと思います.このように,より人に分かりやすい文法でプログラムを書けるようにしたものが高水準プログラム言語と呼ばれるものです.たとえば,BASIC と呼ばれる言語で,3+5 の結果を画面上に表示するプログラムは,

 PRINT 3+5

とすればよく,「3+5 の計算結果を表示(PRINT)するんだな」と意味がすぐにわかります.

プログラム言語の種類

 コンピュータ上で動くプログラムには様々な目的のために,様々な動きをするものがあります.その動きによって,プログラムの書きやすい書き方が異なります.そのために,これまで様々なプログラム言語が考え出されてきました.プログラム言語を書き方の種類で分類すると,手続き型言語,関数型言語,論理型言語, オブジェクト指向言語に分けられます.

 手続き型言語は,命令文を実行する順に並べます.その順を変えるには繰り返し文や分岐文などの制御構造を利用します.手続き型言語には FORTRAN や COBOL,PASCAL,C などがあります.関数型言語は,関数を定義することで動作を指示するもので,LISP や ML が代表的な例です.論理型言語は,形式論理,数理論理に基づいたプログラム言語で,事実を定義することである問題を解決することができます.論理型言語には Prolog などがあります.オブジェクト指向言語は,データとそのデータに対する操作をまとめたオブジェクトの性質を定義することで動作を指示します.オブジェクト指向言語には Smalltalk,C++, Objective-C,Java などがあります.

 上記の高水準プログラム言語を実行するためには,アセンブリ言語で書かれたプログラムを実行するためにアセンブラで機械語に変換するように,機械語に変換しなければなりません.この変換作業を行うプログラムを言語処理系と呼びます.代表的な言語処理系にはコンパイラとインタプリタがあります.

 コンパイラは高水準言語を機械語に変換して出力する言語処理系です.実際にはコンパイラはアセンブラ言語までの変換を行います.その後アセンブラによって機械語への変換を行います.また,アセンブラが作成するのはオブジェクトプログラムと呼ぶもので,実際に実行するためには実行時ライブラリと結合する必要があります.この結合にはリンカを利用します.市販されているプログラム開発環境では,コンパイラ,アセンブラ,リンカを意識することなく利用できるようになっています.

 インタプリタは高水準プログラム言語で書かれたプログラムを順次解釈しながら実行していきます.コンパイラの場合,実行するときには機械語にすべて変換してから実行するため,実行速度が速くなるメリットがあります.一方,プログラムを作るたびにコンパイラを使って変換しなければならないという面倒もあります.

Processing とは

 Processing の公式サイトには次のような記述があります(Procesing 公式サイトより引用).

Processing is an open source programming language and environment for people who want to program images, animation, and sound. It is used by students, artists, designers, architects, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is developed by artists and designers as an alternative to commercial software tools in the same domain.

 この文章を読んでもらえばもう説明をすることはないのですが,Processing は Java という言語をベースとしたオープンソースのプログラミング言語です.プログラムのソースコードを入力する,実行する,デバッグするというプログラミングの一連の作業を行うための一つのソフトウェアとして動くものですので,プログラミング環境といった方がよいかもしれません.公式サイトでも environment という語を使っています.

 Processing は Windows でも Mac でも Linux でも利用できること,作ったプログラムを,どのような OS でも動作する Java アプレットやプログラミング環境なしでも実行可能な形式に変換できることも大きな特徴です.そして,画像やアニメーションを用いた視聴的な表現を得意としています.そのため,対象者の中にアーティストやデザイナ,建築家が含まれています.また,Processing を対象とした書籍も,「ビジュアライジング・データ ―Processingによる情報視覚化手法」,「Built with Processing デザイン/アートのためのプログラミング入門」,「Processing: Creative Coding and Computational Art」など,視覚表現に関連したものが多くなっています.

なぜ Processing なのか

 このような特徴の一方で,用途の中にプログラミングの学習が含まれています.私もこの点に着目し,この講義で扱うプログラミング言語として採用しました.プログラミングの学習に向いている点の一つが,手軽にプログラムを作り,そのプログラムを動かしてみることができる点です.初期のパーソナルコンピュータ(パソコン)では,電源を入れると BASIC というプログラミング言語のインタプリタが起動し,パソコンを操作するということは BASIC のプログラミング環境を操作するということでした.電源を入れた後,キーボードから

PRINT 10+30 [ENTER]

と入力すると 40 と表示されます.これは PRINT 文という画面に表示する命令を用いた BASIC のプログラムをダイレクトモードで実行させた例です.Processing はこの BASIC のプログラミング環境と同様に,簡単にプログラムの入力と実行が可能なのです.さらに,多くのプログラミング環境がインストールを必要とするのですが,Processing はその必要がありません.公式サイトからダウンロードした圧縮ファイルを解凍するだけで,プログラミングが可能となります.解凍したファイルを USB メモリなどに移動すれば,USB メモリを挿したコンピュータでいつでもプログラミングができます.

 私は以前,簡単にプログラミングを体験できる言語として JavaScript を講義で取り上げていました.しかし,自分でプログラミングしたんだと満足感のえられるところまで行きつくのに JavaScript は相応の時間が必要でした.その点 Processing は前に記したように視覚的な表現が得意のため,学習の第一歩の段階から,かなり満足感を味わえるプログラムを作ることが可能です.

 さらに,この講義の目的は,プログラミングとはどのようなものなのかを知ることに加え,教材を作れるようになることです.教材作りには FLASH(Action Script)がよく使われますが,FLASH の開発環境はかなり高価で,また,そのプログラミングには独特な技術を習得する必要があります.Processing は無料で利用できますし,視覚的な表現が得意な点は,教材作成用のプログラミング環境としても十分利用できるものと思っています.加えて,Processing は,web ページに貼ることができる Java アプレットや,直接実行できる形式へ変換できます.これは,多様な教育環境に適応させるときの利点となるはずです.

プログラミング環境の構築

 ここでは,Processing プログラミングをするための準備として,Processing プログラミング環境を構築します.Processing は様々な OS 上で動作しますが,ここでは Microsoft Windows が搭載されたコンピュータで利用することを前提とした説明を行います.

  ダウンロード

 Processing の公式サイト(http://processing.org/)を開き,メニューから DOWNLOAD をクリックします.Linux ,Mac OSX,Windows,Windows (without Java) というメニューがありますので,Windoes をクリックしてください.zip 形式の圧縮ファイルがダウンロードされます.ちなみに,Windows (without Java) は,Java の開発環境を自分で導入できる,もしくは,すでに導入済みの人のためで,ダウンロードするファイルのサイズはかなり小さくなっています.

download.jpgProcessing 公式サイト Download ページのスクリーンショット

  PC へのセットアップ(Windows の場合)

 ここで示すのはあくまで一例です.この通りにする必要はありませんが,よくわからない人は,とりあえず,ここに書いてある手順に従ってセットアップを行ってください.

解凍
ダウンロードした圧縮ファイル(zip形式)を解凍してください.Windows では,解凍ソフトがインストールしていなくても zip 形式のファイルの解凍が可能なはずです.zip ファイルのアイコンをダブルクリックするか,zip ファイルのアイコン上で右クリックをすると表示されるコンテキストメニューから解凍を選ぶと,解凍が行われます.
解凍したフォルダを移動
解凍すると Processingなんちゃら という名前のフォルダができるはずです.これを適当なところに移動させます.起動ドライブ(通常は C ドライブ)に Program Files というフォルダがありますので,この中に移動させるとよいでしょう.
ショートカットアイコンの作成
Processing プログラミング環境をすばやく起動させるために,デスクトップ上に起動用のアイコンを作成します.先ほど移動したフォルダを開き,その中にある processing.exe というファイル上でマウスの右ボタンを押し,そのままデスクトップ上までドラッグ&ドロップします.ドロップ(右ボタンを離すと)コンテキストメニューが表示されますので,ショートカットをここに作成を選択してください.すると processing.exeへのショートカット という名前のアイコンができます.このままではアイコンの名前が長いので,そのアイコン上で右クリックをし,表示されるコンテキストメニューから 名前を変更 を選択して,名前を Processing に変更しておきます.

shortcut.jpgデスクトップに作った Processing.exe へのショートカットアイコン

  USB へのセットアップ (Windows用の場合)

 次に,自分の Windows PC 以外でも USB メモリを挿せば Processing プログラミング環境が利用できるようにする方法を紹介します.PC へのセットアップと同様に解凍を行うと生成される processingなんちゃら という名のフォルダを USB に移動します.そして,ショートカットも USB メモリのルートに作成しておくとよいでしょう.最後に,作成したプログラムを保存する場所も USB メモリになるように変更をします.

データフォルダの作成
USBメモリ内に作成したプログラムを保存するためのフォルダを作成します.フォルダ名は sketch としておきます.
データフォルダの設定
processing.exe を直接実行するか,作成したショートカットを開き,プログラミング環境を起動します.メニューから File - Preference を選択します.表示されるダイアログ内の右上にある Browse ボタンを押し,作成したデータフォルダを選んでください.ちなみに,この設定を行わない場合は,XP なら マイドキュメント,Vista なら ドキュメント の中の Processing フォルダにデータが保存されます.

setup.jpgFile メニュー

setup2.jpgPreference ダイアログ

はじめてのプログラミング

 では,さっそくプログラミングを体験してみます.まず最初に,processing.exe を直接実行するか,作成したショートカットを開いて,プログラミング環境(PDE:Processing Development Environment)を起動してください.すると下図のようなウィンドウが表示されます.ここでは,これをメインウィンドウと呼ぶことにします.メインウィンドウの上部には,Windows の他のソフトウェアと同じようにタイトルバーとメニューがあります.その下にいくつかの機能を呼び出すためのボタンが並び,その次にテキスト文字が入力できるエリアがあります.ここでは,この部分を入力エリアと呼ぶことにします.さらに,その下にはメッセージが表示されるエリアがあります.

PDE.jpgPDE のメインウィンドウ

  Hello Processing

 プログラミング学習の第一歩は,Hello World という文字列を画面に表示するのが一般的ですが,Processing は視覚的な表現が得意,具体的には図形(グラフィック)描画が得意なので,最初の一歩も図形を描画することをしてみます.

 では,入力エリアに次の文字列を入力してください.

line( 0, 0, 100, 100 );

入力が終わったら,入力エリアの上にあるボタンのうち,一番左にある音楽再生ボタンのような絵柄のボタンをクリックしてください.小さなウィンドウが表示され,直線が描かれていると思います.ここでは,このウィンドウを 実行ウィンドウ と呼ぶことにます.

playbutton.jpg実行ボタン(右は実行中の状態)

exe1-1.jpg実行結果

次に,先に入力した文の下に,もう 1 行

ellipse( 50, 50, 50, 50 );

を入力してから,再度先のアイコンを押してみてください.中央に丸が追加されて描かれたと思います.

exe1-2.jpg実行結果

では,line と ellipse の間に

fill( #FF0000 );

という文を入れて,再び実行をしてみてください.中央の描かれていた丸の中が赤く塗りつぶされました.

exe1-3.jpg実行結果

さらに,line の前に

stroke( #0000FF );

という文を入れて,実行をしてください.今後は線と円周が青に変わるったはずです.

exe1-4.jpg実行結果

  スケッチ

 今,プログラム入力エリアには次のような文字列が入力されているはずです.

stroke( #0000FF );
line( 0, 0, 100, 100);
fill( #FF0000 );
ellipse( 50, 50, 50, 50 );

これを プログラムソースコード と呼びます.単にプログラムソースとかソースコード,場合によってはソースと呼ぶこともあります.また,Processing ではプログラムソースコードのことを スケッチ と呼びます.この呼び名に関連して,Processing のプログラミングをすることを sketching とも言います.

  スケッチブック

 次に作ったスケッチを保存してみます.メニューから File - Save を選ぶか,下向きの矢印が書かれたボタンを押してください. 保存ダイアログが表示されます.保存先は先にも書いたように,なにも設定していない場合は XP ですとマイドキュメント,Vista ですとドキュメントフォルダの中の Processing フォルダとなります.原則として,この場所は変更せずに保存します.この保存の際には,スケッチの名前を変更することができます.ここまでスケッチの名前を意図的につける操作をしていなければ,現在のスケッチの名前は日付から自動的に生成された名前になっているはずです.ここでは,Hello という名前に変更して保存します.ファイル名に Hello と入力してから,保存 ボタンを押してください.

save.jpg保存ダイアログ

 保存を行うと,保存先に Hello という名のフォルダができ,その中に Hello.pde という名のファイルが生成されます.この拡張子が pde であるファイルがスケッチの実態です.人に自分のスケッチをあげたい場合には,この pde ファイルをあげればよいことになります.

 なお, Processing におけるプログラムの保存は,スケッチをスケッチブックにしまうという行為として表現します.

  スケッチの呼び出し

 では,保存したスケッチを再度利用するときの手順を説明しておきます.そのために,一旦 PDE を再起動します.メニューから FIle - quit を選ぶか,ウィンドウ右上のバツ印アイコンを押してください.そして再度 Processing を起動させてください.

 保存したスケッチを読み込むためには,メニューから File - Sketchbook を選ぶと,これまでに保存したスケッチの一覧が表示されますので,開きたいスケッチを選んでください.または File - Open を選んで,保存したフォルダの中に,スケッチにつけた名前のフォルダがありますので,その中のスケッチにつけた名前.pde というファイルを指定してください.

open.jpg

スケッチの書き方

最後にスケッチを書くときの基本的な規則を説明します.

stroke( #0000FF );
line( 0, 0, 100, 100);
fill( #FF0000 );
ellipse( 50, 50, 50, 50 );

この1行1行のことをと呼びます.文の最後には必ずセミコロン(;)を付けます.文の中のところどころに空白文字が入っています.空白文字を入れられる所にはいくつでも空白文字を入れることができます.また,空白文字とは半角スペース(半角1字の空白),タブ,改行の総称です.よって,1行目の文は次のように記述することもできます.

stroke    (     
     #0000FF
);

文の中で空白文字を入れることができるのは,簡単にいえば文を構成する要素と要素の間で,stroke や #0000FF のように一つの意味をなす文字列の途中に空白文字を入れることはできません.

ソースコードに使える文字は半角英数字と一部の半角記号だけです.ただし,後に説明する文字列リテラルの中とコメントの中には全角(日本語)文字を入れることができます.コメントとは,ソースコードの説明や覚書を書き込んでおくために利用するものです.コメントは // を書いたところから行末まで,もしくは,/* から */ までの間に書くことができます.次にコメントを入れたソースコードの例を示します.

/*
  テストプログラム
*/
stroke( #0000FF ); // 線の色を青色に
line( 0, 0, 100, 100);
fill( #FF0000 );
ellipse( 50, 50, 50, 50 );