canvas 対応版 penflowchart for javascript 開発2015/10/03 ·...
TRANSCRIPT
![Page 1: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/1.jpg)
canvas対応版 PenFlowchart for JavaScriptの開発
中西 渉
名古屋高等学校
2015年 10月 3日
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 1 / 28
![Page 2: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/2.jpg)
agenda
1 はじめに教科書で扱われるプログラミングの題材プログラミング環境
2 PEN, PenFlowchartPENPenFlowchartPenFlowchartの他言語化Flowgorithm
3 canvas対応版 PenFlowchart for JavaScriptの開発PenFlowchartでのグラフィック出力canvas対応版の実装canvas対応版の制限実行例
4 おわりに中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 2 / 28
![Page 3: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/3.jpg)
はじめに
はじめに
教科書で扱われるプログラミングの題材
プログラミング環境
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 3 / 28
![Page 4: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/4.jpg)
はじめに 教科書で扱われるプログラミングの題材
教科書で扱われるプログラミングの題材
よくあるネタ
数学ネタ(素数判定など)
配列→探索,ソート
→いまいち興味をひかない
視覚的な面白さのある題材
数独を解く(実教)
ドリトルのタートルグラフィックス,ゲーム(東書)
巻末の JavaScriptによるグラフィック(東書)
→オマケ的な扱い
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 4 / 28
![Page 5: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/5.jpg)
はじめに 教科書で扱われるプログラミングの題材
教科書で扱われるプログラミングの題材
よくあるネタ
数学ネタ(素数判定など)
配列→探索,ソート
→いまいち興味をひかない
視覚的な面白さのある題材
数独を解く(実教)
ドリトルのタートルグラフィックス,ゲーム(東書)
巻末の JavaScriptによるグラフィック(東書)
→オマケ的な扱い
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 4 / 28
![Page 6: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/6.jpg)
はじめに プログラミング環境
プログラミング環境
教科書で扱われるプログラミング環境
実教 VBA
東書 ドリトル,JavaScript
日文 JavaScript
数研 ???()
→グラフィックを扱うのは難しい(ドリトル以外)
グラフィックを扱うと言っても…
VBA…どうやるの?JavaScript…HTML5の canvas要素を使えばできるけど…
HTMLの知識が必要線一つ引くにも複数の命令が必要
→決して簡単ではない
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 5 / 28
![Page 7: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/7.jpg)
はじめに プログラミング環境
PenFlowchartの JavaScript版でグラフィックが扱えればいいのでは?
→ canvas版 PenFlowchart for JavaScriptの開発
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 6 / 28
![Page 8: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/8.jpg)
はじめに プログラミング環境
PenFlowchartの JavaScript版でグラフィックが扱えればいいのでは?
→ canvas版 PenFlowchart for JavaScriptの開発
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 6 / 28
![Page 9: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/9.jpg)
PEN, PenFlowchart
PEN, PenFlowchart
PEN
PenFlowchart
PenFlowchartの他言語化
Flowgorithm
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 7 / 28
![Page 10: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/10.jpg)
PEN, PenFlowchart PEN
PEN
初学者向けプログラミング学習環境大阪学院大学情報学部 西田研究室大阪市立大学大学院創造都市研究科 松浦研究室
言語は xDNCL(日本語ベース)
入力支援機能,実行状態観察機能
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 8 / 28
![Page 11: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/11.jpg)
PEN, PenFlowchart PenFlowchart
PenFlowchart
生徒たちがよくやるエラー
正
もし a=0 ならば |「ゼロ」を表示するを実行する
誤
もし a=0 ならば「ゼロ」を表示する
フローチャートでプログラムを作れば,このようなエラーを防げるのでは?
→ PenFlowchartの開発
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 9 / 28
![Page 12: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/12.jpg)
PEN, PenFlowchart PenFlowchart
PenFlowchart
生徒たちがよくやるエラー
正
もし a=0 ならば |「ゼロ」を表示するを実行する
誤
もし a=0 ならば「ゼロ」を表示する
フローチャートでプログラムを作れば,このようなエラーを防げるのでは?
→ PenFlowchartの開発
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 9 / 28
![Page 13: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/13.jpg)
PEN, PenFlowchart PenFlowchart
PenFlowchart
生徒たちがよくやるエラー
正
もし a=0 ならば |「ゼロ」を表示するを実行する
誤
もし a=0 ならば「ゼロ」を表示する
フローチャートでプログラムを作れば,このようなエラーを防げるのでは?
→ PenFlowchartの開発
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 9 / 28
![Page 14: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/14.jpg)
PEN, PenFlowchart PenFlowchart
PenFlowchartの実行画面
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 10 / 28
![Page 15: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/15.jpg)
PEN, PenFlowchart PenFlowchartの他言語化
PenFlowchartの他言語化
教科書で扱われるプログラミング言語VBA
JavaScript
ドリトル
→ xDNCLを使う教科書はない
→ PenFlowchartの BASIC版,JavaScript版を開発
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 11 / 28
![Page 16: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/16.jpg)
PEN, PenFlowchart PenFlowchartの他言語化
PenFlowchartの他言語化
教科書で扱われるプログラミング言語VBA
JavaScript
ドリトル
→ xDNCLを使う教科書はない
→ PenFlowchartの BASIC版,JavaScript版を開発
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 11 / 28
![Page 17: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/17.jpg)
PEN, PenFlowchart PenFlowchartの他言語化
PenFlowchartの 3言語版
xDNCL版
PENで実行
BASIC版
PENで実行 (PenFlowchart版のみ)
JavaScript版
PENでは実行不可
JavaScript版は
→ HTMLファイルを出力
→ Webブラウザで実行
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 12 / 28
![Page 18: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/18.jpg)
PEN, PenFlowchart PenFlowchartの他言語化
PenFlowchartの 3言語版
xDNCL版 PENで実行BASIC版 PENで実行 (PenFlowchart版のみ)JavaScript版 PENでは実行不可
JavaScript版は
→ HTMLファイルを出力
→ Webブラウザで実行
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 12 / 28
![Page 19: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/19.jpg)
PEN, PenFlowchart PenFlowchartの他言語化
PenFlowchartの 3言語版
xDNCL版 PENで実行BASIC版 PENで実行 (PenFlowchart版のみ)JavaScript版 PENでは実行不可
JavaScript版は
→ HTMLファイルを出力
→ Webブラウザで実行
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 12 / 28
![Page 20: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/20.jpg)
PEN, PenFlowchart PenFlowchartの他言語化
PenFlowchart for JavaScriptの実行画面
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 13 / 28
![Page 21: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/21.jpg)
PEN, PenFlowchart Flowgorithm
Flowgorithmの実行画面
画像は http://www.flowgorithm.org より引用
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 14 / 28
![Page 22: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/22.jpg)
PEN, PenFlowchart Flowgorithm
Flowgorithmの場合…
多くの言語のソースを出力可能C#,C++,Perl,Java,JavaScript,…
実行はコンソール上(グラフィック不可)
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 15 / 28
![Page 23: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/23.jpg)
canvas対応版 PenFlowchart for JavaScriptの開発
canvas対応版 PenFlowchart for JavaScriptの開発
PenFlowchartでのグラフィック出力
canvas対応版の実装
canvas対応版の制限
実行例
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 16 / 28
![Page 24: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/24.jpg)
canvas対応版 PenFlowchart for JavaScriptの開発 PenFlowchartでのグラフィック出力
PENにはグラフィック出力がある
xDNCL版 PENで実行→グラフィック OKBASIC版 PENで実行→グラフィック OKJavaScript版 ブラウザで実行→グラフィックは?
→ JavaScript版では HTML5の canvas要素を使えばいい→ canvas対応版を別に作る
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 17 / 28
![Page 25: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/25.jpg)
canvas対応版 PenFlowchart for JavaScriptの開発 PenFlowchartでのグラフィック出力
PENにはグラフィック出力がある
xDNCL版 PENで実行→グラフィック OKBASIC版 PENで実行→グラフィック OKJavaScript版 ブラウザで実行→グラフィックは?
→ JavaScript版では HTML5の canvas要素を使えばいい
→ canvas対応版を別に作る
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 17 / 28
![Page 26: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/26.jpg)
canvas対応版 PenFlowchart for JavaScriptの開発 PenFlowchartでのグラフィック出力
PENにはグラフィック出力がある
xDNCL版 PENで実行→グラフィック OKBASIC版 PENで実行→グラフィック OKJavaScript版 ブラウザで実行→グラフィックは?
→ JavaScript版では HTML5の canvas要素を使えばいい→ canvas対応版を別に作る
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 17 / 28
![Page 27: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/27.jpg)
canvas対応版 PenFlowchart for JavaScriptの開発 PenFlowchartでのグラフィック出力
canvas版の対応
グラフィック命令を使用している場合…→ HTMLファイルに canvas要素を出力→描画は canvas要素に対して行なう
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 18 / 28
![Page 28: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/28.jpg)
canvas対応版 PenFlowchart for JavaScriptの開発 PenFlowchartでのグラフィック出力
canvas版の実行画面
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 19 / 28
![Page 29: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/29.jpg)
canvas対応版 PenFlowchart for JavaScriptの開発 canvas対応版の実装
canvas対応版の実装
グラフィック関係の追加のみ
HTMLファイルに canvas要素を追加
描画命令の書き出し
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 20 / 28
![Page 30: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/30.jpg)
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 JavaScript 2015年 10月 3日 21 / 28
![Page 31: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/31.jpg)
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 JavaScript 2015年 10月 3日 22 / 28
![Page 32: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/32.jpg)
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 JavaScript 2015年 10月 3日 22 / 28
![Page 33: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/33.jpg)
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 JavaScript 2015年 10月 3日 22 / 28
![Page 34: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/34.jpg)
canvas対応版 PenFlowchart for JavaScriptの開発 実行例
実行例
単純な描画
棒グラフ
ステキプログラム(東書)
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 23 / 28
![Page 35: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/35.jpg)
canvas対応版 PenFlowchart for JavaScriptの開発 実行例
単純な描画
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 24 / 28
![Page 36: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/36.jpg)
canvas対応版 PenFlowchart for JavaScriptの開発 実行例
棒グラフ
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 25 / 28
![Page 37: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/37.jpg)
canvas対応版 PenFlowchart for JavaScriptの開発 実行例
ステキプログラム(東書教科書巻末のプログラム)
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 26 / 28
![Page 38: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/38.jpg)
おわりに
おわりに
勤務校で使うかは未定
教科書にグラフィックの題材がない
→ 独自教材を準備
→ JavaScriptでなくてもいい?
→ xDNCL版,BASIC版の方が自由だし…
使い方次第では…
授業は JavaScript通常版
→ グラフィックの演習だけ canvas対応版
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 27 / 28
![Page 39: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/39.jpg)
おわりに
おわりに
勤務校で使うかは未定
教科書にグラフィックの題材がない
→ 独自教材を準備
→ JavaScriptでなくてもいい?
→ xDNCL版,BASIC版の方が自由だし…
使い方次第では…
授業は JavaScript通常版
→ グラフィックの演習だけ canvas対応版
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 27 / 28
![Page 40: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/40.jpg)
おわりに
おわりに
勤務校で使うかは未定
教科書にグラフィックの題材がない
→ 独自教材を準備
→ JavaScriptでなくてもいい?
→ xDNCL版,BASIC版の方が自由だし…
使い方次第では…
授業は JavaScript通常版
→ グラフィックの演習だけ canvas対応版
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 27 / 28
![Page 41: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/41.jpg)
おわりに
おわりに
勤務校で使うかは未定
教科書にグラフィックの題材がない
→ 独自教材を準備
→ JavaScriptでなくてもいい?
→ xDNCL版,BASIC版の方が自由だし…
使い方次第では…
授業は JavaScript通常版
→ グラフィックの演習だけ canvas対応版
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 27 / 28
![Page 42: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/42.jpg)
おわりに
おわりに
勤務校で使うかは未定
教科書にグラフィックの題材がない
→ 独自教材を準備
→ JavaScriptでなくてもいい?
→ xDNCL版,BASIC版の方が自由だし…
使い方次第では…
授業は JavaScript通常版
→ グラフィックの演習だけ canvas対応版
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 27 / 28
![Page 43: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/43.jpg)
おわりに
おわりに
勤務校で使うかは未定
教科書にグラフィックの題材がない
→ 独自教材を準備
→ JavaScriptでなくてもいい?
→ xDNCL版,BASIC版の方が自由だし…
使い方次第では…
授業は JavaScript通常版
→ グラフィックの演習だけ canvas対応版
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 27 / 28
![Page 44: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/44.jpg)
おわりに
おわりに
勤務校で使うかは未定
教科書にグラフィックの題材がない
→ 独自教材を準備
→ JavaScriptでなくてもいい?
→ xDNCL版,BASIC版の方が自由だし…
使い方次第では…
授業は JavaScript通常版
→ グラフィックの演習だけ canvas対応版
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 27 / 28
![Page 45: canvas 対応版 PenFlowchart for JavaScript 開発2015/10/03 · ドリトルのタートルグラフィックス,ゲーム(東書) 巻末のJavaScript によるグラフィック(東書)](https://reader035.vdocuments.us/reader035/viewer/2022081409/608478124252407af333fb99/html5/thumbnails/45.jpg)
おわりに
PenFlowchartの配布先http://watayan.net/prog/
Javaアプリケーションなので OSを問わない
中西 渉 (名古屋高等学校) canvas対応版 PenFlowchart for JavaScript 2015年 10月 3日 28 / 28