情報処理学会研究報告
IPSJ SIG Technical Report

スにしているため初学者にも読みやすいが，手入力するには変換が面倒であるし，ささいな表記の違いによって文法エラーが起こりやすい．そこで PEN には入力支援ボタンが用意さ

PenFlowchart の開発れていて，ボタンを押すだけで制御構造の雛形がエディタ画面に挿入できる（図 1）．これによって，学習者は少ない手数でプログラムを入力することができる3) ．

中

西渉†1

本校の情報 B の授業では，初学者向けプログラミング学習環境である PEN を利用してきた．入力支援ボタンで構文が簡単に入力できるのだが，慣れない生徒はその構造を壊してしまってエラーを起こしてしまう．そこでフローチャートをマウスで作ることで PEN のプログラムを生成するプログラム PenFlowchart を開発し，2011 年
度の途中から PEN と併用した．開発の経緯と，生徒に使用させた上での感想について報告する．

図1

Development of PenFlowchart

入力支援ボタンしかし，生徒は入力支援ボタンで入力された構文をブロック構造として理解できず，図 2のようにインデントやブロックを壊してしまい，エラーで行き詰まってしまう（インデント

Wataru Nakanishi†1はなくてもエラーにはならないが，見通しが悪くなる）．さらに何人かは見本のプログラム
を，（入力支援ボタンを使わずに）ワープロを打つように手入力してしまうため，プログラ

We have used ‘PEN (Programming Environment for Novice)’ in our classes.
Program code can be entered easily with input-assist-buttons, but some students erase the lines by mistake, and they break its block-structures and invite
errors. So I developed a program ‘PenFlowchart’, which can produce programsfor PEN by making flowcharts using mouses. I will report circumstances ofdevelopment and impressions when using it in our classes.

ムを行単位で見てしまい，ブロック構造を理解しない．
筆者は PEN における入力支援ボタンは入力を簡単にすることよりもむしろ，プログラムのブロック構造を意識するためにあると考えているので，生徒がそれを活かせずにこのような状況に陥ってしまうのは非常に残念である．そこで，フローチャートを作ることで PENのプログラムを生成することができれば，この問題がいくらか解決できるのではないかと考え，PenFlowchart を開発した．

1. は じ め に
PEN1) は大阪学院大学情報学部西田研究室と大阪市立大学大学院創造都市研究科松浦研究室の共同プロジェクトとして開発されている，初学者向けのプログラミング学習環境である．用いているプログラミング言語は，大学入試センターの入試科目「情報関係基礎」で用いられている手順記述言語 DNCL を拡張した xDNCL2) である．xDNCL は日本語をベー(a) 正しい表現(b) インデントの破壊
図2†1 名古屋高等学校
Nagoya High School1(c) ブロックの破壊

生徒がやってしまう間違いの例

c 2012 Information Processing Society of Japan⃝

情報処理学会研究報告
IPSJ SIG Technical Report

2. PenFlowchart の概要
2.1 実 行 画 面
実行画面は図 3 の通りである．左上の部品は左下のフローチャートにドラッグ&ドロップすることで追加できる．そこで使われる値や式などの編集は，右クリックでメニューを呼び出すことで行なえる（ダブルクリックでも編集できる）．変数宣言は右上の窓に変数名を列挙することで行なう．部品の削除やカット&ペーストは右クリックで出るメニューで行なう（ただし分岐やループはその終わりまでをブロックと考えてまとめて処理される）．

PEN のプログラムは右下に表示される．これを実行する方法は• 右下のプログラムをコピーして PEN の編集画面にペーストする．
• 「PEN 形式で出力」したプログラムを PEN でロードする．
• メニューから「実行」を選択する（編集不可能な状態で PEN が起動する）．のいずれかである．
作成したフローチャートは penf という拡張子で保存される（中身は XML）．前述した
図3

ように PEN 形式のプログラムは出力できるが，PEN 形式のプログラムを読み込むことはPenFlowchart の実行画面できない．フローチャートは EPS 形式で画像として出力できる．

2.2 データ構造

3. 開発

フローチャートは各ノードが左右に次ノードを持つような単方向リストとして管理されている．各記号や縦棒

3.1 開 発 環 境が一つのノードである．たとえば図 3 のフローチャート

