第2回全国商業高校Webアプリコンテスト-学校向け説明会(2024年5月)

by アシアル情報教育研究所

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Copyright © Asial Corporation. All Rights Reserved. 工業高校でパソコンデビューし独学でWeb開発やサーバー構築を学ぶ。アシアル入社後は通販システムやWeb業界向けの教育・研修事業を経た後、 2015年からMonaca Educationという学校教育向け事業を立ち上げる。 3 • 名前 • 岡本雄樹 • 著書 • イラストでよくわかるPHP • WordPressプロフェッショナル養成読本 • Monacaで学ぶはじめてのプログラミング自己紹介

Slide 4

Slide 4 text

Copyright © Asial Corporation. All Rights Reserved. 4  アプリケーション(アプリ)とは何か？ • ソフトウェアの一種 • 「人」の目的を果たすための機能を備えたソフトウェアのこと • 一般にOSやミドルウェア(データベースなど)のことをアプリとは呼ばない • 会計システムなども、システムと呼ぶことが多い • 会計システムと連動した経費申請アプリなどは「アプリ」 • パソコンやスマホの普及で「アプリ」はますます重要となるアプリ制作を通じた商業における情報教育

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Copyright © Asial Corporation. All Rights Reserved. 6  Webアプリケーションの制作に必要な3つ • コンテンツ • 例：おみくじアプリ • デザイン • 箱や大吉などの画像、また表示方法など • プログラム • ランダムに結果を変える（乱数・条件分岐） • ボタンが押されたら画面を書き換え（イベント・DOM操作）アプリ制作を通じた商業における情報教育

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Copyright © Asial Corporation. All Rights Reserved. 8  AIがプログラムを書いてくれる時代に必要なもの • 一定レベルの「知識・技能」 • AIが書いたコードを理解できる • 既存のライブラリやAPIを活用できる • 誰のどんな課題を解決するか？ • 「思考・判断・表現」「学びに向かう力」が大切 • チームで課題解決に取り組む経験 • PBLがより重要にアプリ制作を通じた商業における情報教育

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Copyright © Asial Corporation. All Rights Reserved. 10 コンテストのスローガン指導者・学校科目『プログラミング』との接続部活や課題研究のテーマ設定として企業連携・実践的な商業教育のきっかけ作りとして生徒チームでの作品作りを通じた経験と成長作品発表を通じて社会に想いをぶつける商業高校生がアプリで明日をちょっと良くする技術に自信の無い生徒でも気軽に参加でき、身近な課題を解決するアイデアを形にできるコンテストです。なお、アイディアコンテストでは無いためコードも記述してください。コンテスト参加のメリット

Slide 11

Slide 11 text

Copyright © Asial Corporation. All Rights Reserved. 11 名称第2回全国商業高校Webアプリコンテスト参加資格 • 全国商業高等学校校長協会会員校に在籍し商業科目を履修している生徒（個人もしくはチーム） ※1校からの複数応募を可とする対象作品 • 主にWeb技術で作られたアプリケーション ※他のコンテストで賞を受賞していない作品開催日程 • 学校エントリー：既に開始しております！ • 応募要項公開：2024年 5月中旬 • 作品応募締め切り：2024年12月4日(水) • 結果発表：2024年 1月中旬主催アシアル株式会社後援公益財団法人全国商業高等学校協会、女子大生ICT駆動ソーシャル・イノベーションコンソーシアム協賛株式会社セガ、実教出版株式会社コンテスト概要（第2回）

Slide 12

Slide 12 text

Copyright © Asial Corporation. All Rights Reserved. 12 応募方法 • Web上のフォームより学校の指導者を通じて応募 • 180秒以内のプレゼン動画 • 作品を審査できる形で審査員向けに公開審査方法 • 審査委員会による審査会による審査（オンライン）各賞 • 通常賞（グランプリ・技術・デザイン・アイデア・実用） • 入選 • その他、企業賞、審査員特別賞など表彰式 • 第2回は実施しない（Webサイトで発表）コンテスト概要

Slide 13

Slide 13 text

Copyright © Asial Corporation. All Rights Reserved. 総合的な完成度 13 コンテスト審査のポイント技術デザインアイデア実用性プレゼンテーション【技術】技術的な挑戦を評価します【デザイン】利用者にとって使いやすいデザインになっているかどうかを評価します【アイデア】課題解決につながるアイデアや創意工夫を評価します【実用性】作品の利用実績や実用性を評価します【プレゼンテーション】動画のわかりやすさや構成を評価します

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Copyright © Asial Corporation. All Rights Reserved. 過去の受賞校と作品例通常賞受賞6作品と企業賞2作品 15 賞名学校名作品名グランプリ京都府立丹後緑風高等学校網野学舎恐丹後お化けマップ実用賞日本文理大学附属高等学校生徒会選挙アプリデザイン賞香川県立坂出商業高等学校手伝いアプリ「Pig Coin」技術賞山口県立宇部商業高等学校 ubezon プレゼン賞北海道北見商業高等学校世界的なコーヒーチェーンの人気商品カスタムメーカーアイディア賞群馬県立伊勢崎商業高等学校 Unloss セガ賞北海道苫小牧総合経済高等学校総合経済高校マーケティング活動＠「苫小牧やきそば」ｍａｐアシアル賞茨城県立古河第一高等学校ドキドキッ!!席替えアプリ

Slide 16

Slide 16 text

