Tweet
Tweet

Slide 1

Slide 1 text

自分のスマホで動作するアプリ開発の授業 同志社中学校・高等学校 情報科 鈴木 潤 jnsuzuki@js.doshisha.ac.jp 東京書籍×アシアル情報教育研究所 情報科オンラインセミナー 2022/2/26

Slide 2

Slide 2 text

今日お話ししたいこと • 高３自由選択「情報特論」でのスマホアプリ開発 – １年間の授業の流れと、生徒作品の制作の様子 • 情報Ⅰでのプログラミングに向けて – HTML・CSS・JavaScriptでつまづきやすいところ – これまでの授業で気をつけたところ – 2022年度の情報Ⅰ実施に向けて

Slide 3

Slide 3 text

自己紹介 鈴木 潤（すずき じゅん） jnsuzuki@js.doshisha.ac.jp 2005年3月 京都教育大学教育学部情報教育専攻 卒業 2005年4月 同志社高等学校に情報科教諭として入社 2010年 同志社中学校・高等学校に（統合） 今年は 入社して17年目。 生徒部主任（生徒会、クラブ、学校行事を管轄） 学習指導委員（カリキュラムに関すること） 同志社大学理工学部で「情報と職業」を担当

Slide 4

Slide 4 text

同志社中学校・高等学校 4 京都駅→ 学校→ 妙 法 大 大 地下鉄で ２０分 京都市左京区岩倉に 同志社中高があります 同志社大学 二条城→ 御所→ キリスト教主義学校 自由な校風

Slide 5

Slide 5 text

同志社中学校・高等学校 創立者 新島 襄 全日制普通科 １クラス ４５名 １学年８クラス ３６０名 １学年８クラス ３６０名 １学年８クラス ３６０名 高校で １０８０名 高等学校部分 他中学（受験）で80名 同志社中学から280名 コース制がない ８クラスが同じ条件のクラス替え

Slide 6

Slide 6 text

他大学への進学も一定数います 6 同志社大学 同志社女子大学への推薦 他大学を受験 神学部 文学部 社会学部 法学部 経済学部 商学部 政策学部 グローバル地域文化学部 文化情報学部 理工学部 生命医科学部 スポーツ健康科学部 心理学部 グローバル・ コミュニケーション学部 学芸学部 現代社会学部 薬学部 表象文化学部 生活科学部 看護学部 同志社大学 同志社女子大学 例年 300～320名程度

Slide 7

Slide 7 text

今日はここの お話をします

Slide 8

Slide 8 text

ICT環境 メディアセンター「知創館」 Windows ノートPC 50台 Windows 貸出用ノートPC 75台 デスクトップPC 20台 図書館開架部分 情報教室 HR教室 iPad BYAD 2017年度 高１より一人１台

Slide 9

Slide 9 text

2014年度「情報特論」新設 高3：2単位 １学期 ×サーバーサイドでのアプリ ×開発環境の構築 （アップロード？Apache？） ○SQLは比較的うまくいく 生徒も楽しんでいた ロボット教材で 物理的なプログラミング ×大失敗…うまくいかない ×ロボットがうまく完成しない ×シミュレータ通り動かない （当然） →挫折感がいっぱい ２学期

Slide 10

Slide 10 text

2014年度の情報特論 ２学期の中間試験あたり （１０月中旬）で方向転換 HTML・CSS （１年で既習） JavaScript スマホのアプリ つくってみたい ほぼ１ヶ月半でアプリ制作

Slide 11

Slide 11 text

Monacaの良いところ 環境設定がいらない 家でも続きが出来る 自分のスマホで動く

Slide 12

Slide 12 text

12 情報特論の１年間の流れ

Slide 13

Slide 13 text

情報特論の授業の流れ（１学期） １学期前半（約１０回） #01 ガイダンス・Monacaアクティベーション #02 HTML・CSSのおさらい(ID・クラスの違い) #03 CSSボックスモデル（画面デザイン） #04 JavaScriptの変数・条件分岐 #05 演算子・繰り返し処理・配列 #06 関数 #07・08 実際のアプリ作成（時計） #09 イベント・DOM #10 CSSとDOMの組合せ 見えるもの 動くものを 先に扱う 条件分岐や 繰り返し処理は 慣れてから

Slide 14

Slide 14 text