PEN が Java で作られていること，本校の情報教室では端末に Linux を使用しているこであれば右図のようなイメージである。何も指していなとなどから，開発言語は Java を用いた．プログラムを作成するにあたって 4) などのサイトを参考にし，また Java のメモリ管理については筆者自身が Anchor Garden5) を用いて

い矢印は null を指している．

勉強した．

endif を表す○や縦棒をノードにしたのは，その方が管理が簡単になるからである．いずれ 6.1 にあげた「繰3.2 バージョンアップ

り返しを抜ける」を実装するとしたら，このことが役に2011 年 8 月下旬に開発を開始し，8/29 にバージョン 0.1 を自サイト⋆1 で公開したが，これはマウスで作ったフローチャートを元に PEN のプログラムを出力できるだけで，セーブ・立つであろう．

ロードもできないものであった．その後，使った方からの助言を参考に開発を進め，9/21にリリースしたバージョン 0.5 から授業で使い始めた．この時点では，作ったプログラムを PEN 形式のプログラムを出力させて PEN で読み込むか，PEN の編集画面にコピーし⋆1 http://watayan.net/prog/2

c 2012 Information Processing Society of Japan⃝

情報処理学会研究報告
IPSJ SIG Technical Report

ないと実行できなかったが，その手間は筆者自身も面倒と感じていた．そこで PEN のソー

しかし代入と入力を取り違える生徒は多い．それが両方とも「←」で表現されているのスコードをまるごと取り込んで，直接実行できるようにしたバージョン 0.6 を 10/21 にリ

で，入力支援ボタンの「代入」で右辺を input() にすることで「入力」にしてしまうといリースし，授業ではこれを最後まで使った．

うことが多く見受けられた．そこで本校の情報教室の端末にインストールした PEN は入力

このバージョン 0.6 では，ブロックの中に新しいブロックを作ることはできるが，既にあが「《変数》を入力する」になるように入力支援ボタンを書き換えてあるし，PenFlowchartるブロックを新しいブロックに入れることはできない．たとえばジャンケンのプログラム

でもその表現を使用することにした．フローチャートの記号を，手操作入力と処理で違うもを作ったあとでこれを 3 回勝負にしようと思ったときには，新たに作ったループの中に既のにしておきたかったというのも理由の一つである．に作ったジャンケンのプログラムをもう一度ゼロから書き直さなくてはいけないというこ

4.3 JIS との相違とだ．PEN の入力支援ボタンがそういう構造になっているのだから，筆者は当初それが正

フローチャートの書き方は JIS6) に定められたものがあるが，PEN のプログラムを生成しいと考えていたのだが，PEN を使わずに PenFlowchart を使った人からはこの点が不満することが主目的なので，いくつかの点でそれとは異なる表現を用いている．

だとの意見をいただいた．そこでグラフィック命令をサポートしたバージョン 1.0（10/19）

フローチャートでは多岐の分岐も許されているが，授業で「条件は Yes/No で答えられるの直後，ブロック単位でカット&ペーストができるようにしたバージョン 1.1 を 10/26 にリもの」と説明していることにあわせて 2 つの分岐しか用意していない．PEN にも else-if

リースした（本稿を執筆中に見つけたバグを修正したバージョン 1.2 を近日中にリリースすの構文があるのだが，フローチャートの多岐の表現がそれを意味しているかというと疑問でる予定）．

ある⋆1 ．

本校の授業でバージョン 0.6 を使いつづけたのは，学期途中から使い勝手が変わってしま

ループ端記号には「ループ名，初期化，増分，終了条件」を書くのが正式であるが，PENうのでは生徒が混乱するだろうと考えたからである（0.5 から 0.6 にしたのは，直接プログにループ名はない⋆2 ．また xDNCL のループは条件判定が始端にあるものは継続条件「〜のラムが実行できるという利点を重く見たため）．次年度の授業では初めから最新バージョン

間」，終端にあるものは終了条件「〜になるまで」の構文になっている．これを JIS にしたを使用する予定である．

がって終了条件に統一してしまうと PEN での表現との不一致のために生徒が混乱することが予想されるので，「〜の間」「〜になるまで」のままの表現でループ端に入れることにした．

4. フローチャート
4.1 他の表現方法≪条件式≫の間，｜を繰り返す

このプログラムを作るにあたり，フローチャート以外の表現方法についても考慮した．PENで作ったプログラムは必然的に構造化されているので，それを表現するのであれば PAD などの構造化チャートの方が適しているのではないかと考えたからだ．しかし，高校の情報の教科書で扱われているのはフローチャートばかりであり，PAD などは教える側（筆者自身

