Monaca Education デモンストレーション アシアル情報教育研究所 岡本 雄樹 https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 1
献本のご依頼・ありがとうございます https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 2
Monacaとは
Monacaとは スマホやタブレットアプリが作れます https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 4
Monacaの特徴 ブラウザだけで動作するクラウドIDE(統合開発環境) メニューバー (さまざまな機能を呼び出せます) コードエディター (ファイルの編集を行います) プロジェクトパネル (ファイルの管理などを行 います) デバッグパネル (エラー情報などを表示します) https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved. ライブプレビュー (動作確認を行います) 5
Monacaの特徴 作品が手元のスマホやタブレットで動き出す! 端末のセンサーを活用でき、中学技術の計測と制御にも最適 QRコードの読み込みにも対応 https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 6
【デモ】Monacaでブロック崩し体験
教育版公式サイト URL にアクセス https://edu.monaca.io/ https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 8
Monaca のアカウント登録 https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 9
プラン選択 https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 10
ダッシュボード • 開発中のアプリはプロジェクト単位で管理します • 新しいプロジェクトを作ると一覧に並びます https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 11
新しいプロジェクトを作る • 今回は「ブロック崩し」を選択して作ってみましょう • プロジェクト名は自由に設定できます https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 12
プロジェクトを開く • 一覧からプロジェクトを選択して下さい • 「クラウドIDEで開く」を選択して下さい TIPS 無限ループなどで開けなくなったプ ロジェクトはセーフモードで開けます。 https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 13
MonacaIDE(統合開発環境) • ファイル管理・編集・動作確認などを行えます メニューバー エディター プロジェクトパネル デバッグパネル プレビュー https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 14
フォルダとファイルを開く プロジェクトパネルのファイルツリーを操作して下さい フォルダの▶を クリック ファイルを ダブルクリック https://edu.monaca.io/ エディタ側の タブが開きます Copyright © Asial Corporation. All Right Reserved. 15
プログラムの変更(玉の数を増やす) • ブロック崩しプログラムの本体は「main.js」ファイルです • プロジェクトパネルのファイルツリーからmain.jsを探して「ダブ ルクリック」して下さい • 5行目の変数SETTINGS_BALL_NUMを1000に「修正」して 下さい • main.jsの変更を「保存」して下さい。 • プレビュー上の玉の数が増えれば成功です https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 16
玉が増えれば成功 「保存」はボタンかショートカットキー(Ctrl + s) https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 17
ご不明点がございましたらこちらまで 電話 :03-3868-0670 メール:[email protected] https://edu.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 18