「情報処理」1 年文 I/II クラス 9-10 ＃ 5
久野靖∗

1994.11.21

駒場祭おつかれ様でした。それで、WWW でも掲示した通りレポート 4B の提出は来週 11/28の授業開始までとします。本日の内容はお約束通りお絵描きと、その前に「まだプログラムが書けない」人のための特訓、およびこれまたお約束の「; はどこにつけるかの解説」ということにさせて頂きます。

プログラムはとは結局何か

1

プログラムはむずかしい、よく分らない、という人は依然としているけれど、それらの人が「なぜわからない」かを究明するのは結構むずかしい。(ここでインタビューもしてみたいですね!) とまれ、同じことを色々な角度から説明するという方法を取ってみよう。
まず、プログラムというのは計算機が実行する「ビット列の加工」のやり方を指示したものだ、というのは前からさんざんやりましたね? そして、計算機というのはおもに CPU(加工を行うところ) とメモリ (ビット列を保持しておくところ) から成るということも。これに対応して、プログラムの「材料」というのは結局次の 2 つしかない。

(a) ビット列を入れる「箱」(変数)…メモリに対応。
(b) ビット列を加工する動作の指示…CPU の動作に対応。
これらはそれぞれ、 Pascal プログラムの場合「変数宣言」 (var 部) と「文」に対応していた。しかし「文」は沢山あって目立つけれど、変数の方は最初にちょっとあるだけだからあまり重要な気がしない。ところが、プログラムの各「文」を実行している時それぞれの変数がどんな値を保持しているか理解しなければ、プログラムは書けない。
その辺を理解して頂くために、変数の「箱」を描いた絵を使ってみよう。プログラムそのものは枝分れのない時間差問題のプログラムを例に用いる (図 1)。
3 時 22 分 40 秒と 5 時 18 分 25 秒を入力とした場合に、各段階ごとに変数の「箱」の値が変化していく様子を図 2 に示した。このように、PAD なり Pascal なりで記述された「動作」が実行されるごとに、変数の値がどう変化していくかをイメージすることがプログラム理解のポイントとなる。もしよく分らなくなったら、自分でこれと同じような図を描いて考えることはよい方針である。
演習 1 図 3 の PAD 図およびそれを変換してできた以下の Pascal プログラムについて、適当な入力を仮定して変数の箱の値の変化の様子を描き、これは要するに「何をしている」のか述べよ。

program sam6a(input, output);var a, b, c: integer;∗

筑波大学大学院経営システム科学専攻

1

二つの時刻の間の時分秒

A,B,C を入力

(1)

X,Y,Z を入力

(2)

二つの時刻の秒差を求める

sec := (3600X + 60Y + Z)
- (3600A + 60B + C)

時間の差を求め秒差は減らす

hour := sec div 3600
sec := sec mod 3600分の差を求め秒差は減らす

min := sec div 60
sec := sec mod 60

hour, min, sec
を出力

(3)

(4)

(5)

(6)

図 1: 枝分れのない時間差問題の PAD 図

(1)

(2)

(3)

(4’)

(4)

(5’)

(5)

A

3Xsec

B

22Yhour

C40Z

min

A

3X

5sec

B

22

Y

18hour

C40

Z

25min

A

3X

5sec

B

22

Y

18hour

C40

Z

25min

A

3X

5sec

6945

B

22

Y

18hour

1C40

Z

25min

A

3X

5sec

3345

B

22

Y

18hour

1C40

Z

25min

A

3X

5sec

3345

B

22

Y

18hour

1C40

Z

25min

55

A

3X

5sec

45

B

22

Y

18hour

1C40

Z

25min556945

図 2: 図 1 のプログラムにおける変数の値の変化2

a, b を入力

(1)c := a(2)a := b(3)b := c(4)a, b を出力(5)？？？とある例題

図 3: とある例題プログラムの PAD 図

beginwrite(’a = ’); readln(a);write(’b = ’); readln(b);c := a; a := b; b := c;writeln(’a = ’, a:2, ’ b = ’, b:2)
end.