繰り返し，｜を，≪条件式≫になるまで実行する




xDNCL では，for〜next 型のループで増分が負の値であるときには「〜ずつ減らしながも含めて）にもあまり馴染みがないと考えたので，やはりフローチャートで表現することにら」という構文を使う．
「〜まで」という終了条件を不等号で評価するため，「-1 ずつ増やしした．しかし，プログラムの実装に関していえば，PAD の方がずっと楽だっただろうと思ながら」では正しく動かないからだ．そこで PenFlowchart でも増分を負で表すのでなく，われる．

「〜ずつ増」「〜ずつ減」と表示することにした．情報の教科書でも出版社によってさまざま

4.2 xDNCL，PEN との相違
xDNCL ではキーボードからの入力は「《変数》 ← input()」になっており，PEN で⋆1 6.1 にあげた switch 構文がこの形に該当するだろう．
⋆2 ループの始端と終端の対応がわかりやすいように表示してほしいという要望はあるので，何らかの方法で対応しようとは考えている．

は「《変数》を入力する」が許容されているものの，入力支援ボタンで入力されるのは前者である．

3c 2012 Information Processing Society of Japan⃝

情報処理学会研究報告
IPSJ SIG Technical Report

な表現がされているので，JIS に従うことよりも直観的に意味が通じることが重要だと考え

主に PEN146

たからである．

主に PenFlowchart65

課題によって使い分ける

37





≪変数≫を≪値≫から≪値≫まで≪値≫ずつ増やしながら，｜を実行するプログラムをキーボードで文字入力できる

66

入力支援ボタンが便利

120

最初から使っていたから

84

ブロック構造を壊して再入力するのがいや

23

マウスでプログラムが作れる97

フローチャートのまま入力できる

73

4.4 ループ端記号

値の編集でダイアログが開くのがいや

35

ループ端記号は 6) で 1986 年に追加された，比較的新しいものである．そのこともあっ

実行画面が別なのがいや

36

PEN

てか，この記号を使わない人もいる．

PenFlowchart

PEN 派と PenFlowchart 派を比べると圧倒的に PEN 派が多いのだが，実はクラスによっ

たとえば「動くフローチャート」7) はフローチャートそのものがプログラムとなって実行て分布が大きく異なっている．クラス別に集計すると図 4(a) の通りで，A，F，G 組にはできるものであるが，これはループを分岐と goto で表現している．作者にその意図をうか

PenFlowchart 派がいなくて，他のクラスはだいたい半々である．これは授業の行なわれるがったところ「コンピュータの内部処理の通りに表現するのが良い」ということだった．そ曜日の違いによるものだと考えている．PenFlowchart は導入当初こまごまとバージョンアッの考えには納得させられる点があるが，筆者は PEN のプログラムの通りにフローチャートプを繰り返しており，そのリリースがたいてい水曜日であった．A，G 組の授業は翌日の木が書かれることを重視したのでループ端記号を用いることにした．

曜日であったため，筆者の説明がこなれていなかったということではないだろうか．また，プログラムが繰り返し構文なのに，フローチャートはループ端記号でなく分岐と goto でF 組は初めの方の授業で何度かマシントラブルがあったため，生徒が新しいものに対して慎表現されるものもときどき見かけるが⋆1 ，これをループの構文に読み替えることはそれほど重になったと考えられる．

簡単なことではないと考えている．

アンケートとは別に，PenFlowchart を導入してからは，課題提出の際にどちらで作業

5. 生徒の反応したかを併記させてきた．図 4(b) のように，最初は PenFlowchart の方が多かったのだ

筆者が授業を担当しているクラス（高校 1 年生 7 クラス，男子 264 名）ではほぼ毎時間，PenFlowchart から PEN に戻っていたし，大まかな流れだけを PenFlowchart で作ってかが，回を重ねると PEN の方が多くなっている．机間巡視で観察した印象でも，何人かは課題のプログラムを PEN または PenFlowchart で作成し（どちらを使うかは生徒の選択），ら細かい作業を PEN で行なっている生徒もいた．そもそも PenFlowchart は PEN への橋できあがったプログラムをメールで提出させていた．最後の授業で，PEN と PenFlowchart

