あるくテック

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

プログラミングの授業例 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などのツールも生かして、意見やデータのやりとりが極力スムーズに行えるようにしていました。

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

通信制大学で学ぶ Tips-7 科目終了試験対策2.0

再び、2018年9月に再び通信制大学の学生になっていました。毎月のレポート提出と科目終了試験が再開、そしてようやく、、、終えました。

科目終了試験対策がバージョン2.0になりました。

前回在学時の様子として、去年に科目終了試験対策の記事を2つ書きました。

マインドマップを本格導入

2018年の夏にマインドマップのアドバンストプラクティショナー資格を取りました。この資格はマインドマップの考案者であるトニー・ブザン公認の資格で、私が所属する組織内で「マインドマップ 入門講座」を正式に教えることができます。

例えば、勤め先でマインドマップの研修をする、学校の先生が生徒に正式なマインドマップを教えるといった場合です。

www.mindmap-school.jp

授業、試験勉強、レポート作成に大活躍

どんな場面でもマインドマップは重宝しました。特に試験勉強とレポート作成への効果は大きかったです。大学でもマインドマップが推奨されていました。

科目終了試験では、ポイントをマインドマップにまとめておいて、こまめに見返すようにします。マインドマップにしておくと短時間で振り返ることができるのが便利です。

プログラミングの授業例 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

 

プログラミングの授業例 リンクを設定する

『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。

今回はWebサイト制作においてとても重要な機能である「リンク」を学習する授業についてです。

リンクとは

Webページ上の文字や画像をクリック、またはタップして、別のページに移動するための機能です。

これは、エクセルやワードなどで行う「ファイルを開く」という操作に該当します。「ファイル」→「開く」→「ファイル名入力」→「開く」といった一連の作業を、Webでは一回のクリックまたはタップで実現しているといえます。しかもWebの場合、全世界のファイルを開く、そして見ることができる訳です。

今のWebサイト、そしてインターネットの普及の立役者ともいうべきリンクは、現在のWeb制作においても欠かせない機能です。

 

授業概要

今回はプリントの概要を説明をします。以前に配布したプリントは、テキストを参照しながら行うものだったため、プリント単体で掲載しても分かりにくいのが理由です。

「リンクを理解する」 

Mission1)ページ間リンクとページ内リンクの違いが分かる。設定できる
確認方法 まとめの問題を説明することができる。

 

サーバにある実習用データを各自にコピーしてください。

 

作業内容
1)実習用データのindex.htmlについて、テキストを参考にページ間リンクとページ内リンクを設定する。

 

まとめの問題
1)リンクとはどのような仕組みですか

 

2)リンク2種類について設定方法を説明しましょう
・ページ間リンク(他のページへ移動する)

 

 

・ページ内リンク(同じページ内の別の場所へ移動する)

 

 

小学生から大人まで、ぜひ「リンク」で遊んでみて!

リンクは、簡単なHTMLプログラムの記述だけで、Webサイトの動きを作ることができるので、小学生から大人まで気軽に取り組めます。

たとえばこんな感じ。

  1. シンプルなHTMLファイルのテンプレートを準備しておく。
  2. ブラウザで好きなWebサイトを開き、URLアドレスをコピー。
  3. HTMLファイルをテキストエディタで開き、コピーしたURLアドレスを指定された箇所にペースト。
  4. ブラウザからHTMLファイルを開いて、動作確認!

応用編としてクリックやタップをしたら

  • 写真を見せる(リンク先を画像ファイルに)
  • Googleマップを使って案内したい場所へのリンクを埋め込む
  • スマホからアクセスした人にダイヤル発信してもらえるようにする(href属性の"tel:"を使う)

などもあるので、楽しいと思います。

プログラミング教育にも

今年4月から、小学校でプログラミング教育がいよいよスタートします。

Webページを作るには、「テキストエディタ」(Windowsならメモ帳でOK)と「ブラウザ」(Google ChromeやSafariなど)があれば、シンプルなものなら作れてしまうのもメリットです。

普段なんとなくスマホでタップして使っていたリンクを自分で作れた!という体験は、身近なものがプログラミング言語で制御されていることを体験を通して知る良い機会になると思います。

授業のながれ

授業は、課題の説明、活動、振り返りという流れで行います。活動の時間をできるだけ多く取るために、最初の教員からの課題の説明は必要最小限にとどめています。

