WaPEN. . . DNCL の Web ブラウザ上の実行環境におけるフローチャートなどの実装
中西渉1,a)

概要：大学入試センター試験「情報関係基礎」で用いられるプログラミング言語 DNCL の，Web ブラウザ上での実行環境を JavaScript で開発した．さらにフローチャートでのプログラム作成環境などを整えることにより，拙作である PenFlowchart の代替になりえるものになったと考えている．これを WaPEN(Web-aidedPEN) と名付けて公開を開始した．
キーワード：プログラミング教育，DNCL，フローチャート，HTML5

WaPEN. . . Implementation of Flowchart etc. in the Execution
Environment of DNCL on the Web Browser
Wataru Nakanishi1,a)Abstract: I have developed an execution environment of DNCL on the web browser with JavaScript. By
adding the flowchart and so on, I think that it became a substitute for PenFlowchart which is my work. I
have named it WaPEN (Web-aided PEN) and started publishing.
Keywords: Education of programming, DNCL, Flowchart, HTML5

1. はじめにれている擬似言語 DNCL[4] を拡張したプログラミング言
語 xDNCL[5] でプログラムを作成することができる．

2022 年度から施行される高等学校新学習指導要領 [1] がところがこれらは Java アプリケーションであるため，学公開され，教科「情報」は単元「コンピュータとプログラ校によっては導入できない場合があると聞いている（授業ミング」を含む「情報 I」が必履修となることが確実となっ担当者の判断では新しいアプリケーションや JRE の導入がた．現行の学習指導要領ではプログラミングが明示的には禁じられているなどのため）．そこで Web ブラウザ上で動含まれていない「社会と情報」を選択している高校が約 8

作する xDNCL の実行環境を作成して昨年の情報教育シン割であると言われており，新学習指導要領への対応に苦慮ポジウムで発表した [6]．さらに開発を進め，PenFlowchartしているところがあるものと思われる．の代用として十分使えるものになったと考えられるので，筆者は勤務校での「情報 B」「情報の科学」の授業におけるプログラミングの実習で 2006 年度から PEN[2] を用い，またそれにフローチャートでプログラムを生成できる機能を付加した PenFlowchart[3] を 2011 年度に開発した．
これらは大学入試センター試験「情報関係基礎」で用いらこれを WaPEN(Web-aided PEN) と名付けて公開した．本
稿ではこの WaPEN の概要について述べる．

2. 先行研究2.1 DNCL によるプログラミング学習環境
前述したように，DNCL を拡張した xDNCL の実行環境

1a)

名古屋高等学校
Nagoya Senior High School
watayan@meigaku.ac.jpには PEN や PenFlowchart がある．PEN は大阪学院大学情報学部西田研究室と大阪市立大学大学院創造都市研究科

松浦研究室の共同プロジェクトとして作られた，初学者向成することができるものもある．

けプログラミング学習環境である．単にプログラムの実行

また喜多らは逆にプログラムをフローチャートに変換しができるだけでなく，入力支援ボタンや自動インデントなて実行経路を確認できる Avis [11] を，今泉らは C で書か

どのプログラム入力支援機能や，実行速度調整やステップれたプログラムのネストの構造などを可視化するツール実行などの実行制御機能を備えている．PenFlowchart は，azur [12] を開発した．

フローチャートによってプログラムを生成する機能を，筆筆者が開発した PenFlowchart やこの論文で公開する者が PEN に付け加えたものである．それぞれの実行画面

WaPEN はそれらのシステムに対して後発であるが，以下を図 1，図 2 に示す．の点で高校での実施についてはより良い点もあると考える．

• 実行環境を Windows に限定しない．
• 現在出版されている教科書に記載されているフローチャートに近い表記である．

2.3 Web ブラウザ上のプログラミング学習環境
ドリトル [13] は学校現場で広く使われているが，インストール版は PEN や PenFlowchart と同様 Java アプリケーションであるため，同じような面倒が考えられる．そこで今はインストールせずに使えるオンライン版や Bit Arrow版を用いることができるようになっている．

