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

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

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

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

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

Other Decks in Education

Transcript

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

    View Slide

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

    View Slide

  3. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    本校の情報教育
    【商業科の科目】
    1年次:情報処理 3~4単位 必修
    2年次:ビジネス情報 3単位 必修・選択
    3年次:プログラミング 3単位 選択
    プログラミング最大21名の選択講座で2講座展開
    普通科と比較すると、生徒はコンピュータの扱いに慣れている
    商業科の中では特別に情報科目の時間が多いわけではない
    3

    View Slide

  4. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    商業科におけるプログラミング教育
    全商情報処理検定プログラミング部門に向けた指導
    フローチャートやVBA、Javaプログラム等の穴埋め などが多い
    プログラムに関する知識や技能を修得させるために
    実習による学習をしたい
    しかし生徒用パソコンには環境復元装置が組み込まれている
    開発環境をインストールや構築が大変
    多くの制約が存在する
    ScratchとMonacaによるプログラミングはこれを解決する

    View Slide

  5. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    全商情報処理検定の問題の例
    全国商業高等学校協会主催 第65回 情報処理検定試験1級プログラミング部門より

    View Slide

  6. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    全商情報処理検定の問題の例
    全国商業高等学校協会主催 第65回 情報処理検定試験1級プログラミング部門より

    View Slide

  7. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    Scratchによる学習
    ループ
    条件分岐
    乱数
    変数
    イベント駆動
    関数
    引数
    変数
    配列 など

    View Slide

  8. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    enchant.jsでのプログラミング学習
    しかし、Scratchよるブロックプログラミングと
    言語によるコーディングプログラミングには壁がある
    enchant.jsというゲーム開発ライブラリを利用
    ・画面にSprite(画像)を表示させる
    Scratchとenchant.jsの両方でシューティングゲームを作
    成したし、2つを対比することで生徒の理解を促進した。
    共通点としてX,Y座標の利用、Spriteという
    オブジェクトの操作をすることがある

    View Slide

  9. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    Monacaによるシューティングゲーム開発

    View Slide

  10. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    Monacaによるシューティングゲーム開発
    10

    View Slide

  11. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    画面上にクマを表示させ、
    キー入力によって上下左右に動
    かす
    スプライトの操作

    View Slide

  12. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    コーディングの指導
    教員のパソコンの画面は、
    生徒のパソコンのとなりに
    設置されたモニターに表示
    される
    はじめにプログラムの例を
    表示して写させる
    次に、自分で考える場面を
    設けて入力させる

    View Slide

  13. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    Monacaでの開発の流れ
    ①教員モニターを見ながら生徒が自分のパソコンで入力
    ②コンソールからエラーを確認してデバッグ
    ③パソコンと、スマホの「Monacaデバッガー」アプリで
    動作確認
    ④プログラムの追加・修正
    英単語が苦手だったり記号を間違えたりなど
    ②のデバッグ作業に時間がかかることが課題
    ひとりで解決できない生徒は巡視してアドバイス

    View Slide

  14. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    JavaScriptによるプログラムの例
    文法やアルゴリズムなどの知識や
    エラーの修正、入力方法などの技能を身につける

    View Slide

  15. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    Monacaを使うことのメリット
    ・環境構築が不要。どのパソコンからでも使える。
    ・スマートフォンの各種センサーやスピーカーなどを活用した
    多様なアプリケーションを作成できる。
    ・自分のスマートフォンで動くアプリを制作できることは
    学習意欲の向上につながる。
    ・スマホ画面のプレビュー表示により、デバッグがしやすい。

    View Slide

  16. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    Monacaによるシューティングゲーム開発

    View Slide

  17. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    ゲーム制作を通じた授業のメリット
    ・ぷよぷよなどのゲームアプリはプログラムのコードの結果が
    可視化でき、コードと動きを理解しやすい。
    ・マクロやコンソールのプログラムと異なり、制作の経過や
    動作の経過が目に見える。
    ・ゲームアプリは論理エラーの際におかしな動きをするので
    バグが可視化できる。
    ・ゲームでは、変数や、配列、条件判定や関数などの構造、
    キャラやアイテムなどのオブジェクト指向プログラミング
    ハイスコア表示による最大値、最小値、
    ランキング表示による順位付けや並び替え などなど
    アルゴリズムを学ぶ機会が自然と発生する。

    View Slide

  18. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    新学習指導要領 商業科「プログラミング」
    内 容
    〔指導項目〕
    (4) プログラムと情報システムの開発
    ア 情報システム開発の手法と手順
    イ プロジェクト管理
    ウ 手続き型言語の利用
    エ オブジェクト指向型言語の利用
    オ 携帯型情報通信機器用ソフトウェアの
    開発環境の利用
    カ 情報システムの評価と改善
    18

    View Slide

  19. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    これまで取り扱った内容
    ・ぷよぷよプログラミング
    ・ブロック崩し
    ・メモアプリ(LocalStorage)
    ・シューティングゲーム(ジャイロセンサー・タッチパネル)
    ・位置情報と天気予報(GPSとAPIの利用)
    ・スマートフォン向けウェブページ作成(HTML,CSS)
    など・・・
    あんこエデュケーションのサンプルアプリやウェブに転がっ
    てるものをもとにしたり…

    View Slide

  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);
    }

    View Slide

  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);
    }

    View Slide

  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;
    }

    View Slide

  23. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    Monacaによるアプリ作成のメリット(生徒アンケートより)
    ・ PCで作ったプログラムを簡単にスマホでアプリ化し、プレイす
    ることができる
    ・携帯の傾きによって操作ができるのでキャラクターの動かし方
    を変えられる
    ・パソコンでは分からない、プログラムの改良の必要があるとこ
    ろが、スマートフォンで動かすことにより気付くことができる。
    ・スマホというコンパクトなコンピュータで、PCと同じものが手
    軽に楽しめる、というのはとても魅力的

    View Slide

  24. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    ScratchとJavaScript(enchant)の似ているところは何か書いてください
    ・x軸、y軸は両方とも同じ
    ・どちらも一つ抜けているとうまく動かない。
    ・キャラクターに指示をすることで動かすことができる
    ・スクラッチ「もし~なら」というのがあった
    ことに対してジャバはifをつかったりすることが似ている
    ・自分好みにカスタマイズできること
    ・正解は一つではないこと
    ・細かいことをすべて命令しないと、思うように動いてくれない。

    View Slide

  25. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    ScratchとJavaScript(enchant)の違うところは何か書いてください
    ・Scratchは元々あるプログラムを積み重ねていくが、
    JavaScriptは文字を打って行ってプログラムにする
    ・JavaScriptの方がより細かいところまでできる。
    ・他の媒体でプレイできるか
    ・Scratchは知識がなくてもなんとなく作ってみるだけで
    ちょっとしたプログラムは作れるけど、JavaScriptはプ
    ログラムを打つ知識や、単語などを覚えなくてはいけな
    いし、エラーがどうやったら直るかという知識が必要だ
    と思った。

    View Slide

  26. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    感想を書いてください
    ・結構難しかったんですけど、良い勉強になりました。英
    語ができれば楽にプログラミングができると思った。自分
    の作ったゲームがスマホでできるのはすごいと思った。
    ・もう少し詳しくもやってみたい。Monacaをみて自分で
    アプリ化できるアプリもあって驚いた。組めれたら自分で
    も組みたいと思った
    ・いつもエラーばっかりで先生に手伝ってもらったがやっ
    ているうちに少しずつでしたが何が間違ってて、どこが違
    うのかを見つけられるようになったし、ワードもたくさん
    覚えられたと思います

    View Slide

  27. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔
    アンケート結果(2018年度)

    View Slide

  28. 2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 28
    ありがとうございました

    View Slide