2

どこに「;」を入れるべきか?

これまで Pascal のプログラムを書いて頂いて、いくらか書けるようになった人を一番悩ませるのは「どこに; を入れるべきで、どこには入れなくてもいいか」という問題のようです。ここではちょっと詳しくその説明をしてみませう。
まず、資料#2 でも説明したように、 Pascal では一番外側の begin から end. までのところは次のようになっている。

begin

文;

文;

…

;

文 end.

つまり、「;」は「文と文の区切りに入れる」ということである。それをはっきりさせるように、先の sam6a のプログラムについて、それぞれの文を四角で囲んだものを図 4 に示した。確かに文と文の切れ目に「;」が入っている。
program sam6a(input, output);var a, b, c: integer;
begin
write(’a = ’) ; readln(a) ;write(’b = ’) ; readln(b) ;c := a ; a := b ; b := c ;writeln(’a = ’, a:2, ’ b = ’, b:2)
end.

図 4: とある例題プログラムの文を箱で囲む

3

では、if による枝分かれがあったらどうだろう? if 自体も 1 つの「文」であり、なおかつこの中に複数の「文」が含まれている、ということが問題をやっかいにしている。つまり、こうなっているわけだ。

if条件then文

文else

演習 2 これをヒントに、前回出てきた次のプログラムについて、手で書き写すかプリンタでプリントアウトした上で、それぞれの文を四角で囲め。if 文は全体として文であり、なおかつ中に文が入っていることに注意。

program sam4c1(input, output);var a, b, c: real;
beginwrite(’a = ’); readln(a);write(’b = ’); readln(b);write(’c = ’); readln(c);if a > b thenif a > c thenwriteln(’larger value = ’, a:8:4)
elsewriteln(’larger value = ’, c:8:4)
else
if b > c thenwriteln(’larger value = ’, b:8:4)
elsewriteln(’larger value = ’, c:8:4)
end.
ところで、if-then-else if-then の連鎖は本当は多数の if 文が組み合わさっているのだが、ここでは簡単のため図 5 左のように各動作として文を複数含んだ 1 個の文であると考えておこう。そうしてみると、符号の問題のプログラムについて文を箱で囲んだものは図 5 右のようになり、確かに「文と文の切れ目」にのみ「;」があることが分かる。
最後の難関として、「if の枝に複数の文を書きたい時には begin と end で囲む」という問題を考える。begin と end で囲んだものは「複合文」といい、それ全体として 1 つの文だが、中に複数の文を含んでいる。つまり

begin

文;

文;

…

;文endのようになる。
演習 3 次の例題プログラムについて、文を箱で囲み、確かに文と文の切れ目にのみ「;」があることを確認せよ。

program dam6b(input, output);var a, b, c: integer;
beginwrite(’a = ’); readln(a);write(’b = ’); readln(b);4program sam4b(input, output);var a, b, c: integer;if 条件 thenbegin

文

write(’x = ’) ; readln(x) ;else if 条件 thenif x < 0 then文

sign := -1

else if 条件 thenelse if x > 0 then文

sign := 1

elseelse

文

sign := 0 ;writeln(’a = ’, a:2, ’ b = ’, b:2)
end.

図 5: 符合問題プログラムの文を箱で囲む

if a < b then begin
c := a; a := b; b := cend;writeln(’a = ’, a:2, ’ b = ’, b:2)
end.というわけで、これからも「;」の入れ方が分からなくなったら文を箱で囲んで見ることをお勧めする。

3

お絵描きについてさて、前回お約束したお絵描きのお話に行きましょう。まず最初に説明しなければならないのは、計算機でお絵描きをする時には「ペイント系」と「ドロー系」の 2 つの系統があって、これらは全然違っているということである。この名前の由来は、Apple Computer という会社が Macintoshを最初に世に出した時一緒に出した 2 つのお絵描きソフト MacPaint と MacDraw から来ている。
まずドロー系から説明しよう。ドロー系のお絵描きソフトというのは、いわば「無限に伸縮性のある針金でできた、直線や長方形や円や楕円の形をした枠」を紙の上に置いていくものと思えば良い (なお、それに無限に伸縮性のあるスクリーントーンを貼ることもできる)。それで何が嬉しいかと言うと、紙の上に置いてみてちょっと位置が悪いなと思ったら (何しろ針金の枠だから)ちょっとずらして見たりでき、いくらでも直しが効くということである。

