このページは、Monaca Educationによるプログラミングを始めて行う方に向けた利用手引きのページです。

なお、エントリープランもしくはスタンダードプランを導入して頂く教育機関には指導者用の手引き書もご提供します。
教育機関としての導入につきましては、料金ページをご確認下さい。

はじめてのMonaca Education

対象

  • 個人としてMonaca Educationを利用する方
  • エントリープランでMonacaEducationを導入した学校の先生と生徒
  • スタンダードプランでMonacaEducationを導入した学校の先生と生徒

内容

準備

  • Monaca Educationでアカウントを入手する方法
  • Monaca Educationにログインする方法
  • スマートフォンやタブレット上で作品を動かす方法

使い方

  • プロジェクトの作成(『プログレッシブ・テンプレート』をダイレクトインポートする)
  • JavaScriptのプログラムを動かす方法
  • HTML文章を表示する方法
  • CSSで見た目を変更する方法

アカウント作成

※ 授業で利用する際は、アカウントの作成方法を先生にご確認下さい。
※ アカウント登録にはメールアドレスが必要です。
※ Googleアカウントがあれば、そちらと連携してアカウント作成することも可能です。詳しくはFAQのGoogleアカウントと連携するをご参照下さい。

「Gmailのメール受信ができない生徒・学生の方がGoogleアカウント連携で新規登録をする場合」は、メールアドレスを登録せずに、「Googleアカウントで作成」のリンクから会員登録をお願いします。

Googleアカウントと連携する

Googleアカウントでアカウント作成を行う

アカウント作成ページに進むと「Google アカウントで作成」というボタンがありますので、そちらを選択します。

利用中のGoogleアカウント一覧が表示されますので、連携したいGoogleアカウントを選択して下さい。

GoogleアカウントのGmailを元にMonacaEducation側にアカウントを作成します。なお、Monaca for Studyアプリ(デバッガー)を使うときなどにはパスワードが必要となるため、このタイミングでパスワードを設定して下さい。

このあとの流れは通常のアカウント登録と同様です。アクティベーションコードがあればアクティベーションコードを登録してアカウント作成をします。また、アクティベーションコードが無くてもFreeプランでアカウント作成は行えます。

メールアドレスでアカウント作成を行う

① Monaca Educationの公式サイト(今ご覧になっているサイトのことです)にアクセスします。
次に、右上の「アカウント作成」ボタンをクリックするとアカウント作成フォームが表示されます。
② アカウント作成フォームにメールアドレスとパスワードを入力して「アカウント新規作成」を選択すると「仮登録」状態となり、メールアドレスに確認のメールが届きます。

③ 仮登録メールに記載されたURLにアクセスすることで登録が完了します。この手順を踏まないと本登録には進めませんのでご注意下さい。
次に本登録画面で利用プランを選択します。
④ 本登録画面ではプラン選択を行えます。基本的にはFreeプラン(無料)を選択して登録を進めれば大丈夫です。
もし「アクティベーションコード」をお持ちの場合、そちらを登録することでEducationプランを利用できます。

ログイン

① Monaca Educationの公式サイト(今ご覧になっているサイトのことです)にアクセスします。
次に、右上の「ログイン」ボタンをクリックするとログインフォームが表示されます。
② ログインフォームにメールアドレスとパスワードを入力してログインして下さい。
もし会員登録を、Googleアカウントに連携する形で行っている場合は『Sign in with Google』を選択します。

③ もし、Sign in with Googleでログインする場合。アカウントの選択を行い、ログインして下さい。

デバッガーアプリのインストール(パソコン上のみでアプリを動かす場合は不要です)

教育版のデバッガーアプリの名称は「Monaca for Study」です。通常版Monacaのデバッガーは利用できませんのでご注意下さい。

Google Play で Monaca for Studyを入手 App Store で Monaca for Studyを入手

アプリのインストール

① App StoreまたはGoogle Playで「monaca」というキーワードで検索し、「Monaca for Study」をインストールしてください。

アプリの起動とログイン

② アプリを起動してログインして下さい。メールアドレスとパスワードはMonacaに登録したときと同じものを利用します。

アプリ開発入門

雛形のインポート

まず、以下のリンクよりプロジェクトの雛形をインポートしてください。

プログレッシブ・テンプレートをインポートする

このプロジェクトは2021年度に開発された最新のプロジェクト雛形になります。
JavaScriptをより簡単に学習するためのデバッグアシスタントや二次元配列の中身を確認できる便利関数などが搭載されています。

js/main.jsファイルを開く

左側のプロジェクトパネルにある、「js」フォルダの▷をクリックし、「main.js」ファイルをダブルクリックして下さい。
エディタのタブが開き、main.jsファイルが編集できるようになります。

