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

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

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

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

アシアル株式会社

July 19, 2023
Tweet

More Decks by アシアル株式会社

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

Other Decks in Education

See All in Education
東工大 traP Kaggle班 機械学習講習会 2024
abap34
2
310
Amazon Connectを利用したCloudWatch Alarm電話通知
junghyeonjae
0
260
Ch2_-_Partie_1.pdf
bernhardsvt
0
110
Repaso electricidade e electrónica
irocho
0
190
不登校予防・再登校支援プログラムを提供するToCo (トーコ) の会社紹介資料 toco.mom
toco3week
0
390
Human Perception and Cognition - Lecture 4 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
710
HCI Research Methods - Lecture 7 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
710
老人会？ いえ、技術継承です @ builderscon 2024 LT
s3i7h
0
110
1106
cbtlibrary
0
410
Os pápeis do UX Design
wagnerbeethoven
0
360
子どものためのプログラミング道場『CoderDojo』〜法人提携例〜 / Partnership with CoderDojo Japan
coderdojojapan
4
14k
開発終了後こそ成長のチャンス！プロダクト運用を見送った先のアクションプラン
ohmori_yusuke
2
160

Featured

See All Featured
Side Projects
sachag
452
42k
KATA
mclloyd
29
14k
Code Reviewing Like a Champion
maltzj
520
39k
Faster Mobile Websites
deanohume
305
30k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
The Pragmatic Product Professional
lauravandoore
31
6.3k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Gamification - CAS2011
davidbonilla
80
5k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
For a Future-Friendly Web
brad_frost
175
9.4k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k

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