あるくテック

日々試行錯誤しつつ実践中

『学び合い』の会に参加しました

今日は、『学び合い』の会浜松に参加しました。

今回も、オンラインとリアルのハイブリッド開催でした。

 

「オンラインで『学び合い』はできるのか?」「GIGAスクールの状況」「漢字学習について」など。

参加者が多様な浜松の会は、いつも提供される話題もそれに対するアドバイスや意見も幅広いです。

 

私にとって、他校、他校種の先生方など、普段はなかなか会えない方々と話せる貴重な機会です。

 

もうひとつ、私自身がやっていること、やってきたことを見直す機会にもなっています。

 

日常の中では、より良い仕事をするために「できていないこと」や「改善しなければいけないこと」に注目しがちです。

 

まして、小学校教員になってやっと2年目の私にとっては、「できていないこと」や「改善しなければいけないこと」なんて、それこそ無数にあります。

年齢には関係ないのかもしれませんが、たまには「この年になって一からスタートって、やっぱり、それなりにキツイのかも」とも思ったりします。

 

そんな時に、日常生活とは少し違うフィールドの方々と話せると、「できていること」「これまで積み重ねてきたこと」「当たり前になっていたけれど、実は他の人にとって役立つこと」に気付くことができます。

 

他の方の話を聞いて学ぶことができて、さらに自分の知識や経験を役立ててもらって自己効力感もアップできて、本当に良いことづくめです。

プログラミングの授業例 Webゲームその3

Webゲーム制作の授業、今回はその3としてプログラミングの基礎「変数と条件分岐(if)」についてです。

ゲーム制作を通してプログラミングの基礎を学ぼう

授業ではenchant.jsというライブラリ(プログラムのパーツ)を使って、効率よくプログラミングを行うことで、体験重視の授業になるようにしていました。

変数と条件分岐

ゲーム制作に限らず、様々なデータを扱ったり(変数の利用)、「こんな時はどうする?」といった場合によって行う処理を変えたり(条件分岐)、プログラミングの基礎知識として分かっておきたいことがいろいろとあります。

ただ聞いても分からない

私が初めてプログラミングに触れたのは、大学の授業(19歳頃?)ででした。その時の言語はFORTRAN。条件分岐やループ処理をしたのはぼんやり覚えています。クラスメイトに手伝ってもらってなんとか課題を提出したものの、分かった実感は全くありませんでした。

その後、工学部のC言語の授業を履修して出てみたものの、講義で行われた詳細な「メモリ」の解説で心が折れました。当時理学部だった私にとって初めて知ることばかり。聞くこと全てが分かりませんでした(笑)。

とにかくトライ&エラー

そんな私でもその後プログラミングを仕事にできたのですから、興味のある方はぜひ心配しないで楽しんでやってみてほしいと思います。

プログラミングの学習は外国語を覚えるのにも似ています。単語と文法を習ってみただけではまだしゃべれるようにはならないですが、とにかく使ってみて経験を重ねることで使えるようになります。

ある程度のところまで行けたらあとは楽になるはずです。

コンピュータは怒らない

プログラムの入力を間違えて滝のようなエラーを吐きだそうと、コンピュータは怒りません。今はコンピュータが即壊れる心配をせずにプログラミングを学習してみることができますので、遠慮は無用です。

それなのに。吐き出されたエラーを見ながら「あ~ごめんごめん」「そうだよね~」などと呟くようになったら。あなたも立派なプログラマかも(笑)

授業のプリント

話が脱線しましたが、授業で配布したプリントは次のようなものです(無理矢理)。

 

変数とif文を使った描画制御
          
今日のMission
1.リソース(画像)をプロジェクトに追加し、Spriteクラスを使って適切に表示ができる。

2.flag_x === true(26行目) なぜ=(イコール)が3つなのか説明できる。

3.変数flag_xがどうして必要なのか説明できる。

 

<演習問題例>

 

1)準備
 code.9leap.netにログインする。
 http://code.9leap.net/codes/show/151788 からフォークする。
