Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
アプリ開発でアイディアを形に〜情報Ⅱ「(4)情報システムとプログラミング」を見据えた授業実践〜
アシアル情報教育研究所
February 19, 2022
Education
0
360
アプリ開発でアイディアを形に〜情報Ⅱ「(4)情報システムとプログラミング」を見据えた授業実践〜
2022年2月19日開催のMonaca Education 活用事例セミナーでの広島大学附属福山中・高等学校の平田篤史先生の発表資料。
アシアル情報教育研究所
February 19, 2022
Tweet
Share
More Decks by アシアル情報教育研究所
See All by アシアル情報教育研究所
Monaca Education EdTech導入補助金を活用した 無料導入説明会
asial_edu
0
440
実践事例発表4「自学自習によるプログラミング入門」
asial_edu
0
190
コロナ禍の課題研究におけるMonacaの活用と今後の活用について
asial_edu
0
180
「初めてでもやさしいMonacaEducation(女子校での実践)」
asial_edu
0
320
Monacaとp5.jsを利用したプログラミング学習
asial_edu
0
240
EdTech導入補助金2021効果報告レポート
asial_edu
0
53
3 年目の「情報 」型授業からみる 「情報 」の授業
asial_edu
0
580
データサイエンスの未来へ向けた一歩を踏み出そう
asial_edu
0
570
自分のスマホで動作するアプリ開発の授業
asial_edu
0
580
Other Decks in Education
See All in Education
2022年4月NPO法人Waffle概要資料
ivy_waffle
0
940
Baparekraf Developer Day 2022 - Blockchain (Asih Karnengsih)
dicodingevent
0
520
Sähköiset kyselyt, kokeet ja arviointi
matleenalaakso
1
12k
【チラシ】2022 あしてらキャンプ・スタッフ募集説明会_株式会社あしたの寺子屋
ashitanoterakoya
0
130
(広く皆さんに支えられて)勝手にやっています
usamiko
0
3.8k
2022年度データアナリティクスII-第2回-20220418
trycycle
0
130
サムライカレー@タイ 2022年夏版 説明会資料
samuraicurry
PRO
0
110
Baparekraf Developer Day 2022 - Cyber Security (Ardi Sutedja)
dicodingevent
0
510
Adobe CC Express
matleenalaakso
0
5.9k
東京大学深層学習(Deep Learning基礎講座2022)深層学習と自然言語処理
verypluming
25
18k
Metzitli
marieffs
0
140
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
signer
PRO
0
470
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
Building Applications with DynamoDB
mza
83
4.7k
Automating Front-end Workflow
addyosmani
1351
200k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
Gamification - CAS2011
davidbonilla
75
3.9k
Building Your Own Lightsaber
phodgson
94
4.6k
What the flash - Photography Introduction
edds
61
10k
Designing for humans not robots
tammielis
241
23k
Agile that works and the tools we love
rasmusluckow
319
19k
Unsuck your backbone
ammeep
659
55k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
4
500
The Art of Programming - Codeland 2020
erikaheidi
32
9k
Transcript
アプリ開発でアイディアを形に 〜情報Ⅱ「⑷情報システムとプログラミング」を見据えた授業実践〜 広島県 広島大学附属福山中・高等学校 平田 篤史
自己紹介 ❏ 広島大学大学院教育学研究科科学文化教育学専攻技術・情報教育学専修博士課程前 期修了 ❏ 修士(教育学) ❏ 2017年,情報科教諭として大阪府に採用 ❏ 2019年より広島大学附属福山中・高等学校教諭(情報科)
❏ 情報処理学会、日本情報科教育学会、教育システム情報学会 ❏ 共著「『コロナ』から学校教育をリデザインする」(溪水社,2021) ❏ GEG Hiroshima City、ローカルナレッジ研究会
目次 1. はじめに 2. アプリの開発環境と教材 3. 授業実践 3.1. HTML,CSSの学習 3.2.
JavaScriptの学習 3.3. チーム開発の流れ 3.4. アプリの設計 3.5. チーム開発(前半)と中間発表 3.6. チーム開発(後半)と最終発表 4. 振り返りと今後の展望
1. はじめに
平成29年度 内閣府の調査 https://www8.cao.go.jp/youth/y outh-harm/chousa/h29/jittai_ht ml/2_1_1.html
高校生のスマートフォン所有率:9割以上 スマートフォン向けモバイルアプリの利用頻度は高いと考えられる モバイルアプリの利用者から開発者へ サービスの消費者から生産者へ
2.アプリの開発環境と教材
主に活用した教材 • 開発環境 ◦ ブラウザで開発 ◦ データはクラウドに保存 ◦ Monacaデバッガー •
補助教材 ◦ あんこエデュケーション ◦ きのくにICT
3.授業実践
• アプリ開発に必要な 基礎的プログラミング 技能の育成 • サンプルアプリの カスタマイズ • あんこエデュケーション ×
きのくにICT ①個人 ②チーム 展示する 展示する 複数回提出する 複数回提出する 批評する 批評する
はじめてのプロジェクト〜ブロック崩し〜
None
ボールの数を100にしよう!
レベル 内容 1 ボールの数を100にする 2 ボールのx,y方向の加速度を変えてみる 3 ブロックの色を変えてみる 4 ブロックの配置を変えてみる
5 レベル1~4以外のアレンジを加える 「ブロック崩し」をカスタマイズしよう!
3.1.HTML,CSSの学習 図鑑アプリのカスタマイズを通した、ハイパーリンク・ページの装飾の理解
図鑑アプリ
参照: きのくにICT
参照: きのくにICT
生徒作品例①:地元を紹介する図鑑アプリ
生徒作品例②:好きな音楽を紹介する図鑑アプリ
3.2.JavaScriptの学習 おみくじアプリのカスタマイズを通した、乱数発生・条件分岐・DOMの理解
おみくじアプリ
参照: きのくにICT
参照: きのくにICT
生徒作品例①:野球盤ゲームアプリ
生徒作品例②:今日のご飯提案アプリ
Googleスプレッドシートにおける生徒同士の質疑応答
3.3. チーム開発の流れ
• アプリ開発に必要な 基礎的プログラミング 技能の育成 • サンプルアプリの カスタマイズ • あんこエデュケーション ×
きのくにICT ①個人 ②チーム 展示する 展示する 複数回提出する 複数回提出する 批評する 批評する
展示する 参照 :https://www.innovationunit.org/wp-content/uploads/2017/04/Work-That -Matters-Teachers-Guide-to-Project-based-Learning.pdf
複数回提出する 批評する 参照 :https://www.innovationunit.org/wp-content/uploads/2017/04/Work-That -Matters-Teachers-Guide-to-Project-based-Learning.pdf
• アプリ開発に必要な 基礎的プログラミング 技能の育成 • サンプルアプリの カスタマイズ • あんこエデュケーション ×
きのくにICT ①個人 ②チーム 展示する 展示する 複数回提出する 複数回提出する 批評する 批評する
3.4. アプリの設計
アジャイル開発思考を意識したチーム開発の流れ 2h 3h 3h 2h 2h
ゴールデンサークル理論 https://blog-assets.freshworks.com/freshsales-crm/wp-content/uploads/2018/08/Screen-Shot-2018-08-31-at-11.46.12-PM.png Why:目的 何をしたいか, 解決したい課題は何か How:目標 どんなサービスが必要か
What:手段 どんな機能のあるアプリが必要か
None
None
アジャイル開発思考を意識したチーム開発の流れ 2h 2h 3h 3h 2h 代表プロジェクトの選出 所属プロジェクトの決定
None
3.5. チーム開発(前半)と中間発表
アジャイル開発思考を意識したチーム開発の流れ 2h 3h 3h 2h 2h
チームでの役割分担 No. 役割 意図 1 画面遷移図 • チームでアプリの全体像を捉える • 開発途上におけるシステム変更を容易にする
• プロジェクトの企画者とフローチャート担当をつなぐ 2 フローチャート • 実装するシステムを明確にする • 画面遷移図担当とアプリの実装担当をつなぐ 3 ライトニングトーク • アプリの目的,目標,手段を他者に伝える • 他の役割全員をつなぐ 4 アプリの実装 • フローチャートをもとに実装する
アジャイル開発思考を意識したチーム開発の流れ 2h 3h 3h 2h 2h
Q.良いアプリの特徴って 何だろう? 使いやすい? おもしろい? 便利? 気づいたら 見てる!?
ユーザビリティ ◦ 有効性:アプリを使うことの効果 ⇒予め決めた目的を実現する手段になっているか? ◦ 効率性:アプリの使いやすさ ⇒操作方法はわかりやすいか? ◦ 満足度:アプリを使って感じるワクワク ⇒そのアプリをもう一度使いたいと思えるか?
None
None
None
None
「作る立場」から「使う立場」を考える 使う 作る
3.6. チーム開発(後半)と最終発表
今後の学習 2h 3h 3h 2h 2h
最終発表 2h 3h 3h 2h 2h
None
4.振り返りと今後の展望
振り返り • 実践全体を通して,生徒各自が持つ興味・関心や問題意識を起点 にアプリ開発をさせたことで,楽し みながら活動する様子が伺えた • 開発したアプリを各自のスマートフォンなどで動かせたという体験 が,学びと実生活を結びつけたの ではないか •
プログラミングを手段とした問題解決学習の一例とすることができた 今後の展望 • アプリの要件定義段階の活動に関する教材開発と授業実践を実施する • アプリのアクセシビリティについて分析することができていない ◦ 開発されたアプリには,画面の配色や文字の大きさなどに配慮の欠けるものがあった ◦ ユニバーサルデザインの実現に向けて,ユーザビリティとアクセシビリティの双方の視点 からアプリを分析する必要性を感じた
本研究に関する発表・掲載履歴 • 広島大学附属福山中・高等学校公開研究会(2020/11/27) • 神奈川情研「情報科実践事例報告会」(2020/12/28) • 河合塾「キミのミライ発見」事例177(2021/02/12) • 全国高等学校情報教育研究会(2021/08/10) •
情報処理学会誌「情報処理」(2021/08/15)
アプリ開発でアイディアを形に 〜情報Ⅱ「⑷情報システムとプログラミング」を見据えた授業実践〜 広島県 広島大学附属福山中・高等学校 平田 篤史