Web 上のプログラミング学習環境の紹介
中西渉
watayan@meigaku.ac.jp
名古屋高等学校2017 年 11 月 21 日

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

1 / 30

目次
1

はじめに

2

各プログラミング学習環境
テキストによるプログラミング
ブロックによるプログラミング

3

WaPEN について
PEN → PenFlowchart → WaPEN
機能の違い
PEN の xDNCL との違い想定している使用環境
使用実績
余談：PEN とブロックプログラミング4

おわりに中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

2 / 30

はじめに

1

はじめに

2

各プログラミング学習環境
テキストによるプログラミング
ブロックによるプログラミング

3

WaPEN について
PEN → PenFlowchart → WaPEN
機能の違い
PEN の xDNCL との違い想定している使用環境
使用実績
余談：PEN とブロックプログラミング

4

おわりに

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

3 / 30はじめに教科書で使われるプログラミング言語「情報の科学」で使われるプログラミング言語といえば. . .

Excel の VBA
JavaScript
ドリトル

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

4 / 30はじめに教科書で使われるプログラミング言語「情報の科学」で使われるプログラミング言語といえば. . .

Excel の VBA
JavaScript
ドリトル

理由は？→特別なソフトウェアが不要

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

4 / 30はじめに勤務校のプログラミング学習環境
OpenOﬃce.org の BASIC(2004〜)
PEN(2006〜)

中西渉 (名古屋高等学校)

PenFlowchart(2011〜)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

5 / 30はじめにWeb 上のプログラミング学習環境
PEN，PenFlowchart は Java アプリケーション→インストール，JRE が必要→使えない学校も中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

6 / 30はじめに

Web 上のプログラミング学習環境
PEN，PenFlowchart は Java アプリケーション→インストール，JRE が必要→使えない学校も→ Web アプリケーションなら準備不要

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

6 / 30

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

1

はじめに

2

各プログラミング学習環境
テキストによるプログラミング
ブロックによるプログラミング

3

WaPEN について
PEN → PenFlowchart → WaPEN
機能の違い
PEN の xDNCL との違い想定している使用環境
使用実績
余談：PEN とブロックプログラミング

4

おわりに中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

7 / 30

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

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

Bit Arrow. . . の前に ドリトル

中西渉 (名古屋高等学校)Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

8 / 30

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

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

Bit Arrow. . . の前に ドリトル

Java アプリケーション→インストールが必要

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

8 / 30

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

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

Bit Arrow

Web ブラウザ上で動作
JavaScript，ドリトル，簡易 C
JavaScript は便利な記述を追加
http://bitarrow.eplang.jp/
中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

9 / 30

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

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

Bit Arrow

作ったプログラムを QR コード経由で実行することも可能
中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

10 / 30

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

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

paiza.IO

ブラウザ上でプログラミング→動作確認
多くの言語に対応（C,VB,JavaScript,Java,. . . )https://paiza.io/ja
中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

11 / 30

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

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

Monacaスマートフォンのアプリをブラウザ上で作成
自分のスマートフォンですぐに確認できる

https://edu.monaca.io
中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

12 / 30

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

ブロックによるプログラミング

Scratchhttps://scratch.mit.edu
中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

13 / 30

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

ブロックによるプログラミング

ScratchScratch 2.0 は Flash アプリケーション→ Flash は 2020 年以降使えない？

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

14 / 30

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

ブロックによるプログラミング

ScratchScratch 2.0 は Flash アプリケーション→ Flash は 2020 年以降使えない？

Scratch 3.0 は HTML5 で開発中

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

14 / 30

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

ブロックによるプログラミング

Flash がなくなると…
いろいろ困ります. . . よね？

↑ JavaScript 版は Firefox で不具合がある

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

15 / 30

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

ブロックによるプログラミング

プログラミン

文部科学省が運営
Flash アプリケーションなので. . .

http://www.mext.go.jp/programin/
中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

16 / 30

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

ブロックによるプログラミング

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

小型ボード型コンピュータ micro:bit 用の開発環境
シミュレータで動作確認できるブロックと JavaScript の切り替えができる