Bit Arrow[14] はドリトル以外にも JavaScript や簡易 Cに対応しており，便利な構文が用意されているのでゲームなどが簡単に作れるようになっている．作ったプログラム
図 1

PEN の実行画面

Fig. 1 Snapshot of PEN

はサーバ上に保存され，容易に実行結果を確認できるだけでなく，そのアドレスを QR コードで出力することでスマートフォンなどの上で実行することもできるようになっている．

Scratch は校種を問わず広く用いられている．現在公開されている Scratch 2.0 は Flash アプリケーションであり，将来的にブラウザがサポートしなくなることが決まっているが，開発中の Scratch 3.0 は HTML5 のアプリケーションである．

paiza.IO[15] はギノ株式会社が運営しているオンラインのプログラム実行環境で，20 以上の言語に対応しており，ブラウザ上でコードを書いて実行結果を得ることができ
図 2PenFlowchart の実行画面

Fig. 2 Snapshot of PenFlowchart

また，PEN には OpenBlocks を使用することによって，ビジュアルブロックによるプログラミングができるよう拡張した oPEN [7] などの実装もある．

る．IDE にあるようなコード補完機能などもあり，いろいろな言語を試しに使ってみるなどの用途にも適している．

3. WaPEN の概要
3.1 プログラムの概要
WaPEN は JavaScript で実装した xDNCL の実行環境である．必要なファイルを配置すれば Web ブラウザだけで2.2 チャートによるプログラミング実行でき，Web サーバ上でデータベースなどの設定をすフローチャートや構造化チャートからプログラムを生成る必要はない．実際には Web サーバ上に置く必要もなく，するシステムは，古くから存在している．たとえば塩澤ら

ローカルマシンにファイルを展開しておいて index.html

はフローチャートから Visual Basic のプログラムを生成をブラウザで開くだけでもよい．

するプログラム [8] を，斐品らは PAD でプログラムが作

図 3 に実行画面を示す．左の入力欄にコードを入力する

成・実行できる JPADet [9] をそれぞれ開発しており，まのだが，画面下部の入力支援ボタンを使うと構文の雛形がた Flowgorithm[10] のようにフローチャートのままプログ入力され，ユーザは「《変数》」「《値》」などの部分を書き換

ラムを実行できるほか，十数種類の言語のプログラムを生えることでプログラムが出来上がる．また，入力欄で右クリックすることにより，定義済み関数などが入力できる．

実行はある程度できるが，実用的だとは思えないし，作成中央にあるのが実行結果の表示欄である．

したプログラムのセーブ・ロードにも難があるので，今後右のフローチャート画面では，縦棒上で右クリックするは考えないことにしたい．

ことによって部品を追加し，各部品は右クリックメニュー
表 1やダブルクリックで編集できる．フローチャートを編集するとただちにコードが修正されるが，コードを修正したときは「コード → フローチャート」ボタンを押さないとフ動作確認したブラウザ

Table 1 Operation check
Windows 10

Internet Explorer 11
Microsoft Edge

ローチャートに反映されない．

Google Chrome
Mozilla Firefox
Mac OS Sierra

SafariDebian GNU/Linux stretch

Google Chrome
Mozilla Firefox

3.4 使用実績
2017 年度の夏に東京で行われた情報処理学会教員免許更新講習「情報教育と情報セキュリティ」で，平成 29 年度のセンター試験「情報関係基礎」の第 3 問を解く実習にWaPEN を用いた（このときはまだフローチャートを実装
図 3

WaPEN の実行画面

Fig. 3 Snapshot of WaPENしていなかった）．問題では図形のデータを延々と配列に入力する部分が省略されていたので，その部分をサンプルプログラムとして準備しておくことで，肝心の部分だけを画面下部には，設定したサンプルプログラムを呼び出す作ることに専念できた．

ボタンを配置した．授業で動作だけを確認したいプログラ

