Upgrade to Pro — share decks privately, control downloads, hide ads and more …

プログラミング単元の授業のポイント 進め方とクラウド型実習環境の活用

プログラミング単元の授業のポイント 進め方とクラウド型実習環境の活用

2022年11月12日開催の情報科教育支援セミナー「情報Ⅰ」の授業に役立つ『指導と評価の一体化』と『プログラミング授業のポイント』での発表資料。

More Decks by アシアル情報教育研究所

Other Decks in Education

Transcript

  1. Copyright © Asial Corporation. All Rights Reserved.
    プログラミング単元の授業のポイント・進め方と
    クラウド型実習環境の活用
    1

    View full-size slide

  2. Copyright © Asial Corporation. All Rights Reserved.
    1. プログラミング単元の授業のポイント
    2. 教科書のページに対応する授業案
    ① 『最新情報I』第6章 Python版+ノートより
    ・ 2節 プログラミングの実践(p.168〜170)
    ② 『高校情報I』より
    ・ 33 関数(p.140〜141)
    3. クラウド型実習環境Monaca Educationの活用
    付録: URLのご案内

    View full-size slide

  3. Copyright © Asial Corporation. All Rights Reserved.
    プログラミング単元の授業のポイント

    View full-size slide

  4. Copyright © Asial Corporation. All Rights Reserved.
    プログラミング単元の授業のポイント
    準備
    • 授業の準備
    • ツール等の準備
    • 記録と評価(3観点)の計画
    授業
    • 導⼊
    • 説明
    • 例題
    • 実習/確認問題
    評価 • 記録の収集
    • 評価の実施
    プログラミング
    単元のポイント

    View full-size slide

  5. Copyright © Asial Corporation. All Rights Reserved.
    【教科書の記述】 【授業での「導入」案】
    授業での導入・説明のポイント
    概念・用語の定義
    プログラム例の解説
    プログラム例の動作の確認
    例題
    練習問題
    プログラムで解決する
    具体的な「課題」の提示
    プログラム例の動作の確認
    プログラム例の解説
    概念・用語の説明
    練習問題

    View full-size slide

  6. Copyright © Asial Corporation. All Rights Reserved.
    授業での導入・説明のポイント:例 変数
    n 例: 「変数」
    『最新情報I』:
    「変数とは,メモリ上のデータ(値)を格納
    する領域のことをいい,その領域に付けた
    名前を変数名という」
    『高校情報I』:
    「変数は値や文字列を保管する箱のような
    もの」

    View full-size slide

  7. Copyright © Asial Corporation. All Rights Reserved.
    授業での導入・説明のポイント:例 変数
    n 例: 「変数」
    『最新情報I』:
    「変数とは,メモリ上のデータ(値)を格納
    する領域のことをいい,その領域に付けた
    名前を変数名という」
    『高校情報I』:
    「変数は値や文字列を保管する箱のような
    もの」
    answr a b
    +
    =
    7 4
    ①先に右辺を計算
    ②代入
    a = 7
    b = 4
    answr = a + b
    print(answr)
    a = 7
    print( a ) // 変数aを表示
    b = 4
    print( b ) // 変数bを表示
    answr = a + b
    print(answr)
    a = 8
    b = 14
    answr = a + b
    print(answr)
    プログラム⾔語に計算させてみよう

    View full-size slide

  8. Copyright © Asial Corporation. All Rights Reserved.
    授業での導入・説明のポイント
    n 教科書の説明
    ・ 概念や用語の定義 → プログラム例 → 動作の確認 → 問題
    n 授業では、教科書の順序と逆にする
    1. まず、身近で個別的・具体的な課題を短く紹介する
    2. 課題を解決するプログラム例を簡単に見て、動作を示す
    3. 「この動作は、どのように実現されているか?」文法等、プログラ
    ムの簡単な説明をする
    4. 動作・プログラムを確認したあとで、最後に概念や用語を説明し、
    一般的な問題に応用可能になることを目指す
    プログラミング実習環境を⽤意して

    View full-size slide

  9. Copyright © Asial Corporation. All Rights Reserved.
    授業での説明のポイント
    • 教科書の豊富な記述
    • 文章による説明
    • プログラム例
    • 補足要素(側注など)
    • 図(概念図、フロー
    チャートなど)
    • 表
    • 教科書の記述を補完する
    • 概念図を追加で提示する
    • プログラム例を増やす
    • 部分的に変更する
    • 動作させる
    • 特定の部分を強調する例を
    作る
    a = 7
    b = 4
    answr = a + b
    print(answr)
    a = 7
    print( a ) // 変数aを表示
    b = 4
    print( b ) // 変数bを表示
    answr = a + b
    print(answr)
    最新情報I Python教材より
    answr a b
    +
    =
    7 4
    ①先に右辺を計算
    ②代入

    View full-size slide

  10. Copyright © Asial Corporation. All Rights Reserved.
    留意点
    n 説明・実習時の留意点: 事前準備が重要
    ・ どんな概念図がよいか、あらかじめ調べ、考える
    ・ プログラム例をその場で書いて、実行してみせる
    ・ 「プログラムをこうしたら、どうなる?」という発問により、ラ
    イブ感が生まれる
    ・ 練習が必要。実は「その場」ではない
    ・ 要注意:エラーなど、トラブルが起きたときに備える必要がある
    ・ 「プログラム例を増やす」取り組みを、練習問題として生徒
    に提示する場合も、どんな例を作らせるとよいか検討が必要

    View full-size slide

  11. Copyright © Asial Corporation. All Rights Reserved.
    まとめ:プログラミング単元の授業のポイント
    準備
    • 授業の準備
    • ツール等の準備
    • 記録と評価(3観点)の計画
    授業
    • 導⼊
    • 説明
    • 例題
    • 実習/確認問題
    評価 • 記録の収集
    • 評価の実施
    プログラムで解決したい
    具体的な「課題」の提示
    プログラム例の動作の確認
    プログラム例の解説
    概念・用語の説明
    練習問題
    プログラミング実習環境を⽤意して

    View full-size slide

  12. Copyright © Asial Corporation. All Rights Reserved.
    教科書のページに対応する授業案

    View full-size slide

  13. Copyright © Asial Corporation. All Rights Reserved.
    教科書のページに対応する授業案
    1. 『最新情報I』第6章 Python版+ノートより
    ・ 2節 プログラミングの実践(p.168〜170)
    2. 『高校情報I』より
    ・ 33 関数(p.140〜141)

    View full-size slide

  14. Copyright © Asial Corporation. All Rights Reserved.
    教科書のページに対応する授業案
    【以下の説明について】
    ・ 教科書のプログラミング単元のうち、一部のページの授業案を示
    します
    ・ 全ページではありません
    ・ 本日の配布資料の内容の全ては説明しません
    ・ 説明しなかった部分については、後ほど配布資料を確認してください
    ・ クラウド型環境Monaca Educationを用いて、実習を行います
    ・ Monaca Educationや、アシアルの提供するサポートページについては
    後述します

    View full-size slide

  15. Copyright © Asial Corporation. All Rights Reserved.
    2節 プログラミングの実践(p.168〜170)
    授業案:『最新情報I』第6章 Python版+ノートより

    View full-size slide

  16. Copyright © Asial Corporation. All Rights Reserved.
    2節 プログラミングの実践(p.168〜170)
    1. 変数を使用したプログラム
    • 説明
    • 例題
    • 考え方
    • 図解
    • 解答例
    • 確認問題
    1. プログラミングの方法

    View full-size slide

  17. Copyright © Asial Corporation. All Rights Reserved.
    2節 プログラミングの実践(p.168〜170)
    n 1. 変数を使用したプログラム
    ・ 導入時の課題の例:
    「コンピュータを電卓代わりにしてみよう」
    ・ 概念: 値、変数、代入、加算、表示する関数、型
    ・ 補足の概念図①
    ① 変数の計算
    ② =による代入
    ・ 補足
    • 右辺に計算があれば、先に計算した後、結果を左辺の変数に代入する
    ・ 想定される質問
    • 「左右が等しいことを示すには?」 → ==
    • 「=の左辺で計算し、右辺に代入することは?」 → できない
    answr a b
    +
    =
    7 4
    ①先に右辺を計算
    ②代入

    View full-size slide

  18. Copyright © Asial Corporation. All Rights Reserved.
    2節 プログラミングの実践(p.168〜170)
    n 1. 変数を使用したプログラム
    ・ プログラムの変更例①
    ・ 変数が値を入れられる箱のようなものであることを確認する
    ・ 表示する関数print()に慣れる
    ・ プログラムの変更例②
    ・ 変数に2回値を代入する
    ・ 後に代入した値が残る
    ・ プログラムは、書いてある順に、上から実行される(順次実行)
    a = 7
    b = 4
    answr = a + b
    print(answr)
    a = 7
    print( a ) // 変数aを表示
    b = 4
    print( b ) // 変数bを表示
    answr = a + b
    print(answr)
    最新情報I Python教材より
    a = 7
    print( a ) // 変数aを表示
    a = 10
    print( a )

    View full-size slide

  19. Copyright © Asial Corporation. All Rights Reserved.
    2節 プログラミングの実践(p.168〜170)
    n その他のプログラムの変更例のアイデア
    ・ 他の算術演算子や、整数でない値を使ってみる
    ・ ー、*、/、%
    ・ 小数
    ・ 話題を広げて、他の単元・ページの内容(「コンピュー
    タの仕組み」など)につなげることができる
    ・ 掛け算(*)で、とても大きな値を作り、print()で表示する
    ・ 小数を含む値の引き算をし、誤差が生じることを見る
    ・ エラーの種類を学ぶ
    ・ 0で割り算(/)すると、(文法的には正しいが)実行時エ
    ラーが起きる

    View full-size slide

  20. Copyright © Asial Corporation. All Rights Reserved.
    2節 プログラミングの実践(p.168〜170)
    n 2.選択構造を使用したプ
    ログラム
    ・ 導入例:午前中なら「おはよう」と
    あいさつし、午前中でなければ「こ
    んにちは」と挨拶するアプリ/Webサ
    イト
    ・ 概念: 制御文、選択構造、
    余りを求める計算(%演算子)、
    比較演算、==演算子
    ・ 条件によって、動作の流れを変える
    プログラムを作成できる
    ・ 「aならばAを実行し、aでなければ
    Bを実行する」という例を確認する
    最初に「条件によって振る舞いを変える」という概念を確認することが重要

    View full-size slide

  21. Copyright © Asial Corporation. All Rights Reserved.
    2節 プログラミングの実践(p.168〜170)
    n 「プログラム」と「条件によって振る舞いを変える」
    ・ 学校行事や、イベント、コンサートなどの「プログラム」は、一連
    の流れは普通は変わらない
    ・ 「順次」制御構造の説明に「行事のプログラムと同じように」とい
    うたとえを使って説明すると、そのたとえに引っ張られて、「条件
    によって振る舞いを変える」の理解が難しくなる可能性がある
    n 「AならばB」「AでなければC」のような例を検討してみる
    ・ 例: 次のようなマイルールがある人がいる
    ・ 「朝食がパンならば、昼ごはんはカレーにする」
    ・ 「朝食がご飯ならば、昼ごはんはラーメンにする」
    この人の明日の朝食がパンならば、昼ごはんは何にすることになる?

    View full-size slide

  22. Copyright © Asial Corporation. All Rights Reserved.
    2節 プログラミングの実践(p.168〜170)
    n 2.選択構造を使用したプログラム
    ・ プログラムの変更例①
    ・ 割り算の結果で、制御の流れが変わることを確認する
    ・ プログラムの変更例②
    ・ 比較演算子: !=
    ・ 比較結果が逆になる
    a = 123
    b = 4
    rmndr = a % b
    if rmndr == 0:
    print('約数である')
    else:
    print('約数ではない')
    a = 123
    b = 3
    rmndr = a % b
    if rmndr == 0:
    print('約数である')
    else:
    print('約数ではない')
    remainder:余り
    a = 123
    b = 4
    rmndr = a % b
    if rmndr != 0:
    print('約数である')
    else:
    print('約数ではない')

    View full-size slide

  23. Copyright © Asial Corporation. All Rights Reserved.
    2節 プログラミングの実践(p.168〜170)
    n 2.選択構造を使用したプログラム
    a = 123
    b = 3
    rmndr = a % b
    if rmndr == 0:
    print('約数である')
    else:
    print('約数ではない')
    print('おまけ')
    a = 123
    b = 3
    rmndr = a % b
    if rmndr == 0:
    print('約数である')
    else:
    print('約数ではない')
    print('おまけ')
    字下げあり
    字下げなし
    字下げ(インデント)の意味を確認する
    • 字下げがあるとき、else:ブロック
    (コードのまとまり)に含まれる
    • 字下げがないとき、else:ブロックとは
    違うブロックとして扱われる
    インデントは、Pythonの特徴であり、
    要注意のポイント

    View full-size slide

  24. Copyright © Asial Corporation. All Rights Reserved.
    2節 プログラミングの実践(p.168〜170)
    n 補足の小話
    ・ 「演算子」の「子」とは?
    ・ 算術演算子: +, -, *, /, %
    ・ 比較演算子: ==, !=, >, >=, <, <=
    ・ コンピュータ科学は、英語圏で発展してきた
    ・ 用語も英語で作られた
    ・ 「演算子」の元の語は、operator (演算する者)
    ・ 動詞に、-erや-orをつけると、「〜する者」という意味になる
    ・ 翻訳するとき、-erや-orに「子」を当てた
    ・ では、演算の対象になる値は何という?
    ・ 英語では operand。日本語には「演算数」と訳されている

    View full-size slide

  25. Copyright © Asial Corporation. All Rights Reserved.
    2節 プログラミングの実践(p.168〜170)
    n 3.反復構造を使用したプログラム
    ・ 導入例:
    ・ 「1から10まで全部足す」プログラムを書く
    としたら?
    ・ 「1から100まで」なら?
    ・ 概念: 反復構造、
    for文、while文、
    range()、条件式
    ・ 一連の処理を、複数回繰り返す
    ・ for文では、range()で範囲を作り、その
    範囲の要素を取り出して、処理に使う
    ・ while文では、数を数える変数を作り、
    その変数の値を更新しながら、条件式で
    終了するときを判定する
    教科書はいきなり「例題」を考えさせているが、「7の段」は例として説明に使
    い、問題としては別に「『8X1から8X9』を作る」という方法が考えられる

    View full-size slide

  26. Copyright © Asial Corporation. All Rights Reserved.
    2節 プログラミングの実践(p.168〜170)
    n 3.反復構造を使用したプログラム
    ・ range(1,10)… range:範囲
    ・ for i in range(1,10):では、作成した範囲から1つず
    つ、取り出しては変数iに代入する
    ・ プログラムの変更例①
    ・ 繰り返しの回数を変える ※右の例では、×20は含まれない
    range(1,10) 1, 2, 3, 4, 5, 6, 7, 8, 9 ※10は含まない
    for i in range(1,10):
    print(7*i)
    for i in range(1,20):
    print(7*i)

    View full-size slide

  27. Copyright © Asial Corporation. All Rights Reserved.
    2節 プログラミングの実践(p.168〜170)
    n 3.反復構造を使用したプログラム
    ・ プログラムの変更例②
    ・ プログラムの変更例③
    for i in range(1,10):
    print(7*i)
    print(8*i)
    for i in range(1,10):
    print(7*i)
    print(8*i)
    インデントの意味を確認する
    i = 1
    while i<=9:
    print(7*i)
    i=i+2
    増分の意味を確認する
    インデントは、Pythonの特徴であり、
    要注意のポイント

    View full-size slide

  28. Copyright © Asial Corporation. All Rights Reserved.
    33 関数(p.140〜141)
    授業案:『高校情報I』より

    View full-size slide

  29. Copyright © Asial Corporation. All Rights Reserved.
    33 関数(p.140〜141)
    【説明】
    1. 関数
    2. 関数の定義と呼び出
    す方法
    3. 変数の有効範囲
    • 概念図、文法説明、表
    による補足
    【例題】
    1. 関数
    2. グローバル変数と
    ローカル変数
    • フローチャート
    問題:
    例題1のプログラムを改変
    する

    View full-size slide

  30. Copyright © Asial Corporation. All Rights Reserved.
    33 関数(p.140〜141)
    n 導入:組み込み関数
    ・ このページ以前に出てきた関数の例を確認する
    ・ print()
    ・ input()
    ・ random.randint()
    ・ range()
    ・ 発問: 組み込み関数の例から、関数の特徴を挙げる
    ・ 回答例:
    ・ 名前の後に( )が付く
    ・ 名前は全て小文字で、動作・機能を表す英単語が使われている
    ・ ( )の中に、値を入れられる。カンマで区切れば、複数の値を渡せる
    ・ ⇨ この後、作成するときのヒントになる

    View full-size slide

  31. Copyright © Asial Corporation. All Rights Reserved.
    33 関数(p.140〜141)
    プログラム例
    def area(x, y):
    z = x * y / 2
    return z
    a = float(input('底辺 '))
    b = float(input('高さ '))
    c = area(a, b)
    print('面積=', c)
    • 関数を定義する
    • 仮引数を2つ定義する
    • returnで値を戻す
    • 組み込み関数を入れ子で呼び出す
    • 入力を受け取る
    • 入力された値を(文字列から)
    浮動小数点数に変換する
    • 先に定義した関数を呼び出す
    • 変数a,bの値を関数areaに渡す
    • 関数area内のreturnで戻された
    値を変数cに代入する
    定義
    組み込み関数の
    呼び出し(入れ子)
    ユーザー定義関数の
    呼び出し・
    戻り値の受け取り

    View full-size slide

  32. Copyright © Asial Corporation. All Rights Reserved.
    33 関数(p.140〜141)
    n 概念図:関数を定義する
    ・ 参考: 関数は“函数”という書き方もされた
    ・ 仮引数は、関数に値を入れるための「名前付きの入り口」を作る
    ・ 「入り口」なので、定義した時点では値は入っていない
    ・ 戻り値には名前はない
    関数area( )
    戻り値
    仮引数
    x x
    仮引数や、その他の変数を使った計算
    ・・・
    ・・・
    return 値(変数)

    View full-size slide

  33. Copyright © Asial Corporation. All Rights Reserved.
    33 関数(p.140〜141)
    関数の定義
    n キーワード
    └ def
    └ define:定義する
    n 使用する記号
    └ ( ), :
    n 文法上の注意点
    └ インデント
    n 定義と呼び出しの順序
    └ 関数定義が先、呼び出しは後に書く
    • 用語
    • 引数
    • 仮引数
    • 呼び出されたときに
    渡される値を受け取
    る変数
    • 実引数
    • 呼び出すときに渡す
    実際の値
    • 戻り値(返り値)

    View full-size slide

  34. Copyright © Asial Corporation. All Rights Reserved.
    33 関数(p.140〜141)
    n 指導時の留意点
    ・ 新たに登場する概念が多い
    ・ これまで、プログラムのソースコードの「上から下」へ
    の実行が基本であったが、「関数の定義を先に書いてお
    き、後のコードで呼び出す」という制御の流れが出てく
    るので、混乱しやすい
    ・ 時間をとること、予習や復習に取り組む仕掛けを用意す
    ること、提出課題を設定することを推奨

    View full-size slide

  35. Copyright © Asial Corporation. All Rights Reserved.
    33 関数(p.140〜141)
    n 概念図:定義した関数を呼び出す
    a = float(input('底辺 '))
    b = float(input('高さ '))
    c = area(a, b)
    print('面積=', c)
    関数の名前を指定し、
    引数の実際の値(実引数)を渡して、
    呼び出す
    関数
    area( )
    仮引数
    戻り値
    戻り値は呼び出し元に返される。
    代入式の右辺で関数を呼び出していたら、
    左辺に戻り値が代入される
    プログラム変更例:関数の呼び出し前・関数の中・関数の呼び出し後に
    print()を入れて、動作順を確認する

    View full-size slide

  36. Copyright © Asial Corporation. All Rights Reserved.
    n プログラム変更例
    ・ 関数の呼び出し前・関数の中・関数の呼び出し後に
    print()を入れて、動作順を確認する
    def area(x, y):
    print("関数areaの中")
    z = x * y / 2
    return z
    print("関数定義の後")
    a = float(input('底辺 '))
    b = float(input('高さ '))
    print("関数呼び出しの前")
    c = area(a, b)
    print("関数呼び出しの後")
    print('面積=', c)

    View full-size slide

  37. Copyright © Asial Corporation. All Rights Reserved.
    33 関数(p.140〜141)
    n 用語・概念の補足(1)
    ・ 代入演算子=は、右辺を先に評価(実行)して、その結
    果を左辺に代入する
    ・ 関数がスコープを作る
    ・ スコープ
    ・ 「変数が見える・使える範囲」
    ・ グローバルスコープは1つだけ
    ・ 関数が2つある場合、それぞれにローカルスコープができる
    ・ 関数Aのローカルスコープ: 関数Aの中から見える・使える範囲の変数群
    ・ 関数Aのローカルスコープ: 関数Bの中から見える・使える範囲の変数群

    View full-size slide

  38. Copyright © Asial Corporation. All Rights Reserved.
    33 関数(p.140〜141)
    n 用語・概念の補足(2)
    ・ なぜ、関数の定義を先にしないといけないのか?
    ・ プログラム実行環境は、プログラムに書いてある命令を実行し
    ていく
    ・ 「関数の呼び出し」を見つけると、関数テーブルと呼ばれる関
    数の名前と関数の実体を関連つけて記憶しているデータにアク
    セスする
    ・ ※組み込み関数は、あらかじめ関数テーブルに入っている
    ・ 関数テーブルに無い関数を呼び出そうとすると、エラーになる
    実行環境 プログラム
    print()?
    area()?
    関数テーブル

    View full-size slide

  39. Copyright © Asial Corporation. All Rights Reserved.
    グローバルスコープとローカルスコープ
    def area(x, y):
    z = x * y / 2
    return z
    a = float(input('底辺 '))
    b = float(input('高さ '))
    c = area(a, b)
    print('面積=', c)
    グローバルスコープ
    a b c
    ローカルスコープ
    x y z

    View full-size slide

  40. Copyright © Asial Corporation. All Rights Reserved.
    33 関数(p.140〜141)
    n 追加の課題のアイデア(1)
    ・ 2つの引数を用いる関数
    ・ 長方形の面積を求める関数 rectangle(x,y)
    ・ 1つの引数の計算
    ・ 正方形の面積を求める関数 square(x)
    def rectangle(x,y):
    return x*y
    def square(x):
    return rectangle(x,x)
    print( square(10) )

    View full-size slide

  41. Copyright © Asial Corporation. All Rights Reserved.
    33 関数(p.140〜141)
    n 追加の課題のアイデア(2)
    ・ BMI(Body Mass Index)を計算する関数
    ・ BMI=体重kg / (身長𝑚)!
    ・ 身長cmと体重kgを入力とする
    ・ 身長cmを身長mに変換してから割り算する
    ・ 基礎代謝量を計算する関数
    ・ ハリス・ベネディクトの計算式
    ・ 男性: 66.47+(13.75×体重)+(5.00×身長)-(6.78×年齢)
    ・ 女性: 655.1+(9.56×体重)+(1.85×身長)-(4.68×年齢)
    ・ 性別、身長cm、体重を入力とする
    ・ 性別の値を使って、関数の中で条件分岐の構造を作る

    View full-size slide

  42. Copyright © Asial Corporation. All Rights Reserved.
    クラウド型実習環境 Monaca Education利用時のポイント

    View full-size slide

  43. Copyright © Asial Corporation. All Rights Reserved.
    プログラミング単元の授業のポイント
    準備
    • 授業の準備
    • ツールMonaca Educationの準備
    • 記録と評価(3観点)の計画
    授業
    • 導⼊
    • 説明
    • 例題
    • 実習/確認問題
    評価 • 記録の収集
    • 評価の実施

    View full-size slide

  44. Copyright © Asial Corporation. All Rights Reserved.
    クラウド型実習環境 Monaca Education利用時のポイント
    n クラウド型実習環境 Monaca Educationの準備
    ・ アカウントの準備
    ・ (オプション)Monaca Educationに慣れる機会
    n 例題・実習
    ・ サポートページ
    ・ 作成済みプロジェクトのインポート
    n 評価のための記録の収集方法
    知識・技能 小テスト
    思考・判断・表現 課題提出機能
    態度 振り返り

    View full-size slide

  45. Copyright © Asial Corporation. All Rights Reserved.
    最新のブラウザ(Microsoft Edge/Google Chrome)で以下のURLにアクセス
    (教育版)Monaca Education公式サイト https://edu.monaca.io
    Monaca Educationの準備(1)
    ログイン画面
    メールアドレス登録やGoogle、Microsoft連携で
    利用される場合は先に登録を、管理アカウント
    発行を受けている場合はそちらを利用下さい
    Monaca Educationの導入の詳細:上記Webページ上部の指導者向け > 導入手引き

    View full-size slide

  46. Copyright © Asial Corporation. All Rights Reserved.
    Monaca Educationの準備(2)
    n Monaca Educationに慣れる機会を作る
    ・ 教科書の内容に入る前に、テンプレート「ブロック崩し」
    1. プロジェクトを開く
    2. IDEの各部分の基本操作
    を確認する
    • 編集
    • 保存
    • プレビュー
    ブロック崩しのカスタマイズ:あんこエデュケーションのサンプルアプリ集

    View full-size slide

  47. Copyright © Asial Corporation. All Rights Reserved.
    例題・実習
    ■ 教材として作成済みのプロジェクトをインポート
    ・ 指導者向け >高等学校 教科書・教材サポートページ
    ・ https://edu.monaca.io/hstext
    48
    ②実教出版 高校情報I
    または
    最新情報I(Python学習
    用教材)の
    「サポートページ」を
    クリック
    ①必要な教科書の
    サポートページの
    パスワードを
    リクエストする

    View full-size slide

  48. Copyright © Asial Corporation. All Rights Reserved.
    例題・実習
    ■ サポートページ
    49
    ページ内の「サンプル一覧」
    から
    プロジェクトを選んで
    インポートをクリックする
    (次のページに続く)

    View full-size slide

  49. Copyright © Asial Corporation. All Rights Reserved.
    例題・実習
    ■ (承前)ブラウザのタブが開き、インポートができる
    50
    インポートボタンを押すと、
    プロジェクトがインポート
    される

    Monacaにログインしていな
    い場合、ログインを促す画
    面が表示される
    インポート後は、新規作成の
    プロジェクトと同じように
    編集できる

    View full-size slide

  50. Copyright © Asial Corporation. All Rights Reserved.
    例題・実習
    ■ インポートしたプロジェクトはすぐに実行できる
    ■ 変更して、試すには
    1. 画面中央のエディターで変更する
    2. 保存ボタンをクリックして保存する
    3. プレビューに結果が表示される。繰り返すには、更新ボタンをクリックする
    python.py
    ファイル
    エディター
    保存ボタン
    プレビュー
    更新ボタン

    View full-size slide

  51. Copyright © Asial Corporation. All Rights Reserved.
    例題・実習
    ■ Tips: Monaca Educationのエディタの機能の活用
    • 元に戻す
    • やり直し
    • 切り取り
    • コピー
    • 貼り付け
    • コードフォーマット
    ※インデントを整える
    • コメントの切り替え
    ※選んだ⾏をコメントにする/戻す。
    「この⾏を無くしたら」の実験が
    できる
    • 検索
    • 置換
    インポートしたプログラムを、手早く編集して、例を増やすとき、
    エディタの操作に慣れていると、素早くできる

    View full-size slide

  52. Copyright © Asial Corporation. All Rights Reserved.
    評価のための記録の収集方法
    ■ 知識・技能
    ・ 小テストで知識を確認する
    ■ 思考・判断・表現
    ・ 作成したプログラムを提出させる。タグ機能で名前・クラスなどを記載
    ・ 課題提出(Web公開)機能(学習者向け > 機能一覧)
    ・ https://edu.monaca.io/function/publish
    ・ 例:
    • 教科書の確認問題や問題を課題とする
    • 自由にカスタマイズをさせる。プログラムとは別に「・どういう狙いで・何
    を・どのようにカスタマイズしたか」を書かせ、提出させる
    ・ 課題提出(共同編集)機能(学習者向け > 機能一覧)
    ・ https://edu.monaca.io/function/share
    ■ 態度
    ・ 毎時、振り返りを記入させる
    • 集中して取り組んだか
    • 気付いたことは何か
    • ⼯夫したところはどこか 等

    View full-size slide

  53. Copyright © Asial Corporation. All Rights Reserved.
    クラウド型実習環境 Monaca Education利用時のポイント
    n クラウド型実習環境 Monaca Educationの準備
    ・ アカウントの準備
    ・ (オプション)Monaca Educationに慣れる機会
    n 例題・実習
    ・ サポートページ
    ・ 作成済みプロジェクトのインポート
    n 評価のための記録の収集方法
    ・ 知識・技能: 小テスト
    ・ 思考・判断・表現: 課題提出機能
    ・ 態度: 振り返り

    View full-size slide

  54. Copyright © Asial Corporation. All Rights Reserved.
    まとめ

    View full-size slide

  55. Copyright © Asial Corporation. All Rights Reserved.
    n プログラミング単元の授業のポイント
    n 授業案
    ・ 『最新情報I』第6章 Python版+ノートより
    ・ 2節 プログラミングの実践(p.168〜170)
    ・ 『高校情報I』より
    ・ 33 関数(p.140〜141)
    n クラウド型実習環境Monaca Educationの活用

    View full-size slide

  56. Copyright © Asial Corporation. All Rights Reserved.
    付録: URLのご案内

    View full-size slide

  57. Copyright © Asial Corporation. All Rights Reserved.
    ■ Monaca Education https://edu.monaca.io
    58
    • 指導者向け > 高等学校 教科書・教材サポートページ
    • 実教出版『最新情報I』『高校情報I Python』サポートページ
    • 学習者向け > はじめてのMonaca Education
    そのほか、動画による説明など多数のコンテンツがあります。

    View full-size slide

  58. Copyright © Asial Corporation. All Rights Reserved.
    ■ 指導者向け >高等学校 教科書・教材サポートページ
    ・ https://edu.monaca.io/hstext
    59
    ②実教出版 高校情報I
    または
    最新情報I(Python学習
    用教材)の
    「サポートページ」を
    クリック
    ①必要な教科書の
    サポートページの
    パスワードを
    リクエストする

    View full-size slide

  59. Copyright © Asial Corporation. All Rights Reserved.
    ■ 教科書ごとのサポートページ
    ・ パスワードで保護されている
    ・ チュートリアル、デモ動画へのリ
    ンク
    ・ プロジェクトをインポートするボ
    タン(プロジェクトのURLが埋め
    込まれている)
    ・ Monaca Educationにログインしている
    ブラウザでクリックすると、インポー
    トできる
    ・ 「サンプル一覧」の下に「スプ
    レッドシート版」もある
    ・ 必 要 な URL を コ ピ ー し て 、 Google
    Classroom等で生徒に配信する

    View full-size slide

  60. Copyright © Asial Corporation. All Rights Reserved.
    ■ 機能一覧: https://edu.monaca.io/function
    ・ 学習者向け > 機能一覧
    ・ Web公開機能など、Monaca Educationの機能を紹介

    View full-size slide

  61. Copyright © Asial Corporation. All Rights Reserved.
    ■ あんこエデュケーション https://anko.education/
    62
    カスタマイズのサンプル、画像素材などのコンテンツがあります。

    View full-size slide

  62. Copyright © Asial Corporation. All Rights Reserved.
    ■ ブロック崩しアプリと簡単なカスタマイズ
    ・ https://anko.education/apps/block
    ・ 生徒がMonaca Educationに慣れるために利用できます

    View full-size slide