渡しとして作ったものであり，制御のブロック構造を理解できるようになれば PEN のテキの使い分けについて記名のアンケートを行なった（回答数 248）．主にどちらを使ってきたストエディタで作業した方が効率がいい．生徒たちがそれを理解して次第に PEN に移行すか，使い分けるにあたってどういう点に着目したか（複数回答）という質問への回答は次のることが作者としての望みであるが，その様子を把握するに足る観察はできなかった．特に通りであった．

今年度は数回目の授業で唐突に PenFlowchart を紹介し，口頭で操作説明をしただけなので，生徒の中には PenFlowchart にはまったく手をださず，最初から使っていてテキストに⋆1 東京農工大学の平成 18 年度前期入試の問題 1 にもあったし，8) では同じページに両方の記述がある．

4c 2012 Information Processing Society of Japan⃝

情報処理学会研究報告
IPSJ SIG Technical Report

も説明のある PEN をそのまま使い続ける者も一定数いた．その点では生徒への調査を行な

6. 今後の開発方針

うのは，今年度の授業では無理があったといえる．

Pen
PenFlowchart
使い分け10040

6.1 PenFlowchart が実装していないもの
PEN には実装されているが，PenFlowchart には実装されていないものがいくつかある．

PEN
PenFlowchart

たとえば• else-if の構文「そうでなくもし」
3080• 繰り返し文の脱出「繰り返しを抜ける」• switch の構文「〜の値に応じて〜のいずれかを実行する」

60• ファイル I/O• 手続き・関数20などがそうである⋆1 ．手続き・関数や構文に関するものはフローチャートでの表現方法が難40しいと考えており，実装していない．ファイル I/O についてはグラフィック命令と同じように実装することはできるが，まだ実装していない．
106.2 今後の改良に関する考え
20

ループの始端と終端の対応を見えやすくすることが当面の課題である．ループを薄い色の枠で囲む方法を考えているが，もっと適切な方法があれば教示いただきたい．対応する始端と終端を同じ色で塗るという方法なら簡単に対応できるのだが，色が判別できない生徒がいることや，逆に色に意味があるような誤解をしてしまう可能性があることを考えると，この

00

A

BCDEF

G

課題5

(a) クラスごとの分布（人）
図4

課題6

課題7

表現はできれば避けたい．
制御の構文のうち，「繰り返しを抜ける」は実装しておきたい．他の分岐に関する表現は(b) 課題ごとの推移（%）

PAD なら自然に表現できるが，フローチャートだと単純な Yes/No の分岐との使い分けがPEN 派，PenFlowchart 派の分布難しくなりそうなので，当面実装は考えない．手続き・関数はそれほど難しくないかもしれないが，前述したように PenFlowchart は制御構造を理解するまで過渡的に使うものと考えどちら派であるかということが期末テストの点数に影響するかということについても調ているので，プロシージャが必要なほど複雑なものまで作れるようにする必要があるかどう

べてはみたが，有意な差は得られなかった（全体，設問別ともに）．
「課題によって使い分けかは今後検討したい．

る」とした集団は両方の利点を理解して使い分けているのだから成績が良いだろうと予想

ファイル I/O については，グラフィック命令を実装した以上これを排除する理由はないのしていたのだが，若干平均点は高いものの有意差があると判断するには至らなかった．もっで，近いうちに実装する考えでいる．とも，前述したような不揃いが起きてしまっているのだから，統計的な処理をおこなっても値の編集を，いちいちダイアログを開かずにフローチャートの部品上でできるようになら有益な結果は得られないと考えられる．

ないかという要望もあるが，画面上の座標計算が面倒に思われるので躊躇している．特にグ⋆1 「〜の値に応じて」や手続き・関数については 2) には記述がないが，サンプルプログラムでは使われている．

5c 2012 Information Processing Society of Japan⃝

情報処理学会研究報告
IPSJ SIG Technical Report

するのは有効な体験であると考える．

ラフィック命令は引数がたくさんあるので，ダイアログを出した方が各値の意味がわかりやすいと考えられる．

7. お わ り にPEN のプログラムを読み込むこと，あるいは実行画面でプログラムを編集すること（生

