第2回全国商業高校Webアプリコンテスト説明会（2024年3月版）

第2回全国商業高校Webアプリコンテストに向けた説明会の資料です。
第2回全国商業高校の正式な要項は後日公開予定です。

Transcript

1. Copyright © Asial Corporation. All Rights Reserved. 第2回 全国商業高校Webアプリコンテスト -学校向け説明会- アシアル情報教育研究所 所長 岡本雄樹
2. Copyright © Asial Corporation. All Rights Reserved. 2 • 自己紹介 • アプリ制作を通じた商業における情報教育 • 全国商業高校Webアプリコンテストの説明 • その他 はじめに
3. Copyright © Asial Corporation. All Rights Reserved. 工業高校でパソコンデビューし独学でWeb開発やサーバー構築を学ぶ。ア シアル入社後は通販システムやWeb業界向けの教育・研修事業を経た後、 2015年からMonaca Educationという学校教育向け事業を立ち上げる。 3 • 名前 • 岡本 雄樹 • 著書 • イラストでよくわかるPHP • WordPressプロフェッショナル養成読本 • Monacaで学ぶはじめてのプログラミング 自己紹介
4. Copyright © Asial Corporation. All Rights Reserved. 4  アプリケーション(アプリ)とは何か？ • ソフトウェアの一種 • 「人」の目的を果たすための機能を備えたソフトウェアのこと • 一般にOSやミドルウェア(データベースなど)のことをアプリとは呼ばない • 会計システムなども、システムと呼ぶことが多い • 会計システムと連動した経費申請アプリなどは「アプリ」 • パソコンやスマホの普及で「アプリ」はますます重要となる アプリ制作を通じた商業における情報教育
5. Copyright © Asial Corporation. All Rights Reserved. 5  Webアプリケーションとは何か？ • Webを通じて配信される • Webブラウザ上で動作する • OSに縛られない アプリ制作を通じた商業における情報教育
6. Copyright © Asial Corporation. All Rights Reserved. 6  Webアプリケーションの制作に必要な3つ • コンテンツ • 例：おみくじアプリ • デザイン • 箱や大吉などの画像、また表示方法など • プログラム • ランダムに結果を変える（乱数・条件分岐） • ボタンが押されたら画面を書き換え（イベント・DOM操作） アプリ制作を通じた商業における情報教育
7. Copyright © Asial Corporation. All Rights Reserved. 人のためにソフトウェアを創る という情報教育 7 • 課題を発見したり解決したりするのは商業科の得意分野 • 商業科にはプログラミング指導の歴史がある • Webなら手軽にスマホなどに向けてアプリを配信できる アプリ制作を通じた商業における情報教育
8. Copyright © Asial Corporation. All Rights Reserved. 8  AIがプログラムを書いてくれる時代に必要なもの • 一定レベルの「知識・技能」 • AIが書いたコードを理解できる • 既存のライブラリやAPIを活用できる • 誰のどんな課題を解決するか？ • 「思考・判断・表現」「学びに向かう力」が大切 • チームで課題解決に取り組む経験 • PBLがより重要に アプリ制作を通じた商業における情報教育
9. Copyright © Asial Corporation. All Rights Reserved. コンテスト紹介
10. Copyright © Asial Corporation. All Rights Reserved. 10 コンテストのスローガン 指導者・学校 科目『プログラミング』との接続 部活や課題研究のテーマ設定として 企業連携・実践的な商業教育のきっかけ作りとして 生徒 チームでの作品作りを通じた経験と成長 作品発表を通じて社会に想いをぶつける 商業高校生がアプリで明日をちょっと良くする 技術に自信の無い生徒でも気軽に参加でき、 身近な課題を解決するアイデアを形にできるコンテストです。 なお、アイディアコンテストでは無いためコードも記述してください。 コンテスト参加のメリット
11. Copyright © Asial Corporation. All Rights Reserved. 11 名称 第2回 全国商業高校Webアプリコンテスト 参加資格 • 全国商業高等学校校長協会会員校に在籍し商業科目を履修している生徒 （個人もしくはチーム） ※1校からの複数応募を可とする 対象作品 • 主にWeb技術で作られたアプリケーション ※他のコンテストで賞を受賞していない作品 開催日程 • 学校エントリー ：既に開始しております！ • 応募要項公開 ：2024年 5月中旬 • 作品応募締め切り：2024年12月4日(水) • 結果発表 ：2024年 1月中旬 主催 アシアル株式会社 後援 公益財団法人 全国商業高等学校協会、女子大生ICT駆動ソーシャル ・イノベーションコンソーシアム 協賛 株式会社セガ、実教出版株式会社 コンテスト概要（第2回予定）
12. Copyright © Asial Corporation. All Rights Reserved. 12 応募方法 • Web上のフォームより学校の指導者を通じて応募 • 180秒以内のプレゼン動画 • 作品を審査できる形で審査員向けに公開 審査方法 • 審査委員会による審査会による審査（オンライン） 各賞 • 通常賞（グランプリ・技術・デザイン・アイデア・実用） • 入選 • その他、企業賞、審査員特別賞など 表彰式 • 第2回は実施しない（Webサイトで発表） コンテスト概要
13. Copyright © Asial Corporation. All Rights Reserved. 総合的な完成度 13 コンテスト 審査のポイント 技術 デザイン アイデア 実用性 プレゼン テーション 【技術】 技術的な挑戦を評価します 【デザイン】 利用者にとって使いやすいデザインになっているかどうかを評価します 【アイデア】 課題解決につながるアイデアや創意工夫を評価します 【実用性】 作品の利用実績や実用性を評価します 【プレゼンテーション】 動画のわかりやすさや構成を評価します
14. Copyright © Asial Corporation. All Rights Reserved. 第一回の応募実績 • 第一回の応募実績 • 学校エントリー数：51校 • 内、作品応募学校数：３５校 • 作品応募：１７５作品 • 内、参加人数：４５２人 • 内、入選審査通過：２４作品 14
15. Copyright © Asial Corporation. All Rights Reserved. 過去の受賞校と作品例 通常賞受賞6作品と企業賞2作品 15 賞名 学校名 作品名 グランプリ 京都府立丹後緑風高等学校 網野学舎 恐丹後お化けマップ 実用賞 日本文理大学附属高等学校 生徒会選挙アプリ デザイン賞 香川県立坂出商業高等学校 手伝いアプリ「Pig Coin」 技術賞 山口県立宇部商業高等学校 ubezon プレゼン賞 北海道北見商業高等学校 世界的なコーヒーチェーンの人気商品カスタムメーカー アイディア賞 群馬県立伊勢崎商業高等学校 Unloss セガ賞 北海道苫小牧総合経済高等学校 総合経済高校マーケティング活動＠「苫小牧やきそば」ｍａｐ アシアル賞 茨城県立古河第一高等学校 ドキドキッ!!席替えアプリ
16. Copyright © Asial Corporation. All Rights Reserved. 過去の受賞校と作品例 審査員特別賞5作品 16 賞名 学校名 作品名 審査員特別賞 広島県立尾道商業高等学校 広島弁アプリ 審査員特別賞 岐阜県立土岐商業高等学校 Mega study 審査員特別賞 新潟県立新潟商業高等学校 新潟市版ゴミクイズ 審査員特別賞 広島県立尾道商業高等学校 gym・the・menu 審査員特別賞 香川県立坂出商業高等学校 LiFE
17. Copyright © Asial Corporation. All Rights Reserved. 過去の受賞校と作品例 入選作品 17 学校名 作品名 群馬県立伊勢崎商業高等学校 カロリー計算アプリ Logging 秋田県立大館国際情報学院高等学校 狐拳 藤沢翔陵高等学校 ひとくち豆知識 群馬県立伊勢崎商業高等学校 お知らせタイマー 静岡県立島田商業高等学校 ぶどう王国 北海道苫小牧総合経済高等学校 合格目指して！１０分タイマー 静岡県立島田商業高等学校 マザーヘルパー 広島市立広島商業高等学校 デパートあぷり 福岡女子商業高等学校 選ぶだけで分かる！Let`s 間食チェック 愛知県立東海樟風高等学校 club_app 福岡女子商業高等学校 プラミル 〜楽しく！素早く！Plan meal〜
18. Copyright © Asial Corporation. All Rights Reserved. メディア掲載 • 京都府立丹後緑風高等学校 • グランプリ受賞 • 学内のWebサイトに受賞者のインタビュー記事が掲載 18 https://www.kyoto-be.ne.jp/tangoryokufuu-hs/mt/amino_campus/2024/02/132.html
19. Copyright © Asial Corporation. All Rights Reserved. メディア掲載 • 福岡女子商業高等学校 • 2チームが入選 19 https://yashima.ac.jp/fgchs/?p=6284
20. Copyright © Asial Corporation. All Rights Reserved. メディア掲載 • 北海道苫小牧総合経済高等学校 • セガ賞を受賞 20 http://www.soukei.hokkaido-c.ed.jp/blogs/blog_entries/view/10/68d461b51db72e460f797c3d4a5ba4c1?frame_id=95
21. Copyright © Asial Corporation. All Rights Reserved. メディア掲載 • 北海道通信に掲載(2024年2月1日) • 苫小牧民報に掲載(2024年2月8日) 21
22. Copyright © Asial Corporation. All Rights Reserved. 動画を確認してみましょう！ • 京都府立丹後緑風高等学校 22 https://www.youtube.com/watch?v=SYk8q6oFTGY
23. Copyright © Asial Corporation. All Rights Reserved. エントリーと二回目の変更点
24. Copyright © Asial Corporation. All Rights Reserved. 24 (1)ブラウザ上で動作するWebアプリケーションであること • 静的なWebサイトやプロトタイピングツール、ノーコードツールで作成された作品は対象 外とします (2)審査員向けに公開可能なものであること • 完全な動作が行われないものでも応募可とします (3)学校を通して応募された作品であること • 作品応募は学校の教員を通じて行ってください (4)他コンテストで入賞をしていない作品であること 対象作品
25. Copyright © Asial Corporation. All Rights Reserved. 25 (1)ギャンブル・暴力などをテーマとする作品 • 減点の可能性があります (2)広く公開することができないプレゼン動画 • グランプリとプレゼン賞は、Webサイトなどで動画を必ず公開するため、動画を公開で きない場合は受賞対象外となります。顔出しが難しい場合はお面など工夫してください。 (3)広く公開することができない作品 • 受賞作品はWebサイトなどで公開を行います。そのため、広く公開することができない 作品は通常賞と企業賞の受賞対象外となります。 注意（減点について）
26. Copyright © Asial Corporation. All Rights Reserved. 26 (1)事前の学校エントリーをお願いします • 作品応募や受賞連絡・生徒向けの講座などの案内を行うため、事前の学校エントリーを お願いします。 (2)作品エントリー(10月開始～12月4日締切予定) • Webフォームから作品情報をご連絡ください。※1作品1エントリー 応募方法
27. Copyright © Asial Corporation. All Rights Reserved. 27 (1)公開(限定公開可)されたWebアプリケーションのURL • 審査員や企業賞を出す協賛企業・後援団体などが確認するため、作品のURLをご連絡頂 きます (2)180秒以内のプレゼンテーション動画 • 作品を評価するために必要な情報が盛り込まれたプレゼンテーション動画をご用意頂き ます。時間オーバーは減点対象なので必ず180秒以内でお願いします。 • ※動画作成のポイントについては生徒向けの資料を別途提供です (3)エントリーシート • 作品の概要や評価して貰いたいポイントなどを記載してください • ※シートとありますが、実際にはフォームの項目として入力頂きます。 作品エントリーに必要な情報
28. Copyright © Asial Corporation. All Rights Reserved. 第二回のポイント • 各賞について • 入選の名称を変更予定です • 入選→佳良賞 28
29. Copyright © Asial Corporation. All Rights Reserved. 第二回のポイント • 作品応募の締め切りについて • 提出後の作品「微調整」を許可する方向で検討中です • ただし「エントリーシート」は期日までに提出してください • 審査は締め切り直後から開始するため、調整前の状態で審査される前 提でお考えください 29
30. Copyright © Asial Corporation. All Rights Reserved. Webアプリの作り方（技術編）
31. Copyright © Asial Corporation. All Rights Reserved. 31  コンテンツの中身 • HTML言語でコンテンツを定義 • HTMLの例(おみくじより抜粋) Webアプリの作り方 <body> <img src="images/omikuji-box.png" id="omikuji"> <p id="message"></p> <button id="playBtn" onclick="play()">おみくじをひく</button> </body>
32. 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%; }
33. Copyright © Asial Corporation. All Rights Reserved. 33  プログラム A) ブラウザの中でプログラムを動かす  主にJavaScript言語 B) サーバーの中でプログラムを動かす  どのような言語でも実行可能 Webアプリの作り方
34. 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 = "やりなおす"; }
35. Copyright © Asial Corporation. All Rights Reserved. 35 Monaca Educationによるアプリの例（おみくじアプリ）
36. Copyright © Asial Corporation. All Rights Reserved. 36 おみくじアプリを改造して特産品紹介アプリにする例 ◦◦市 名産品紹介アプリ ？ 知りたい！ ◦◦市 名産品紹介アプリ 知りたい！ ◦◦市 名産品紹介アプリ 知りたい！ 狭山茶 里芋
37. Copyright © Asial Corporation. All Rights Reserved. 37  より技術的な記事 • プログラミング教育が生み出す新たなビジネス～商業 科におけるプログラミングとは～ • 商業資料120号 岡本雄樹 • https://www.jikkyo.co.jp/download/detail/69/9992661266 補足：より技術的な記事
38. Copyright © Asial Corporation. All Rights Reserved. 開発環境と支援の紹介
39. Copyright © Asial Corporation. All Rights Reserved. ブラウザ上で動作するWeb制作ツール。 Web公開機能やサンプルアプリのインポートに対応。 39 Monaca Education
40. Copyright © Asial Corporation. All Rights Reserved. Web公開機能を使うとURLと2次元コードが発行されるためス マートフォンなどでも動作可能。 40 Monaca Education
41. Copyright © Asial Corporation. All Rights Reserved. データベース機能も搭載しました 20行x2で動くクイズアプリをサンプルとして提供予定です 41 Monaca Educationクラウドデータベース
42. Copyright © Asial Corporation. All Rights Reserved. 無料で利用頂けるサンプルアプリ集サイト https://anko.education/ 42 あんこエデュケーション
43. Copyright © Asial Corporation. All Rights Reserved. アシアルおよび各協賛企業を通じて研修や講座を提供。 43 先生向け • コンテストに関する説明会 • プログラミングや作品作りに関する研修 生徒向け • Monacaを活用したアプリ制作講座 おみくじ改造 2択クイズアプリ（DB連動） • ぷよぷよプログラミングの講座 • 動画作成に関する講座 研修による支援
44. Copyright © Asial Corporation. All Rights Reserved. エントリーに向けて
45. Copyright © Asial Corporation. All Rights Reserved. エントリーに向けて 45
46. Copyright © Asial Corporation. All Rights Reserved. エントリーの例（岡本版） 46 エントリーNo.Null
47. Copyright © Asial Corporation. All Rights Reserved. エントリーの例（岡本版） 47
48. Copyright © Asial Corporation. All Rights Reserved. エントリーの例（岡本版）  チーム └ 47都道府県で研修がしたい！  作品名 └ 岡本雄樹のグルメ土産紹介アプリ@沖縄編  作品概要 └ 修学旅行で沖縄に行く高校生のために、岡本が500円以 下で買えるお土産を紹介するアプリです。 48
49. Copyright © Asial Corporation. All Rights Reserved. エントリーの例（岡本版）  お土産を渡したい相手が多い！ └ けど予算が･･･  そんな高校生の方に朗報です └ 実は地場のスーパーにお宝が眠っています  本作品がもたらす成果・効用 └ 沖縄のスーパーで安価に手に入る食材を中心とした、お土産選定ア プリをご用意しました  沖縄に修学旅行に行かれる際はご利用下さい └ なお、私の修学旅行先は「長崎」でした！ └ 当時は安いカステラを大量に買って帰りました。 49
50. Copyright © Asial Corporation. All Rights Reserved. エントリーの例（岡本版）  実機デモ 50 https://direct-preview-64c5f0c5e78885b0565b5317.monaca.education/
51. Copyright © Asial Corporation. All Rights Reserved. エントリーの例（岡本版）  まとめ └ ワンコイン（500円）で買える名産品は色々とあります。 └ 500円に抑えた点が、高校生向けのコンテストの趣旨に合っていると考えます。 └ 山羊汁やルートビアーなど、隠れた名産品を数多く収録しており、夏のトレーニング デイなどでも好評でした。 └ 本作品のアイディアをぜひ評価して頂きたいと思います。 51
52. Copyright © Asial Corporation. All Rights Reserved. エントリーの例（岡本版） 52  （補足）写真素材 └ 5,000円ぐらい掛かりました･･･ └ 実はアプリに収録していない写真も多いです
53. Copyright © Asial Corporation. All Rights Reserved. エントリーの例（岡本版）に対する生徒達からのフィードバック 53  生徒からのフィードバック └ お土産の金額も入れて欲しい └ 色数を増やした方が良い └ 配色が見づらい └ 文字を大きくしてバランス良くして欲しい └ アニメーションが欲しい └ パワポでアニメーションを使いましょう └ 動画では強調したい部分が分かりずらかった
54. Copyright © Asial Corporation. All Rights Reserved. おわりに
55. Copyright © Asial Corporation. All Rights Reserved. 55 ご協力のお願い 是非、参加校として、 本コンテストを一緒に盛り上げて頂きたいです。 本コンテストの趣旨をご理解いただき、 他にもこんな仕組みがあると嬉しい等のご要望がご ざいましたら、お気軽にお申し付けください。
56. Copyright © Asial Corporation. All Rights Reserved. 56 問い合わせ先 アシアル情報教育研究所 （全国商業高校Webアプリコンテスト窓口） 担当者：波多野 梢 岡本 雄樹 メール：edu@asial.co.jp 電話 ：03-3868-0670 ご不明点がございましたら、お気軽にお問い合わせください。
57. Copyright © Asial Corporation. All Rights Reserved. 57  学校エントリーお待ちしております おわりに https://form.k3r.jp/asial/shocon1ge2024