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
1.8k
アプリ開発でアイディアを形に〜情報Ⅱ「(4)情報システムとプログラミング」を見据えた授業実践〜
2022年2月19日開催のMonaca Education 活用事例セミナーでの広島大学附属福山中・高等学校の平田篤史先生の発表資料。
アシアル情報教育研究所
February 19, 2022
Tweet
Share
More Decks by アシアル情報教育研究所
See All by アシアル情報教育研究所
令和6年度 無料トライアルキャンペーン説明会
asial_edu
0
1.3k
STEAM教育の枠組で行うプログラミング学習
asial_edu
0
220
情報Iの「縦糸」と「横糸」を意識したプログラム教育の実践
asial_edu
0
220
Monaca Educationを活用した課題解決型の探究学習の実践
asial_edu
0
220
Monaca Educationを活用したプログラミング授業実践
asial_edu
0
220
効果報告レポート_アシアル株式会社
asial_edu
0
48
MonacaEducation導入手引き2024年第1版
asial_edu
1
200
「情報Ⅰ」で「Pythonで学ぶプログラミング入門」を使ってみた
asial_edu
0
660
PBLを意識した情報ⅠのカリキュラムデザインとMonacaの活用
asial_edu
0
630
Other Decks in Education
See All in Education
week5@tcue2024
nonxxxizm
0
540
合理的配慮を知るワークショップ/Understanding Reasonable Accommodations (Workshop)
freee
2
1.5k
Railsチュートリアルの歩き方 (第7版)
yasslab
PRO
1
1M
Часто задаваемые вопросы
pnuslide
0
32k
H5P-työkalut
matleenalaakso
3
33k
SDGsをアシスト! 現地調査データをアーカイブする技術2024|麻布大学デジタルマッピングワークショップ
fullfull
1
190
Educació digital en l'adolescència
gonz1ale1
0
130
「小・中・高等学校における情報教育の体系的な学習を目指したカリキュラムモデル基本方針」
codeforeveryone
0
1.5k
パフォーマンス・チューニング入門
oracle4engineer
PRO
2
820
Digijulkaisut
matleenalaakso
1
8.6k
Switches
irocho
0
200
Microsoft Office 365
matleenalaakso
0
1.5k
Featured
See All Featured
WebSockets: Embracing the real-time Web
robhawkes
59
7k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Design by the Numbers
sachag
274
18k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
130
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Web development in the modern age
philhawksworth
203
10k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Automating Front-end Workflow
addyosmani
1357
200k
Gamification - CAS2011
davidbonilla
77
4.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
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)
アプリ開発でアイディアを形に 〜情報Ⅱ「⑷情報システムとプログラミング」を見据えた授業実践〜 広島県 広島大学附属福山中・高等学校 平田 篤史