Monacaを利用した体験的なプログラミングの授業

12月17日開催のMonaca Education 活用事例セミナーでの長野県諏訪実業高等学校の浅見大輔先生の発表資料。

Transcript

1. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Monacaを利用した体験的な プログラミングの授業 1 長野県諏訪実業高等学校 浅見大輔
2. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 はじめに 【経歴】 ２０１６年４月 長野県諏訪実業高等学校 着任 ～ 現在 教員歴６年目 現任校在籍6年目 【担当教科】 商業科 主として情報系科目を担当 ３年次選択科目「プログラミング」で指導 Monacaは大学在学時から使用。高校の授業でも活用。 2
3. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 本校の情報教育 【商業科の科目】 １年次：情報処理 ３～４単位 必修 ２年次：ビジネス情報 ３単位 必修・選択 ３年次：プログラミング ３単位 選択 プログラミング最大２１名の選択講座で２講座展開 普通科と比較すると、生徒はコンピュータの扱いに慣れている 商業科の中では特別に情報科目の時間が多いわけではない 3
4. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 商業科におけるプログラミング教育 全商情報処理検定プログラミング部門に向けた指導 フローチャートやVBA、Javaプログラム等の穴埋め などが多い プログラムに関する知識や技能を修得させるために 実習による学習をしたい しかし生徒用パソコンには環境復元装置が組み込まれている 開発環境をインストールや構築が大変 多くの制約が存在する ScratchとMonacaによるプログラミングはこれを解決する
5. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 全商情報処理検定の問題の例 全国商業高等学校協会主催 第65回 情報処理検定試験1級プログラミング部門より
6. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 全商情報処理検定の問題の例 全国商業高等学校協会主催 第65回 情報処理検定試験1級プログラミング部門より
7. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Scratchによる学習 ループ 条件分岐 乱数 変数 イベント駆動 関数 引数 変数 配列 など
8. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 enchant.jsでのプログラミング学習 しかし、Scratchよるブロックプログラミングと 言語によるコーディングプログラミングには壁がある enchant.jsというゲーム開発ライブラリを利用 ・画面にSprite（画像）を表示させる Scratchとenchant.jsの両方でシューティングゲームを作 成したし、２つを対比することで生徒の理解を促進した。 共通点としてX,Y座標の利用、Spriteという オブジェクトの操作をすることがある
9. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Monacaによるシューティングゲーム開発
10. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Monacaによるシューティングゲーム開発 10
11. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 画面上にクマを表示させ、 キー入力によって上下左右に動 かす スプライトの操作
12. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 コーディングの指導 教員のパソコンの画面は、 生徒のパソコンのとなりに 設置されたモニターに表示 される はじめにプログラムの例を 表示して写させる 次に、自分で考える場面を 設けて入力させる
13. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Monacaでの開発の流れ ①教員モニターを見ながら生徒が自分のパソコンで入力 ②コンソールからエラーを確認してデバッグ ③パソコンと、スマホの「Monacaデバッガー」アプリで 動作確認 ④プログラムの追加・修正 英単語が苦手だったり記号を間違えたりなど ②のデバッグ作業に時間がかかることが課題 ひとりで解決できない生徒は巡視してアドバイス
14. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 JavaScriptによるプログラムの例 文法やアルゴリズムなどの知識や エラーの修正、入力方法などの技能を身につける
15. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Monacaを使うことのメリット ・環境構築が不要。どのパソコンからでも使える。 ・スマートフォンの各種センサーやスピーカーなどを活用した 多様なアプリケーションを作成できる。 ・自分のスマートフォンで動くアプリを制作できることは 学習意欲の向上につながる。 ・スマホ画面のプレビュー表示により、デバッグがしやすい。
16. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Monacaによるシューティングゲーム開発
17. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 ゲーム制作を通じた授業のメリット ・ぷよぷよなどのゲームアプリはプログラムのコードの結果が 可視化でき、コードと動きを理解しやすい。 ・マクロやコンソールのプログラムと異なり、制作の経過や 動作の経過が目に見える。 ・ゲームアプリは論理エラーの際におかしな動きをするので バグが可視化できる。 ・ゲームでは、変数や、配列、条件判定や関数などの構造、 キャラやアイテムなどのオブジェクト指向プログラミング ハイスコア表示による最大値、最小値、 ランキング表示による順位付けや並び替え などなど アルゴリズムを学ぶ機会が自然と発生する。
18. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 新学習指導要領 商業科「プログラミング」 内 容 〔指導項目〕 (4) プログラムと情報システムの開発 ア 情報システム開発の手法と手順 イ プロジェクト管理 ウ 手続き型言語の利用 エ オブジェクト指向型言語の利用 オ 携帯型情報通信機器用ソフトウェアの 開発環境の利用 カ 情報システムの評価と改善 18
19. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 これまで取り扱った内容 ・ぷよぷよプログラミング ・ブロック崩し ・メモアプリ（LocalStorage) ・シューティングゲーム（ジャイロセンサー・タッチパネル） ・位置情報と天気予報（GPSとAPIの利用） ・スマートフォン向けウェブページ作成（HTML,CSS) など・・・ あんこエデュケーションのサンプルアプリやウェブに転がっ てるものをもとにしたり…
20. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 構文の紹介（詳しくは検索してください） WebAPIによるJSONデータの取得 let url = “WebAPIサイトのURL”; fetch(url) .then(function(res){ return res.json(); }) .then(function(data){ //dataに対する処理を記述 }); function ng(error){ alert(error.message); }
21. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 構文の紹介（詳しくは検索してください） GPS の利用 document.addEventListener("deviceready", function(){ navigator.geolocation.getCurrentPosition ( success , Error); }); function success(pos){ let lat = pos.coords.latitude; //緯度 let lon = pos.coords.longitude; //経度 } function error(err){ alert(err.message); }
22. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 構文の紹介（詳しくは検索してください） 加速度センサー の利用 function timer(){ navigator.accelerometer.getCurrentAcceleration (onSuccess, onError); } function onSuccess(sensor){ gx = sensor.x; gy = sensor.y; gz = sensor.z; }
23. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Monacaによるアプリ作成のメリット（生徒アンケートより） ・ PCで作ったプログラムを簡単にスマホでアプリ化し、プレイす ることができる ・携帯の傾きによって操作ができるのでキャラクターの動かし方 を変えられる ・パソコンでは分からない、プログラムの改良の必要があるとこ ろが、スマートフォンで動かすことにより気付くことができる。 ・スマホというコンパクトなコンピュータで、PCと同じものが手 軽に楽しめる、というのはとても魅力的
24. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 ScratchとJavaScript（enchant）の似ているところは何か書いてください ・x軸、y軸は両方とも同じ ・どちらも一つ抜けているとうまく動かない。 ・キャラクターに指示をすることで動かすことができる ・スクラッチ「もし～なら」というのがあった ことに対してジャバはifをつかったりすることが似ている ・自分好みにカスタマイズできること ・正解は一つではないこと ・細かいことをすべて命令しないと、思うように動いてくれない。
25. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 ScratchとJavaScript（enchant）の違うところは何か書いてください ・Scratchは元々あるプログラムを積み重ねていくが、 JavaScriptは文字を打って行ってプログラムにする ・JavaScriptの方がより細かいところまでできる。 ・他の媒体でプレイできるか ・Scratchは知識がなくてもなんとなく作ってみるだけで ちょっとしたプログラムは作れるけど、JavaScriptはプ ログラムを打つ知識や、単語などを覚えなくてはいけな いし、エラーがどうやったら直るかという知識が必要だ と思った。
26. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 感想を書いてください ・結構難しかったんですけど、良い勉強になりました。英 語ができれば楽にプログラミングができると思った。自分 の作ったゲームがスマホでできるのはすごいと思った。 ・もう少し詳しくもやってみたい。Monacaをみて自分で アプリ化できるアプリもあって驚いた。組めれたら自分で も組みたいと思った ・いつもエラーばっかりで先生に手伝ってもらったがやっ ているうちに少しずつでしたが何が間違ってて、どこが違 うのかを見つけられるようになったし、ワードもたくさん 覚えられたと思います
27. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 アンケート結果（2018年度)
28. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 28 ありがとうございました