2)「Add Resource」ボタンからクマの画像を追加する。
3)15行目以降を記述し、クマを表示させる。変数名はbearとする。
4)フラグの利用
①~④の処理を書いてみましょう。1つ書いたらすぐに実行するとデバッグが楽です。

     // 方向フラグをtrueに
     var flag_x = true;
     // くまが表示されているとき、常に行う処理
    bear.addEventListener(Event.ENTER_FRAME,function()
     {
         if(flag_x === true)
        {
            if(bear.x < 300){
                 // ① クマを3ピクセル右へ動かす
             }
             else
             {
                 // ② 方向フラグをfalse(左)にする。
             }
          }
         if(flag_x === false)
         {
         if(bear.x > 0){
            // ③ クマを3ピクセル左に動かす
         }
         else
         {
            // ④ 方向フラグをtrue(右)にする
         }

授業のながれ

授業の冒頭10分程度で説明を行った後は、全員が達成できることを目指して、学生が自由に課題に取り組みます。教室内の立ち歩きも相談も自由です。学生が自主的に教室のホワイトボードを使って、ミニ授業をおこなっても構いません。
全員が達成するためには協働が求められます。様々なコミュニケーションスキルを学ぶ機会にもなります。

クラス全体としての達成度については授業の最後で確認をします。

プログラミングを楽しむ

作ったものが動きはじめるのは、誰にとっても驚きや楽しさがあることだと思います。

それを繰り返し体験しながら試行錯誤を重ねていけるのが、プログラミングの良いところです。

 

プログラミングの授業例 Webゲームその2

Webゲーム制作の授業、今回はその2として画像描画についてです。

Webゲームづくりに欠かせない画像表現

授業ではenchant.jsというライブラリ(プログラムのパーツ)を使って、効率よくプログラミングを行うことで、体験重視の授業になるよう工夫していました。

また、ゲームを作るときに画像の表現は欠かせないものですが、その点についてもライブラリを使うことで最低限のプログラムで好きな絵を表示させたりコントロールすることができました。


授業で配布したプリントは次のようなものです。

 

Spriteを使った画像の描画
          
今日のMission
1.enchant();を書く場所と、役割が説明できる。
2.画像を表示するためのプログラムの書き方が説明できる。
3.Spriteクラスのプロパティframeと、画像ファイルの関係を説明できる。

 

<演習問題例>

1)準備
①code.9leap.netにログインする。
http://code.9leap.net/codes/show/150992からフォークする。
③画面下の方にあるAssets Listを確認し、画像のファイル名をチェックする。

 

2)5行目に、enchant.jsライブラリを使うときに、必ず書く1行書いてください。

 

3)クマの表示
画面上にクマを表示するために、『適切な場所』に下記の記述をする。カッコの形に注意。
①game.preload('chara1.png');
② var bear = new Sprite(32,32);
bear.image = game.assets['chara1.png'];
bear.frame = 0;

 

4)クマを変える。
画面上に表示された茶クマを、白クマや女の子のクマに変える。

 

チャレンジ問題
1)クマのアニメーション
%演算子を使って、クマをアニメーションさせる。

2)game.fpsの値を変えて、アニメーションの速度がどうなるか確認してみましょう。

 

授業のながれ

授業の冒頭10分程度で説明を行った後は、全員が達成できることを目指して、学生が自由に課題に取り組みます。教室内の立ち歩きも相談も自由です。学生が自主的に教室のホワイトボードを使って、ミニ授業をおこなっても構いません。
全員が達成するためには協働が求められます。様々なコミュニケーションスキルを学ぶ機会にもなります。

またプリント中の演習問題例は、Missionを達成するための作業として私から例示していたもので、学生自身で例題を考えて授業に取り組んでも構いません。つまりMissionが達成できるのであれば、例題を解かないことを選べます。

クラス全体としての達成度については授業の最後で確認をします。

プログラミングを楽しむ

作ったものが動きはじめるのは、誰にとっても驚きや楽しさがあることだと思います。

それを繰り返し体験しながら試行錯誤を重ねていけるのが、プログラミングの良いところです。

 

プログラミングの授業例 Webゲームその1

Webゲーム制作の授業、今回はその1初回授業についてです。

科目概要

Webページを見るためのブラウザ(Google Chrome、Safari、Edge、Internet Explorerなど)があれば遊べるゲームのことを、Webゲームまたはブラウザゲームと呼びます。このWebゲームの制作を学ぶ科目です。

arukutech.hatenablog.com

はじめてのWebゲームづくり

授業ではenchant.jsというライブラリ(プログラムのパーツ)を使って、効率よくプログラミングを行うことで、体験重視の授業になるよう工夫していました。


初回授業で配布したプリントは次のようなものです。

 

enchant.jsでのクラスのコーディング、時間制御を体験する

Mission

0.code.9leap.netのユーザー登録を各自で行う。