3.1

idraw 入門

ものは試し、ドロー系ソフトをとにかく使ってみよう。ここでは idraw という、上述の MacDrawの「そっくりさん」のフリーソフト (無料で入手できるもの) を使う。無料だから多少使いづらくても文句を言わないように。 idraw を起動するには、 Kterm の窓で% idraw &5

図 6: idraw の窓の様子という。しばらく (1 分くらい!) 待つと図 6 のような新しい窓が現れる。
こここで、窓の左側に「選択」などと並んでいるのは「パレット」と呼び、各種操作や描く図形の種類を切替えるのに使う。パレットの上にマウスカーソルを持っていき、マウスボタンをどれでもいいから押してパレットの押した項目が反転することを確認してみよ。
一方、窓の上の方に「ファイル」などと並んでいるのは「プルダウンメニュー」と呼び、パレットにないような各種の操作を起動するのに使う。メニューの使い方は既によくご存じの背景メニューに似ているが、少しだけ違う。まず「ファイル」などと書かれた文字の上でボタンを押し下げ、そのまま保持する。するとメニューが現れるので、そうしたらボタンを押したままマウスを移動して選択したい項目を反転させ、その状態でボタンを離すとその項目が起動される。気が変わってやめたい場合にはマウスカーソルをメニューの外に出して (どれも反転してない状態で) ボタンを離せば何も起こらない。さっそく、各メニューにどんな項目があるかを一通り見物してみよ。
さて、ドロー系でお絵描きを行なう時美しくするコツは (あくまでも私の考えだが)、きちんと方眼紙を用いて、その目の上に合わせて線を引くことである。皆様の idraw の窓には方眼が現れていませんね? そこで、「ビュー」メニューの中の「グリッド表示/非表示」という項目を選んで目盛りを表示させる。ついで、同じメニューの「グリッド強制あり/ なし」を選んで窓の一番上に「グリッド強制あり」と表示された状態にする。これで、あなたが描く直線や四角はすべて目盛りの上に乗るように idraw が面倒を見てくれる。

3.2

idraw による図形描きではいよいよ絵 (ドロー系の場合には「図」という方が正確かも知れない) を描こう。以下では特に指定しない限り、マウスボタンはすべて左ボタンを使うこと!
まず、パレットで四角を選び、その後窓の中で左ボタンを押し、押したままマウスを移動する。
すると、移動につれて点線で四角が表示される。(その四角が必ず方眼の目盛りに揃っていることに注意。) 適当なところでボタンを離すと、その位置に四角が置かれる。さっそく、いくつか四角を描いてみよ。また、丸や直線も同様のやり方で描ける。描いてみよ。

6

残りの図形は、やり方がちょっと違う。例えば折れ線のところを選んでから、窓の中で左ボタンをクリックする (押して離す)。そのままマウスを移動すると、さっきと同様に直線が描かれ始める。次に適当な位置で再度クリックすると、そこまでの直線は固定され、そこから新しい直線が描かれ始める。これだといつまでたっても終らないが、終りにしたい時はマウスの中ボタンを押せばそこまでで折れ線がおしまいになる。さっそく折れ線を描いてみよ。また、曲線 (折れ線をなめらかにしたようなもの)、多角形、閉曲線も (終りにすると最初の点と結ばれて閉じた図形になるだけで) ほぼ同様である。描いてみよ。
最後に、文字列が残った。文字列については、まずパレットで文字列を選び、次に窓の中で左ボタンをクリックすると縦棒が現れる。その状態でキーボードから打ち込むと文字が入る。漢字を入れたい場合には、Mule と同様「Contorol-\」を打てばローマ字モードになり、あとは同様に使えるが、ただし! ローマ字モードから抜ける方法はなぜか「Shift-Space」である。文字列を入れ終ったら、次に入れたい場所をクリックするか、パレットで別の図形を選べばそれで固定される。

