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
アプリ開発でアイディアを形に〜情報Ⅱ「(4)情報システムとプログラミング」を見据えた授業実践〜
Search
アシアル情報教育研究所
February 19, 2022
Education
0
2.2k
アプリ開発でアイディアを形に〜情報Ⅱ「(4)情報システムとプログラミング」を見据えた授業実践〜
2022年2月19日開催のMonaca Education 活用事例セミナーでの広島大学附属福山中・高等学校の平田篤史先生の発表資料。
アシアル情報教育研究所
February 19, 2022
Tweet
Share
More Decks by アシアル情報教育研究所
See All by アシアル情報教育研究所
2025年度Monaca Educationリニューアル体験会
asial_edu
0
34
Monaca Educationコースガイド
asial_edu
0
290
MonacaEducation2025機能アップデート情報
asial_edu
0
140
くだもの図鑑で研修2025
asial_edu
0
170
生徒のアイディア実現のために生成AIを活用したプログラミング授業実践
asial_edu
0
400
系統性を意識したプログラミング教育~ガチャを実装しよう~
asial_edu
0
440
女子商アプリ開発の軌跡
asial_edu
0
430
探究的な学び:Monaca Educationで学ぶプログラミングとちょっとした課題解決
asial_edu
0
420
Monaca Education 活用事例セミナー:「年間通してMonaca Educationを活用する授業実践のご報告」
asial_edu
0
290
Other Decks in Education
See All in Education
Course Review - Lecture 12 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.8k
Linuxのよく使うコマンドを解説
mickey_kubo
1
260
2025年度春学期 統計学 第9回 確からしさを記述する ー 確率 (2025. 6. 5)
akiraasano
PRO
0
140
ARアプリを活用した防災まち歩きデータ作成ハンズオン
nro2daisuke
0
150
2025年度春学期 統計学 第11回 分布の「型」を考える ー 確率分布モデルと正規分布 (2025. 6. 19)
akiraasano
PRO
0
160
日本の情報系社会人院生のリアル -JAIST 修士編-
yurikomium
1
110
Interaction - Lecture 10 - Information Visualisation (4019538FNR)
signer
PRO
0
2.1k
探査機自作ゼミ2025スライド
sksat
3
730
JOAI2025講評 / joai2025-review
upura
0
390
Online Privacy
takahitosakamoto
0
100
みんなのコード 2024年度活動報告書/ 2025年度活動計画書
codeforeveryone
0
220
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
signer
PRO
2
1.8k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Balancing Empowerment & Direction
lara
2
580
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
890
Designing for Performance
lara
610
69k
Making Projects Easy
brettharned
117
6.3k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
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)
アプリ開発でアイディアを形に 〜情報Ⅱ「⑷情報システムとプログラミング」を見据えた授業実践〜 広島県 広島大学附属福山中・高等学校 平田 篤史