http://microbit.org/ja/
中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介2017 年 11 月 21 日

17 / 30

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

ブロックによるプログラミング

スモウルビー

Ruby 用の 2D ゲーム開発ライブラリ Smalruby 用の開発環境
ブロックと Ruby の切り替えができる
実行環境はインストールしないとダメ？

https://github.com/smalruby/中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

18 / 30

WaPEN について

1

はじめに

2

各プログラミング学習環境
テキストによるプログラミング
ブロックによるプログラミング

3

WaPEN について
PEN → PenFlowchart → WaPEN
機能の違い
PEN の xDNCL との違い想定している使用環境
使用実績
余談：PEN とブロックプログラミング

4

おわりに

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

19 / 30

WaPEN について

PEN → PenFlowchart → WaPEN

PEN → PenFlowchart → WaPEN
PENProgramming Environment for Novice
DNCL を拡張した xDNCL

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

20 / 30

WaPEN について

PEN → PenFlowchart → WaPEN

PEN → PenFlowchart → WaPEN
PenFlowchart
フローチャートを作ることでプログラム生成中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

21 / 30

WaPEN について

PEN → PenFlowchart → WaPEN

PEN → PenFlowchart → WaPEN
WaPEN
PEN，PenFlowchart → HTML5 で移植
Web-aided PEN

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

22 / 30

WaPEN について

機能の違い

機能の違い
なるべく PEN，PenFlowchart を踏襲したが. . .
変数表示画面が未実装
入力支援ボタンと右クリックメニューの使い分け
フローチャート画面の UI 変更（カット&ペーストは未実装）

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

23 / 30

WaPEN について

PEN の xDNCL との違い

PEN の xDNCL との違い
あまり大きい影響はないはず
複数の代入文を 1 行に書けない関数や手続きが作れない

File I/O がない「そうでなくもし」の構文がない

a ← [1,2,3] のように，配列にまとめて代入できる

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

24 / 30

WaPEN について想定している使用環境

想定している使用環境
準備1

配付ファイルを取得
http://watayan.net/prog/#wapen からダウンロード
https://github.com/watayan/wapen.git から git clone

sample.js-dist を sample.js にコピー
3sample.js のサンプルプログラムを書き換える
4
index.html にも手を加えたり. . .
あとは index.html を読み込むとか，Web サーバに置くとか2中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

25 / 30

WaPEN について想定している使用環境

適当な Web サーバがなければ. . .
レンタルサーバで十分（月 500 円くらい？）一つ持っておくと，何かと便利

watayan.net

中西渉 (名古屋高等学校)

aichi-edu.info

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

26 / 30

WaPEN について

使用実績

使用実績
2017 年度 情報処理学会の教員免許更新講習
センター試験「情報関係基礎」問 3 のプログラムを実行する演習で使用
会場の Mac に PEN，PenFlowchart をインストールするのが面倒
変数の宣言なしモードで実行したかった
試験問題にない部分のプログラムを配付したかった
授業では未使用（勤務校では 3 学期）

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

27 / 30

WaPEN について

余談：PEN とブロックプログラミング

余談：PEN とブロックプログラミング
PEN のブロックプログラミングによる実装 oPEN

Blockly での実装の構想もあるらしい. . .
中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

28 / 30

おわりに

1

はじめに

2

各プログラミング学習環境
テキストによるプログラミング
ブロックによるプログラミング

3

WaPEN について
PEN → PenFlowchart → WaPEN
機能の違い
PEN の xDNCL との違い想定している使用環境
使用実績
余談：PEN とブロックプログラミング

4

おわりに

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

29 / 30

おわりにおわりに
Web 上でプログラミング学習が可能だが. . .
→インストール版も有用
ハードウェア，ローカルマシンの資源にアクセス
ネットワークなしで使える

WaPEN は「素材」. . . 改造したり，何かに組み入れたり. . . どんなライセンスがいいんだろう. . .

中西渉 (名古屋高等学校)

Web 上のプログラミング学習環境の紹介

2017 年 11 月 21 日

30 / 30