3.3

選択と移動

ところで、常に一番最後に描いたものの周囲に「小さい四角」が表示されていることに気がつきました? これは「ハンドル」といい、その図形が「選択されている」ことを意味する。
実は、マウスの右ボタンで図形の上をクリックすると、その図形が選択図形になる (やってみよ)。また、同時に複数の図形を選択することもできる。そのためには、次のどちらかを行なう。

1. 四角を描く要領で、選択したい図形を囲む領域の右上隅で右ボタンを押し、そのままマウスを移動して (長方形が表示される) 選択したい図形を囲む四角ができたところでボタンを離す。
2. シフトボタンを押しながら右ボタンで図形の上をクリックすると、その図形がこれまでの選択に追加される。選択されているものの上でシフトボタンを押しながらクリックすると、選択から外される。
だいたいは 1 をやった後 2 で微調整をする。さっそくやってみよ。
では、図形の選択は何の役に立つのか? まず、図形を移動するとき役に立つ。マウスの中ボタンは図形の移動機能に対応していて、選択された図形群のどれかの上で中ボタンを押し、そのままの状態でマウスを移動すると図形群がマウスに呼応して移動する。 (やってみよ。) 実は、移動したい図形が 1 個だけの場合にはいちいちまず右ボタンで選択しなくても、いきなり中ボタンを押すことで選択しかつ移動開始できる。

3.4

様々な属性調整

さて、これまでのところ図形はいろいろできたが、線の太さも文字の形も 1 種類なのであまりすばらしくない。ところが! ここからがドロー系ソフトのすばらしいところで、後から色々属性を変化させられる。まず文字列をどれか 1 個右ボタンで選択し、その状態で「フォント」メニューを下ろしてどれか適当なフォントを選んでみよ。すると、選択した文字列はそのフォントに変わってしまう。
次に、直線または折れ線または曲線を右ボタンで選択し、「線種」メニューで線の種類を選ぶと線の形が変わる。下 4 項目は矢印のつけ方 (なし、右矢印、左矢印、両矢印) で、線の太さなどとは独立に変えられる。実は四角や丸や多角形や閉曲線などでも線の太さは変えられるが、矢印については意味を持たない。
次に、四角形や丸や多角形や閉曲線を選び、パターンメニューから適当なパターンを選んでみよ。実はこれまでは一番上の「覆」で、「透明」を意味していたが、それ以外を選ぶと図形は不透

7明になり、(ちょうど窓がそうだったように) 重なったところは上の図形が下の図形を隠すようになる。重なり順を変えたければ (窓とは違って移動しただけではだめで)、選択した上で「構」メニューの「最前面へ」「最後面へ」を使う。
次は色で、パターンを縞々などにしたままの状態で「表面色」「背景色」をそれぞれ選んでみる。
パターンの「模様」と「地」の色がそれぞれ選べることがわかる。なお線や文字は「表面色」だ
けが意味を持つ。

3.5

その他の操作

