1https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaでプログラミング体験講座
~休校支援バージョン~
アシアル株式会社
アシアル情報教育研究所
岡本 雄樹
2https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
本日の講座の流れ
• ご挨拶
• Monacaのはじめかた(教材サポートページの案内)
• ブロック崩しアプリの改造を通じてMonacaの操作方法を体験
• テキスト1章を元に書籍を使った学習方法を体験
• 質問タイム
3https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
自己紹介
◼名前
• 岡本雄樹(アシアル情報教育研究所 所長)
◼著書
• イラストでよくわかるPHP
• WordPressプロフェッショナル養成読本
• Monacaで学ぶはじめてのプログラミング
◼メッセージ
• 「コンピューター」「インターネット」「プログラミング」
• 私は高校生の時にそれらと出会うことで人生が拓けました。
• 先生方とMonacaによるアプリ開発を通じて、情報技術の
活用方法や作品作りの楽しさを広めてまいります。
4https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
アシアル株式会社について
• 2002年
• 代表の田中正裕が本郷の地で創業(当時20才)
• PHP言語に関する雑誌発刊・教育・コンサルティング
• 2010年
• アシアルPHPスクールのマネージャーに岡本が就任
• 2012年
• アプリ開発ツール「Monaca」をリリース
• JavaScript言語とHTML5による複数OS向けアプリ開発環境を提供
• 2015年
• MonacaEducation事業がスタート
• 2020年
• アシアル情報教育研究所設立
5https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
次期学習指導要領とプログラミング
• 小学校(2020~)
• 既存の教科の中で実施
• 中学校(2021~)
• 技術・家庭科の中で実施
• 高校(2022~)
• 教科「情報」で実施
• 共通必履修科目「情報Ⅰ」が2単位(70時間)
6https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
中学校のプログラミング教育
• 現行
• プログラムによる計測・制御
• 次期
• プログラムによる計測・制御
• 「ネットワークを利用した双方向性のあるコンテンツのプログラミング」
7https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
高校のプログラミング教育
• 現行
• 教科「情報」は2003年度から存在する
• 現行科目は「社会と情報」と「情報の科学」の選択必履修
• プログラミングを扱うのは「情報の科学」
• 「情報の科学」は2割程度の学校が履修
• 次期
• 新科目「情報Ⅰ」に一本化されプログラミングが必ず行われる
• 更に新科目「情報Ⅱ」が選択科目として追加される
• (「総合的な探究の時間」でSTEM教育が取り入れられるため、
ここでもプログラミングが行われる可能性がある。)
8https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
情報Ⅰ
情報に関する科学的な見方・考え方を働かせ,情報技術を活用して問題の発見・解決を行う学習活動を通して,問題の発見・解決に向けて情報と情報技術を適切かつ効果的に活用し,情報社会に主体的に参画するための資質・能力を次のとおり育成することを目指す。
(1)情報社会の問題解決(2)コミュニケーションと情報デザイン(3)コンピュータとプログラミング(4)情報通信ネットワークとデータの活用
9https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
改訂のポイントは問題の発見と解決
文科省の調査官によると改訂のポイントは
`問題の発見と解決`
鹿野利春 高等学校の「情報科」改訂を語る。 - 教育インタビュー | 学びの場.comhttps://www.manabinoba.com/interview/018188.html
そこでMonaca!
11https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
日常生活の課題をプログラミングで解決しよう!
みなさんが普段から携帯しているコンピューターはどれですか?
1. スマートフォン
2. タブレット
3. ノートパソコン
4. シングルボードコンピュータ
12https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaの特徴HTML5とJavaScript言語でモバイルアプリが作れます。
13https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
通常版Monaca(2012-)
14https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
教育版Monaca(2019年度リリース)
15https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaの特徴ブラウザだけで動作するクラウドIDE(統合開発環境)
メニューバー(さまざまな機能を呼び出せます)
プロジェクトパネル(ファイルの管理などを行
います)
ライブプレビュー(動作確認を行います)
コードエディター(ファイルの編集を行います)
デバッグパネル(エラー情報などを表示します)
16https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaの特徴Monaca for Study(アプリ)でスマホやタブレットが教材に
MonacaIDE上で記述したソースコードが手元で動き出す!スマホのセンサー(加速度・GPS等)を活用したプログラミングが可能QRコードを読み込んで利用するアプリの作成も可能(2020年度より)
17https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaの特徴外部のWebAPIやmBaasとも連携可能
外部のWebAPIと連携して天気や地図情報を表示したり、mBaasと連携してクラウドデータベースの情報を参照したりすることができます。
・プッシュ通知
・クラウドデータベース
・ユーザー認証
・IoT連携
JavaScriptによるデータの送受信
18https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
教育版Monacaの特徴
• 一年間バージョン固定
• 教材との差異や生徒の混乱を抑えられます
• 軽量
• GIGAスクール構想標準仕様でも快適
• 初心者に易しい設定
• 『保存』『Undo』『Redo』ボタンを搭載
• アカウント管理機能も搭載
19https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
もなかこみフォント搭載
Monaca活用例(主に高校)
21https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
同志社中学校・高等学校
• 作品例
22https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
沖縄県立 宮古工業高校
• 宮古方言アプリ
• 方言をしゃべります!
• 4コマ漫画があります
23https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
茨城県立竜ケ崎第二高等学校
• 『いばキャラ図鑑 』アプリ
• 部活動にて開発
• 茨城県全域のキャラクターを紹介
• アプリの特徴
• 多数のキャラクターを紹介
• 会える場所をGoogleMapsで確認
いばらきデジタルコンテンツ・ソフトウエア大賞2015「優秀賞」受賞作品
24https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
静岡県立島田商業高等学校
• 40人のクラスでアプリを10本リリース
• iOSやAndroidのストアでも公開
• 市の広報や各種メディアにも多数掲載
• 平塚の飲食店をリトアニア語で紹介するアプリ『Hiratsuka Maistas(マイ
スタス)』など
• 参考リンク
• https://edu.monaca.io/archives/1875
25https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
野田学園高等学校
• 対象:1年生
• 科目:社会と情報
• 時間:全10時間
• 単元名:SDGsに関する問題を解決するためのアプリ開発
• 実施校:野田学園高等学校
• 教諭名:天川 勇二
26https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
【事例】経産省・未来の教室
• 農業IoTxアプリの授業でMonacaが使われました。
27https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
釧路公立大学
• 陣痛インディケーターは情報処理学会第78回全国大会講演番号5S-07『スマートフォンアプリケーションを活用したマタニティ支援システムの開発』の講演で紹介されています
Monacaのはじめかた
29https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ブラウザを用意しよう
• パソコンの場合
• 正式対応
• GoogleChrome
• 一部対応
• MicrosoftEdge
• Safari
• iPadの場合
• 一部対応
• Safari
30https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ブラウザとは?
• ウェブサイトを閲覧するためのソフト
• ウェブサイトはHTML文章(とCSSとJavaScript)で記述されている
• ブラウザがあればHTML文章を人間が見やすい形で表示できる
• 音楽や動画も再生できる
• ブラウザはパソコンやスマホの他、一部のテレビやゲーム機にも搭載されている
• ブラウザ上で動作するアプリのことをウェブアプリと呼ぶ
• Monacaはウェブアプリの一種
• Monacaはウェブアプリをインストール型のアプリにする機能を持っている
31https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
書籍サポートページを活用しよう
• 書籍データの一部を公開
• 授業スライドも公開
• 動画講座も公開
• サンプルアプリも公開
• 学習指導案も公開
https://edu.monaca.io/book/a1
32https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
アカウントを作成しよう
• Web記事参照
• 1章の記事やスライドや動画でも紹介しています
https://edu.monaca.io/faq/signup
Monaca体験(ブロック崩し編)
34https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ダッシュボード
• 開発中のアプリはプロジェクト単位で管理します
• 新しいプロジェクトを作ると一覧に並びます
35https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
新しいプロジェクトを作る
• 今回は「ブロック崩し」を選択して作ってみましょう
• プロジェクト名は自由に設定できます
36https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
プロジェクトを開く
• 一覧からプロジェクトを選択して下さい
• 「クラウドIDEで開く」を選択して下さい
TIPS
無限ループなどで開けなくなったプロジェクトはセーフモードで開けます。
37https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
MonacaIDE(統合開発環境)
• ファイル管理・編集・動作確認などを行えます
プロジェクトパネル
メニューバー
プレビュー
デバッグパネル
エディター
38https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
フォルダとファイルを開く
プロジェクトパネルのファイルツリーを操作して下さい
フォルダの▶をクリック
ファイルをダブルクリック
エディタ側のタブが開きます
39https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
プログラムの変更(玉の数を増やす)
• ブロック崩しプログラムの本体は「main.js」ファイルです
• プロジェクトパネルのファイルツリーからmain.jsを探して「ダブルクリック」して下さい
• 5行目の変数SETTINGS_BALL_NUMを1000に「修正」して下さい
• main.jsの変更を「保存」して下さい。
• プレビュー上の玉の数が増えれば成功です
40https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
玉が増えれば成功
「保存」はボタンかショートカットキー(Ctrl + s)
41https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
応用:ブロックの配置を変える
• ブロックは二次元配列で管理されています
• Monaca入門のタイミングで配列の予習が可能
• 'red'や'gold'は文字なので「'」か「""」で囲む
42https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
応用:玉の色を変える(簡易編集)
• 画像ファイルをダブルクリックすると編集できます
• ペンで塗りつぶして下さい
• 保存後に閉じない場合は手動で×をクリック
Monaca体験(青本1章~)
44https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
青本のスライドを元にご紹介します
https://edu.monaca.io/wp-content/uploads/d284a013dfcfcb97ec75356a845b4f0e.pdf
Monacaの教育事例
46https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
西大和学園
• 中学1年生での一斉授業
• 約225人(約45人 × 5クラス)、全6回
• Chromebookによる教室授業
• iPadとAppleTVによる生徒発表
• 書籍「Monacaで学ぶはじめてのプログラミング」のβテスト
47https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
大分大学教育学部附属中学校
• Moancaを利用したチャットアプリの制作
• 技術・家庭科の公開授業で採用
• クラウドデータベースを活用
Top Related