毎回の授業の流れ（１学期） １学期の各回の授業 ・前回の質問のフィードバック ・プリントで作業をすすめて動作確認 ＆机間巡視 ・おさらいの課題を最後に取り組む （できる生徒は半分くらい） ・作業の進捗や質問をフォームに入力 14

Slide 15

Slide 15 text

毎回の授業の流れ（１学期） スライドで作業を指示 （ファイル共有もしている） ソース以外の解説を プリントで配布 サンプルソースコードに 指示のための連番の作業番号を付与

Slide 16

Slide 16 text

16 自作時計をつくる 数字画像は 自分で描く

Slide 17

Slide 17 text

17 評価はペーパーテストで ソース→実行結果 実行結果→ソース

Slide 18

Slide 18 text

情報特論の授業の流れ（２学期） ２学期 構想 プロトタイプ を作る 練り直し コーディング あきらめる 部分を決断 完成 集中作成期間 中間試験あたり 期末試験あたり 期末試験終了後 終業式 18 ９月 １０月 １１月 １２月

Slide 19

Slide 19 text

構想 作品制作のとりかかり ノベル系ゲーム ストーリー・分岐・パラメータの変化イベントを考える クイズ ①基本ルールをつくり、プロトタイプを作成 ②クイズの問題量を増やす アクション系ゲーム ①Canvasでいくか、CSSでいくかを検討 ②プロトタイプをつくる（ブロック崩しを参考） タイマー・タイミングゲーム プロトタイプをつくる 作品制作のとりかかり データベース（共通） ①記録する・呼び出しするデータ形式・データ構造を考える データベース（記録） ①記録するデータ形式にあわせた入力画面をつくる ②読み込んだデータ形式を表示する出力画面をつくる データベース（検索） ①どのような条件で調べるか検索条件入力画面をつくる ②絞り込んだデータを表示する出力画面をつくる データベース（検索・Webサイト） ・あらかじめ登録する情報を収集してデータを構造化する。

Slide 20

Slide 20 text

毎回の授業の流れ（２学期後半） ２学期の各回の授業 ・前回の質問のフィードバック ・各自で課題に取り組む＆デバッグ 受講生 30～40名／講座 （机間巡視は 一人１分でしか…） ・作業の進捗や質問をフォームに入力 20 https://ict-enews.net/2020/01/08monaca/

Slide 21

Slide 21 text

21 プロトタイプを作る ・データベースアプリ ・Canvasを使ったアニメーション ・ブロック崩し ・ぷよぷよプログラミング を２学期前半で作ってみる。 コーディング

Slide 22

Slide 22 text

あきらめる 部分を決断 集中作成期間 11月中旬

Slide 23

Slide 23 text

生徒作品完成例 http://doshisha.click/joutoku/sample.html 23 完成

Slide 24

Slide 24 text

くそゲーでも作るのは大変 電卓は簡単？→結構難しいぞ！ いつもやってるゲーム →絵だけ豪華だけど？？？ 自分で作れなくても どうやって作るかがわかれば 発注できる！！ 24

Slide 25

Slide 25 text

2022年度から 情報Ⅰではどうしよう… HTML・CSS 写経（2時間くらい） 自分で作ってみる （そこそこ自力でできる） したいこと≒できること ネットで 調べたり JavaScript 写経（2時間くらい？） Web スマホアプリ 何が作れるかわからない 何をしていいかわからない したいこと≠できること ネットで調べても いろいろあって？？

Slide 26

Slide 26 text

HTML・CSS・JavaScript 共通の難しさ • 教科書・テキストのフォント • 全角・半角の混在（日本語があるから） • スペル間違い • 自力でのデバッグの困難さ

Slide 27

Slide 27 text

教科書・テキストのフォント そのまま Wordにコピペすると ＜＞は全角？半角？ ダブルクォートが？？ あれ？

Slide 28

Slide 28 text

全角・半角の混在 ／ スペル間違い <> かっこ？ 正解はこちら スペースが 全角 ○title ○1 ×エル これが半角 <> 間違い ○body デバッグが大変

Slide 29

Slide 29 text

生徒からの質問の例 この文書を見ていただきたいのですが、 ①画像が現れない ②#navigaterの左端が緑色が出てきてしまう理由 を教えてください

Slide 30

Slide 30 text

