Processing Web IDE を
用いたプログラミング
基礎教育の試み


三浦 元喜 (九州工業大)


2013-08-20
SSS2013 雫石

http://bit.ly/sss13miura 会場のみ http://bit.ly/sss2013miuramo 永続URL







プレゼンについて


背景


  • 工学部におけるプログラミング基礎教育 (C言語)
  •  >> プログラミングの基本+C言語の文法
       (学部2年前期 必修)
  • コンソールアプリは地味
  •  ↓
  • 魅力的にし,学生のモチベーションを高めたい
  • 時間外学習、自発的な取り組みを促したい
  • プログラミング概念の導入・理解に役立てたい
C と Processing を併用
  • 通常のProcessing IDE(統合開発環境)は要インストール

Processing Web IDE


  • Webサイトなのでダウンロード・インストール不要
  • エディタを含んでいる。ブラウザのみで動作
  • Sketchpad.cc や OpenProcessing があるが...
  • >> 3クラス206名の受講者のアカウント作成や
    提出物の管理 が困難
  • エディタの見た目や、機能を充実化したい
  • 既存の自作Web課題提出システムに組み込んだ
  • 既存の自作Web課題提出システム
  • Pjs Web IDE で,どこでもプログラミング!!

Processing.js に対応した一般的なWeb IDE の利点

  • Webブラウザがあれば,どこでも Edit & Run
  • 作成したプログラムがスマートフォンでも動く
    →学生のモチベーション向上
  • ハイライト/インデント機能エディタ→編集がかんたん
  • 表面的な文法はC言語と類似
  •  println() で擬似コンソール出力も使える
  •  scanf() はないが,prompt()で文字列読込み可
  • プログラムを管理しやすい (従来のProcessing IDE はフォルダ管理)
  • クライアント側で動作→サーバ負荷軽減

構築した Pjs Web IDE の利点


学生メリット
  • 操作が簡潔。課題を開けば前回保存時コードを表示
  • 学習者は試行錯誤をくりかえしながら、プログラムを改良しやすい
  • 全角記号チェック→典型的なミスの自己解決

教員メリット
  • サンプルプログラムを初期コードとして提示できる
  • 文字サイズを変更→授業でのコード提示
  • 提出物管理や動作確認のしやすさ

講義内容 (前期15回のうち1〜3回)


  • 1【C】 printf, 変数, 四則演算
  • 2【C】 scanf, 整数型(int)と小数型(float)
  • 3【P】 Processingでお絵描き→アニメーション
      draw関数による「繰り返し」概念の導入と
      変数への足し込み(sum)

  • while / for を教える前に、draw関数

  • 2人1組でゲーム等の作品をつくって、
    最後の授業で1分発表&相互評価 (10点満点)
    を告知

講義内容 (4〜6回)


  • 4【P】 if、条件 マウスにぶつかると跳ね返るボール
  • 5【C】 while、変数への足し込み
    C言語課題:秀吉に仕えた曽呂利新左衛門が、1日目に米1粒、2日目に米2粒、
    3日目に米4粒というように一日毎に前日の倍の米を30日間続けてもらったとき、
    全部で何粒の米を得たか?途中経過を表示せよ

  • 5【P】で配列の説明→お絵書きツール
         (Processingでマウスの軌跡)
  • 6【C】で整数型配列とfor
  • 6【P】で2次元配列を利用したリバーシ風ボードの改良

講義内容 (7〜16回)


  • 7【C】2次元配列、素数をチェックするプログラム
  • 8【C】中間試験
  • 9【C】関数、引数、返却値
  • 10【C】関数の引数に配列をわたす。配列の合計を返す
  • 11【C】配列をコピーする関数、アドレス演算子
  • 12【C】ポインタ、間接演算子、myscanf関数
  • 13【C】文字コードと文字列 char
  • 14【C】文字列のコピー、ソーティング
  • 15【C】期末試験
  • 16【P】Processing課題発表会・学生相互評価

授業時間外の
アクセスログ比較


赤は学外、黄は講義室、青はその他の学内

3学科 (機械系、機械&電気系、化学系)

Pjs 初回の講義において提出された課題の一例
(変数を伴うループ)


おでん 注意喚起 訴え
ネコ ゴルフ 国旗 円環

2回目:ボールの跳ね返り(if)