Copyright © Asial Corporation. All Rights Reserved. 過去の受賞校と作品例審査員特別賞5作品 16 賞名学校名作品名審査員特別賞広島県立尾道商業高等学校広島弁アプリ審査員特別賞岐阜県立土岐商業高等学校 Mega study 審査員特別賞新潟県立新潟商業高等学校新潟市版ゴミクイズ審査員特別賞広島県立尾道商業高等学校 gym・the・menu 審査員特別賞香川県立坂出商業高等学校 LiFE

Slide 17

Slide 17 text

Copyright © Asial Corporation. All Rights Reserved. 過去の受賞校と作品例入選作品 17 学校名作品名群馬県立伊勢崎商業高等学校カロリー計算アプリ Logging 秋田県立大館国際情報学院高等学校狐拳藤沢翔陵高等学校ひとくち豆知識群馬県立伊勢崎商業高等学校お知らせタイマー静岡県立島田商業高等学校ぶどう王国北海道苫小牧総合経済高等学校合格目指して！１０分タイマー静岡県立島田商業高等学校マザーヘルパー広島市立広島商業高等学校デパートあぷり福岡女子商業高等学校選ぶだけで分かる！Let`s 間食チェック愛知県立東海樟風高等学校 club_app 福岡女子商業高等学校プラミル〜楽しく！素早く！Plan meal〜

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Copyright © Asial Corporation. All Rights Reserved. 24 (1)ブラウザ上で動作するWebアプリケーションであること • 静的なWebサイトやプロトタイピングツール、ノーコードツールで作成された作品は対象外とします (2)審査員向けに公開可能なものであること • 完全な動作が行われないものでも応募可とします (3)学校を通して応募された作品であること • 作品応募は学校の教員を通じて行ってください (4)他コンテストで入賞をしていない作品であること対象作品

Slide 25

Slide 25 text

Copyright © Asial Corporation. All Rights Reserved. 25 (1)ギャンブル・暴力などをテーマとする作品 • 減点の可能性があります (2)広く公開することができないプレゼン動画 • グランプリとプレゼン賞は、Webサイトなどで動画を必ず公開するため、動画を公開できない場合は受賞対象外となります。顔出しが難しい場合はお面など工夫してください。 (3)広く公開することができない作品 • 受賞作品はWebサイトなどで公開を行います。そのため、広く公開することができない作品は通常賞と企業賞の受賞対象外となります。注意（減点について）

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Copyright © Asial Corporation. All Rights Reserved. 27 (1)公開(限定公開可)されたWebアプリケーションのURL • 審査員や企業賞を出す協賛企業・後援団体などが確認するため、作品のURLをご連絡頂きます (2)180秒以内のプレゼンテーション動画 • 作品を評価するために必要な情報が盛り込まれたプレゼンテーション動画をご用意頂きます。時間オーバーは減点対象なので必ず180秒以内でお願いします。 • ※動画作成のポイントについては生徒向けの資料を別途提供です (3)エントリーシート • 作品の概要や評価して貰いたいポイントなどを記載してください • ※シートとありますが、実際にはフォームの項目として入力頂きます。作品エントリーに必要な情報

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

おみくじをひく

Slide 32

Slide 32 text

Copyright © Asial Corporation. All Rights Reserved. 32  コンテンツの見た目 • CSS言語で装飾を定義 • CSSの例（おみくじより抜粋） Webアプリの作り方 body { background-image : url("../images/omikuji-bg.png"); background-size : cover; background-repeat: no-repeat; text-align: center; } #omikuji{ margin: 20px; width : 60%; }

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Copyright © Asial Corporation. All Rights Reserved. 34  JavaScript言語の例(おみくじより抜粋) Webアプリの作り方 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 = "やりなおす"; }

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Copyright © Asial Corporation. All Rights Reserved. アシアルおよび各協賛企業を通じて研修や講座を提供。 43 先生向け • コンテストに関する説明会 • プログラミングや作品作りに関する研修生徒向け • Monacaを活用したアプリ制作講座おみくじ改造 2択クイズアプリ（DB連動） • ぷよぷよプログラミングの講座 • 動画作成に関する講座研修による支援

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Copyright © Asial Corporation. All Rights Reserved. エントリーの例（岡本版）  お土産を渡したい相手が多い！ └ けど予算が･･･  そんな高校生の方に朗報です └ 実は地場のスーパーにお宝が眠っています  本作品がもたらす成果・効用 └ 沖縄のスーパーで安価に手に入る食材を中心とした、お土産選定アプリをご用意しました  沖縄に修学旅行に行かれる際はご利用下さい └ なお、私の修学旅行先は「長崎」でした！ └ 当時は安いカステラを大量に買って帰りました。 49

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Copyright © Asial Corporation. All Rights Reserved. エントリーの例（岡本版）  まとめ └ ワンコイン（500円）で買える名産品は色々とあります。 └ 500円に抑えた点が、高校生向けのコンテストの趣旨に合っていると考えます。 └ 山羊汁やルートビアーなど、隠れた名産品を数多く収録しており、夏のトレーニングデイなどでも好評でした。 └ 本作品のアイディアをぜひ評価して頂きたいと思います。 51

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Copyright © Asial Corporation. All Rights Reserved. エントリーの例（岡本版）に対する生徒達からのフィードバック 53  生徒からのフィードバック └ お土産の金額も入れて欲しい └ 色数を増やした方が良い └ 配色が見づらい └ 文字を大きくしてバランス良くして欲しい └ アニメーションが欲しい └ パワポでアニメーションを使いましょう └ 動画では強調したい部分が分かりずらかった