canvas 対応版 PenFlowchart for JavaScript の開発
中西渉

watayan@meigaku.ac.jp
名古屋高等学校

2015 年 10 月 3 日

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

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

1 / 28

agenda1

はじめに
教科書で扱われるプログラミングの題材
プログラミング環境

2

PEN, PenFlowchart
PEN
PenFlowchart
PenFlowchart の他言語化
Flowgorithm
canvas 対応版 PenFlowchart for JavaScript の開発
PenFlowchart でのグラフィック出力
canvas 対応版の実装
canvas 対応版の制限

3

4

実行例
おわりに
中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

2 / 28

はじめにはじめに教科書で扱われるプログラミングの題材
プログラミング環境

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

3 / 28

はじめに教科書で扱われるプログラミングの題材

教科書で扱われるプログラミングの題材よくあるネタ
数学ネタ（素数判定など）
配列→探索，ソート→いまいち興味をひかない中西渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

4 / 28はじめに

教科書で扱われるプログラミングの題材

教科書で扱われるプログラミングの題材よくあるネタ
数学ネタ（素数判定など）
配列→探索，ソート→いまいち興味をひかない
視覚的な面白さのある題材
数独を解く（実教）
ドリトルのタートルグラフィックス，ゲーム（東書）
巻末の JavaScript によるグラフィック（東書）→オマケ的な扱い中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

4 / 28

はじめにプログラミング環境

プログラミング環境
教科書で扱われるプログラミング環境
実教 VBA
東書 ドリトル，JavaScript日文 JavaScript
数研 ???()→グラフィックを扱うのは難しい（ドリトル以外）
グラフィックを扱うと言っても…

VBA…どうやるの？
JavaScript…HTML5 の canvas 要素を使えばできるけど…
HTML の知識が必要
線一つ引くにも複数の命令が必要→決して簡単ではない中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

5 / 28

はじめにプログラミング環境

PenFlowchart の JavaScript 版でグラフィックが扱えればいいのでは？

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

6 / 28

はじめにプログラミング環境

PenFlowchart の JavaScript 版でグラフィックが扱えればいいのでは？
→ canvas 版 PenFlowchart for JavaScript の開発

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

6 / 28

PEN, PenFlowchart

PEN, PenFlowchart
PENPenFlowchart
PenFlowchart の他言語化
Flowgorithm

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

7 / 28

PEN, PenFlowchart

PENPEN
初学者向けプログラミング学習環境
大阪学院大学情報学部 西田研究室
大阪市立大学大学院創造都市研究科

松浦研究室

言語は xDNCL（日本語ベース）
入力支援機能，実行状態観察機能中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

8 / 28

PEN, PenFlowchart

PenFlowchart

PenFlowchart
生徒たちがよくやるエラー
正もし a=0 ならば｜「ゼロ」を表示する
を実行する

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

9 / 28

PEN, PenFlowchart

PenFlowchart

PenFlowchart
生徒たちがよくやるエラー
正誤

もし a=0 ならば｜「ゼロ」を表示するを実行するもし a=0 ならば「ゼロ」を表示する

フローチャートでプログラムを作れば，このようなエラーを防げるのでは？

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

9 / 28

PEN, PenFlowchart

PenFlowchart

PenFlowchart
生徒たちがよくやるエラー
正誤

もし a=0 ならば｜「ゼロ」を表示するを実行するもし a=0 ならば「ゼロ」を表示する

フローチャートでプログラムを作れば，このようなエラーを防げるのでは？
→ PenFlowchart の開発

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

9 / 28

PEN, PenFlowchart

PenFlowchart

PenFlowchart の実行画面

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

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

10 / 28

PEN, PenFlowchart

PenFlowchart の他言語化

PenFlowchart の他言語化教科書で扱われるプログラミング言語

VBA
JavaScript
ドリトル→ xDNCL を使う教科書はない

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

11 / 28

PEN, PenFlowchart

PenFlowchart の他言語化

PenFlowchart の他言語化教科書で扱われるプログラミング言語

VBA
JavaScript
ドリトル→ xDNCL を使う教科書はない→ PenFlowchart の BASIC 版，JavaScript 版を開発

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

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

11 / 28

PEN, PenFlowchart

PenFlowchart の他言語化

PenFlowchart の 3 言語版
xDNCL 版
BASIC 版
JavaScript 版

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

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

12 / 28

PEN, PenFlowchart

PenFlowchart の他言語化

PenFlowchart の 3 言語版
xDNCL 版
PEN で実行BASIC 版
PEN で実行 (PenFlowchart 版のみ)
JavaScript 版 PEN では実行不可

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

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

12 / 28

PEN, PenFlowchart

PenFlowchart の他言語化

PenFlowchart の 3 言語版xDNCL 版
PEN で実行BASIC 版
PEN で実行 (PenFlowchart 版のみ)
JavaScript 版 PEN では実行不可
JavaScript 版は→ HTML ファイルを出力→ Web ブラウザで実行中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

12 / 28

PEN, PenFlowchart

PenFlowchart の他言語化

PenFlowchart for JavaScript の実行画面

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

13 / 28

PEN, PenFlowchart

Flowgorithm

Flowgorithm の実行画面

画像は http://www.flowgorithm.org より引用
中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

14 / 28

PEN, PenFlowchart

Flowgorithm

Flowgorithm の場合…
多くの言語のソースを出力可能
C#,C++,Perl,Java,JavaScript,…
実行はコンソール上（グラフィック不可）

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

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

15 / 28

canvas 対応版 PenFlowchart for JavaScript の開発

canvas 対応版 PenFlowchart for JavaScript の開発
PenFlowchart でのグラフィック出力
canvas 対応版の実装
canvas 対応版の制限
実行例

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

