Upgrade to Pro — share decks privately, control downloads, hide ads and more …

おみくじアプリのスライド_20230719版

アシアル株式会社
July 19, 2023
Education
0
370

 おみくじアプリのスライド_20230719版

アシアル株式会社

July 19, 2023
Tweet

More Decks by アシアル株式会社

See All by アシアル株式会社
第2回全国商業高校Webアプリコンテスト説明会（2024年3月版）
asial_corp
0
43
第１回全国商業高校Webアプリコンテスト総括
asial_corp
0
410
6ヶ月間の授業でここまでできた。コンテスト参加に向けての授業内容と生徒の様子を紹介！
asial_corp
0
410
アプリ開発を目指した授業づくりについて
asial_corp
0
430
train20231223_mainslide.pdf
asial_corp
0
550
Monaca Education 活用事例セミナー:「Monacaでゲームプログラミング～作品制作事例～」
asial_corp
0
750
2023年度第二弾無料導入説明会
asial_corp
0
430
Monaca Education_活用事例セミナー「Monacaで情報デザイン」
asial_corp
1
430
アプリ開発の新たな選択肢が登場！Google社製Flutterのご紹介
asial_corp
0
610

Other Decks in Education

See All in Education
Data Processing and Visualisation Frameworks - Lecture 6 - Information Visualisation (4019538FNR)
signer
PRO
1
1.7k
LinkedIn
matleenalaakso
0
1.3k
Pen-based Interaction - Lecture 4 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.2k
phygital__le_magasin_augmenté.pdf
martine
0
2.6k
Padlet opetuksessa
matleenalaakso
3
11k
生成AIを活用できる大学教職員になる-基本と実践-
gmoriki
0
310
AI教育の未来『おもしろい』を作れる人材の育て方 #東京AI祭
o_ob
1
360
心房細動週間ポスター（2024年3月6日）
japanstrokeassociation
0
260
6 занятие. Четыре тактики метода "8 кубиков"бизнес-модели #ideaNN 1.03.2024.
karlov
0
160
Pre-enrollment Information for UTokyo International Students
utokyoissr2360
0
4.8k
外国人が思う日本語のむずかしいところ
jamashita
0
510
自己紹介 / who-am-i
yasulab
2
3.1k

Featured

See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
7
1.3k
4 Signs Your Business is Dying
shpigford
176
21k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
6.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
65
14k
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
Six Lessons from altMBA
skipperchong
22
3k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k

