高校生が授業でスマホアプリ制作

8月22日開催のプログラミング実践事例研究会での同志社中学校・高等学校の鈴木潤先生の発表資料。

Transcript

1. 高校生が授業でスマホアプリ制作 同志社中学校・高等学校 情報科 鈴木 潤 20.08.22 （アシアル）プログラミング教育実践事例研究会
2. お話しする内容 １．（前提）同志社高等学校の特徴 ２．３年自由選択科目「情報特論」について ３．スマホのアプリを制作する授業 2
3. 自己紹介 同志社中学校・高等学校 鈴木 潤 （すずき じゅん） jnsuzuki@js.doshisha.ac.jp 入社して16年目。 今年度は、生徒部主任と 学習指導委員をしています。 3
4. 大学生のときは．．． • 祇園囃子演奏ロボットをつくったり 4
5. 大学生のときは．．． • 授業用の電子回路シミュレータを作ったりしていました 5 パーツボックス パラメータ ウィンドウ ごみ箱アイコン 解析ボタン キャンバス 電圧計・電流計
6. 1-1.同志社中学校・高等学校 京都駅→ 学校→ 妙 法 大 大 地下鉄で２０分 6
7. 1-1.同志社中学校・高等学校 創立者 新島 襄 全日制普通科 １クラス ４５名 １学年８クラス ３６０名 １学年８クラス ３６０名 １学年８クラス ３６０名 高校で １０８０名 高等学校部分 他中学（受験）で80名 同志社中学から280名 7
8. 1-1.同志社中学校・高等学校 8
9. 1-2．同志社高校生の進路 同志社大学 同志社女子大学への推薦 他大学を受験 神学部 文学部 社会学部 法学部 経済学部 商学部 政策学部 グローバル地域文化学部 文化情報学部 理工学部 生命医科学部 スポーツ健康科学部 心理学部 グローバル・ コミュニケーション学部 学芸学部 現代社会学部 薬学部 表象文化学部 生活科学部 看護学部 同志社大学 同志社女子大学 例年 300～320名程度 9
10. 1-3．コース制のないカリキュラム 10
11. 1-4．ICT環境（メディアセンター） Windows 貸出用ノートPC 75台 デスクトップPC 16台 Windows ノートPC 50台 図書館開架部分 情報教室 11
12. 1-5．ICT環境（iPad導入に関して） Ｈ Ｒ 教 室 特 別 教 室 家 庭 授業内の活動 授業外の活動 宿題・課題 自主学習 受験勉強 資料を閲覧する 予習・復習 記録・振り返り 資料を閲覧する 記録・振り返り 学 校 一斉学習 個別学習 協働学習 知創館 MC** S*09教室 Pキャリー 自己教育力 を高める 家 庭 で の ア ク セ ス を 許 可 ？ 家 庭 で の 環 境 整 備 を 求 め る 現在の導入レベル 電子黒板整備 無線ＬＡＮ整備 生徒用タブレット端末導入 学校貸与or BYOD（私物持込） ドリル・オンラインテスト ATR-CALL 家庭で学習が 継続できる 休み時間・放課後の 学習をサポート 資 料 の 提 示 学 習 内 容 を 調 べ る 自 分 の 考 え を ま と め る 資 料 ・ レ ポ ー ト 作 成 グ ル ー プ で ま と め る 発 表 ・ 相 互 評 価 密度の高い 個別学習 提示メディア の多様化 実施の容易な 協働学習 2014年度中１～ 一人１台購入させる 教室にAP設置 2017年度高１～ 高校でも導入 教室にAP設置 2019年度ではじめて、全学年がそろう 12
13. 2-1.「情報特論」新設以前 2006「総合研究」 C# 2010～2013「情報C」 ドリトル using System; class kadai{ static void Main(){ int a,x; x=0; label01: Console.WriteLine("¥nあなたは商人です。今日は祭りがあり広場に露店を開きに行くこと Console.WriteLine("1.ＯＫ"); a=Convert.ToInt32(Console.ReadLine()); if(a==1){ goto label02; } else { goto label01; } return; label02: Console.WriteLine("¥nやりかた¥n ¥n露店を開いたらお客さんがやってきます。¥nこれは Console.WriteLine("1.ＯＫ"); a=Convert.ToInt32(Console.ReadLine()); 13
14. #1 ガイダンス #2 Windowsの操作、ファイルの管理 #3 Wordで自己紹介 #4 Wordで自己紹介(2)・文字の入力 #5 社会と情報とは #6 情報の収集・信憑性 #7 Wordで定型文書 #8 サイバー犯罪とその対策 #9 インターネットと人権 #10 Excelでみやすい表 #11 Excelの関数 #12 Excelで検索 #13 コンピュータとディジタルデータ #14 基数変換とデータ量 #15 ディジタルと文字のディジタル化 #16 音楽プレーヤの仕組み #17 音のディジタル化 #18 ディジタルカメラのしくみ #19 画像のファイル形式と動画の原理 #20 ディジタルデータの圧縮 #21 #22 Excelグラフ #23 #24 インターネットの仕組み #25 #26 メールの仕組み、プロトコル #27 プロトコル／ネットワークの構成 #28 安全な情報流通(1) #29 安全な情報流通(2)_暗号化 #30 図書館実習 #31 メインテーマ #32 『情報をささえる情報システム』 #33 ・情報の検索・収集・整理 ・プレゼン・レポート #34 知的財産権・産業財産権 #35 著作権(1) #36 著作権(2) #37 引用・参照 #38 HTML #39 CSS #40 課題(Webページ作成) #41 #42 #43 プレゼン発表 #44 相互評価・まとめ 1学期 2学期 3学期 今の１年必修「社会と情報」 14
15. 2-2.３年自由選択「情報特論」 ８０ 情報特論 １年必修「社会と情報」で学習した内容を踏まえ、様々なメディアと情報技術を問題 の発見と解決に効果的に活用するための科学的な考え方を学ぶ。また、アルゴリ ズムやプログラムの学習、データベースの活用などを通じて専門的な知識と技術 の深化、総合化を図る。 2 自由選択（合計８単位） キリスト教学特論（２） 古典特論（２） 日本史Ａ（２） 日本史Ｂ（４） 世界史Ｂ（４） 地理Ｂ（４） 現代思想特論（２） 体育Ｂ（２） 家庭特論（２） 美術Ⅲ（２） 英語資格講座（２） 英語表現ⅡC（２） 多言語多文化（２） 数学Ⅲβ（４） 地学（４） 物理（４） 化学（４） 生物（４） 情報特論（２） 体育Ａ（２） 音楽Ⅲ（２） ２０１４年度～ 15
16. 2-2.「情報特論」設置１年目 ×サーバーサイドでのアプリ ×開発環境の構築 （アップロード？Apache？） 比較的うまくいく だいぶわかりやすい ×ロボットがうまく完成しない ×シミュレータ通り動かない （当然） →挫折感がいっぱい 16
17. 2-4.「Monaca」を用いての開発 17
18. 2-5.「Monaca」導入のねらい 環境設定がいらない 家でも続きが出来る 自分のスマホで動く 18
19. 2-6.「Monaca」導入のねらい(2) ・生徒はみんなスマホでゲームしてる。 （特に男子）→本当におもしろい？？？ ・高１で HTML+CSSは扱っている。 →とても生徒の満足感が高い単元 HTML+CSS+JavaScript = ハイブリッドアプリ 19
20. 2-4.「情報特論」１年間の流れ 見えるもの 動くものを 先に扱う 条件分岐や 繰り返し処理は 慣れてから 20
21. 授業の流れ １学期の各回の授業 ・前回のおさらいの課題の解説 ・プリントで作業をすすめて動作確認 ＆ 机間巡視 ・おさらいの課題を最後に取り組む （できる生徒は半分くらい） ・作業の進捗や質問をフォームに入力 21
22. 授業の流れ １学期の各回の授業 ・前回のおさらいの課題の解説 ・プリントで作業をすすめて動作確認 ＆ 机間巡視 ・おさらいの課題を最後に取り組む （できる生徒は半分くらい） ・作業の進捗や質問をフォームに入力 22
23. 授業の流れ １学期の各回の授業 ・前回のおさらいの課題の解説 ・プリントで作業をすすめて動作確認 ＆ 机間巡視 ・おさらいの課題を最後に取り組む （できる生徒は半分くらい） ・作業の進捗や質問をフォームに入力 サンプルソースコードに 指示のための番号をふるようにしている 23
25. 授業の流れ １学期の各回の授業 ・前回のおさらいの課題の解説 ・プリントで作業をすすめて動作確認 ＆ 机間巡視 ・おさらいの課題を最後に取り組む （できる生徒は半分くらい） ・作業の進捗や質問をフォームに入力 25
27. 授業の流れ ２学期 構想 プロトタイプ を作る 練り直し コーディング あきらめる 部分を決断 完成 集中作成期間 中間試験あたり 期末試験あたり 期末試験終了後 終業式 27
28. 授業の流れ 28
30. 生徒作品完成例 http://doshisha.click/joutoku/sample.html 30
31. 2-7.授業の効果 電卓→作るの難しいぞ！ いつもやってるゲーム →絵だけ豪華だけど？？？ 自分で作れなくても どうやって作るかがわかれば 発注できる！！ 31
32. 今年のコロナ対応 32
33. 2-8.感じている課題 JavaScriptで良いか？ ×言語仕様がたくさんある（流行とか？） →jQueryなどのフレームワークも多い ネット情報のコピペでなかなか動かない デバッグを自力で出来るようにしたい ２０人を一人で見て回っている状況 ミスやトラブルの種類が出し切れていない 33
34. JavaScriptで説明が難しい例① camelCase、BODY要素を操作する文が長い <html> <head> <script> window.onload = function(){ document.getElementById("a").innerText="test"; } </script> </head> <body> <div id="a"></div> </body> </html> 34
35. JavaScriptで説明が難しい例② 変数のスコープ、即時関数・無名関数がわかりにくい var a = "taro"; (function() { var a = "hanako"; console.log(a); })(); console.log(a); let a = "taro"; { let a = "hanako"; console.log(a); } console.log(a); setTimeout(function(){alert("Hello");},1000) 35
36. おわりに ・何を教えるかと同時に 何につまづくのかをしっかり集めたい ・３年の実践を、次のカリキュラム変更 で「情報Ⅰ」での取組に下ろしたい。 ・課題解決を目的とした グループでのプロジェクトにしたい。 36