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

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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Scratchでの内容 • 基本的なブロックの使い方の紹介 • 出力（「～」と言う），文字列の連結，繰り返し，条件分岐 • 変数の説明 • 変数名は「ｘ」や「答え」などアルファベットも日本語も利用 • 取り上げる要素について例題と練習問題を用意 • 学習範囲を終えたら簡単な作品制作

Slide 5

Slide 5 text

完成作品の例 • ミニゲーム • 野球の投手から動いてくるボールをタイミングよく打つと跳ね返る • ショートストーリーの紙芝居 • キャラクターが対話、場面に応じてコスチューム変化 • 算数問題（足し算）ドリル • 一桁の足し算をランダムで出題、正解なら得点が増え制限時間内での得点数を競う • その他：「おみくじの改造版」や「多角形の作図の応用」など

Slide 6

Slide 6 text

「情報の科学」でのMonacaの授業 • テキスト「Monacaで学ぶはじめてのプログラミング～モバイルアプリ入門編〜」を使用 • 教師機の画面配信でプロジェクトの準備など指示 • 完成後の動きを見せてから、テキストのコードを入力させる • 教員2名で机間巡視し、動作しない生徒をフォロー

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

本校生徒の反応 • いわゆる「typo」や「転記ミス」 • 英単語の知識やライティング経験が少なく、ミスに気付きにくい • 「予約語」や、「変数名」など短い単語でも起きる • 「転記ミス」とは、行の途中で他の行と混乱する、など • 文字の種類による文法ミス • 日本語混入や数字・記号の全角、あとは全角スペース • 英字の大文字・小文字

Slide 9

Slide 9 text

JavaScriptでの気づき • タイピング速度とは異なる点でのつまずきが見られた • IDEの機能を利用しても視認性の向上は予約語の色づけ程度 • 「どの時点まで書けば未完成でも動くか」が分かりにくい • デバッグ手法が確立されない…

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Processing

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Monaca＆p5.jsの具体例

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

p5.jsプログラムの基本構造 function setup(){ 略 } • プログラム実行時に一度だけ実行される関数 function draw(){ 略 } • フレームレート60fpsで繰り返して実行される関数 • 変数を活用すると色々なことが実現できる

Slide 18

Slide 18 text

コードの例

Slide 19

Slide 19 text

四角形の描画始点（50,50）で高さ100幅100の四角

Slide 20

Slide 20 text

円の描画中心（100,100）で高さ100幅100の円

Slide 21

Slide 21 text

色の塗り方

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

作品例（教員）

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

p5.jsプログラムの基本構造 • function setup(){ 略 } プログラム実行時に一度だけ実行される • function draw(){ 略 } フレームレート60fpsで繰り返して実行される変数を組み合わせると活用が広がる

Slide 26

Slide 26 text

図形の座標にグローバル変数

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

ボタンやイベントの概念

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

自動販売機の完成

Slide 33

Slide 33 text

気づきの例【例】 elipse( 50, 50, 100, 100); → 円が出てこない。何かが間違っている。 → ellipse のスペルが違っていた【例】 ellipse( x, y, 100, 100); → 円が動かない。 → xの値がインクリメントされていない

Slide 34

Slide 34 text

注意点 • JavaScriptとは違う言語なので、Monacaデバッガーが働く場所が限定される • 存在しない変数の参照や，変数の値などはチェック可能。 • Processing由来の命令のスペルチェックなどは不可能

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

生徒の工夫の例 • 教員が簡易的に済ませた処理の修正 • 投入金額が1000円を超えると桁がずれる → 表示する処理を確認して十分な桁を取る • 自販機の配色を変更 → 用意したテンプレートの自販機の色から好きな配色へと変更

Slide 37

Slide 37 text

生徒の評価・感想学年末の振り返り面白かった単元としてプログラミングを回答した生徒 102名中 61名（59％）中途半端な内容で終わったが生徒の反応は良かった

Slide 38

Slide 38 text

まとめ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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