1#-Λҙࣝͨ͠ΧϦΩϡϥϜσβΠϯ ͱ.POBDBͷ׆༻ 1 明星中学校・⾼等学校 情報科教諭 ⽊村剛隆 mail︓[email protected] 2023年3月25日（土） Monaca活用事例 オンラインセミナー

ࣗݾ঺հ 2 ໦ଜ߶ོ（28） ー略歴ー 2017 関西大学総合情報学部 卒業 2019 関西大学大学院 総合情報学研究科 修了 2019 屋久島おおぞら高等学校 情報科 専任教諭 2021 明星中学校・高等学校 情報科 常勤講師 ー興味関心ー 教育メディア／教育工学 探究学習／PBL／映像制作／デザイン パワポ作り／正課外活動／遊びと学び 情報科／探究科

3 ɽ৘ใᶗͷ೥ֶؒश໨త 1-1．本校の情報の授業と環境 授業コマの設定 1 教室環境 2 ICT環境 3 p 高校本科1年生（普通科） p 8クラス 約280名 p 2単位の週2コマ p 担当教員3名での横並び p 1人1台 iPad p 全域でWi-Fi完備 p Apple TV p スクリーン・プロジェクター p 2つのPC教室 p Dell製WindowsPC 80台 p レーダーカッター 1台 p 3Dプリンター 2台 東京都府中市にある中高一貫の高等学校（幼・小・中・高接続）

4 ɽ৘ใᶗͷ೥ֶؒश໨త ランニングマシーンは拷問！？ 目的がないまま、何かをさせ られるのは“拷問”と同じ。 1-2．カリキュラム作成の前提にある考え方 目的・ゴールの意識を持った Project Based Learning 図1 かつての拷問の写真

5 ɽ৘ใᶗͷ೥ֶؒश໨త 情報 国語 地歴 公民 数学 科学 芸術 保健 体育 英語 すべての教科に関わるのが『情報』だと捉える。だからこそ、 ⾼校初年次に「情報」という観点から学び⽅の基盤をつく り、他教科や⽣活の中で活かしてく仕組みを作りたい。 pリテラシーの育成 →メディア・データ p協働的な学び方を学ぶ姿勢 →総合探究の基盤づくり p探究する方法論の理解と活用 →Googleなどの活用方法 10*/5 図2 教科情報のイメージ 1-3．情報Ⅰの位置づけ ϓϩδΣΫτܕͷΧϦΩϡϥϜઃܭ

6 ɽ೥ؒͷΧϦΩϡϥϜ 明星⾼校のSNS事情を明らかにして、 楽しく、賢く、安全に活⽤できるような ポスターを制作する。 チームでビジネス企画を作成して、 アイデアをWebサイトにまとめてアウト プットする。 「神経衰弱」のゲームを遊びながら 楽しくプログラミングで制作する。 p 情報デザイン p 情報のディジタル化 p 情報通信ネットワーク p HTMLとCSS p 情報社会の問題解決 p 著作権・サイバー犯罪 p メディアとコミュニケーション p データ活用 p Google Work Space p 情報セキュリティーと暗号化 p コンピュータのしくみ p アルゴリズムとプログラム p JavaScript 1学期 2学期 3学期 【授業目的】 ① メディアやデータを批判的に読み解くことができる ② 問いを立てて、自ら調査をすることができる。 ③ 自分の主張を相手に根拠を持って説明することができる。 【授業目的】 ① コンピュータの根幹となる数の表現と概念を理解する。 ② ネットワークについて理解をして、WEBサイトを作ることができる。 ③ デザイン思考を使って、社会で生きる人々のためのビジネス企 画をデザインすることができる。 【授業目的】 ① プログラミングの基本を理解する。 ② アルゴリズムで論理構造を表現する力をつける。 ③ アルゴリズムに沿ってプログラムを書く力をつける。

7 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ɽ4/4നॻʂʢֶظʣ 3-1．1学期プロジェクトロードマップ

