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

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

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

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

アシアル株式会社

July 19, 2023
Tweet

More Decks by アシアル株式会社

See All by アシアル株式会社
大学オリジナルのデジタル学生証アプリ「MyCampus」のご紹介資料
asial_corp
0
27
第2回全国商業高校Webアプリコンテスト説明会（2024年3月版）
asial_corp
0
140
第１回全国商業高校Webアプリコンテスト総括
asial_corp
0
520
6ヶ月間の授業でここまでできた。コンテスト参加に向けての授業内容と生徒の様子を紹介！
asial_corp
0
470
アプリ開発を目指した授業づくりについて
asial_corp
0
500
train20231223_mainslide.pdf
asial_corp
0
610
Monaca Education 活用事例セミナー:「Monacaでゲームプログラミング～作品制作事例～」
asial_corp
0
1.2k
2023年度第二弾無料導入説明会
asial_corp
0
500
Monaca Education_活用事例セミナー「Monacaで情報デザイン」
asial_corp
1
520

Other Decks in Education

See All in Education
ニュースメディアにおける生成 AI の活用と開発 / UTokyo Lecture Business Introduction
upura
0
140
1030
cbtlibrary
0
320
Canva
matleenalaakso
0
470
Algo de fontes de alimentación
irocho
1
440
Image Processing 1 : 1.Introduction
hachama
0
430
CSS3 and Responsive Web Design - Lecture 5 - Web Technologies (1019888BNR)
signer
PRO
1
2.5k
Tableau トレーニング【株式会社ニジボックス】
nbkouhou
0
23k
Semantic Web and Web 3.0 - Lecture 9 - Web Technologies (1019888BNR)
signer
PRO
2
2.6k
Comezando coas redes
irocho
0
400
(2024) Couper un gâteau... sans connaître le nombre de convives
mansuy
2
160
Medidas en informática
irocho
0
380
Evaluation Methods - Lecture 6 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
740

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Mobile First: as difficult as doing things right
swwweet
222
9k
Thoughts on Productivity
jonyablonski
67
4.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Optimizing for Happiness
mojombo
376
70k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
It's Worth the Effort
3n
183
28k

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