プログラミングの授業では、よく自転車に乗れるかどうかに例えて活動の大切さを伝えていました。

「自転車の乗り方を人からどんなに上手に聞いたとしても、実際に自分で乗れるようになるためには自分で乗って練習しないといけない。」

活動の時間を通して、自分で作業や説明ができるようになることがゴールです。

『学び合い』について

『学び合い』(二重括弧付き)は、授業の考え方です。授業方法ではないため、単純にプリントを配ればアクティブラーニングが成立するというものではないだろうと考えています。もし私のプリントを参考にして下さる方は、『学び合い』についての様々なサイトや書籍がありますのでそちらもぜひご覧くださいね。

 

arukutech.hatenablog.com

 

通信制大学で学ぶ - 社会人になってから学ぶ良さ

「年だから」という言葉をつい使っていませんか?

今回は一旦社会人になってから改めて大学で学ぶことの良さについて書いてみます。

実はまた編入していました。

2016年4月に通信制の大学に編入して2018年3月に無事に卒業したのですが。

2018年9月に再度編入して大学生(+社会人+家庭人)生活が再スタートしていました。(※2020年3月に卒業予定です。)

年を重ねたからこそのメリット

後がない(笑)

もう後がないといった状況は実はものすごい大きなパワーになります。なぜならあれこれ迷って立ち止まっている余裕などないからです。

やろうと決めたら、周りの目を気にしている暇などなく、記憶力の衰えもなんとか工夫してカバーする以外に方法はなく(笑)、自分の納得のためには全力でやり切るしか道は残されていません。

若い頃、将来も可能性もどこか漠然としていて、でも無限に広がっているようにも感じて、1つに選びきれなかったり集中しきれなかったりしたことはありませんか?

大人は違います。本当に良い意味で、後がないんです。これは強みだと思います。

 

老年期の課題(!?)

 目指す大人がいるというのは、誰にとってもとても幸せなことだと思います。そんな大人にいつかなれたらいいですね(遠い目)。

少し話が脱線します。教育学者のハヴィガーストは、老年期の課題を「統合か絶望」と唱えました。

自分の人生が意味のあるものだったと思えるかどうかで、老後の生活の受け止め方、幸福度が分かれるというわけです。

青年期の特徴と課題

ここで青年期の特徴と課題にも触れておきます。

今はなんでもスピードが早いです。流行も、技術の進歩も。そうなると順応性の高さで若い人は有利です。となると経済やメディアなどにおいて若い人をターゲットにしたものが締める割合が高くなります。その方が消費されるからです。

すると社会そして文化の中心が若者中心となり、かつては大人を気取ることがカッコいいとされた時代もあったと思いますが、若者も大人も若々しいことが一層良いこととされる風潮に傾きます。

それは若い人にとっての難しさにもなり得ると考えます。 例えば、あまりに「若さ」の価値が高いと、年を重ねることは若さを失うことになってしまうからです。自分の価値が将来どんどん減っていってしまうように思えるのですね。 将来若さが失われたら、今度は自分が若い人に立場を奪われるのではないか、という不安感をもつこともあるでしょう。長年熟練の技を鍛えるような職業ではそういったことは起こりにくいかもしれません。ただ若さも熟練も簡単に比較できることではなく、個人や職種にもよるでしょう。

あらためて、「大人になって学ぶこと」を考えてみる。

今後はAIやロボットの進歩も考えると、、、本当に先の見えにくい世の中ですね。

この際年齢に拘らず、いろいろな人、出来たら別の職業や別の年代の人に会うことはとても良いことだと思いませんか。通信制大学のスクーリング授業ではそういったことが一気に叶うのもメリットでした。

経験が増えれば増えるほど、より深く理解できることも増えていくはずです。(ヴィゴツキーの構成主義と照らし合わせて考えてみたいとことですが、それはまたいずれ)

実は大人になってから学ぶと、新しい知識に対して、より驚きを持って学んでいけることが多いのではないかと思います。

 

もしも目上の人に、または年を重ねる自分自身にどうしても夢を持てないときががあったら。そんな心配はないと思います。メガネをちょっと新しくする感覚で、これまでとは違う気分で生活を見つめ直してみませんか。私はとても楽しみです。