1.文字を表示するために、「使用するクラスの名前」と「プログラムの書きかた」が説明できる。

 

<<演習問題例>>

1)準備
code.9leap.netのログインする。(Chrome推奨)

2)http://code.9leap.net/codes/show/203 にアクセス

3)画面左上「Fork」ボタンからプログラムのコピーを作る

4)画面右上「Run」ボタンでプログラムを実行すると、画面左下に課題が表示される

 

課題1
hello.xを10以外に変化させてみよう!
hello.x=50;
書き換えたら「Run」を押そう!

 

5)課題3までやってみる。

 

授業の冒頭10分程度で説明を行った後は、全員が達成できることを目指して、学生が自由に課題に取り組みます。教室内の立ち歩きも相談も自由です。学生が自主的に教室のホワイトボードを使って、ミニ授業をおこなっても構いません。
全員が達成するためには協働が求められます。様々なコミュニケーションスキルを学ぶ機会にもなります。

またプリント中の演習問題例は、Missionを達成するための作業として私から例示していたもので、学生自身で例題を考えて授業に取り組んでも構いません。つまりMissionが達成できるのであれば、例題を解かないことを選べます。

クラス全体としての達成度については授業の最後で確認をします。

プログラミングと協働学習

どんなことでもある程度の基礎知識がないと活動ができません。そのためプログラミングを学ぶときには、新しい考え方や用語がたくさん登場するため困惑する学生も少なくありませんでした。

とはいえ、一斉授業だけを行っていきながらクラス全員の基礎知識のレベルが上がるのを待つことは時間がもったいないと考えています。新しい知識は一度聞いただけでは分かったような気分になっただけで、使える知識まで理解できてないことがほとんどですので、結局授業が終わっても「とりあえずやってみた」だけに留まってしまいます。

プログラミングの授業では、Slackなどのツールも生かして、意見やデータのやりとりが極力スムーズに行えるようにしていました。

授業の中で学生同士で話ができる時間をできるかぎりつくることで、分からないことがすぐ誰かに聞くことができる(先生に聞くタイミングを待たなくてよい)、誰かに教えることでより理解が深まる、といったメリットを学生自身が実感していたようでした。

プログラミングの授業例 Webゲームの授業について

今回は、Webゲーム制作の授業の様子をざっくりとご紹介です。

Webゲーム(ブラウザゲーム)とは

Webページを見るためのアプリケーションを「ブラウザ」または「Webブラウザ」と呼びます。代表的なものはGoogle Chrome、Safari、Edge、Internet Explorerなどです。

そしてこのブラウザがあれば遊べるゲームのことを、一般的にWebゲームまたはブラウザゲームと呼ばれています。

ゲームを作るために必要なもの

ゲームを作る、つまりプログラミングするために使うものを「開発環境」といいます。無料で使える開発環境も今はいろいろとあります。

Webゲームのための開発環境

授業では、HTML、CSS、JavaScriptの3つのプログラミング言語を用いた実習を行っていました。最低限必要なものは

  1. ブラウザ(Google Chromeなど作ったプログラムを動かすため)
  2. テキストエディタ(メモ帳、Brackectsなど無料のものが豊富にある)
  3. インターネット環境(場合によっては無くても可)

の、実は3つだけです。とはいえこれだけだと不便なので学習しやすいように開発環境を工夫しています。

どんな授業?

Webゲーム制作の環境を工夫することで、こんな授業ができます。

  • 数十行のプログラムを入力するだけで、ゲームが完成する。
  • 作ったプログラムがすぐに動く

文字を入力して行うプログラミング(テキストベースとも呼ばれます)では、1つのプログラムを動かすために数十行から時には数千、数万行というかなりの量の文字入力を行います。しかもたった一文字でも違っていると、プログラムは正常に動作しません。

ですので少ない入力で動かせるのは、学習効率の向上にも役立ちます。初めてテキストベースのプログラミングを学ぶ人にとっても気軽に取り組めますね。

 開発環境についてのより詳しい情報は過去記事にて(古い過去ですいません)

arukutech.hatenablog.com

arukutech.hatenablog.com

 

arukutech.hatenablog.com

記事中のjsdo.itは残念ながら2019年にサービスが終了しています。

jsdo.it - Share JavaScript, HTML5 and CSS

おまけ。プログラミングにアクティブラーニングが必要な理由

過去記事に書きましたので、よかったら合わせてご覧ください。

arukutech.hatenablog.com