Slide 1
Slide 1 text
アプリ開発でアイディアを形に
〜情報Ⅱ「⑷情報システムとプログラミング」を見据えた授業実践〜
広島県 広島大学附属福山中・高等学校 平田 篤史
Slide 2
Slide 2 text
自己紹介
❏ 広島大学大学院教育学研究科科学文化教育学専攻技術・情報教育学専修博士課程前
期修了
❏ 修士（教育学）
❏ 2017年，情報科教諭として大阪府に採用
❏ 2019年より広島大学附属福山中・高等学校教諭（情報科）
❏ 情報処理学会、日本情報科教育学会、教育システム情報学会
❏ 共著「『コロナ』から学校教育をリデザインする」（溪水社，2021）
❏ GEG Hiroshima City、ローカルナレッジ研究会
Slide 3
Slide 3 text
目次
1. はじめに
2. アプリの開発環境と教材
3. 授業実践
3.1. HTML,CSSの学習
3.2. JavaScriptの学習
3.3. チーム開発の流れ
3.4. アプリの設計
3.5. チーム開発（前半）と中間発表
3.6. チーム開発（後半）と最終発表
4. 振り返りと今後の展望
Slide 4
Slide 4 text
1. はじめに
Slide 5
Slide 5 text
平成29年度 内閣府の調査
https://www8.cao.go.jp/youth/y
outh-harm/chousa/h29/jittai_ht
ml/2_1_1.html
Slide 6
Slide 6 text
高校生のスマートフォン所有率：9割以上
スマートフォン向けモバイルアプリの利用頻度は高いと考えられる
モバイルアプリの利用者から開発者へ
サービスの消費者から生産者へ
Slide 7
Slide 7 text
2．アプリの開発環境と教材
Slide 8
Slide 8 text
主に活用した教材
● 開発環境
○ ブラウザで開発
○ データはクラウドに保存
○ Monacaデバッガー
● 補助教材
○ あんこエデュケーション
○ きのくにICT
Slide 9
Slide 9 text
3．授業実践
Slide 10
Slide 10 text
● アプリ開発に必要な
基礎的プログラミング
技能の育成
● サンプルアプリの
カスタマイズ
● あんこエデュケーション
×
きのくにICT
①個人 ②チーム
展示する 展示する
複数回提出する
複数回提出する
批評する 批評する
Slide 11
Slide 11 text
はじめてのプロジェクト〜ブロック崩し〜
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
ボールの数を100にしよう！
Slide 14
Slide 14 text
レベル 内容
1 ボールの数を100にする
2 ボールのx,y方向の加速度を変えてみる
3 ブロックの色を変えてみる
4 ブロックの配置を変えてみる
5 レベル１～４以外のアレンジを加える
「ブロック崩し」をカスタマイズしよう！
Slide 15
Slide 15 text
3.1．HTML,CSSの学習
図鑑アプリのカスタマイズを通した、ハイパーリンク・ページの装飾の理解
Slide 16
Slide 16 text
図鑑アプリ
Slide 17
Slide 17 text
参照：
きのくにICT
Slide 18
Slide 18 text
参照：
きのくにICT
Slide 19
Slide 19 text
生徒作品例①：地元を紹介する図鑑アプリ
Slide 20
Slide 20 text
生徒作品例②：好きな音楽を紹介する図鑑アプリ
Slide 21
Slide 21 text
3.2．JavaScriptの学習
おみくじアプリのカスタマイズを通した、乱数発生・条件分岐・DOMの理解
Slide 22
Slide 22 text
おみくじアプリ
Slide 23
Slide 23 text
参照：
きのくにICT
Slide 24
Slide 24 text
参照：
きのくにICT
Slide 25
Slide 25 text
生徒作品例①：野球盤ゲームアプリ
Slide 26
Slide 26 text
生徒作品例②：今日のご飯提案アプリ
Slide 27
Slide 27 text
Googleスプレッドシートにおける生徒同士の質疑応答
Slide 28
Slide 28 text
3.3. チーム開発の流れ
Slide 29
Slide 29 text
● アプリ開発に必要な
基礎的プログラミング
技能の育成
● サンプルアプリの
カスタマイズ
● あんこエデュケーション
×
きのくにICT
①個人 ②チーム
展示する 展示する
複数回提出する
複数回提出する
批評する 批評する
Slide 30
Slide 30 text
展示する
参照
：https://www.innovationunit.org/wp-content/uploads/2017/04/Work-That
-Matters-Teachers-Guide-to-Project-based-Learning.pdf
Slide 31
Slide 31 text
複数回提出する 批評する
参照
：https://www.innovationunit.org/wp-content/uploads/2017/04/Work-That
-Matters-Teachers-Guide-to-Project-based-Learning.pdf
Slide 32
Slide 32 text
● アプリ開発に必要な
基礎的プログラミング
技能の育成
● サンプルアプリの
カスタマイズ
● あんこエデュケーション
×
きのくにICT
①個人 ②チーム
展示する 展示する
複数回提出する
複数回提出する
批評する 批評する
Slide 33
Slide 33 text
3.4. アプリの設計
Slide 34
Slide 34 text
アジャイル開発思考を意識したチーム開発の流れ
2h
3h
3h
2h
2h
Slide 35
Slide 35 text
ゴールデンサークル理論
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：手段
どんな機能のあるアプリが必要か
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
アジャイル開発思考を意識したチーム開発の流れ
2h 2h
3h
3h
2h
代表プロジェクトの選出
所属プロジェクトの決定
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
3.5. チーム開発（前半）と中間発表
Slide 41
Slide 41 text
アジャイル開発思考を意識したチーム開発の流れ
2h
3h
3h
2h
2h
Slide 42
Slide 42 text
チームでの役割分担
No. 役割 意図
1 画面遷移図
● チームでアプリの全体像を捉える
● 開発途上におけるシステム変更を容易にする
● プロジェクトの企画者とフローチャート担当をつなぐ
2 フローチャート
● 実装するシステムを明確にする
● 画面遷移図担当とアプリの実装担当をつなぐ
3 ライトニングトーク
● アプリの目的，目標，手段を他者に伝える
● 他の役割全員をつなぐ
4 アプリの実装 ● フローチャートをもとに実装する
Slide 43
Slide 43 text
アジャイル開発思考を意識したチーム開発の流れ
2h
3h
3h
2h
2h
Slide 44
Slide 44 text
Q．良いアプリの特徴って
何だろう？
使いやすい？
おもしろい？
便利？
気づいたら
見てる！？
Slide 45
Slide 45 text
ユーザビリティ
○ 有効性：アプリを使うことの効果
⇒予め決めた目的を実現する手段になっているか？
○ 効率性：アプリの使いやすさ
⇒操作方法はわかりやすいか？
○ 満足度：アプリを使って感じるワクワク
⇒そのアプリをもう一度使いたいと思えるか？
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
「作る立場」から「使う立場」を考える
使う 作る
Slide 51
Slide 51 text
3.6. チーム開発（後半）と最終発表
Slide 52
Slide 52 text
今後の学習
2h
3h
3h
2h
2h
Slide 53
Slide 53 text
最終発表
2h
3h
3h
2h
2h
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
4．振り返りと今後の展望
Slide 56
Slide 56 text
振り返り
● 実践全体を通して，生徒各自が持つ興味・関心や問題意識を起点
にアプリ開発をさせたことで，楽し
みながら活動する様子が伺えた
● 開発したアプリを各自のスマートフォンなどで動かせたという体験
が，学びと実生活を結びつけたの
ではないか
● プログラミングを手段とした問題解決学習の一例とすることができた
今後の展望
● アプリの要件定義段階の活動に関する教材開発と授業実践を実施する
● アプリのアクセシビリティについて分析することができていない
○ 開発されたアプリには，画面の配色や文字の大きさなどに配慮の欠けるものがあった
○ ユニバーサルデザインの実現に向けて，ユーザビリティとアクセシビリティの双方の視点
からアプリを分析する必要性を感じた
Slide 57
Slide 57 text
本研究に関する発表・掲載履歴
● 広島大学附属福山中・高等学校公開研究会（2020/11/27）
● 神奈川情研「情報科実践事例報告会」（2020/12/28）
● 河合塾「キミのミライ発見」事例177（2021/02/12）
● 全国高等学校情報教育研究会（2021/08/10）
● 情報処理学会誌「情報処理」（2021/08/15）
Slide 58
Slide 58 text
アプリ開発でアイディアを形に
〜情報Ⅱ「⑷情報システムとプログラミング」を見据えた授業実践〜
広島県 広島大学附属福山中・高等学校 平田 篤史