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

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

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

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

Transcript

  1. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Monacaを利用した体験的な プログラミングの授業 1 長野県諏訪実業高等学校

    浅見大輔
  2. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 はじめに 【経歴】 2016年4月 長野県諏訪実業高等学校

    着任 ~ 現在 教員歴6年目 現任校在籍6年目 【担当教科】 商業科 主として情報系科目を担当 3年次選択科目「プログラミング」で指導 Monacaは大学在学時から使用。高校の授業でも活用。 2
  3. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 本校の情報教育 【商業科の科目】 1年次:情報処理 3~4単位

    必修 2年次:ビジネス情報 3単位 必修・選択 3年次:プログラミング 3単位 選択 プログラミング最大21名の選択講座で2講座展開 普通科と比較すると、生徒はコンピュータの扱いに慣れている 商業科の中では特別に情報科目の時間が多いわけではない 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の両方でシューティングゲームを作 成したし、2つを対比することで生徒の理解を促進した。 共通点として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 ありがとうございました