Web 上のプログラミング学習環境の紹介
名古屋高等学校 中西渉 ∗2017 年 11 月 21 日
ンであるということでインストールの必要がある

1 はじめに（Windows，Mac 版は Java のランタイムライブラ

現行の「情報の科学」の教科書では，プログラミリが同梱されている）。ブラウザ上で実行できるおング言語として主に Excel の VBA と JavaScript

試し版として Java アプレット版が公開されているが取り上げられている。いずれも情報教室に特別なが，これの使用は今となってはさらに難しい。

*1

ソフトウェアをインストールする必要がない こと

ブ ラ ウ ザ 上 で プ ロ グ ラ ミ ン グ で き る 環 境 Bit

が，それらが選ばれた理由であろうと考えられる。

Arrow[4] はドリトルの他，JavaScript，簡易 C に対

筆者は勤務校の授業で PEN[1] という初学者向け応している。JavaScript は記述を簡単にできるよプログラミング学習環境を使い始め，その後それにう工夫されており，getElement...などといったフローチャートを付け加えた PenFlowchart[2] をものを書くことなく，表示の変更や移動などが簡単開発して使っている。しかし，これらは Java アプにできたりする。また，作成したプログラムはサーリケーションであるため実行ファイルをインストーバ上に保管され，QR コードでアドレスを示してスルする必要があり，また Java のランタイムライブマートフォンなどで実行することもできる。
学校で利用する際には申請すればクラス ID が交ラリを必要とするので，学校や自治体によっては導付され，各生徒はログインしてプログラムを作成・入できないことがあると聞いている。
プログラミング学習環境が Web ブラウザ上で保存し，教員は生徒のプログラムを閲覧・実行して実行できるものであれば，そのような問題は解決確認できる。生徒にはパスワードは与えられないされると考えられる。そこで本報告では Web ブラが，これは管理の手間とのトレードオフによる選択ウザ上で実行できて無料で利用できる主だったプであろう。

ログラミング学習環境を紹介するとともに，前述

2.1.2

paiza.IO[5] は ギ ノ 株 式 会 社 が 公 開 し て い る

した PEN，PenFlowchart を HTML5 に移植した

オ ン ラ イ ン 実 行 環 境 で あ り ，多 く の 言 語（C，WaPEN を開発したことについて述べる。

C#，C++，Java，JavaScript，PHP，Perl，Ruby，

2 各プログラミング学習環境

Python，Haskell，. . . ）に対応している。ブラウザ
上でコードの編集，実行ができる。

2.1 テキストによるプログラミング
2.1.1

paiza.IO

手元のコンピュータ上に環境を用意しなくてもBit Arrow

校種を問わず多くの現場で用いられているドリ

様々な言語のプログラミングを試せることが利点で

トル [3] は東京書籍の教科書「情報の科学」でも取ある。勉強会などでの利用は想定しているが，授業り上げられているが，やはり Java アプリケーショで使うことについてはどうかわからない。筆者は生徒の自習や部活での利用には適していると考えて∗ watayan@meigaku.ac.jp

いる。

*1 筆者の勤務校では端末の OS が Linux なので Microsoft

Oﬃce はインストールされていないのだが。

1

2.1.3

実行環境はローカルマシンにインストールする必要

Monacaがあるようだ。

Monaca[6] はスマートフォンのアプリがブラウザ上で作成できる環境で，アシアル株式会社が運営

3 WaPEN についてしている。HTML5 で作ったアプリは画面上だけでなく，デバッガのアプリをインストールすることに

3.1

PEN → PenFlowchart → WaPEN

大学入試センター試験「情報関係基礎」の問題によって自分のスマートフォンで動作確認できる。
プロジェクトなどをサーバ上に保存するためログ

は DNCL[13] というプログラミング言語が用いらインの必要はあり，その際にメールアドレスが必要れている。大阪学院大学情報学部西田研究室と大阪となる。学校での利用も想定しているということ

市立大学大学院創造都市研究科松浦研究室の共同プ

で，高校や大学などでの利用実績もある。

ロジェクトとして開発された PEN は，DNCL の拡

2.2 ブロックによるプログラミング張である xDNCL を用いた初学者向けプログラミ

2.2.1

ング学習環境である。

