2019年1月12日(土)JavaScriptでプログラミング教室@中央公園文化センター

1月12日(土)に、プログラミング入門教室を行いました。 今回は3回シリーズの第1回目です。

プログラミング入門(中学生~おとな向け)
2019年1月12日(土)・2月9日(土)・3月9日(土)
開場 10:15、開始 10:30~12:30
場所:中央公園文化センター(王子駅または十条駅)

プログラミングが初めての方向けの講座なので、プログラミング言語の歴史や命令などを復習しました。
命令とは、

 指定したメモリから読む
 指定したメモリに書く
 足し算、引き算などの計算
 計算結果で、ジャンプする

です。歴史こんな感じで復習してみました。

 ■1970年 UNIX(オペレーティングシステム)
 ☆1972年 C言語(しーげんご、UNIXの開発用)
 ■1974年 パソコンCPU(8080, 6800)アセンブリ言語(機械語)
 □1975年 Microsoft BASIC(ベーシック、もともと教育用言語)
 ■1980年 MS-DOS(オペレーティングシステム)
 □1983年 C++(しーぷらぷら、クラスやオブジェクト)
 ■1990年 Windows 3.0(文字からグラフィックへ)
 ■1990年 WWWサーバとブラウザ(インターネットの普及)
 ■1991年 Linux(リナックス。オープンソースの普及)
 □1991年 Visual Basic (Windowsのアプリケーション開発用)
 □1994年 PHP(ピーエイチピー。WWWサーバ用の言語)
 ☆1994年 Python(パイソン。汎用言語)
 ☆1995年 JavaScript(ジャバスクリプト。ブラウザ用の言語)
 □1995年 Java(ジャバ。汎用言語)
 □1995年 Ruby(ルビー。汎用言語)
 ☆2006年 スクラッチ

GitHub.com (ギットハブ)にアカウントを作り、「リポジトリ」を「フォーク」して、自分のホームページを公開する方法を学びました。
なんて、小難しいことをなさっているのでしょう!

Gitとは、分散型バージョン管理システムの一つで、もともとLinuxのソースコードを効果的に管理するために開発されました。他にも Mercurial , Bazzar などの分散型と呼ばれるバージョン管理システムがあります。
亀さんマークのSubversion や CVS のように集中管理型(クライアント・サーバ型)もあります。
一度にプログラムを仕上げることはできないし、修正したり、機能を追加したり、みんなで開発したりしますので、バージョン管理はプログラミングで必ずといっていいほどやることです。

Gitでは、ファイルの状態を好きなときに更新履歴として保存しておくことができます。そのため、一度編集したファイルを過去の状態に戻したり、編集箇所の差分を表示したりすることができます。GitのHub(ハブ:集まり)はプログラムなどのファイルを公開することができるようにしたウェブサービスです。(昨年Microsoftさんが買収されましたね。)

リポジトリは、GitHub が、プロジェクトに関連するファイルをまとめて保管する単位です。
企業ベースだと、リポジトリをチーム内で共有して、作業目的ごとにブランチ (Branch:枝) と呼ばれるコピーを作り、適当なタイミングでブランチに対して行われた更新をマスター(Master:本流) に反映するというのが、開発の 1 つのパターンです。
個人でも、ファイル編集で「変更前にもどしたい」とおもったり、あれこれ手入れをするためにコピーしたり、備忘録としてファイルに日付を追加しますね。すると、どれが最新なのかわからなくなっちゃったりします。そういったバージョン管理の問題を解決するのがGitです。プログラムのソースだけじゃなくて、Excelファイルや、画像も管理できます。(特にExcelファイルはどれが最新なの~ってなっちゃいますよね。…Excel禁止令がでたことがあります…)

GitHub のアカウントを持っていると、自分のアカウント内に既存のリポジトリのコピーを作れます。これが、フォーク(食器のフォークみたいに分かれていくかんじかしら?)です。フォークしたリポジトリは自分の所有物なので、自由に更新ができます。これなら、安心してたくさん失敗できますね。