Transcript

  1. Copyright © Asial Corporation. All Rights Reserved. APSおみくじアプリ(プログラミング領域) 1

  2. Copyright © Asial Corporation. All Rights Reserved. 学習目標 2

  3. Copyright © Asial Corporation. All Rights Reserved. 単元の流れ 3

  4. Copyright © Asial Corporation. All Rights Reserved. 1コマ目・おみくじアプリの仕組みを理解する 4

  5. Copyright © Asial Corporation. All Rights Reserved.  おみくじアプリを動かしてみよう 1コマ目

    5 サポートページから おみくじアプリの 『完成版』をクリック Monacaプロジェクトとしてイン ポートしてIDEで開く おみくじアプリとして 動作することを確認する

  6. Copyright © Asial Corporation. All Rights Reserved. 実習（インポート）  学習者用・サポートページについて

    └ https://edu.monaca.io/student 1コマ目 6

  7. Copyright © Asial Corporation. All Rights Reserved.  おみくじアプリのフローチャート(抜粋) 1コマ目

    7

  8. Copyright © Asial Corporation. All Rights Reserved. 実習（コードの確認）  おみくじアプリのソースコード(抜粋)

    1コマ目 8 <script> function play() { // 0～4の範囲のランダムな値を得る var no = Math.floor(Math.random() * 5); // ランダム値に応じて表示する画像を変える var image_name; if (no == 0) { image_name = "daikichi.png"; } else if (no == 1) { image_name = "chuukichi.png"; } else if (no == 2) { image_name = "shoukichi.png"; } else if (no == 3) { image_name = "suekichi.png"; } else { image_name = "kyou.png"; } alert("おみくじが出ました！さて結果は？"); // 画像と文字列の差し替え document.getElementById("omikuji").src = "images/" + image_name; document.getElementById("playBtn").innerHTML = "やりなおす"; } </script> ①乱数で結果を生成する ②結果に応じて 画像を変える ③結果の表示

  9. Copyright © Asial Corporation. All Rights Reserved.  展開1：イベント・乱数・変数・分岐 └

    アプリの動作をデモンストレーションし、ボタンを押下するたびに 結果が変わることを説明する。 └ フローチャートを活用し、乱数の値に応じて条件分岐していること を説明する。 └ Math.random()に数値の5を掛け算している部分を6に変更すると 『凶』がでやすくなることを示しつつ、else文の役割を説明する。 └ else文は、ifやelse ifの条件に当てはまらなかった場合に実行さ れるため、乱数部分の値を6以上の数字にした場合はelse文が呼ば れる確率が高くなる。 1コマ目 9

  10. Copyright © Asial Corporation. All Rights Reserved.  展開2：イベント・関数 └

    ボタンが押されたときにプログラムが実行されているこ とを確認する。 └ デモンストレーションとして、bodyタグを以下のように 改造するとアプリ起動のタイミングでおみくじを実行し ても良い。<body onload=play()> └ おみくじのプログラムの本体がplay()関数として記述さ れており、ボタンの押下など、なんらかのイベントに応 じてplay()関数が呼び出されていることを説明する。 └ 乱数や関数・イベントなどに対する興味・関心が引き出 せれば本コマの指導は成功とする。 1コマ目 10

  11. Copyright © Asial Corporation. All Rights Reserved. 2コマ目・おみくじの結果を追加してみよう 11

  12. Copyright © Asial Corporation. All Rights Reserved.  導入 └

    前回までの学習内容として、乱数と条件分岐によっておみくじの結 果が変わることを確認する。 └ また、今回のカスタマイズではプログラムを追加することで結果の パターンを増やせることを学ぶ。 └ 前段では、結果として追加する『大凶』の画像を用意する学習を行 う。画像はMonacaのWebサイトからダウンロードできる。ブラウザ の機能で『右クリックして保存』などを活用されたい。このような 操作を通じて、Webやファイルの仕組みの学習に繋げることもでき る。 └ なお、OSなどの関係で操作が難しい場合は、大凶の画像をアップ ロード済みのプロジェクトを指導者が用意して配布する形でも構わ ない。 2コマ目 12

  13. Copyright © Asial Corporation. All Rights Reserved.  おみくじの結果を追加してみよう 2コマ目

    13 • 乱数の範囲を1大きくする • 乱数の結果によって 『daikyo.png』が選ばれるように する

  14. Copyright © Asial Corporation. All Rights Reserved. 実習（画像の取得とアップロード）  画像の取得

    └ 何らかの方法で画像を入手して下さい 2コマ目 14

  15. Copyright © Asial Corporation. All Rights Reserved. 実習（画像の取得とアップロード）  画像のアップロード

    └ /www/imagesフォルダ内に画像をアップロード └ 『ドラッグアンドドロップ』または『ファイル選択』 2コマ目 15

  16. Copyright © Asial Corporation. All Rights Reserved. 実習（コードの変更）  おみくじアプリのソースコード(抜粋)

    2コマ目 16 <script> function play() { // 0～5の範囲のランダムな値を得る var no = Math.floor(Math.random() * 6); // ランダム値に応じて表示する画像を変える var image_name; if (no == 0) { image_name = "daikichi.png"; } else if (no == 1) { image_name = "chuukichi.png"; } else if (no == 2) { image_name = "shoukichi.png"; } else if (no == 3) { image_name = "suekichi.png"; } else if (no == 4) { image_name = "kyou.png"; } else { image_name = "daikyou.png"; } alert("おみくじが出ました！さて結果は？"); // 画像と文字列の差し替え document.getElementById("omikuji").src = "images/" + image_name; document.getElementById("playBtn").innerHTML = "やりなおす"; } </script> ①乱数の範囲を0～5としたいので 『6』に変更 ②乱数が4なら凶 それ以上なら大凶に変更

  17. Copyright © Asial Corporation. All Rights Reserved.  おみくじアプリのフローチャート(抜粋) 2コマ目

    17

  18. Copyright © Asial Corporation. All Rights Reserved.  展開 └

    シートにて、おみくじの結果に大凶を追加するカスタマイズの課題 を提示する。 └ 生徒にフローチャート上で変更が必要な箇所を考察させる。 └ 指導者が画像のアップロードおよびプログラムの変更を実演し、動 作の説明を行う。大凶が表示されるまで何度もおみくじをひく。上 手く動作しないときは、ソースコードを全員で確認する。 └ 生徒に実習を行わせる。 2コマ目 18

  19. Copyright © Asial Corporation. All Rights Reserved.  まとめ └

    おみくじアプリの挙動を通じて、フローチャートにおける条件分岐 と、テキストプログラミングにおけるif文の処理の関係を理解させ る。 └ 乱数の値を扱う変数と、ファイル名を扱う変数の2つの変数がある ことを理解させる。 └ 逐次処理と条件分岐によって、任意のファイル名が変数にランダム に格納されることを理解させる。 └ 変数の変化を確認するために、alert()命令やconsole.log()命令を 併用してデモンストレーションしても良い。 └ 乱数生成や分岐の条件を変更することで、アプリの挙動も変化する ことを理解させ、パラメーターの変更に自ら興味・関心を持って挑 戦できるようになれば、本コマの指導は成功とする。 2コマ目 19

  20. Copyright © Asial Corporation. All Rights Reserved. 3コマ目・おみくじに一言メッセージを追加してみよう 20

  21. Copyright © Asial Corporation. All Rights Reserved.  導入 └

    前回までの学習内容として、プログラムを追加することで結果のパ ターンを増やせることを確認する。 └ 今回のカスタマイズでは、結果画像の下部に独自のメッセージを表 示できることを学習する。 └ 乱数と条件分岐により独自の一言メッセージを出せることを通じて、 乱数や変数の仕組みを再確認し、理解度を深められるように指導を 行う。 └ また、早く進んでいる生徒がおみくじアプリを独自にカスタムし、 『今日のデザートアプリ』など、独自のアプリにカスタムを進める ことも想定する。４コマ目の実習も行う場合は３コマ目のタイミン グで素材集めなどを指示する。 2コマ目 21

  22. Copyright © Asial Corporation. All Rights Reserved.  おみくじに一言メッセージを追加してみよう 3コマ目

    22 おみくじ結果の画像の下に任意の メッセージを表示する。 メッセージの内容はなんでも構いま せん

  23. Copyright © Asial Corporation. All Rights Reserved. 実習（コードの変更） 2コマ目 23

    // ランダム値に応じて表示する画像を変える var image_name; var message; if (no == 0) { image_name = "daikichi.png"; message = "大吉です"; } else if (no == 1) { image_name = "chuukichi.png"; message = "中吉です"; } else if (no == 2) { image_name = "shoukichi.png"; message = "小吉です"; } else if (no == 3) { image_name = "suekichi.png"; message = "末吉です"; } else if (no == 4) { image_name = "kyou.png"; message = "凶です"; } else { image_name = "daikyou.png"; message = "大凶です"; } alert("おみくじが出ました！さて結果は？"); // 画像と文字列の差し替え document.getElementById("omikuji").src = "images/" + image_name; document.getElementById("message").innerHTML = message; document.getElementById("playBtn").innerHTML = "やりなおす"; ①メッセージ用の変数を宣言 ②分岐毎にメッセージを設定 ③DOMで画面に反映

  24. Copyright © Asial Corporation. All Rights Reserved.  おみくじアプリのフローチャート(抜粋) 3コマ目

    24

  25. Copyright © Asial Corporation. All Rights Reserved.  展開 └

    シートにて、おみくじの結果に一言メッセージを追加するカスタマ イズの課題を提示する。 └ 生徒にフローチャート上で変更が必要な箇所を考察させる。 └ 指導者がプログラムの変更を実演し、動作の説明を行う。 └ 生徒に実習を行わせる。 3コマ目 25

  26. Copyright © Asial Corporation. All Rights Reserved.  まとめ └

    おみくじアプリのカスタマイズを通じて、変数・乱数・分岐の理解 を深める。 └ オリジナルのアプリ制作に進んでも良い、その場合『あんこエデュ ケーション』のイラスト素材集にあるフルーツ画像などを使うこと もできる。 └ プログラムの構文に馴れ、プログラミングに対して自信を持って挑 戦できるようになれば、本コマの指導は成功とする。 3コマ目 26

  27. Copyright © Asial Corporation. All Rights Reserved. 4コマ目 27

  28. Copyright © Asial Corporation. All Rights Reserved.  導入 └

    前回までの学習内容として、結果画像の下部に独自のメッセージを 表示できることを確認する。４コマ目では、以下２つの展開が考え られる └ おみくじアプリをひな形から完成させる └ 独自アプリを作る └ 独自アプリを作るカスタマイズでは、素材画像やメッセージの準備 などが必要なため、可能な場合は３コマ目までに指示を行っておく。 なお、あんこエデュケーションの素材をそのまま使うことも可能で ある。 4コマ目 28

  29. Copyright © Asial Corporation. All Rights Reserved.  展開1 └

    おみくじアプリのソースコードを参考にプログラムを組み立てる。 └ なお、幾つかのブロックに分けて動作確認しながら実習を進めるこ とで、躓きを軽減できる。 4コマ目 29

  30. Copyright © Asial Corporation. All Rights Reserved.  展開2 └

    独自アプリを作る場合は、完成版のおみくじアプリの画像などを差 し替える形で行う。３コマ目で作成した、メッセージ表示に対応さ せたおみくじアプリを使っても良い。 └ 『上手く行かなかったときに途中からやり直したい』という場合に 備えて、プロジェクトの複製機能も活用されたい。 4コマ目 30