準備

実習中心の授業を始めるためには、生徒全員分の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版）一覧

単元計画（合計19時間）

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

情報デザイン（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を参考にすることで、初めての制作でも完成度の高いコンテンツを制作できます。

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

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

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

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

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

さらに、2つ目のAPSを用いて、プログラミングの学習を進めます（3時間）。2つのAPSを組み合わせて学習することで、様々なプログラミングの知識・技能を習得できます。

APSの選択

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

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

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

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

先生用ダウンロード資料

資料

学習教材

生徒用URLと使用法

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

情報デザイン

  1. Monaca Educationの準備と基本操作を習得する
    • はじめてのMonaca Education（一般向け）
    • アカウントを用意します。生徒用のアカウントを登録・発行済みの場合、改めて作成する必要はありません。準備済みのアカウントを使って、「ログイン」から始めてください。
    • 上記ページの「プロジェクトを作成して簡単なプログラムを動かす」の手順にしたがって、プロジェクトを作成し、プログラムを作成して動作を確認することが目標です。
  2. Monaca EducationとAPSを用いて、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時間使う必要はありません。
    • ライセンスが有効であれば、生徒用のアカウントを登録・発行済みの場合、改めて作成する必要はありません。準備済みのアカウントを使って、「ログイン」から始めてください。
    • 上記ページの「プロジェクトを作成して簡単なプログラムを動かす」の手順にしたがって、プロジェクトを作成し、プログラムを作成して動作を確認することが目標です。
    • 情報デザイン単元で使用してから時間が経過していて、Monaca Educationを久しぶりに使う場合、ログインや基本操作を思い出すために時間を取る必要があります。また、「プログラミング」というテーマに対する不安感がある場合、次のリンク先ページを用いて「ブロック崩し」プロジェクトを作成し、カスタマイズすることに1時間目を割くことが考えられます。
  2. Monaca EducationとAPSを用いてプログラミングを学ぶ(1)
  3. アプリケーションを制作する(1)
    • アプリプログラミングシートのサポートページ
    • 2.で学習したAPSをベースに、カスタマイズして作品を制作します。当該のAPSを再度インポートして、新しいプロジェクトを作成します。
    • 制作できたら、動作をテストします。意図通りに動作しない場合、アプリケーションに修正を加えます。
    • 制作したアプリケーションを作品として提出させます。
    • 「評価基準」を用いて、評価します。
  4. Monaca EducationとAPSを用いてプログラミングを学ぶ(2)
    • アプリプログラミングシートのサポートページ
    • 1回目とは別のAPSを選ぶことで、プログラミングについて知識・技能の幅を広げ、理解を深めることができます。
    • あらかじめ、上記「学習教材 APS資料」からダウンロードしておいたAPS資料（PowerPointファイル）につき、必要なページを生徒に配布します。
    • 授業で使用するAPSを選び、「インポート」ボタンをクリックして、Monaca Educationにインポートします。APSを選ぶ際は、プログラミング言語（Python/JavaScript）別になっていることに注意するようにします。
    • 配布資料を用いて、実習・学習を行います。導入部分を先生がサポートした後、「カスタマイズ」以降は各生徒のペースで進めさせることができます。
    • 先生は、ダウンロードするAPS資料に含まれている補助スライド（PowerPointファイル）を使って、生徒の理解を助けることができます。
  5. アプリケーションを企画・設計する
    • 2.または4.で使用したAPSのアプリケーションを基盤にして、オリジナルのアプリケーションを企画します。単にアプリケーションのタイトルを変更する、「カスタマイズ」例の通りにする、でも良いと伝えることで、企画を始めることができます。
    • アプリケーションの制作に必要な設計をします（条件分岐や繰り返しのフローチャートを作成する、など）。
    • 制作に必要な資料や画像を収集します。
  6. アプリケーションを制作する(2)
    • アプリプログラミングシートのサポートページ
    • 既習のAPSをベースに、カスタマイズして制作する場合、当該のAPSを再度インポートして、新しいプロジェクトを作成します。
    • 収集した資料や画像を用いて、設計したアプリケーションを制作します。
    • 制作できたら、動作をテストします。企画・設計通りに動作しない場合、アプリケーションに修正を加えます。
    • 企画・設計した内容が高度で、企画・設計通りに動作するような実装が難しい場合、「できるだけ動作する範囲が多くなるように制作する」ようにします。
    • 制作したアプリケーションを作品として提出させます。
    • 「評価基準」を用いて、評価します。