■GitHubにアカウントをつくる方法
■今回の講座で作ってみたページ
■実際のプログラムはこんなかんじ👇(講座で実際に作ってみたソース

皆さんこれで、立派なプログラマーです。新しいこと始めるっていいですね。わたくしも初めてです。

次回はギットハブを使って、JavaScriptをさらに深く学びます。

午後は 未来美術部の方がいらっしゃって、本格的な機材で、バーチャルリアリティを体験して頂きました。

午後の講座の記事はまた次回更新します。

2018年12月21日(金)パソコンクラブでコードオルグ@北区立神谷小学校

2018年12月21日(金)、東京都北区にある神谷小学校のパソコンクラブへ行ってきました。クラブ活動は月1回で、1回45分です。 児童 24名 先生2名が参加してくれました。

今回は、プログラミングのクラブ活動の4回目でした。
・1回目…コードドットオルグ(code.org)のコース2
・2回目…
コードドットオルグ(code.org) のプレイラボ(Play Lab)
・3回目はコードドットオルグ(code.org) のアナと雪の女王
・4回目はコードドットオルグ(code.org) のダンスパーティー
です。

ダンスパーティーで、子供たちは、今までのコードオルグ(code.org)のカリキュラムと雰囲気がまったくちがったので、子どもたちにすごく好評でした。

コードオルグ(code.org)ダンスパーティーはクリスマスの華やかな感じにぴったりです。それぞれ好きなポップな曲をいろいろ選択してみて、曲に合わせて、プログラミングできます。映画”アリー”も公開されるのでGAGA様のチョイスもいいですね。(わたくしならステージごとに音楽を試しまくります。)

パソコンクラブのみなさんはプログラミング4回目なので慣れている感じがしますね。
最近の小学校ではダンスの授業なんかもありますね。

また、4拍子とか8拍子とか、曲のリズムの節目をきっかけとして(イベントドリブンといいますか‥)、背景や踊る人物を入れ替えできるので、メリハリのある画面にもなって、子どもたちもノリノリでした。

アナとエルサの図形制作とは違い、角度とかの理詰めでプログラムを考えなくても、それなりにアーティスティックな画面が出来上がるという違いがあるようです。

プログラミング教育研究所ではタブレット操作よりもパソコン操作を薦めています。
友達はどんなプログラムをつくったのかな、と覗くのももちろんアリです。
いっぱいためしちゃってね。

物の配置を簡単に変えられたり、(円形が主ですが、等間隔もあります)、バックで踊る人物を小さくできたり、やたらアップにしてみたり(大きさを指定できる)、踊る人物を、ループを使って、画面いっぱいに増やしてみたり(画面が、人物でぎゅうぎゅう‥)という、子供ならではの発想におどろいた発表がありました。そう、”なんでもあり”です!以前よりも、みなさん自発的に発表してくれました。(今度はウーハーつきのJBLスピーカーをしょっていきますね。)

やはり、音楽があるプログラムなので、子供たちも伸び伸びと感覚的に楽しんでいました。

めちゃくちゃ良い笑顔なのですが、お見せできないのが残念です。
めちゃくちゃ良い笑顔なのですが、お見せできないのが残念です。
クラブ活動はスポーツ系、インドア系などいくつかありますが、得意なものを選択する子どももいれば、やったことのないことをあえて選択する子もいます。(うちの子はハンドメイドクラブで、来年は毛糸で編み物をやってみたいそうです。)

いろんなクラブの一つとしてパソコンクラブがあります。いろんな経験を「種まき」して、いつか大きくなったら「プログラミングやったことあるよ」「音楽やったことあるよ」など興味や趣味が広がってくれたらうれしいです。

 

参加してくれた子どもたちや先生、ボランティアスタッフの方、記事を書くのにレポートしてくださったスタッフの方、ありがとうございました。よい、お年を。

2018年12月20日(火)中学校でプログラミングの授業@北区立赤羽岩淵中学校

2018年12月20日(火)に区立の中学校でプログラミングの授業を行いました。今回、参加してくださったのは、北区立赤羽岩淵中学校の特別支援学級の皆さんです。中学1年生から3年生の16名の方と先生方が参加してくださいました。
10:35~12:15(1コマ×2₌90分)の授業でした。

早速プログラミングの授業がはじまると、AIロボットのペッパー君お友だちのロボット仲間がきてくれました。

東京都北区の学校をのっとる計画をくわだている”AIロボット”

「AIロボット対して所長のところまでくるように命令してください」とはなしたら、みなさんがたくさんAIロボットに命令して動かしてくれました。

うしろの絵、シャガールみたいな色彩が素敵です💗わたくしはじっくりみちゃいました。

まずは、パソコンの操作に慣れてもらうために、コードドットオルグ(code.org)のコース1からはじめてもらいました。途中で英語の動画があったのですが、見たい人が続出です 🙄 !英語だからみなくていいよ~といったのですが、やはりYoutube動画に慣れている世代はクリックしたくなりますよね。英語なのですが(字幕はイタリア語だったり 😯 )、操作方法が紹介されていたので「なるほど、こうやってブロックをうごかせばいいんだ!」と分かっちゃったようでした。言語は関係ないですね、国境を越えます!

アングリーバードの迷路は大好評でした。

黒板にデバッグって書いてありますよ。この「デバック」という作業は、プログラミングで必ずやることのひとつです。デバック(debug)とは、プログラムを実行してみたとき、思ったのと違う動きをするバグと呼ばれるあやまりを発見して、取り除くことです。つまりは、プログラムを直すことなんです。たった一度で正確なプログラムを書くことは、本物のプログラマーでもできません。どこがおかしいのかな、と修正していく作業のほうが多いくらいです。プログラムをつくるだけでなく、どこがおかしいのかなと考えることはとっても頭をつかいます。

コードオルグ(code.org)のプレイラボでお話づくりをしています。

1コマ目はコース1で終了しました。ゲームのように次々とステージが続くので、はまってしまう人がたくさんいました。進み具合は人それぞれですが、みなさん熱中して「もっとやりたい!」と休み時間をつかっても続けていました。

2コマ目はコース1のステージ16プレイラボにとびました。プレイラボはお話づくりです。コース1の迷路とちがって課題が与えられていないので、自分でストーリーを考えます。キャラクターを動かすにも、まずは、キャラクター自体を登場させる設定をしなければなりません。はじめはどうすればキャラクターが動いてくれるのか戸惑ったこどもたちも、ちょっとしたヒントで「そっか!」と納得です。
プレイラボで出来た作品はたくさんのこどもたちに発表してもらいました。

すごい数のキャラクターですね。ここまで登場させるにはかなりの根気がひつようです。

最後に生徒さんの一人がクラスを代表してお礼をおっしゃってくださいました。
これには所長も感涙 😳 です。

こちらこそありがとうございました。

参加してくれた皆様、ありがとうございました。楽しかったです 😛 。

学校向けカリキュラム NEW!👇中学校でのプログラミング体験をご覧ください。

2018年12月8日(土)プログラミング教室@北区中央公園文化センター

2018年12月8日(土)に北区中央公園文化センターでプログラミング教室をおこないました。実は、この中央公園文化センターは明治時代から戦前にかけては東京第一陸軍造兵廠があったところです。白く塗られてからはドラマの撮影などに使用されることもあります。とても歴史が古い建物なんですね。

ラジオからもクリスマスソング(Wham!)が流れて、 街がはなやいだ雰囲気になっています。プロググラミング教育研究所でもマイクロビット(micro:bit)を使ってクリスマスツリーを作りました。

今回の「プログラミング体験」も、コンピュータサイエンスエデュケーションウィークという、「世界中の子どもたちにプログラミングを体験する機会を!」というHour of Code(アワーオブコード)取り組みの一環として開催しました。

北区でもたくさんのこどもたちが参加してくれました。
北区でもたくさんのこどもたちが参加してくれました。

午前は、コードオルグ(code.org)のコース1プレイラボをやりました。コース1は初めてパソコンに触れる子どもにぴったりなコースです。マウスの使い方、ドラッグアンドドロップ(つかんでひっぱる)、ブロックを重ねるなどの基本操作に10分くらいで慣れることができます。普段はスマートフォンで操作している子どもたちも今日はマウスとキーボード操作に挑戦です。
慣れてきたところで、プレイラボ(PlayLab)に移って、お話を作ってもらいました。北区プログラミングコンテストでもプレイラボを使った作品がたくさんありましたよ。最後に、自分作ったお話を発表してもらいました。

プレイラボでお話づくりです。

午後は、ココキタで活動している未来美術部のかたが来て、バーチャルリアリティの体験会を行いました。
https://www.facebook.com/futureartclub/
子どもも大人も楽しんでました。

どんな映像が見えるのか気になります!!!
大人も楽しんでます💛

14時から、マイクロビット(micro:bit)でクリスマスツリーを作りました。
プロググラミング教育研究所では新しく「がくしゅう」のページをつくりました。サンプルプログラムをどんどん公開していきますので、ちょくちょくのぞいてください。(http://j-code.org/projects/student/

このクリスマスツリーのサンプルをそれぞれ改造して、ひとり1個のクリスマスツリーを作りました。自分で作ったプログラムでLEDをピカピカひからせたり。いろんな曲が流れるようにしていました。

身近な材料で骨組みをつくります。
クリスマスツリーがたくさんあって華やかですね。
窓の外が雪に見えますよ!?
完成!

参加者は午前16名、午後16名でした。
午後の「マイクロビットでクリスマスツリーをつくろう」のアンケートは↓です。
20181208アンケート結果_pm中央公園

参加してくれた皆様、未来美術部 Future Art Clubのみなさま、ボランティアスタッフのみなさまありがとうございました。みなさまのもとへサンタクロースさん🎅はきっとやってきます。We Wish You a Merry Christmas!

北区こどもプログラミングコンテストの優秀作品紹介、表彰
日時:2019年1月27日(日)14:00~16:00
場所:北とぴあ つつじホール
費用:無料
参加申込:https://j-code.connpass.com/event/110772/
事前申込があれば、北区外のかたも、どなたでも見学可能です。 ご家族・友人・知人とお誘いあわせのうえご来場ください。
定員になり次第しめきりです。お申込みはお早めに。
コンテストについて、くわしくは https://j-code.org/kids2020

2018年12月4(水)5年生プログラミングの授業@北区立岩淵小学校

2018年12月4日(水)に東京都北区立岩淵小学校でプログラミングの授業をしてきました。今回は5年生です。2クラスあって、20人+21人=41人の授業でした。1クラスで2コマ(90分)を2クラス分実施しました。

まず始めは、プログラミング研究所が開発したAIロボットのヨッピー君の登場です。(ヨッピー君は「ペッパー君」のロボット友達 😯 ) です。)

子どもたちに、「ヨッピー君に命令して、目的地までうごかしてみてね。」と提案したら、担任の先生も参加してくれました。「前へ進んで!」と命令すると、ヨッピー君はヨッピー君自身が前を向いている方向にしか進んでくれませんでした。所長のところまで動かすにはどうしたらいいでしょうか。
そうですね、まずは向きを変えてもらわなくてはなりませんね。見ている側の「前」と、ヨッピー君の「前」はちがうのです。
子どもたちも「百歩すすんで!」と激しい 😈 命令をしてくれました。

そのあとは、コードドットオルグ(code.org)のアナと雪の女王を全員でやってみました。アイススケートをしながら雪の結晶やパターンを作ります。ここでは、ブロックを引っぱる(ドラッグ・アンド・ドロップ)ことでプログラムを書くことができるブロック を使います。こんなに簡単に見えても、立派なプログラミングをやっていることになります。

 

 

ここでは、「前にうごく」ブロックは、「100 ピクセル前に進め」と言っています。「実行」を押すと、エルサは前にちょうど100 ピクセル進みます。ピクセルというのは、コンピューター画面のとても小さな四角のことです。

子どもたちのほうが呑み込みが早いです。私はこんなすぐにはできなかったよ。。。

ステージが進むと複雑な模様がでてきます。でもみなさん、できちゃってますね。できていなくても心配しないでください。わたくしも全部できる自信がありません。たぶん、全部はできないです。実際やってみましたが、わたくしはたくさんヘンテコな模様を描いちゃいました。(担任の先生もたくさんヘンテコ図形を描いてましたよ!)できるところまででいいんですよ。

ちょっと休憩をはさんで、次はコードドットオルグ(code.org)のアーティストの画面へ移動しました。コードドットオルグ(code.org)アナと雪の女王でもできるのですが、アナと氷が美しすぎて、みなさんの描いてくれる図形が目立ちません。

所長から「こんな図形と描いてみよう!」お題(👇)がでました。ちゃんとヒントもありますね 💡 。

さすが5年生、結構サクサクできちゃってますね。どんなプログラムで図形を描くことができたのかを、円を描くところはいろいろな種類の発表がありました。3つご紹介します(👇)。どれも円を描くことができますが、動きがちがってきます。

それぞれの動きは、一度描いた円をもういちどなぞったり、向きがちがったりしてます。でも円が描けてますね。ぐるっと一回りすると360度。300角形は限りなく円に近くなってきます。もっと円に近づけるにはどうしたらいいでしょう。
もちろん「正解」はあるのですが、プログラムを実行したときの動きを観察してみてください。

所長のお題ができちゃった子どもたちには、さらに「一筆書きのお星さま」「六角形と円をやったから円に内接する六角形を描いてみて」とお題をだしてみました。もちろん、自分の好きな図形もOKです。すごいパターン模様を描いている子どもたちもたくさんいました。

一筆書きの星をに挑戦してます。すごい、星に近いじゃないですか!
わたくしは星なんてかけませんでした。みなさん、できちゃってますね。すごい。。。
「すっごいきれいな模様が描けたよ!」とうれしそうに教えてくれました。
またやりたい人~ってきいたらみなさん手を挙げてくれました。

なんだか、子どもたちに教えられることのほうが多かった気がします。円の描き方パターンとか、極太で描く模様とか、ひたすら円を塗りつぶしていく発想とか、わたしにはなかったです。ありがとう、5年生のみなさん。
私から教えてあげることなんてなかったです。子どもたちより先に生まれただけだから、たまたま「プログラミング」を紹介することができただけです。教えてあげられることなんて何もないけど、ほんの少しの間だけ一緒にいさせてくれた 😳 、と感謝しかありません。

ご協力していただいた、5年生のみなさん、先生方、ボランティアスタッフのみなさん、ありがとうございました。

(今回実施した、学校向けカリキュラム案は→こちらです。)