8 ɽ4/4നॻʂʢֶظʣ ❶メディアリテラシー ❷ディベート マスメディア等で紹介されるグラフや数字などが いかにして意図的につくられているのかを具体例 を出しながら考える活動。批判的な視点を養う グラフ1 選挙の投票率のグラフ 3-2．SNS白書のシンキングフェーズで養う批判的思考 テーマは「SNSの匿名性の是非」。賛成と反対に 分かれてディベートをした。主張には根拠がいる という視点を体験的に養う。 写真1 ボーン図を使ったディベートの練習

9 ɽ4/4നॻʂʢֶظʣ Who 主体 誰が？ What 定義 どういう意味？ When 時間 いつから？ いつまで？ Where 空間 どこで？ why 因果 なぜ？ How 経緯 いかにして？ 様態 どのように？ 方法 どうやって？ 当為 どうすべきか？ 参考：後藤・伊藤・登本（2014）学びの技、玉川大学出版、佐藤（2021）高校教員のための探究学習入門、ナカニシ出版 テーマに対して、5W1Hをぶつけて問いをつくる 3-3．問いの作り方を学ぶ ポストイットに書いた問いを分類して、問いを決定する ❸調査のための問い作り 表1 問いづくりの5W1H

10 ɽ4/4നॻʂʢֶظʣ 3-4．Googleを活用した協働的な活動と成果発表 写真2 Googleを使った共同作業の様⼦ 写真3 実際に作成した⽣徒の成果作品 ❹調査結果の発表

11 成果 反省 p 短時間での⾼1の1学期のディベートが難しかっ た。 p 時間的な問題で、データ分析の理解を促す授業 が不⼗分であった。 p スプレットシートを活⽤した授業が不⼗分だった。 ɽ4/4നॻʂʢֶظʣ p Google work spaceを使うことで、探究活動に につながる1つのプログラムができた。 p テーマを「SNS」にすることで、「著作権」や「サイバー 犯罪」や「メディアリテラシー」や「データ分析」につい ての関連づけて授業を実践することができた。 p 1年⽣の1学期にリテラシーの育成を促す授業をす ることの重要性を感じることができた。 『SNS白書！』のプログラムは継続するが、「データ分析」の観点をより強め て、スプレットシートの使い方も含めた授業を実践していく必要がある。 3-5．SNS白書！の成果と反省

CV CV σβΠϯͬͯͳΜ ͩΖ͏ʁ Ұॹʹߟ͑Δɻ ϏδωεΞΠσ ΞΛൃදͯ͠'# Λ΋Β͏ Πϯλʔωοτ ͷجຊ஌ࣝΛ਎ ʹ͚ͭΔɻ ϏδωεاըΛ 8αΠτʹ·ͱ ΊΔ ੍࡞ͨ͠8FCαΠ τͱاըΛൃද ͢Δ ① ② ③ ④ ⑤ ⑥ ⑦ Ϗδίϯʹग़͢ ΞΠσΞΛࣽ٧Ί ͯاըΛͭ͘Δ ίϯϐϡʔλ ʢσΟδλϧදݱʣ ͷجૅΛ஌Δ 約1コマ 約3コマ 約2コマ 約1コマ ɽΞϯτϨʂʢֶظʣ 約3ー4コマ 1コマ 約5ー7コマ 12 4-1．アントレ！Projectのロードマップ

ɽΞϯτϨʂʢֶظʣ 13 4-2．デザイン思考と企画の作成 ❶デザインとアートの違い ❷デザイン大喜利 👍 or 👎 デザイン＝問題解決のプロセス 身近なデザインにツッコミを入れる

ɽΞϯτϨʂʢֶظʣ 14 4-2．デザイン思考と企画の作成 ❸マイナビキャリア甲子園の課題の選択 課題の選択してビジネス企画の作成する。→中間発表まで実施する ❹ペルソナの設定と企画書の作成 写真4 マイナビキャリア甲⼦園の課題の抜粋 写真5 ペルソナ分析ワークシートの例

ɽΞϯτϨʂʢֶظʣ 15 4-3．Monacaを活用したWebサイトの作成 ❺ビジネス企画をWEBサイトにまとめる活動 プレビューで見ながら、1からWebサイトを 作成できるのがMonacaの強み！ Monacaの操作説明 1 基本的なHTMLとCSSの知識 2 サンプルの作成 3 最終課題のWEBサイト制作 4 写真6 ⽣徒が作成したWebサイトとMonacaの操作画⾯

