Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Monacaとp5.jsを利用した プログラミング学習

Monacaとp5.jsを利用した プログラミング学習

2021年3月26日(土)開催のプログラミング教育実践事例研究会 2022春 ~EdTech導入補助金によるMonaca Education活用事例~での千葉県立沼南高等学校 沼崎拓也先生の発表資料です。

More Decks by アシアル情報教育研究所

Other Decks in Education

Transcript

  1. Monacaとp5.jsを利用した プログラミング学習 千葉県立沼南高等学校 情報科 沼崎 拓也

  2. 本校でのプログラミング教育 • EdTech導入補助金で Monacaを導入 • 3年「情報の科学」 × 2クラス • 1年「社会と情報」

    × 5クラス
  3. 3年「情報の科学」 • 1年時に「社会と情報」を履修済 • タイピングなどの基本操作はできる • プログラミング入門として、1学期にScratchを扱った

  4. Scratchでの内容 • 基本的なブロックの使い方の紹介 • 出力(「~」と言う),文字列の連結,繰り返し,条件分岐 • 変数の説明 • 変数名は「x」や「答え」などアルファベットも日本語も利用 •

    取り上げる要素について例題と練習問題を用意 • 学習範囲を終えたら簡単な作品制作
  5. 完成作品の例 • ミニゲーム • 野球の投手から動いてくるボールをタイミングよく打つと跳ね返る • ショートストーリーの紙芝居 • キャラクターが対話、場面に応じてコスチューム変化 •

    算数問題(足し算)ドリル • 一桁の足し算をランダムで出題、正解なら得点が増え 制限時間内での得点数を競う • その他:「おみくじの改造版」や「多角形の作図の応用」など
  6. 「情報の科学」でのMonacaの授業 • テキスト「Monacaで学ぶはじめてのプログラミング ~モバイルアプリ入門編〜」を使用 • 教師機の画面配信でプロジェクトの準備など指示 • 完成後の動きを見せてから、テキストのコードを入力させる • 教員2名で机間巡視し、動作しない生徒をフォロー

  7. 結果として • あまり機能せず… • 動かない生徒が多数 • 教員が生徒の画面とテキストを"にらめっこ"で ミス探し

  8. 本校生徒の反応 • いわゆる 「typo」 や 「転記ミス」 • 英単語の知識やライティング経験が少なく、ミスに気付きにくい • 「予約語」や、「変数名」など短い単語でも起きる

    • 「転記ミス」 とは、行の途中で他の行と混乱する、など • 文字の種類による文法ミス • 日本語混入や数字・記号の全角、あとは全角スペース • 英字の大文字・小文字
  9. JavaScriptでの気づき • タイピング速度とは異なる点でのつまずきが見られた • IDEの機能を利用しても視認性の向上は予約語の色づけ程 度 • 「どの時点まで書けば未完成でも動くか」が分かりにくい • デバッグ手法が確立されない…

  10. 授業改善に向けて • 学習に困難を抱えている生徒における「写経」型学習では、 事前指導や補足指導が重要 • タイピングするコード量を減らす題材にできないか検討 Monacaで使用できる言語のうち、短いコードで記述可能な p5.js(Processing)に着目

  11. p5.jsとは • もともとはJavaベースだったProcessingという言語を JavaScript上に移植したJSライブラリ • JSのライブラリが読み込める環境ならば動く Processingは「電子アートとビジュアルデザインのためのプ ログラミング言語であり、統合開発環境(IDE)」

  12. Processing

  13. p5.js(Processing)の特徴 • メディアアート指向のため、描画などに特化した関数がある • Scratchのように(x,y)の2次元座標系での指示が基本 • 関数とパラメータ引数のみで動作できる命令が多い • アニメーションなどの動的なコンテンツも作りやすい

  14. Monaca&p5.jsの具体例

  15. p5.jsを動かすまでの流れ 1. 新しいプロジェクトを作る 2. テンプレートでProcessing(p5.js)を選択 3. 用意されている「sketch.js」というファイルに記述する

  16. p5.jsを動かすまでの流れ 4. あらかじめ用意された関数内にコードを書く 5. 保存をして、プレビューで動作を確認 「コードを書いて」「動作確認」のサイクルを短くできる (プロトタイピング 開発に近い) コードのミスに気付きやすい

  17. p5.jsプログラムの基本構造 function setup(){ 略 } • プログラム実行時に一度だけ実行される関数 function draw(){ 略

    } • フレームレート60fpsで繰り返して実行される関数 • 変数を活用すると色々なことが実現できる
  18. コードの例

  19. 四角形の描画 始点(50,50)で高さ100幅100の四角

  20. 円の描画 中心(100,100)で高さ100幅100の円

  21. 色の塗り方

  22. 課題の例 • 移動する図形で簡単なアニメーションをつくろう • ボタンやイベントの概念を理解しよう • 自動販売機を完成させよう

  23. 作品例(教員)

  24. 変数とアニメーション • 繰り返しの命令を扱ったあと、Processingの基本構造の draw関数の説明

  25. p5.jsプログラムの基本構造 • function setup(){ 略 } プログラム実行時に一度だけ実行される • function draw(){

    略 } フレームレート60fpsで繰り返して実行される 変数を組み合わせると活用が広がる
  26. 図形の座標にグローバル変数

  27. 課題の例 • 移動する図形で簡単なアニメーションをつくろう

  28. 条件分岐とアニメーション

  29. 課題の例 • ボタンやイベントの概念を理解しよう

  30. ボタンやイベントの概念

  31. 課題の例 • 自動販売機を完成させよう

  32. 自動販売機の完成

  33. 気づきの例 【例】 elipse( 50, 50, 100, 100); → 円が出てこない。何かが間違っている。 →

    ellipse のスペルが違っていた 【例】 ellipse( x, y, 100, 100); → 円が動かない。 → xの値がインクリメントされていない
  34. 注意点 • JavaScriptとは違う言語なので、Monacaデバッガーが 働く場所が限定される • 存在しない変数の参照や,変数の値などはチェック可能。 • Processing由来の命令のスペルチェックなどは不可能

  35. 評価と生徒の感想 • 今回は、「写経」型のように用意されたコードを完成させるも のだった • その中で 「完成レベル」 「追加で工夫した点」 で評価基準を作成し、評価とした

  36. 生徒の工夫の例 • 教員が簡易的に済ませた処理の修正 • 投入金額が1000円を超えると桁がずれる → 表示する処理を確認して十分な桁を取る • 自販機の配色を変更 →

    用意したテンプレートの自販機の色から好きな配色へと変更
  37. 生徒の評価・感想 学年末の振り返り 面白かった単元としてプログラミングを回答した生徒 102名中 61名 (59%) 中途半端な内容で終わったが生徒の反応は良かった

  38. まとめ

  39. 情報Ⅰの教科書見本より 取り上げられているプログラミング言語の分類 • テキスト型 • VBA • Python • JavaScript

    • ビジュアル型 • Scratch
  40. 情報Ⅰを迎えるにあたって • 中学校までにビジュアル型プログラミング言語を経験してく る生徒が増える • テキスト型プログラミングとのギャップが現れる生徒も 一定数いると想定 • スマホアプリという枠組みや、動くプログラミングでそのギャッ プを補っていきたい

  41. Monacaの可能性 • 各自のスマートフォンで動かしていくことで授業へのモチ ベーションが上がる期待 • パソコンで、文字だけの出力のプログラミングではなく、見ら れる"作品"を作れる環境 • アプリの見た目から作るプロトタイピング開発の可能性

  42. 参考資料 『初心者でも「コード」が書ける!ゲーム作りで学ぶ はじめてのプログラミング』 うえはら著 竹林暁監修(技術評論社) 『p5.jsプログラミングガイド改訂版』 松田晃一 著(カットシステム)