Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for アシアル株式会社 アシアル株式会社
July 19, 2023
Education
790
0

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

Avatar for アシアル株式会社

アシアル株式会社

July 19, 2023

More Decks by アシアル株式会社

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

Other Decks in Education

See All in Education
AIでアウトプットできる時代だからこそ、自分の言葉で考えることの大切さ / What's Left to Think, When AI Can Write?
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
260
[2026前期火５] 論理学（京都大学文学部 前期 第14回）「計算は、証明ではない——ハルシネーションを三層ハーモニーで診る」
Avatar for Shunsuke Yatabe yatabe
0
250
[2026前期火５] 論理学（京都大学文学部 前期 第10回）「論理学の哲学——意味とは何か（Tonkと推論主義）」
Avatar for Shunsuke Yatabe yatabe
0
300
チームの鏡になるー自分の癖を知ると、チームのパターンが見えてくる@スクフェス仙台
Avatar for saori murooka saorimurooka
0
180
解決策を教えても次期リーダーは育たない ─ 器の発達に伴走するために / Partnering with leaders in their vertical development
Avatar for mtskhs matsu0228
1
710
An Experiment in "Cross-Cultural Exchange" as a Method for Content Creation
Avatar for 京都精華大学谷口 直嗣 naoji_taniguchi_ksk_0827
0
170
中小規模私大の教学IRを支えるデータマネジメント ― データ基盤構築の取り組みと実務の現在地 ―
Avatar for Takeo Terazawa terazawa
0
120
[2026前期火５] 論理学（京都大学文学部 前期 第9回）「正規化の停止性——ヒドラゲームによる証明」
Avatar for Shunsuke Yatabe yatabe
0
270
2026年度春学期　統計学　第11回　分布の「型」を考える － 確率分布モデルと正規分布 (2026. 6. 11)
Avatar for Akira Asano akiraasano
PRO
0
180
1人 × AI、1か月でここまで作れる ー 数年前の外注換算3.8〜7.4億円・241〜379人月分の作業を、AI費用 約10万円・31日で
Avatar for Frieve-A frievea
0
470
遊ぶかね欲しさの犯行（ルビ：労働）です
Avatar for ShirayanagiRyuji shirayanagiryuji
0
260
Plano urbano de Madrid desde el Ensanche al s. XXI (2ª parte).
Avatar for Juan Martín Martín juanmartin2026
1
63k

Featured

See All Featured
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
500
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.2k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
290
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.3k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
490
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.6k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.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