ブロック崩し
ブロック崩し
スクイズ
空でバウンド
落とせないもの

3回目:お絵描き(配列)


引き寄せ
線画
螺旋拡張
星が瞬く
桜?
色相
黒板

4回目:ボードゲーム
(2次元配列と2重ループ)


判定
目の錯覚?
白をクリック

最終発表作品


雫雨クリック 多角形ブロック崩し 線香花火 時計 ボールころがし 魚のエサやり
はたあげゲーム ボールキャッチ黒板背景 oxゲーム 対戦ホッケー
戦車をつくった 計算シューティング いらいらボール 雨粒

最終アンケート・結果 (n=187)


(1) 授業によって,プログラミングとは
どういうものか,理解できましたか?


  • まったく理解できなかった(理解度20%以下) (6)
  • あまり理解できなかった(理解度20~40%) (28)
  • 半分くらい理解できた(理解度40~60%) (76)
  • だいたい理解できた(理解度60~80%) (68)
  • ほぼ理解できた(理解度80~100%) (9)
(2) 授業をうける前,プログラミングに対する
興味・経験はありましたか?


  • 興味はなかった (27)
  • すこし興味があったが,プログラミング
      経験はなかった (76)
  • 興味はあったが,プログラミング
      経験はなかった (58)
  • すこし興味があり,プログラミング
      経験もあった (15)
  • 興味があり,プログラミング経験もあった (11)
(3) 授業をうけたあとで,プログラミングに対する
興味は変化しましたか?


  • 興味が下がった (4)
  • 興味はすこし下がった (9)
  • 興味に変化はない (44)
  • すこし興味が増した (96)
  • 興味が増した (33)
(4) この授業がProcessingとC言語にかける時間の割合は,以下のどれが望ましいとおもいますか?

  • Processingのみ (5)
  • Processing8割,C言語2割 (6)
  • Processing6割,C言語4割 (14)
  • ProcessingとC言語をちょうど半々にする (35)
  • Processing4割,C言語6割 (32)
  • Processing2割,C言語8割 (※今回の授業)(69)
  • C言語のみ (25)

相関係数


  • 理解と成績 0.495 ***
  • 理解と興味変化 0.458 ***
  • 理解と事前経験 0.444 ***
  • 事前経験とC言語重視 0.234 **
  • 事前経験と興味変化 0.183 **
  • 理解とC言語重視 0.175 **
  • 興味変化とC言語重視 0.166 *

学生コメント(Pjs重視)

  • (1) Processingは実際にやってみて覚えるものだと感じた。 口で説明を受けるよりも実践して体で覚えればいいと考える。
  • (3) Processing を進めながらC言語も同時に学習するというスタンスが一番身につくと思うから。

学生コメント(Cを重視)

  • (7) processingは面白いことができそうだが、触れる回数もC言語に比べて少なかったのもあって、勝手がわからないことが多かった。 具体的に関数を自作したり、いろんなプログラムを書いたC言語の方が面白かった。 C言語の演習をもっとやりかった。
  • (7) 時間比率にもよると思うがc言語との比率を半々くらい時間が欲しいと思った。c言語についてはわかりやすく、演習などの難しさもちょうど良いと思った。
  • (7) 努力不足も考えられるが、processingとC言語の知識がごちゃごちゃしてしまった。ただprocessingをつかって、さまざまな作品を作ることは単純におもしろかったし、個々人の良さがあらわれるのでおもしろいと感じた。

まとめ → 議論

  • モチベーション、時間外学習は増加した
  • 結局,ループ・配列・関数 の理解にかかる時間はあまり短縮されず
  • 「自発的・能動的に時間をかけて考え,探究してほしい」という教員の気持ちは伝わった
  • アンケートの自由回答から:C言語のほうが大事だと考えている学生が多かった
  •  Processingはゲームやアート作品用という認識
  •  Processingの説明が少なくて作品がつくりにくかった
  • Cはエンジニア向け、Processingはリベラルアーツ的?
  • 来年は切り替えを少なく printf, scanf も Pjs でやってみる?

おまけ


ツイート収集にご協力ください


PBL(Project based Learning)教育の一環として,Twitterをつかって,親密なコミュニケーション,コラボレーションの輪を拡げるための方法およびツールを開発しています