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

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

Webゲーム（ブラウザゲーム）とは

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

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

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

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

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

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

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

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

どんな授業？

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

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

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

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

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

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制作においても欠かせない機能です。

授業概要

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

「リンクを理解する」　

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

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

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

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

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

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

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

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

たとえばこんな感じ。

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

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

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

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

プログラミング教育にも

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

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

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

授業のながれ

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

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

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

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

『学び合い』について

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

arukutech.hatenablog.com

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

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

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

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

２０１６年４月に通信制の大学に編入して２０１８年３月に無事に卒業したのですが。

２０１８年９月に再度編入して大学生（＋社会人＋家庭人）生活が再スタートしていました。（※２０２０年３月に卒業予定です。）

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

後がない(笑)

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

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

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

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

老年期の課題（！？）

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

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

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

青年期の特徴と課題

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

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

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

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

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

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

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

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

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

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

プログラミングの授業例 テーブル

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

テーブルとは

テーブルはWebページ上で表を作成して文字や画像を配置するためのHTMLプログラムの機能です。表とはいっても、エクセルのような計算機能などはありませんので、必要であればJavaScriptなどを使って機能をプログラムすることになります。

Webページのデザインによってはテーブルを使わないこともありますので、HTMLやCSSの基礎として学ぶ内容としては、リスト（li,ul, ol）に比べて最近は学習の優先度は低くなったものかもしれません。Dreamweaverを用いてWebページを制作する場合、テーブルタグの知識がなくてもとりあえずは作れてしまうとも思います。

とはいえタグの入れ子構造を学ぶのにも良い題材であるので、クラスの到達度や進捗状況など応じて組み込んでいました。

Dreamweaverについて

DreamweaverはWebサイトを制作するためにおそらく今現場で最も使われているアプリケーションの１つです。よく知らない方にとっては、そして学生達も最初は、ワープロなどで文書を作るようにWebサイトが作れる、という期待を持っているようですが、実際にはHTMLやCSSの基礎は理解していないと厳しいです。

例えば「作業をしていたらレイアウトが突然崩れた！」といった不具合が出た時に、ある程度HTMLとCSSを知っていないと対処できません。

授業概要

授業で配布したプリントは次のようなものです。 （授業はテキストエディタを用いたWebサイト制作の授業向けで、Dreamweaverを用いた授業向けではありません。）

『学び合い』について

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

プログラミングの授業例 フォーム

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

フォームとは

Webページ上でユーザが入力するための仕組みです。例えばユーザ登録をする時に画面上で氏名、メールアドレス、住所などを入力することや、オンラインストアで注文したい商品の個数を入力することを実現している機能です。

HTMLプログラムでは、ユーザが入力するための部品をWebページ上に配置し各種設定をします。

授業概要

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

パタン１

 パタン２

プリントはクラスの様子に合わせて作成してください。クラスにとって難し過ぎず、易し過ぎずが良いと思います。

『学び合い』について

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