16 / 28

canvas 対応版 PenFlowchart for JavaScript の開発

PenFlowchart でのグラフィック出力

PEN にはグラフィック出力がある
xDNCL 版
PEN で実行→グラフィック OK
BASIC 版
PEN で実行→グラフィック OK
JavaScript 版 ブラウザで実行→グラフィックは？

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

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

17 / 28

canvas 対応版 PenFlowchart for JavaScript の開発

PenFlowchart でのグラフィック出力

PEN にはグラフィック出力がある
xDNCL 版
PEN で実行→グラフィック OK
BASIC 版
PEN で実行→グラフィック OK
JavaScript 版 ブラウザで実行→グラフィックは？
→ JavaScript 版では HTML5 の canvas 要素を使えばいい中西渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

17 / 28

canvas 対応版 PenFlowchart for JavaScript の開発

PenFlowchart でのグラフィック出力

PEN にはグラフィック出力がある
xDNCL 版
PEN で実行→グラフィック OK
BASIC 版
PEN で実行→グラフィック OK
JavaScript 版 ブラウザで実行→グラフィックは？
→ JavaScript 版では HTML5 の canvas 要素を使えばいい→ canvas 対応版を別に作る

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

17 / 28

canvas 対応版 PenFlowchart for JavaScript の開発

PenFlowchart でのグラフィック出力

canvas 版の対応
グラフィック命令を使用している場合…
→ HTML ファイルに canvas 要素を出力→描画は canvas 要素に対して行なう

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

18 / 28

canvas 対応版 PenFlowchart for JavaScript の開発

PenFlowchart でのグラフィック出力

canvas 版の実行画面

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日19 / 28

canvas 対応版 PenFlowchart for JavaScript の開発

canvas 対応版の実装

canvas 対応版の実装
グラフィック関係の追加のみ

HTML ファイルに canvas 要素を追加
描画命令の書き出し

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

20 / 28

canvas 対応版 PenFlowchart for JavaScript の開発

canvas 対応版の制限

canvas 対応版の制限
決め打ちの部分<canvas id="canvas" height="xxx" width="xxx"/>
canvas = document.getElementById(’canvas’);context = canvas.getContext(’2d’);
id=”canvas”が決め打ち (HTML)canvas, context が決め打ち (JavaScript)

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

21 / 28

canvas 対応版 PenFlowchart for JavaScript の開発

フローチャート簡単簡単

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

canvas 対応版の制限

xDNCL のコード
線描画 (x1,y1,x2,y2)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

22 / 28

canvas 対応版 PenFlowchart for JavaScript の開発

フローチャート

簡単
簡単

フローチャート

簡単
かなり困難

中西

渉 (名古屋高等学校)

canvas 対応版の制限

xDNCL のコード
線描画 (x1,y1,x2,y2)
JavaScript のコード
context.beginPath();context.moveTo(x1,y1);context.lineTo(x2,y2);context.stroke();canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

22 / 28

canvas 対応版 PenFlowchart for JavaScript の開発

フローチャート

canvas 対応版の制限

簡単
簡単

フローチャート

簡単
かなり困難

xDNCL のコード
線描画 (x1,y1,x2,y2)
JavaScript のコード
context.beginPath();context.moveTo(x1,y1);context.lineTo(x2,y2);context.stroke();

フローチャートの逆生成はあきらめた
いっそコードの編集を禁じていいかも？

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

22 / 28

canvas 対応版 PenFlowchart for JavaScript の開発

実行例

実行例
単純な描画
棒グラフ
ステキプログラム（東書）

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日23 / 28

canvas 対応版 PenFlowchart for JavaScript の開発

実行例

単純な描画

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

24 / 28

canvas 対応版 PenFlowchart for JavaScript の開発

実行例

棒グラフ

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

25 / 28

canvas 対応版 PenFlowchart for JavaScript の開発

実行例

ステキプログラム（東書教科書巻末のプログラム）

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

26 / 28

おわりにおわりに勤務校で使うかは未定
教科書にグラフィックの題材がない

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

27 / 28

おわりにおわりに勤務校で使うかは未定
教科書にグラフィックの題材がない→ 独自教材を準備中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

27 / 28

おわりにおわりに勤務校で使うかは未定
教科書にグラフィックの題材がない→ 独自教材を準備→ JavaScript でなくてもいい？

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

27 / 28

おわりにおわりに勤務校で使うかは未定
教科書にグラフィックの題材がない→ 独自教材を準備→ JavaScript でなくてもいい？
→ xDNCL 版，BASIC 版の方が自由だし…

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

27 / 28

おわりにおわりに勤務校で使うかは未定教科書にグラフィックの題材がない→ 独自教材を準備→ JavaScript でなくてもいい？
→ xDNCL 版，BASIC 版の方が自由だし…

中西

渉 (名古屋高等学校)

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

27 / 28

おわりにおわりに勤務校で使うかは未定
教科書にグラフィックの題材がない→ 独自教材を準備→ JavaScript でなくてもいい？
→ xDNCL 版，BASIC 版の方が自由だし…
使い方次第では…
授業は JavaScript 通常版

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

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

27 / 28

おわりにおわりに勤務校で使うかは未定
教科書にグラフィックの題材がない→ 独自教材を準備→ JavaScript でなくてもいい？
→ xDNCL 版，BASIC 版の方が自由だし…
使い方次第では…
授業は JavaScript 通常版→ グラフィックの演習だけ canvas 対応版

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

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

27 / 28

おわりに

PenFlowchart の配布先
http://watayan.net/prog/
Java アプリケーションなので OS を問わない

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

canvas 対応版 PenFlowchart for JavaScript2015 年 10 月 3 日

28 / 28