勤務校の 3 学期の「情報の科学」の授業で，筆者の担当ムなどがあるとき，それをユーザに入力させる時間が節約

クラスでは WaPEN を用いて実習を行った．その他のクラできると考えたからである．

スでは PenFlowchart を用いたが，使用したテキストが同じプリント教材であったので混乱はなかった．

3.2 昨年公開時との差分
昨年の情報教育シンポジウム原稿執筆時点では，かろうじて動作する程度のものであったが，その後，以下の点を改良した．

• 変数宣言の必要・不要などを設定ファイルで切り替え

4. 考察
4.1 フローチャートの実装
WaPEN のフローチャートの編集環境は PenFlowchartとはいくらか異なっている．パーツの上で右クリックしられるようにした．て出てくるメニューで編集や削除をするのは同じである• フローチャートの実装．

が，パーツの追加は PenFlowchart では画面上部の一覧か• 無限ループが止められなかったのを，postMessage ならドラック&ドロップするのだが，WaPEN では縦棒を右どを使うことで解決した [16]．

• ステップ実行をちゃんと 1 行ずつの実行になるように修正した．

• 配列を代入できるようにした．

クリックして出てくるメニューから選択するようになっている．これは Web ブラウザの一画面にすべてを収めるためにパーツ一覧を削除したためである．また，カット&ペー
ストは WaPEN ではまだ実装していない．

• サンプルプログラムをプログラム本体から分離した．

前述した担当クラスの 1 つで 1 時間だけ PenFlowchart• 読点の有無などの細かい間違いをある程度無視できるを使ってもらって感想を聞いたところ，どちらでも大差なようにした．

いという意見が多かった．しかし「パーツの形で機能を覚えているので一覧があった方がいい」「カット&ペースト機

3.3 動作確認
動作確認は表 1 にあげた環境で行った．開発は ES2015
で行っているが，対応していない Web ブラウザもあるので Babel でトランスパイルしている．
タブレット上の Web ブラウザでもプログラムの作成や能は欲しかった」という意見もあったので，対応を検討したい（メニューにアイコンを追加するなど）．
なお，PenFlowchart や WaPEN のフローチャートは何かの規格に正しく準拠したものではなく，独自の表記が混じっている．たとえば JIS[17] ではループ端にはループ名

がなくてはいけないし，終了条件を書くのが決まりになっ

DNCL の仕様では「論理演算子に優先順位はなく，左ているが，WaPEN 等ではループ名はなく，継続条件を書側の論理演算が先に実行されますが，丸括弧『( 』と『 )』くこともある（WHILE〜WEND 型の場合）．また，JIS でで，演算の順序を指定することができます」となっていは分岐の出口が 3 つ以上であるような書き方が示されている．つまり「FALSE かつ FALSE でない」は「(FALSE かるので本当なら else-if や switch も表現できるのだが，適切

つ FALSE) でない」と解釈して TRUE にならなくてはいけな実装が思いつかないので WaPEN 等ではこれらをサポーないのだが，PenFlowchart や WaPEN では「でない」の優トしていない．FOR〜NEXT 型のループにしても，JIS で先順位を高く評価して FALSE と判断していた*3 ．WaPEN

は「初期化・増分・終了条件」を書くことになっているが，は取り急ぎこの問題を「修正」したが，これは C などのプ

WaPEN 等では独自の表記をしている．

ログラミング言語を経験している多くのプログラマにとって違和感のあるものだと考えられる．

4.2 DNCL への準拠

これらの点から，DNCL への完全な準拠に縛られるこ

前述したように，PEN 等（ここでは PEN，PenFlowchart，とには疑問を覚える．センター試験の問題に対応できるこ

WaPEN をまとめて「PEN 等」と表記することにする）がとは必要だが，それ以外の部分は自由に考えていいので用いている xDNCL は DNCL の拡張であるが，完全に互換はないだろうか．現に PenFlowchart や WaPEN は「a ←しているわけではない．さらに WaPEN と PenFlowchart{1,2,3}」のような配列の代入を「勝手に」サポートしては PEN の xDNCL に若干の変更を加えている．具体的にいる．たとえばドリトルが統計機能を実装したように [18]，は，入力を「《変数》← input()」でなく「《変数》を入力同じような発展を PEN 等がしてもいいと考えている．