授業で用いるソフトウェアは，改変が可能であることが望ましいと考えている．たとえば徒からも要望がある）を実装するためには，プログラムの構文を処理する必要があり，これPEN は GPL で配布されており，だから PenFlowchart にまるごと取り込んで（プログラムは筆者の力不足のため簡単には実装できそうにない．
本プログラムは夏休みの終わりに思いついて二学期の授業に間に合わせるために大急ぎを編集不可能にしたり，メニューや入力支援ボタンを消したりするといった改変も行ないつで作成した．大慌てで設計・実装をしたため，後になって場当たり的に修正を加えた部分がつ），直接実行できるものを作ることができた．PenFlowchart もその意思を受けて GPL であり，既にプログラムの見通しが悪くなっているところがある．これを全体的に見直すこと配布しており，そのためか，これを Android に移植しようという動きがあると聞いている．
授業で扱うソフトウェアをカスタマイズしたいという欲求は多くの教員が持っているのが，本当は喫緊の課題ではある．

6.3 PEN への要望ではないか．実際筆者も PEN の入力支援ボタンは本校で行なう授業用にカスタマイズして

筆者は PEN の開発には関わっていないが，生徒からの要望で本報告に関わりがあると考使っている．そういったことができるようなスキルをすべての教員が持たなくてはいけないとは考えていないが，望めば自分の授業に合わせた改変ができるような状況であってほしい．

えられるものがあったので追記する．
その要望というのは「構文エラーを引き起こすような削除ができないように PEN のエ

参

ディタを改造できないか」というものであった．しかしこれを実現するのはきわめて難し

考文献1) 中村亮太，山本武生，西田知博，松浦敏雄：初学者向けプログラミング教育環境 PEN，（オンライン），入手先⟨http://www.media.osaka-cu.ac.jp/PEN/⟩（参照 2011-12-26）.
2) : xDNCL 言語マニュアル (2008). （PEN 1.19.6 付属 xDNCL-Language-Manual.pdf）.
3) 西田知博：PEN: 大学入試センター用言語を用いたプログラミング教育，情報処理学
会教育用プログラミング言語に関するワークショップ 2006 報告集，pp.62–67 (2006).
4) 大島友明：Java Swing によるドラッグアンドドロップの実装，MY–NOTEBOOK（オンライン），入手先⟨http://osima.jp/java/java-swing-dnd/⟩（参照 2012-01-04）.
5) 三浦元喜，杉原太郎， 國藤進：Anchor Garden:オブジェクト指向言語におけるデータ構造の基本を理解するためのワークベンチ，情報教育シンポジウム論文集， Vol.2008,
No.6, pp.55–62 (2008).
6) 日本規格協会：JIS X 0121:1986 情報処理用流れ図・プログラム網図・システム資源
図記号 (1986).
7)
山本恒：フローチャートによるアルゴリズムの視覚化と検証システムの開発，日本
情報科教育学会第 4 回全国大会講演論文集，pp.102–103 (2011).
8) 水越敏行， 村井純（編）：新・情報 B，日本文教出版 (2011).

いであろうし，テキストエディタの持つ自由度を制限することにもなってしまう．たとえば Squeak や Scratch，Alice などのようにタイルを組み合わせる方法でプログラムを作れば構文エラーは不可能になる．しかし生徒アンケートの自由記述にも，PEN の良さとして「自由度が高い」「テキストで入力するのでカッコイイ」「マウスで作るのは面倒」といった意見をあげているものがあり，テキストエディタの形式をあまり大きく変えてしまうとこのような良さが失われてしまう．
エラーを出せないのがいいのか，エラーが出たら直せばいいとするのか（気づいて直すことも経験だと考える）は目的によって異なる．授業中エラーで手が止まっている生徒の多くは「エラーが何行目って書いてある? その行に何か間違いがあるはずだからよく見てごらん⋆1 」と助言するまでエラーメッセージを読もうとしない．これはプログラミングに限ったことではなく，周囲の同僚たちの中にもコンピュータで何らかのトラブルが起きたときにエラーメッセージを読もうとしない人は多いと感じている．だとしたらこのようにデバグをすることによって，コンピュータが出すメッセージは一見難しそうに見えるが読んでみれば有益な情報が含まれていること，その情報を元に修正すれば適切な結果が得られることを実感⋆1 いわゆる全角・半角の違いによるエラーも多いのだが，生徒の中にはそれが違っていても目で見てわからない（上の行が半角で次の行は全角だったとして，それを教師が指さして指摘しても違いがわからないと言う）者がいる．

6c 2012 Information Processing Society of Japan⃝