教科書・プリント・開発環境で工夫を ・シンタックスハイライト（自動色つけ）がある環境 ・等幅フォントを用いる 半分くらいは、自力で見つけられる ・フォントの指定 Consolas → i I 1 l o O 0 Monacakomi → i I 1 l o O 0 https://anko.education/tool/monacakomi Windows Vista以降標準

Slide 31

Slide 31 text

教科書・プリント・開発環境で工夫を ファイル名拡張子を表示させる ブラウザで表示 右クリック メモ帳で編集 保存・更新

Slide 32

Slide 32 text

Monacaを使うと、だいぶ楽ちんです

Slide 33

Slide 33 text

JavaScript特有の難しさ JavaScriptで良いのか？ ×同じ動きでも書き方がいろいろ（流行とか） 33 • Vanilla(バニラ) JavaScript • 90年代後半のJavaScript • ES5…2009年公開 • ES2015(ES6)…2011年公開 • React • Angular • Vue • jQuery • TypeScript //Vanilla document.getElementById("a").innerText="ほげほげ"; //jQuery $("#a").text("ほげほげ");

Slide 34

Slide 34 text

JavaScriptで説明が難しい例① camelCase → 大文字・小文字の区別がある window.onload = function(){ document.getElementById("a").innerText="ほげほげ"; }
34

Slide 35

Slide 35 text

JavaScriptで説明が難しい例② 変数のスコープ、即時関数・無名関数がわかりにくい var a = "taro"; if(true){ var a = "hanako"; } document.write(a); //hanako var a = "sanshiro"; //再定義可 document.write(a); //sanshiro setTimeout(function(){alert("Hello");},1000) 35 let b = "taro"; if(true){ let b = "hanako"; } document.write(b); //taro let b = "sanshiro"; //error! document.write(b);

Slide 36

Slide 36 text

JavaScriptで説明が難しい例③ ・省略した書き方、新しい書き方がいろいろ //従来の書き方 function tasu1(a,b){ return a+b; } //従来の書き方（無名関数） var tasu2 = function(a,b) return a+b; } //（ES6以降）アロー関数 const tasu3 = (a,b) => { return a+b; } //アロー関数（単一式） const tasu14 = (a,b) => a+b; //従来の書き方 let n = '鈴木'; document.write('私は'+n+'です'); //テンプレート文字列 let m = '鈴木'; document.write(`私は${m}です`); Webから調べた情報で自力で作ろうとすると とたんに難しくなる

Slide 37

Slide 37 text

2022年度情報Ⅰに向けて 逐次処理 条件分岐 繰り返し if if～else if～else if～else switch for while do～while 変数 配列 演算子 算術～ 比較～ 論理～ データ型 null スコープ 単項～ 代入～ for～in 文字列結合 配列 多次元配列 連想配列 関数 引数 戻り値 無名関数 即時関数 配列の操作 再帰関数 組み込みオブジェクト Math Date 正規表現 AJAX DOM イベント処理 Timer 扱う内容は精査して、１年生 情報Ⅰへ

Slide 38

Slide 38 text

・プログラミング部分は→たぶんスムーズ （実際に動かして試す方が理解ははやい）≒共通テスト対策 ・問題解決やモデル化とシミュレーションと組み合わせると… ひっかかる（だろう）ポイント タイプの遅さ スペリング 漢字変換 環境構築 繰り返し処理！ 例：ぷよぷよプログラミング 落ちゲー → 再帰処理が必要（実は難しい） 変数や関数を 自分で定義できる デバッグが 自力でできる 作りたいもの 作るべきもの が明確にする 課題設定 作れるものを 自覚する めちゃ大変

Slide 39

Slide 39 text

2022年度情報Ⅰに向けて これまでの情報特論 （1）情報社会の問題解決 （2）コミュニケーションと情報デザイン （3）コンピュータとプログラミング （4）情報通信ネットワークとデータの活用 これからの情報Ⅰ 大事なのは 開発環境構築 →できるだけシンプルで、自分で試せるもの 他の内容と 関連できるか！？ まずは、よくばらず基本を丁寧に

Slide 40

Slide 40 text

おわりに • プログラミングでうまくいかないときに、生徒自身や生徒同士 で解決できるようにしたい。（今は教員が作っている・・・） • 高３で予定の情報Ⅱや情報研究では 課題解決をメインにしたグループでのプロジェクトにしたい。 40 https://codepen.io/jnsuzuki/pens/public