する」にしていることや，else-if に相当する「そうでなくなお，センター試験の平成 28〜30 年度の情報関係基礎もし」や switch に相当する「《変数》の値に応じて」がなの問題 [19] の第 3 問について，WaPEN で実行できるかをいこと，関数や手続きを自分で作れないことである．そも

検討し，本試験の問題については些細な変更で対応できる

そも DNCL には入力がないし，ループは FOR〜NEXT 型ことを確認している．実は試験問題に記載されているプロと WHILE〜WEND 型しかない（しかしセンター試験の問グラムは，データがあらかじめ配列に代入してあるという題には LOOP〜UNTIL 型のループも登場している）．こう前提で書かれているので，実行できるプログラムを作るた

いった構文の相違を表 2 にまとめておく．自作関数についめにはその初期化部分を別途作らなくてはいけない．そのて DNCL では「?」となっているのは，問題に応じて予め点では配列の値を代入できるようにしたことやサンプルボ定義された関数を使うことができるものの，その関数の作タンの実装がメリットとなると考えている．

り方は決められていないからである．
表 2

5. おわりに構文の相違

現在発行されている高校の情報の教科書では DNCL を

Table 2 Diﬀerences in syntax用いているものは一つもない．そこで DNCL を用いて授DNCLPENWaPEN

業を行うためには独自にテキストを準備しなくてはならな

入力no← input()を入力する

い．そのこともあってか，重田らが 2014 年から 2015 年に

else-ifyes

yesnoswitch

noyesno

かけて行ったアンケート [20] によれば，指導されているプ

LOOP〜UNTIL

no

yes

yes

自作関数

?

yesno

配列値を代入nono

yes

ログラミング言語として DNCL をあげている高校はほぼ（？）皆無であった．
このような状況にも関わらず DNCL に関わる開発を進めることに不安を感じないではない．しかし，JavaScript はDNCL では変数は宣言なしで使うことができ，値を代入することで初期化される．PEN 等はデフォルトでは変数宣言が必須となっているが，PEN と WaPEN は設定ファ
イルの書き換えによって宣言なしで変数が使えるようになる*1 ．また数値の整数型・実数型の違いについて DNCL の仕様書には何の言及もない*2 ．しかし PEN 等ではこれを区別することにしている．たとえば 11.0/2*2 は 11.0 であるが，11/2*2 は 10 だという具合である．
*1*2

PenFlowchart ではできない．
除算では「/」と「÷」が区別されており，後者は商の整数部分とされているが，前者については説明がない．

HTML に関係する知識が必要になることがあるし，VBA
では Excel について同様のことが言える．DNCL は純粋にプログラミングだけを考えられる環境として有効なものと言えるのではないか．
筆者は WaPEN を素材として使うことを考えている．

WaPEN は HTML5 で出来ているので，たとえばバックエンドに課題提出などの仕組みを作ることも容易である
し，実行部分に手を入れれば自動テストを行うことも可能であろう．実際，Blockly を用いてビジュアルブロックに*3

この点について指摘をいただいた佐久間拓也氏に感謝する．

よるプログラミングができるように WaPEN を拡張した

BlocklyPEN が，大阪工業大学の岩崎氏によって作られた．

[19]

WaPEN は筆者の Web サイト*4 と GitHub*5 で公開している．
[20]

参考文献
[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]
[11]

[12]

[13]
[14]

[15]
[16]

[17]
[18]

*4
*5

