準備

実習中心の授業を始めるためには、生徒全員分のMonaca Educationアカウントが必要です。

Googleアカウント、Microsoftアカウントと連携して、Monaca Educationアカウントを登録できるほか、有償プランをお申し込みいただいた場合はアシアルによるアカウントの一括発行も行えます。学校のITサービスの利用状況に合わせて、アカウントの登録・発行方法を選んでください。

アカウントの準備のほか、機材やネットワークの確認については、下記ページに詳細を記載しています。

Monaca Education導入手引き（Web版・外部教材対応版）

https://edu.monaca.io/guide

APS（アプリプログラミングシート）を選ぶ

単元「情報デザイン」については、APSくだもの図鑑を使います。

単元「プログラミング」については、授業で使用するプログラミング言語にあわせて、APS（アプリプログラミングシート）を選択します。

授業でどのAPSを利用するかについては、下記ページを参考にしてください。

単元「情報デザイン」のAPS くだもの図鑑

単元「プログラミング」のAPS（Python・Brython版）一覧

単元「プログラミング」のAPS（JavaScript版）一覧

単元計画（合計15時間）

単元「情報デザイン」と、単元「プログラミング」の単元計画は次の通りです。

情報デザイン（HTML/CSS） （小計7時間）

内容 授業時間
1.Monaca Educationの準備と基本操作を習得する 1
2.Monaca EducationとAPSを用いて、HTML、CSSの基礎を学ぶ 3
3.Webコンテンツを企画・設計する 1
4.Webコンテンツを制作する 2

最初に、Monaca Educationへのログインや、基本操作を習得します（1時間）。プロジェクトを作成し、変更し、保存して、正しく編集することでプログラムの動作が変わることを確認します。

次に、APS（アプリプログラミングシート）を用いて、HTML、CSSの基礎を学習します（3時間）。アシアルが提供する、作成済みのWebページを変更・カスタマイズしていく方法で、実習を行いながら学びます。

「APSくだもの図鑑」の学習活動の内容は、下記ページで確認できます。

単元「情報デザイン」のAPS くだもの図鑑

単元「情報デザイン」の最後に、オリジナルのWebコンテンツを企画・設計し（1時間）、制作します（2時間）。APSのHTML・CSSを参考にすることで、初めての制作でも完成度の高いコンテンツを制作できます。

プログラミング （小計8時間）

内容 授業時間
1.Monaca Educationの準備と基本操作を復習する 1
2.Monaca EducationとAPSを用いてプログラミングを学ぶ 3
3.アプリケーションを企画・設計する 1
4.アプリケーションを制作する 3

最初に、Monaca Educationのログイン、基本操作を復習します（1時間）。

※情報デザインの実習で、生徒がMonaca Educationの基本操作をマスターしていれば、この時間は省略できます。

次に、APSを用いて、プログラミングの基礎を学習します（3時間）。アシアルが提供する、完成しているアプリケーションを変更・カスタマイズしていく方法で、実習を行いながら学びます。

単元「プログラミング」の最後に、オリジナルのアプリケーションを企画・設計し（1時間）、制作します（3時間）。APSの動作するプログラムを参考にすることで、プログラミングが初めての生徒でも完成度の高いアプリケーションを制作できます。

APSの選択

どのAPSを選ぶかは、下記のリンク先のページをご覧の上、選択してください。

単元「プログラミング」のAPS（Python・Brython版）一覧

単元「プログラミング」のAPS（JavaScript版）一覧

先生用ダウンロード資料

資料

学習教材

生徒用URLと使用法

以下では、授業の各時間で生徒に案内するURLと、各時間での教材の使用法・学習活動を示します。

情報デザイン

  1. Monaca Educationの準備と基本操作を習得する
    • はじめてのMonaca Education（一般向け）
    • アカウントを用意します。生徒用のアカウントを登録・発行済みの場合、改めて作成する必要はありません。準備済みのアカウントを使って、「ログイン」から始めてください。
    • 上記ページの「プロジェクトを作成して簡単なプログラムを動かす」の手順にしたがって、プロジェクトを作成し、プログラムを作成して動作を確認することが目標です。
  2. 作成済みのWebページを用いて、HTML、CSSの基礎を学ぶ
    • アプリプログラミングシートのサポートページ
    • 上記ページから、「くだもの図鑑」をインポートします。
    • APSの資料は、上記「先生用ダウンロード資料」からダウンロードし、オンラインまたは印刷して生徒に配布してください。
    • 動作の確認からはじめて、HTMLやCSSファイルの内容を見ながら、カスタマイズを行い、HTMLやCSSの概念や機能を学びます。
  3. Webコンテンツを企画・設計する
    • HTMLとCSS、画像ファイルなどで作成するWebコンテンツを企画します。「○○図鑑を作ろう」と投げかけることで、企画が全く出ないことを防ぐことができます。「図鑑ではないコンテンツを作りたい」場合は、学習済みのHTML、CSSの機能で実現できるように、小さなWebコンテンツを目指すようにします。
    • Webコンテンツの構造を設計します。「くだもの図鑑」の構造（※トップページと詳細ページをボタンとリンクで結合する）を利用することができます。
    • コンテンツの制作に必要な資料（文章や画像など）を集めます。
  4. Webコンテンツを制作する
    • アプリプログラミングシートのサポートページ
    • 「○○図鑑」を企画・設計した場合、上記ページから、「くだもの図鑑」をインポートして、作成するコンテンツの基盤にします。
    • 図鑑の構成（index.htmlから、個々のページにリンクする）を利用した上で、他のテーマを扱う図鑑のWebページを作成します。
    • 制作したWebコンテンツを作品として提出させます。
    • 「評価基準」を用いて、評価します。

プログラミング

  1. （オプション）Monaca Educationの準備と基本操作を習得する
    • はじめてのMonaca Education（一般向け）
    • 上記の単元「情報デザイン」の1時間目と同じページ、同じ内容です。単元「情報デザイン」を通じて、生徒が十分にMonaca Educationのログイン、IDE操作に習熟しているのであれば、1時間使う必要はありません。
    • ライセンスが有効であれば、生徒用のアカウントを登録・発行済みの場合、改めて作成する必要はありません。準備済みのアカウントを使って、「ログイン」から始めてください。
    • 上記ページの「プロジェクトを作成して簡単なプログラムを動かす」の手順にしたがって、プロジェクトを作成し、プログラムを作成して動作を確認することが目標です。
  2. Monaca EducationとAPSを用いてプログラミングを学ぶ
  3. アプリケーションを企画・設計する
    • 2.で使用したAPSのアプリケーションを基盤にして、オリジナルのアプリケーションを企画します。単にアプリケーションのタイトルを変更する、「カスタマイズ」例の通りにする、でも良いと伝えることで、企画を始めることができます。
    • アプリケーションの制作に必要な設計をします（条件分岐や繰り返しのフローチャートを作成する、など）。
    • 制作に必要な資料や画像を収集します。
  4. アプリケーションを制作する
    • アプリプログラミングシートのサポートページ
    • 既習のAPSをベースに、カスタマイズして制作する場合、当該のAPSを再度インポートして、新しいプロジェクトを作成します。
    • 収集した資料や画像を用いて、設計したアプリケーションを制作します。
    • 制作できたら、動作をテストします。企画・設計通りに動作しない場合、アプリケーションに修正を加えます。
    • 企画・設計した内容が高度で、企画・設計通りに動作するような実装が難しい場合、「できるだけ動作する範囲が多くなるように制作する」ようにします。
    • 制作したアプリケーションを作品として提出させます。
    • 「評価基準」を用いて、評価します。