Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Monacaを利用した体験的なプログラミングの授業
Search
アシアル情報教育研究所
December 17, 2021
Education
0
2.3k
Monacaを利用した体験的なプログラミングの授業
12月17日開催のMonaca Education 活用事例セミナーでの長野県諏訪実業高等学校の浅見大輔先生の発表資料。
アシアル情報教育研究所
December 17, 2021
Tweet
Share
More Decks by アシアル情報教育研究所
See All by アシアル情報教育研究所
Monaca Educationコースガイド
asial_edu
0
240
MonacaEducation2025機能アップデート情報
asial_edu
0
120
くだもの図鑑で研修2025
asial_edu
0
140
生徒のアイディア実現のために生成AIを活用したプログラミング授業実践
asial_edu
0
370
系統性を意識したプログラミング教育~ガチャを実装しよう~
asial_edu
0
400
女子商アプリ開発の軌跡
asial_edu
0
400
探究的な学び:Monaca Educationで学ぶプログラミングとちょっとした課題解決
asial_edu
0
380
Monaca Education 活用事例セミナー:「年間通してMonaca Educationを活用する授業実践のご報告」
asial_edu
0
270
令和7年度無料トライアルキャンペーン説明会
asial_edu
0
3.9k
Other Decks in Education
See All in Education
データ分析
takenawa
0
5.7k
ふりかえり研修2025
pokotyamu
0
1.2k
Sponsor the Conference | VizChitra 2025
vizchitra
0
550
登壇未経験者のための登壇戦略~LTは設計が9割!!!~
masakiokuda
2
510
子どものためのプログラミング道場『CoderDojo』〜法人提携例〜 / Partnership with CoderDojo Japan
coderdojojapan
4
16k
Interaction - Lecture 10 - Information Visualisation (4019538FNR)
signer
PRO
0
2k
Virtual and Augmented Reality - Lecture 8 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
Constructing a Custom TeX Ecosystem for Educational Institutions—Beyond Academic Typesetting
doratex
1
9.5k
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
signer
PRO
1
2k
America and the World
oripsolob
0
510
予習動画
takenawa
0
6.1k
AIの時代こそ、考える知的学習術
yum3
2
170
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Code Review Best Practice
trishagee
69
18k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
How GitHub (no longer) Works
holman
314
140k
Done Done
chrislema
184
16k
Transcript
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Monacaを利用した体験的な プログラミングの授業 1 長野県諏訪実業高等学校
浅見大輔
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 はじめに 【経歴】 2016年4月 長野県諏訪実業高等学校
着任 ~ 現在 教員歴6年目 現任校在籍6年目 【担当教科】 商業科 主として情報系科目を担当 3年次選択科目「プログラミング」で指導 Monacaは大学在学時から使用。高校の授業でも活用。 2
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 本校の情報教育 【商業科の科目】 1年次:情報処理 3~4単位
必修 2年次:ビジネス情報 3単位 必修・選択 3年次:プログラミング 3単位 選択 プログラミング最大21名の選択講座で2講座展開 普通科と比較すると、生徒はコンピュータの扱いに慣れている 商業科の中では特別に情報科目の時間が多いわけではない 3
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 商業科におけるプログラミング教育 全商情報処理検定プログラミング部門に向けた指導 フローチャートやVBA、Javaプログラム等の穴埋め などが多い
プログラムに関する知識や技能を修得させるために 実習による学習をしたい しかし生徒用パソコンには環境復元装置が組み込まれている 開発環境をインストールや構築が大変 多くの制約が存在する ScratchとMonacaによるプログラミングはこれを解決する
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 全商情報処理検定の問題の例 全国商業高等学校協会主催 第65回 情報処理検定試験1級プログラミング部門より
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 全商情報処理検定の問題の例 全国商業高等学校協会主催 第65回 情報処理検定試験1級プログラミング部門より
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Scratchによる学習 ループ 条件分岐 乱数
変数 イベント駆動 関数 引数 変数 配列 など
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 enchant.jsでのプログラミング学習 しかし、Scratchよるブロックプログラミングと 言語によるコーディングプログラミングには壁がある enchant.jsというゲーム開発ライブラリを利用
・画面にSprite(画像)を表示させる Scratchとenchant.jsの両方でシューティングゲームを作 成したし、2つを対比することで生徒の理解を促進した。 共通点としてX,Y座標の利用、Spriteという オブジェクトの操作をすることがある
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Monacaによるシューティングゲーム開発
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Monacaによるシューティングゲーム開発 10
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 画面上にクマを表示させ、 キー入力によって上下左右に動 かす スプライトの操作
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 コーディングの指導 教員のパソコンの画面は、 生徒のパソコンのとなりに 設置されたモニターに表示
される はじめにプログラムの例を 表示して写させる 次に、自分で考える場面を 設けて入力させる
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Monacaでの開発の流れ ①教員モニターを見ながら生徒が自分のパソコンで入力 ②コンソールからエラーを確認してデバッグ ③パソコンと、スマホの「Monacaデバッガー」アプリで
動作確認 ④プログラムの追加・修正 英単語が苦手だったり記号を間違えたりなど ②のデバッグ作業に時間がかかることが課題 ひとりで解決できない生徒は巡視してアドバイス
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 JavaScriptによるプログラムの例 文法やアルゴリズムなどの知識や エラーの修正、入力方法などの技能を身につける
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Monacaを使うことのメリット ・環境構築が不要。どのパソコンからでも使える。 ・スマートフォンの各種センサーやスピーカーなどを活用した 多様なアプリケーションを作成できる。
・自分のスマートフォンで動くアプリを制作できることは 学習意欲の向上につながる。 ・スマホ画面のプレビュー表示により、デバッグがしやすい。
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Monacaによるシューティングゲーム開発
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 ゲーム制作を通じた授業のメリット ・ぷよぷよなどのゲームアプリはプログラムのコードの結果が 可視化でき、コードと動きを理解しやすい。 ・マクロやコンソールのプログラムと異なり、制作の経過や
動作の経過が目に見える。 ・ゲームアプリは論理エラーの際におかしな動きをするので バグが可視化できる。 ・ゲームでは、変数や、配列、条件判定や関数などの構造、 キャラやアイテムなどのオブジェクト指向プログラミング ハイスコア表示による最大値、最小値、 ランキング表示による順位付けや並び替え などなど アルゴリズムを学ぶ機会が自然と発生する。
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 新学習指導要領 商業科「プログラミング」 内 容
〔指導項目〕 (4) プログラムと情報システムの開発 ア 情報システム開発の手法と手順 イ プロジェクト管理 ウ 手続き型言語の利用 エ オブジェクト指向型言語の利用 オ 携帯型情報通信機器用ソフトウェアの 開発環境の利用 カ 情報システムの評価と改善 18
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 これまで取り扱った内容 ・ぷよぷよプログラミング ・ブロック崩し ・メモアプリ(LocalStorage)
・シューティングゲーム(ジャイロセンサー・タッチパネル) ・位置情報と天気予報(GPSとAPIの利用) ・スマートフォン向けウェブページ作成(HTML,CSS) など・・・ あんこエデュケーションのサンプルアプリやウェブに転がっ てるものをもとにしたり…
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); }
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); }
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 構文の紹介(詳しくは検索してください) 加速度センサー の利用 function
timer(){ navigator.accelerometer.getCurrentAcceleration (onSuccess, onError); } function onSuccess(sensor){ gx = sensor.x; gy = sensor.y; gz = sensor.z; }
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 Monacaによるアプリ作成のメリット(生徒アンケートより) ・ PCで作ったプログラムを簡単にスマホでアプリ化し、プレイす ることができる
・携帯の傾きによって操作ができるのでキャラクターの動かし方 を変えられる ・パソコンでは分からない、プログラムの改良の必要があるとこ ろが、スマートフォンで動かすことにより気付くことができる。 ・スマホというコンパクトなコンピュータで、PCと同じものが手 軽に楽しめる、というのはとても魅力的
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 ScratchとJavaScript(enchant)の似ているところは何か書いてください ・x軸、y軸は両方とも同じ ・どちらも一つ抜けているとうまく動かない。 ・キャラクターに指示をすることで動かすことができる
・スクラッチ「もし~なら」というのがあった ことに対してジャバはifをつかったりすることが似ている ・自分好みにカスタマイズできること ・正解は一つではないこと ・細かいことをすべて命令しないと、思うように動いてくれない。
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 ScratchとJavaScript(enchant)の違うところは何か書いてください ・Scratchは元々あるプログラムを積み重ねていくが、 JavaScriptは文字を打って行ってプログラムにする ・JavaScriptの方がより細かいところまでできる。
・他の媒体でプレイできるか ・Scratchは知識がなくてもなんとなく作ってみるだけで ちょっとしたプログラムは作れるけど、JavaScriptはプ ログラムを打つ知識や、単語などを覚えなくてはいけな いし、エラーがどうやったら直るかという知識が必要だ と思った。
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 感想を書いてください ・結構難しかったんですけど、良い勉強になりました。英 語ができれば楽にプログラミングができると思った。自分 の作ったゲームがスマホでできるのはすごいと思った。
・もう少し詳しくもやってみたい。Monacaをみて自分で アプリ化できるアプリもあって驚いた。組めれたら自分で も組みたいと思った ・いつもエラーばっかりで先生に手伝ってもらったがやっ ているうちに少しずつでしたが何が間違ってて、どこが違 うのかを見つけられるようになったし、ワードもたくさん 覚えられたと思います
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 アンケート結果(2018年度)
2021/12/17 Monaca Education 活用事例セミナー 長野県諏訪実業高等学校 浅見大輔 28 ありがとうございました