Scratch既に多くの実践で取り上げられている Scratch[7]

素のままの DNCL には入力の構文がなく，数値は，MIT メディアラボのライフロングキンダーの扱いにも曖昧な点があるなど，そのままプログ

ガーデングループが開発したプログラミング環境でラミング環境を作るには難がある。そこで xDNCLある。

では入力の構文や繰り返しの種類を増やし，変数宣言を付け加えて「型」を明確にしている。

現 在 公 開 さ れ て い る Scratch 2.0 は Flash ア
プ リ ケ ー シ ョ ン で あ る が ，次 に 公 開 さ れ る 3.0

PEN での実習をしていると，テキストエディタ

は HTML5 で 開 発 さ れ て い る と い う [8]。Flash上でたとえば「もし〜を実行する」の「〜を実行すPlayer は 2020 年に提供終了される予定であり [9]，る」を削除してエラーを引き起こすというようなこ

既にいくつかのブラウザでは明示的に許可しないととが多く見受けられた。それを防ぐために，フローFlash をブロックする状況になっているので，このチャートを作ることでプログラムを生成する機能を変更は待ち遠しい。

PEN に付け加えたものが PenFlowchart である。

2.2.2 プログラミン

PEN，PenFlowchart は Java アプリケーション

文部科学省が運営しているプログラミン [10] があなので，冒頭に述べたようにインストールが必要るが，これは Flash アプリケーションなので，2020である。そこでそれらの機能（全部ではないが）を年以降どうなるのかが気になるところである。

HTML5 で移植して，ブラウザでプログラムが作2.2.3れるようにしたものが WaPEN（Web-aided PEN）

micro:bit の JavaScript ブロックエディター

である。

Micro:bit 教 育 財 団 が 提 供 す る 小 型 ボ ー ド 型

3.2 機能の違い

コ ン ピ ュ ー タ micro:bit[11] の 開 発 環 境 の 一 つ ，

操作が PEN，PenFlowchart と大体同じになるよ

JavaScript ブロックエディターは，シミュレータがうに作成したが，次の点は異なっている。

ついているので実機がなくても動作を確認できる。
また，ブロックと JavaScript の編集画面を行き来• 変数表示画面を実装していない。

し，どちらでもプログラムを編集できる。

• 入力支援ボタンを構文に関するものに限り，関2.2.4 スモウルビー

数の入力などは右クリックのメニューで選べる

Ruby ゲーム開発用ライブラリ Smalruby[12] のようにした。

ためのエディタは，ブラウザ上でブロックと Ruby

• フローチャート画面ではパーツの追加をドラッのコードの画面を行き来してどちらでも開発できる

グ&ドロップでなく，右クリックのメニューでようになっている。手間はかかるがサーバに置けば選ぶようにした。

他のマシンからもブラウザで開発ができるのだが，2• フローチャートのカット&ペーストは未実装。
3.3

要とする設定*4 で演習を行いたかったこと，配列の初期設定など試験問題中のプログラムに現れない部

PEN の xDNCL との違い分をサンプルプログラムとして提供できることなど移植をしきれていないことや，フローチャートでが，これを選択した理由であった。の表現方法が思いつかないことにより，WaPEN で勤務校ではプログラミングを 3 学期に扱うため，は実装されていない構文がある。逆に最後にあげた授業ではまだ使用していない。

配列への代入は PenFlowchart と WaPEN で独自

3.6 余談：PEN とブロックプログラミングに実装したものである。

Web ブラウザ上の環境ではないが，PEN にも• 複数の代入文をコンマでつないで 1 行に書く構

OpenBlocks[15] を使ったブロックプログラミングの環境の実装 oPEN[16] があり，GitHub で公開さ文がない。

• 関数や手続きを作る構文がない。

れている*5 。一方，Google が提供しているライブ• File I/O の命令がない。

ラリ Blockly[17] を使って，タブレットにも対応し•「そうでなくもし」(else-if に相当) の構文がたものを作ろうという構想はあるらしい [18]。

ない。

4 おわりに• a ← [1,2,3] のように，配列にまとめて値を代入できる。

ブラウザ上で実行できるプログラミング学習環境をいくつか取り上げたが，これらが使われることに3.4 想定している使用環境

よってインストール版の価値が損なわれるわけでは