16 成果 反省 p ビジネスアイデアを考える時間が⼗分に取れない ために、出場のハードルが⾼かった。 p ビジネスアイデアを考えるモチベーション維持と 状況設定ができなかった。 p Webサイト制作の時間が⼗分に取れずに、クオ リティの低いサイトに仕上がった。 →情報デザインを詳しくできなかった。 p HTMLとCSSでのプログラムは必要なのか疑問 が残った。 →ビジュアルで作る⽅が⼀般的なのではないか。 p ディジタル化やネットワークについてのスライド作 成や授業基盤を作ることができた。 p Webサイト制作をする上で「ディジタル化」と 「ネットワーク」の単元は必要な知識になるので 流れはうまくつくれた。 座学と実習の相性とバランスはいい が、プロジェクト目的や方法につい ての反省点が多いため、プロジェク ト自体の変更が必要である。 4-4．アントレ！プロジェクトの成果と反省 ɽΞϯτϨʂʢֶظʣ

17 アルゴリズム コンピュータ のしくみ Java Script の基礎 プログラム 制作① ❶ ❷ ❸ ❹ 【2コマ】 【2コマ】 【2コマ】 【2コマ】 【2コマ】 プログラム 制作② 神経衰弱を フローチャートで 表現してみよう スペックを⽐較し て⾃分に会うPC を購⼊しよう じゃんけんを通し て配列や条件分 岐を理解しよう おみくじから配 列や繰り返しを 理解しよう ❺ 神経衰弱ゲーム を完成させよう ɽϓϨϓϩʂʢֶظʣ 5-1．プレプロ！のプロジェクトロードマップ

18 ɽϓϨϓϩʂʢֶظʣ 5-2．神経衰弱をやってみる ❶神経衰弱の手順を確認しながら体験 ❷神経衰弱のフローチャート作成の課題 写真7 神経衰弱を楽しむ様⼦ 写真8 ⽣徒が作った神経衰弱のフローチャート

19 ɽϓϨϓϩʂʢֶظʣ 5-3．JavaScriptの基礎を学ぶ ❸Monacaを活用したじゃんけんプログラムの作成 写真9 レーザーカッターで作った「じゃんけんBOX」 写真10 じゃんけんプログラムのMonaca操作画⾯ 変数 条件分岐 の概念を学ぶ

20 ɽϓϨϓϩʂʢֶظʣ 5-3．JavaScriptの基礎を学ぶ ❹サイコロプログラムの作成 配列 反復 の概念を学ぶ 関数 写真11 ランダム作成を可視化したワークシート 写真12 Monaca操作画⾯

21 ɽϓϨϓϩʂʢֶظʣ 5-4．神経衰弱をつくる ❺神経衰弱ゲームの作成 変数の作成 1 ランダムの関数作成 2 3 CSSとHTMLでデザイン 4 写真13 Monacaで作成した神経衰弱ゲームのサンプル カードをめくるプログラム ＊全部作るのは全然できませんでした。

22 →プログラミングで育てる資質・能力とはなにか？ 5-5．プレプロ！の成果と反省 ɽϓϨϓϩʂ プログラミングのスキル︖ プログラミングの思考や姿勢︖ プログラミング教育に対する問いが⽣まれた。 どうしてもスキルによってしまう・・・・

p簡単にプログラムを1からつくれる環境があるMonacaの可能性 pプロジェクト活動のアウトプットに最適 p⾃前の教材と組み合わせることでより効果が⾼まること 23 ɽ·ͱΊ 【Monacaの可能性】 【PBL型授業の可能性】 p⽬的を達成するためのICT活⽤とプログラミングの視点が⾝につく p学び⽅を学ぶ意識をもつことができる

1#-Λҙࣝͨ͠ΧϦΩϡϥϜσβΠϯ ͱ.POBDBͷ׆༻ 24 明星中学校・⾼等学校 情報科教諭 ⽊村剛隆 mail︓[email protected] 2023年3月25日（土） Monaca活用事例 オンラインセミナー ありがとうございました。