2025年9月16日

2025年9月13日更新

Monaca Educationクラウドデータベースとサンプルアプリの紹介

アシアル情報教育研究所岡本雄樹

Pocket

こんにちは、アシアル情報教育研究所の岡本です。

普段はスマホアプリ開発サービス『Monaca』のプログラミング教育版である『Monaca Education』のサポートや教材開発を行っております。

本日は夏の研修でも好評だったクラウドデータベース機能と二択の簡単なクイズアプリを紹介します。

Monaca Educationについて

Monaca Educationはプログラミング教育のための統合開発環境(IDE)です。

Monaca Education事業を始めた当初(2015年頃)は、プランの違いで特徴を出していましたが、2020年頃からはサーバーも分けて、毎年、独自の進化を続けております。

Monacaの特徴は『スマホアプリ（インストール型）』を開発できることですが、Monaca Educationは『スマホアプリ（Webアプリ）』の制作が行えるのが特徴です。

また、学校の授業という限られた時間の中でプログラミングの学習や制作制作を行えるように、細かい授業支援機能の他、コース型の教材や進捗管理機能も搭載しております。

なお、コース型の教材は教育機関のみへの提供となりますが、一般の方でもIDEの機能は無料からお使い頂くことができます。

また、一般の方でも利用可能な教材もございます。

アシアルからは書店流通教材「Monacaで学ぶ初めてのプログラミング　～モバイルアプリ入門編～」を、書店での取り寄せも可能な形で販売しております。

書店流通教材「Monacaで学ぶ初めてのプログラミング　～モバイルアプリ入門編～」

Monaca Educationを活用した外部の教材としては、『ぷよぷよプログラミング』が人気です。

ぷよぷよプログラミングについては先日、書籍も発売されました。

書籍『すぐわかる！ぷよぷよプログラミング SEGA公式ガイドブック』

発売記念イベントも行われ、アシアルの広報チームでも取材記事を公開いたしました。

ぷよぷよを作る！動かす！学ぶ！　SEGA公式ガイドブックの発売で進化する「ぷよぷよプログラミング」

MEクラウドデータベースの紹介

作品作りとデータベースは切っても切り離せないのですが、授業で使えるデータベースというのは結構、難しかったりします。

AlaSQLというJavaScript製のデータベースで教材を用意したこともありますが、高校の授業で使うにはテーブル設計などのハードルが高く、利用はあまり伸びませんでした。

クラウドで利用できるデータベースも幾つかありましたが、こちらも授業で利用する場合はアカウント管理などの問題があり、大学や専門学校と一部の高校での利用に留まっておりました。

そこで、Monaca Educationでもクラウドデータベースの企画・開発を進め、現在では『Monaca Educationクラウドデータベース（以下、MEデータベース）』という形で、提供を行っております。

（元々、Monacaでも『mobile backend』というデータベース機能を提供していたので、作れますよね？と、開発チームにお願いして作って貰いました。）

MEデータベースは1プロジェクト当たり1DBx1テーブル、レコードが1,000行分しかデータを入れられなかったり、列名が固定などの制約は色々と掛けておりますが、WebAPI経由での読み書きを行えるため、授業で情報技術を学ぶための道具としては、面白い設計になっているかと思います。

詳細は無料公開しているPDFドキュメントをご参照下さい。

MEクラウドデータベースの使い方(PDF)

データベース機能の記念開放中(制限有り)

MEデータベースは本来、有料プランでしか利用できないのですが、このたびMonaca Education事業が約10周年を迎えていることや、ユーザー数が40万人を突破したことを記念して、フリープランでも10レコードまで、データを書き込める形で機能を一部解放することにしました(2025年9月現在)。

恒久的な措置にするかは未定ですが、この機会に是非お試し下さい。

サンプルアプリ（2択のクイズアプリ）

以前、2日間の研修を行っていた際に『クイズアプリ』を作りたいという要望を初日に頂き、夜なべして作ったクイズアプリがありますので、そちらを紹介させて下さい。

※表示されているAPIキーは参照専用です。

Web公開機能で公開しておりますので、Webアプリとして遊ぶ場合は以下のQRコードを読み取るかクリックして下さい。

Monaca Educationで動かしたい方に向けて、『エクスポートで配布』機能で配付もいたします。

ログインした状態で以下のリンクをクリックして下さい。

クイズアプリをインポートする

クイズアプリのソースコード解説

前置きとして、このクイズアプリは『DOM』や『フォーム』を学ぶ前でも利用できるよう、敢えて、prompt()やconfirm()の命令で作成しております。

また、サンプルのクイズアプリには問題文が予めセットされていますが、これは、MEクラウドデータベースから取得を行っています。

APIキーとして、参照専用のキーを利用しているため、この情報を元に問題文を消したり追加することはできません。

取得部分のソースコードは以下のような形です。

let apikey = "7cf8b7bb-6909-4f66-b971-fc47b65563c5";

function answer() {
    let url = "https://db.monaca.education/select"
    url += "?apikey=" + apikey;
    url += "&random=1";
    alert("WebAPIを呼び出します：" + url);

    fetch(url)
        .then(function(response) {
            return response.json();
        })
        .then(function(db) {
            let choice = confirm(db.records[0].text0);
            if (choice == db.records[0].int0) {
                alert("正解！");
            } else {
                alert("不正解");
            }
            alert(db.records[0].text1);
    });
}

APIリクエスト用の文字列を連結した上で、fetch()を使ってリクエストを行い、データを取得しています。

登録部分のソースコードは以下のような形です。

function insert() {
    let text0 = prompt("問題文を入れて下さい");
    let int0 = confirm("その答えは○ですか？");
    let text1 = prompt("解説文もお願いします");
    let url = "https://db.monaca.education/insert"
    url += "?apikey=" + apikey;
    url += "&text0=" + text0 + "&int0=" + (int0 + 0) + "&text1=" + text1;
    alert("WebAPIを呼び出します：" + url);

    fetch(url)
        .then(function(response) {
            return response.json();
        })
        .then(function(result) {
            alert("登録しました");
            console.log(result);
    });
}