WaPEN は 筆 者 の サ イ ト*2 と GitHub*3 で 公 開ない。完全にオフラインの状況でも使えたり，ハーし て い る 。こ れ を ダ ウ ン ロ ー ド（ あ る い は git

ドウェアやローカルマシンの資源にアクセスしやすclone）して sample.js-dist を sample.js にコいというような利点があるので，適宜使い分けるのピーすればいい（ついでにサンプルプログラムやが良いのだろう。

index.html に手を加えてもいい）。ローカルマシ

ところで，筆者は WaPEN を「素材」であると考ンに置いた index.html をブラウザに読み込ませえている。たとえば次のような「改造」はわりと簡てもいいし，適当な Web サーバにアップロードし単にできるのではないだろうか。そのような，いろて Web アプリケーションとして使うこともできる。

いろな使い方をしてもらえれば作者として幸甚であ

職場の Web サーバが使えないのであれば，月 500る。とはいえ，そういったことをしやすくするため円程度でレンタルサーバを借り，そこに教材などとにはどのライセンスを選択するといいのか，まだ決一緒に置いて授業で利用するのもいいのではないだ

めあぐねているのだが。

ろうか [14]。この件に限らず，自由に使える Web• CGI や PHP を利用してボタン一つでプログラサーバがあると何かと便利である。

3.5 使用実績

ムが提出できるようにする。

2017 年 8 月に行われた情報処理学会の教員免許• 入出力部分を書き換えて，与えた入力に対して更新講習において，センター試験「情報関係基礎」

予期通りの出力が得られるかを自動でチェックの問題を解く演習で WaPEN を使用した（当時フするようにして自動採点する。

ローチャートは未実装）。会場となっていた東京大学の実習室の端末に PEN や PenFlowchart をインストールするのが面倒だったこと，変数の宣言を不*4 PEN はそのような設定ができるが，PenFlowchart はで*2 http://watayan.net/prog/#wapen

きない。
*5 https://github.com/xDNCL/oPEN*3 https://github.com/watayan/WaPEN

3

参考文献・サイト[1] 中村亮太, 西田知博, 松浦敏雄. 初学者向けプログラミング学習環境 PEN. http://www.media.
osaka-cu.ac.jp/PEN/.
[2] 中西渉. 自作プログラム（PenFlowchart）. http://watayan.net/prog/#penflowchart.
[3] 兼宗進. プログラミング言語「ドリトル」. http://dolittle.eplang.jp/.
[4] 兼宗進, 並木美太郎, 長慎也. オンラインプログラミング環境 ビットアロー（Bit Arrow）. http://bitarrow.eplang.jp/.
[5] paiza.IO. https://paiza.io/ja/.
[6] Monaca Education. https://edu.monaca.io/.
[7] Scratch – Imagine, Program, Share. https://scratch.mit.edu/.
[8] Scratch 3.0. https://jp.scratch-wiki.info/wiki/Scratch_3.0.
[9] Flash & the future of interactive content. https://blogs.adobe.com/conversations/2017/07/
adobe-flash-update.html.
[10] 文部科学省. プログラミン. http://www.mext.go.jp/programin/.
[11] micro:bit. http://microbit.org/ja/.
[12] Smalruby. https://github.com/smalruby/.
[13] 独立行政法人大学入試センター. センター試験用手順記述標準言語（DNCL）の説明. http://www.
dnc.ac.jp/sp/albums/abm.php?f=abm00004841.pdf&n=H23_dncl.pdf.
[14] 鹿野利春. 教科「情報」の授業 on クラウド. 全国高等学校情報教育研究会 第 6 回全国大会, 2013.
[15] MIT Sheller Teacher Education Program – Open Blocks Download Page. http://education.
mit.edu/about-old/open-blocks-download-page/.
[16] 主原佑記, 赤井昭仁, 中村亮太, 松浦敏雄. Openblocks を用いたプログラミング学習用ソフトウェアの開発. 情報処理学会 コンピュータと教育研究会 (CE) 研究報告, Vol. 2014-CE-124, No. 9, 2014.

[17] Blockly. https://developers.google.com/blockly/.
[18] 西田知博. 初学者向けプログラミング学習環境 PEN と教材に関する研究. PhD thesis, 大阪大学, 2017.

4