パレットの残りの操作はいちいち説明しない。必要に応じて試してみればわかる (分からなければ質問メールをください)。また、細かいところを拡大して見たり全体像のため小さくして見たりしたい場合は窓の左下の矢印群や四角を使う。これもやってみればわかる。最初の見え方に戻したい場合には「ビュー」メニューの「標準サイズ表示」と「ページの中央」を使えばだいたい大丈夫。詳しく知りたい場合にはマニュアルを読む (Kterm の窓で「man idraw」を実行すると画面に表示される)。
そして最後に! できた絵を保存しなければならない。そのためには、「ファイル」メニューの「保存」と「保存 (名前指定)」を使う。これらはちょうど Mule での^X^S と^X^W に対応している。だから最初に保存する時は「保存 (名前指定)」を使う。すると、新しい窓が現れてファイル名が入力できるようになるので、そこで「test.ps」のようにファイル名を入れて [RET] を打つ。
なお、名前の最後が「.ps」で終わるのは PostScript(PS) 形式として扱えるファイルであることを示している。(厳密には、idraw が読み書きすのは idraw 形式のファイルなのだが、idraw 形式は PS 形式としても使うことができるので便宜上「.ps」をつけている。 ) 書き出した後 idraw を終了するには「ファイル」メニューの「終了」を選ぶ。
一度書いた絵を編集するには idraw を動かした状態で「ファイル」メニューの「開く」を使う。
するとさっきと同様の窓ができてファイル名が打ち込めるので、そこで打ち込んだ後 [RET] を打つ。絵が現れたら適宜修正し、最後に「保存」で元のファイルに書き出すか「保存 (名前指定)」で別のファイルに書く。これらの意味をまとめておこう。なお、次にやる xpaint もまったく同様なので、一緒に含めた。

Mule^X^W^X^F^X^S^X^Cidraw「保存 (名前指定)」「読み込み」「保存」「終了」

xpaintSave AsOpen
SaveQuit

機能
ファイル名を指定して書く
ファイル名を指定して修正を開始
もとのファイルに書き戻す
Mule や idraw を終わる

idraw 形式を含め、PS 形式のファイルをプリンタに打ち出す時には lwp ではなく lpr というコマンドを使用すること。例えば次の通り。
% lpr -Plw25 test.ps
プリンタ指定は例によってなくてもよい (端末に張り付けたラベルに書かれたプリンタに出る)。
演習 4 これまでに自分が描いた PAD 図または資料に載っていたのどれでもいいから、 idraw で清書してみよ。なお、同じ形を沢山使う時には 1 つ描いた後それを選択した上「編集」メニューの「複製」を使ってコピーを作り、適当な位置に移動して使うのがよい。完成したらファイルに保存し、プリンタに打ち出してみよ。

83.6

xpaint 入門

さて、こんどはペイント系のお絵描きツールで、こっちは概念的にはずっと簡単である。そもそも、皆様が見ている画面というのはブラウン管の上で「様々な色の点の集まり」でできている。だから、それぞれの点に色々な色を割り当てれば任意の絵が作れますよ、というのがペイント系ツールの基本姿勢なわけである。ここではまたまた無料のソフトである xpaint を使用する。xpaint を起動するには Kterm の窓で% xpaint &と打ち込む。しばらくすると、図 7 のような窓が現われる。

図 7: xpaint のツールパレット窓の様子
ちょっと、idraw のパレットに似ているでしょう? ただし、xpaint では後で出てくる色パレットと区別するため「ツールパレット」と呼ぶことにしよう。 xpaint の場合、絵の大きさを指定してから描き始めるので、まずツールパレットの窓が出て、ここからキャンバスの窓を開くようになっている。なお、ツールパレットの上の方にある「File」などは idraw と同じくプルダウンメニューになっている。
さて、以下では当面、特に述べない限りマウスの左ボタンを使用すること。キャンバスを開くには、「File」メニューの中から「New With Size」を選ぶ。すると、幅と高さと拡大率を打ち込む窓が出て来るので、ここでは練習用に幅と高さは 64、拡大率は 8 として (どれも既に値が入っているところをマウスでクリックして [DEL] キーでもとの値を消して新しい値を打ち込む)、最後にOK のボタンをつつくと図 8 のような四角い窓が現われる。
キャンバス窓の下には 2 つの「色パレット」があるがが、これは左側が鉛筆や筆の色、右側がスクリーントーンの色と思えばよい。とりあえず両方のパレットとも模様ではない色 (で互いに違うもの) をクリックして選んでおくこと。
つぎに、ツールパレットから「鉛筆」マークを選び、キャンバスの上でどれかのボタンを押して動かす。すると、鉛筆の動いた後の点に色がついて残る。鉛筆の太さを変えたい時はパレットの「Line」メニューを使えばできる。
もっと太い線を描きたい場合にはパレットから「ローラ」を選んで使う。ローラの形はいく通りかに変えられるが、変えたい場合にはローラのパレットを右ボタンでつつくとメニューが出て、その中から「Select Brush」を選べばよい。ローラの隣にあるのは「消しゴム」で、これは間違って書いてしまったところを白に戻すのに使う。消しゴムもローラと同様形が変えられる。
「スプレー」
はやってみれば分る通りスプレーペイントのような効果がある。
「バケツ」は、閉じた形を作ってその中でバケツをこぼすと色が行き渡る。やってみて「失敗した!」と思ったときは、キャンバスの「Edit」メニューの「Undo」を選ぶと 1 回ぶんだけは操作を元に戻すことができる。

