Embed Size (px)
Citation preview
Web上のプログラミング学習環境の紹介
中西渉
名古屋高等学校
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
はじめに
勤務校のプログラミング学習環境
OpenOffice.orgの BASIC(2004～)
PEN(2006～) PenFlowchart(2011～)
中西渉 (名古屋高等学校) Web上のプログラミング学習環境の紹介 2017年 11月 21日 5 / 30
はじめに
Web上のプログラミング学習環境
PEN，PenFlowchartは Javaアプリケーション→インストール，JREが必要→使えない学校も
→Webアプリケーションなら準備不要
中西渉 (名古屋高等学校) 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. . .の前に ドリトル
Javaアプリケーション→インストールが必要
中西渉 (名古屋高等学校) Web上のプログラミング学習環境の紹介 2017年 11月 21日 8 / 30
各プログラミング学習環境 テキストによるプログラミング
Bit Arrow. . .の前に ドリトル
Javaアプリケーション→インストールが必要
中西渉 (名古屋高等学校) Web上のプログラミング学習環境の紹介 2017年 11月 21日 8 / 30
各プログラミング学習環境 テキストによるプログラミング
Bit Arrow
Webブラウザ上で動作JavaScript，ドリトル，簡易 CJavaScriptは便利な記述を追加
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
各プログラミング学習環境 ブロックによるプログラミング
Scratch
https://scratch.mit.edu
中西渉 (名古屋高等学校) Web上のプログラミング学習環境の紹介 2017年 11月 21日 13 / 30
各プログラミング学習環境 ブロックによるプログラミング
Scratch
Scratch 2.0は Flashアプリケーション→ Flashは 2020年以降使えない？
Scratch 3.0は HTML5で開発中
中西渉 (名古屋高等学校) Web上のプログラミング学習環境の紹介 2017年 11月 21日 14 / 30
各プログラミング学習環境 ブロックによるプログラミング
Scratch
Scratch 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
PEN
Programming 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
WaPENPEN，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
2 sample.js-distを sample.jsにコピー3 sample.jsのサンプルプログラムを書き換える4 index.htmlにも手を加えたり. . .
あとは index.htmlを読み込むとか，Webサーバに置くとか
中西渉 (名古屋高等学校) 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