ポジウム論文集，Vol. 2017, No. 27, pp. 178–181 (2017).
大 学 入 試 セ ン タ ー：過 去 3 年 分 の 試 験 問 題 ，独 立 行
政 法 人 大 学 入 試 セ ン タ ー（ オ ン ラ イ ン ），入 手 先⟨http://www.dnc.ac.jp/center/kakomondai.html⟩ （参照2018-07-15）.
重田桂子，植原啓介，村井 純：高校教科「情報」に関するアンケート調査と分析，情報教育シンポジウム論文集，
Vol. 2015, No. 5, pp. 31–38 (2015).

文 部 科 学 省：学 習 指 導 要 領 等 ，（ オ ン ラ イ ン ），入 手 先 ⟨http://www.mext.go.jp/a menu/shotou/newcs/1384661.htm⟩ （参照 2018-06-02）.
中村亮太：初学者向けプログラミング学習環境 PEN，（オンライン），入手先 ⟨https://pen.moe.hm/⟩ （参照 201806-02）.
中西
渉：PenFlowchart, (online), available from⟨https://watayan.net/prog/#penflowchart⟩(accessed2018-06-03).
独立行政法人大学入試センター：センター試験用手順
記述標準言語 (DNCL) の説明，（オンライン），入手先⟨http://www.dnc.ac.jp/albums/abm.php?f=abm00004841.pdf&n=H23 dncl.pdf⟩(2011).
中村亮太：xDNCL 言語マニュアル，（オンライン），入手先 ⟨https://pen.moe.hm/#!manual/xdncl.md⟩ （参照2018-06-02）.
中西 渉：DNCL の Web 上での実行環境の開発，情報教育シンポジウム論文集，Vol. 2017, No. 23, pp. 160–162(2017).
主原佑記，赤井昭仁，中村亮太，松浦敏雄：OpenBlocksを用いたプログラミング学習用ソフトウェアの開発，情報処理学会研究報告 コンピュータと教育 (CE)，Vol. 2014CE-124, No. 9 (2014).
塩澤哲時，岡部建次：フローチャートから Visual Basic プ
ログラムコードを作成するプログラムの作成，情報処理学会研究報告 ソフトウェア工学（SE），Vol. 2001-SE-134,
No. 99 (2001).
斐品正照，徳岡健一，河村一樹：構造化チャートを用いたアルゴリズム学習支援システム，情報処理学会論文誌，Vol. 45, No. 10, pp. 2454–2467 (2004).
Cook, D.: Flowgorithm, (online), available from⟨http://www.flowgorithm.org⟩ (accessed 2018-06-02).
喜多義弘，片山徹郎，冨田重幸：プログラム自動可視化
ツール Avis を利用した結合テスト実施のための実行経路抽出手法の提案，情報処理学会論文誌，Vol. 51, No. 9,pp. 1859–1872 (2010).
今泉俊幸，橋浦弘明，松浦佐江子，古宮誠一：ブロック構造の可視化によるプログラミング学習支援環境 azur 〜関数の動作の可視化〜，情報処理学会研究報告 ソフトウェ
ア工学（SE），Vol. 2010-SE-167, No. 11, pp. 1–7 (2010).
兼宗 進：プログラミング言語「ドリトル」，（オンライン），入手先 ⟨http://dolittle.eplang.jp/⟩ （参照 2018-06-04）.
兼宗 進，並木美太郎，長 慎也：オンラインプログラ
ミング環境 ビットアロー (Bit Arrow)，（オンライン），入手先 ⟨http://bitarrow.eplang.jp⟩ （参照 2017-05-24）.
ギ ノ 株 式 会 社：paiza.IO, (online), available from⟨https://paiza.io⟩ (accessed 2018-06-04).
Baron, D.: setTimeout with a shorter delay, (online),available from ⟨https://dbaron.org/log/20100309-fastertimeouts⟩ (accessed 2018-06-03).
日本規格協会：JIS X 0121:1986 情報処理用流れ図・プ
ログラム網図・システム資源図記号 (1986).
小林史弥，白井詩沙香，山澤昭彦，兼宗 進：ドリトルでのデータ処理機能とグラフ描画機能の開発，情報教育シン
https://watayan.net/prog/#wapen
https://github.com/watayan/WaPEN.git