9図 8: xpaint のキャンバス窓の様子
あと、直線や四角などの図形のパレットは idraw と同じように使えるが、ただしペイント系なので一度描いてしまったものは動かしたり消したりできない。なお、図形で中が灰色のものは、描いた後で中を色やパターンで塗る。その色やパターンはキャンバス窓の下右側のパレットで選ぶ。
文字は文字が描けるが、ただし xpaint では漢字は使えない (どのみち文字はあまり重要でない)。
さて、キャンバス窓の色パレットについてだが、もっと別な色を使いたい場合には右下の「AddSolid」と書かれたボタンを押す。すると図 9 のような窓が現われるので、ここで円形のうち望む色のところを左ボタンでクリックするか、またはスライドレバーのところでマウスの中ボタンを押して動かし、望む色が出た所で「OK」をクリックすればその色がパレットに追加されて利用可能になる。その他の機能については、「Help」ボタンなどを利用して調べて欲しい。
最後に、絵が完成して保存する時は例によって「File」メニューから「Save As」を撰び、ファイル名を入力し [RET] する。ところで、絵を保存するとき様々なファイル形式が選べるが、ここでは「TIFF」(Tagged Image Format File) と呼ばれる形式を使っておく。標準では TIFF のボタンが選ばれているはず。もし別の形式にしたければファイル名を入れる前に使いたい形式のボタンをクリックして選んでおく。なお、TIFF のファイルは「test.tiff」のように最後を「.tiff」で終わらせておくとよい。
さて、これを何に使おうか? とりあえず、窓の背景模様にしよう。それには% xloadimage -onroot test.tiffを実行すればよい。 login したらいつでもこの絵を背景模様にしたい場合は、上の行 (%は不要!)
を.xsession ファイルの適当な位置 (最後の行より上ならどこでも) に挿入すればよい。
演習 5 xpaint を使って、背景模様用の絵と、自分のトレードマークないしシンボルマークとを作成せよ。(面倒なら 1 つで両方兼ねてもよい。) そして、背景模様は.xsession を変更して login
時に自動設定させよ。なお、今回やった 64 × 64 ドットでは物足りないならもっと大きくしてもいいが、大きい絵ほど美しく作るのは大変なのでそのつもりで。大きくした場合拡大率は減らさないと画面に入り切らない。

10

A

本日の課題 5A

本日の課題は演習 1、演習 2、演習 3 を提出してください。あと演習 4 はできた人のみプリントアウトを提出してください。レポート番号は 5A です。アンケートは次の通り。

• Q1. 変数の値の移り変わりについて、前から理解していましたか? 今日ようやく理解しましたか? まだだめですか?
• Q2. 文を四角で囲むのはできるようになりました?「;」を入れる場所についてはどうですか?
• Q3. idraw と xpaint についてそれぞれどう思いました? また、両者の比較も述べてみてください。
• Q4. その他、感想、要望、質問があればどうぞ。

B

次回までの宿題

前回課したレポート 4B が次回までの提出となっていますので、それをやってください。あと、演習 5 は特に提出を求めませんが、次回にその結果を使うのでやっておいてください。といって、今回練習で作ったものが自分のトレードマークにふさわしいと思う方はそれでも結構です。まだ提出してない方は 4B の Q2. にその感想等も含めて頂ければ幸いです。

図 9: xpaint の色選択窓の様子

11