JavaScritpで順次処理を実行する

main.jsに以下のようなプログラムを記述してみましょう。

x = 10;
y = 20;
z = x * y;
alert(z);

エディタ上で表すと状態になります。

記述したら保存します、保存するとalert()命令が実行されて変数zの値がアラート表示されます。

もし上手く行かない場合、保存忘れがないか、再度確認して下さい。
また、エラーがあれば、右側のプレビューパネル側にデバッグアシスタントが表示されます。

例えば、イコール記号の記述漏れなら、以下のようなエラーが出ます。

また、イコール記号などの記号を『全角』として打ってしまった場合、『もなかこみフォント』の機能として文字が□で囲まれて表示されます。一般的なプログラミング言語では全角記号がプログラムの文法としては利用できないため、半角に修正してみて下さい。

計算結果をデバッグアシスタントにログとして表示する

alert()の代わりに、log()命令を使ってみましょう。

x = 10;
y = 20;
z = x * y;
log(z);

※ 標準のJavaScriptにはlog命令はありません、デバッグアシスタントの機能です。
console.log()という標準的な命令を参考にしてます。

計算結果をプレビュー画面に文字として表示する

画面に簡単な文字を出すための命令として、write()命令が利用できます。より詳細な表示を行いたい場合はDOMの利用をご検討下さい。

x = 10;
y = 20;
z = x * y;
write(z);

※ 標準のJavaScriptにはwrite()やprint()命令はありません。デバッグアシスタントの機能です。
document.write()やdocument.writeln()という標準的な命令を参考にしています。

保存ボタンの押し忘れに注意

保存ボタンを押し忘れるとプレビューに反映されません。
未保存の状態では、フロッピーのアイコンが青くなります。

保存をするとボタンはグレーアウトします。なお、保存はショートカットキー(Ctrl + s)でも実施可能です。

index.htmlファイルのscriptタグの中にJavaScriptを直接記述することは可能か?

可能です。

『Monaca Education公式入門書』も入門部分は直接記述を採用しています。

scriptタグの中にJavaScriptを直接記述する前提のテンプレートは以下にございます。
クラシック・テンプレートをインポートする

プログレッシブ・テンプレートで利用できる便利関数一覧

log()関数
変数などの値をログとしてプレビュー側に表示します。
write()関数およびprint()関数
変数などの値をプレビュー側に表示します。
getDom()
DOMを取得します。

HTML上に画像を表示する

テンプレートのimgフォルダ内にあるsample.png画像を表示します。
『index.html』ファイルのbodyタグ直下に以下のタグを追記しましょう

    <img src="img/sample.png">

プレビューパネルにサンプル画像が表示されば成功です。

HTMLによる文章や画像の詳しい記述方法は公式テキストの2章に収録されています。

CSSで画像を大きくする

css/style.cssファイルを開く

左側のプロジェクトパネルにある、「css」フォルダの▷をクリックし、「style.css」ファイルをダブルクリックして下さい。
エディタのタブが開き、style.cssファイルが編集できるようになります。

img要素の横幅を300pxに設定

img {
    width:300px;
}

CSSによる装飾の詳しい記述方法は公式テキストの3章に収録されています。

今後の学習について

Monaca Education公式入門書を利用する

Monaca Educationでは公式入門書をご用意しております。書籍の案内ページは以下のボタンより確認できます。

公式入門書の案内 公式入門書・前半部分のPDFをダウンロード 公式入門書・学習サポートページ

書籍では『最小限テンプレート』が紹介されていますが、2021年度に提供が始まった『クラシック・テンプレート』や『プログレッシブ・テンプレート』をご活用頂く事も可能です。

・scriptタグに直接JavaScriptを記述する場合
クラシック・テンプレートをインポートする
・JavaScriptを別ファイルに記述する場合
プログレッシブ・テンプレートをインポートする

こちらをご利用頂くと『デバッグアシスタント』が搭載されいるため、入門レベルのデバッグが簡単になります。
※応用レベルのデバッグは、デバッグアプリの『Monaca for Study』やブラウザのデバッガーである『Dev tools』の利用をご検討下さい。

同じく、書籍ではzipによるプロジェクトのインポートが紹介されていますが、サポートページを利用すれば各章のサンプルプログラムを『ダイレクトインポート』でワンクリックでインポートできます。

ぷよぷよプログラミング

ぷよぷよプログラミングの専用サポートページに移動する

学校としてエントリープランやスタンダードを利用して授業を行う

エントリープランやスタンダードプラン導入校向けの専用サポートページを別途準備中です。