0

第11回 CoderDojo 八王子を開催しました

CoderDojo 八王子はコワーキングスペース八王子8Beatで開催されています

公共性の高いオープンスペースで開催しているので、一般の利用者さんもいらっしゃいます。利用者はフリーランス系の方が比較的多いです。大学生、プログラマー、デザイナー、弁護士、税理士、執筆家。ニンジャ達の将来の職業の方がお仕事されています!

DSCF3672

2015年10月24日(土)に第11回CoderDojo 八王子を開催しました

という訳で、開催レポートです!前回までの度重なる失敗を踏まえ写真をバッチリ取って早目にレポートを書きました。

メンターさんがお休み

立ち上げ時から皆勤の主力メンターさんが風邪でダウンしてお休み。皆勤賞を何にしようか考えていたのですが・・・。

今回は竹之下さんが一般参加者でありながらメンターとしても参加してくれました。八王子道場としては、どなたでも気軽に参加してほしいと願っています。しかし、参加しつつメンターでも参加といった形も大歓迎です!

くむちゃん助けて!

ここはコワーキングスペース!8Beat の月額会員でプログラマーの久村さんこと「くむちゃん」がご来店されているではありませんか。熱い視線を送ると快くメンターを引き受けてくれました。
DSCF3663

久村さんのいたずら心は子供とベストマッチ。初参加のニンジャもすぐに打ち解けて、プログラミングって楽しいって思ってくれたようです。
DSCF3681

保護者の方も時々メンター役をしてくれます。もちろん歓迎です。

進行は河村さん

今回も進行は河村さんにお任せしました。今回河村さんは子供たちの為(ありがたい事に CoderDojo 八王子の為だそうです)にオンラインで読める本を作ってくれました。
世界で最初のゲーム(テニスっぽいゲーム)について説明して、子供たちは知らないかなというと保護者の方が「知ってる、知ってる」という声もあり年代がばれますね(笑)

はじめてのキーボード

パソコンを一度も触ったことが無いので心配と保護者の方は言っておられましたが、ご安心下さい。この通り初めてキーボードに触れてローマ字入力出来きました。ゴジラだけに誤字とは恐るべきセンスです。DSCF3687-crop

「にゃー」と鳴いたら今日は CoderDojo

ニンジャの楽しそうな顔を見れるのは最高です。
DSCF3673

鬼ごっこから派生してメンターさんと話しながら色々と工夫を凝らします。なんか綺麗だったので動画を撮ってみました。

複数のPCがにゃーにゃー鳴くと多少騒がしいのでありますが、猫が鳴いたら今日は道場なんだなと一般のお客様にもご理解いただいております。

次回11月21日開催予定

CoderDojo 八王子も12回目となり、2年目に差し掛かろうとしています。CoderDojo 八王子の開催には平均で3000円程度の会場費を CoderDojo 八王子から支払っております。CoderDojo (八王子に限らず世界的に)は原則として参加者から参加費を徴収しません。これまで運営出来たのもご支援、ご協力のおかげです。この場を借りて改めて感謝申し上げます。

CoderDojo 八王子代表 荒井大輔

 

0

炎の型

メンターの河村さんが CoderDojo 用に「炎の型」を作ってくれました!

https://www.gitbook.com/book/kyorohiro/doc_scratch/details

ライセンスは CC0 です。
ScreenClip

0

第11回 CoderDojo 八王子は10月24日(土)開催です

重要なおしらせ

開催時間が変更になりました!(15:00~16:30)

次回以降のお申込みページが公開された時にメールでお知らせを受け取る事ができます。以下のリンクから、Peatix のイベントページを開いて「フォローする」ボタンを押してください。
http://peatix.com/user/759488

初めて参加される方初めて参加される方へをご覧ください。

お申込み

イベントページを表示

準備するもの

・ノートパソコン・電源アダプター・マウス
・CoderDojo 所有無料PC4台あり(なるべくお持ち下さると助かります)
・チケットが売り切れた場合はご相談してみてください。

参加対象者

小学2年生から中学3年生まで(原則、小学生以下は保護者の同伴が必要)

日時

2015年10月24日 (土) 15:00~16:30(居残り可)

参加費

無料

会場

コワーキングスペース八王子8Beat http://8beat.tokyo/

*フリードリンクを利用することができます(コーヒー、日本茶、リンゴジュース)
*無料のお菓子もあります

ご質問などはお問い合わせフォームからお願いいたします。

0

第10回 CoderDojo 八王子を開催しました

2015/9/26(土) に開催された CoderDojo 八王子のレポートです。

八王子道場も早いもので10回目となりました。さて、今回は河村さんにゲームを作ってきていただきました。

スプラトゥーン

今年の5月に発売された任天堂のスプラトゥーンというゲームをご存じでしょうか。TVのCMでも放送されていたのでご存じの方も多いかもしれません。

リンク: スプラトゥーン – 任天堂 (音が出ます)

作ったもの

今回は塗りつぶすをテーマにゲームをニンジャ達に作ってもらいました。キーでキャラクターを動かすと、キャラクターの足元に線が引かれます。一通り基本的なところまで作れたら自由に作りこんでもらいます。

ニンジャのともかちゃんの作品を紹介します。秘密の機能もあるのです。ぜひプレイしてみて下さい。

ともかちゃんの作品
https://scratch.mit.edu/projects/78792708/

画像をクリックすると作品を見る事ができます。
2015-09-26-tomoka

お詫び

今回、写真のデータを誤って消してしまい雰囲気をお伝え出来なくて残念です。第一回の時の秘蔵写真をひっぱりだしてみました。(この時は撮影の確認が無かったのでかなりぼかしています)

第1回CoderDojo八王子
第1回CoderDojo八王子
0

第10回 CoderDojo 八王子は9月26日(土)開催です

初めて参加される方は初めて参加される方へをご覧ください。

お申込み

イベントページを表示

準備するもの

・ノートパソコン・電源アダプター・マウス
・CoderDojo 所有無料PC4台あり(なるべくお持ち下さると助かります)
・チケットが売り切れた場合はご相談してみてください。

参加対象者

小学2年生から中学3年生まで(原則、小学生以下は保護者の同伴が必要)

日時

2015年9月26日 (土) 13:30~15:00(居残り可)

参加費

無料

会場

コワーキングスペース八王子8Beat http://8beat.tokyo/

*フリードリンクを利用することができます(コーヒー、日本茶、紅茶、リンゴジュース)
*無料のお菓子もあります

ご質問などはお問い合わせフォームからお願いいたします。

0

第9回 CoderDojo 八王子を開催しました

ブタの貯金箱を発見し過去の自分の気づかいに感謝している CoderDojo 八王子代表の荒井です。8/22(土)に第9回 CoderDojo 八王子を開催しました。

DSCF1677-blur

なぜ人はイライラする?

前回打ち合わせの時にミニゲームを作って、簡単に作れるものを用意して子供たちに作ってもらおう話をしておりました。決まったテーマがあれば参加人数にも対応しやすくなります。

今回はミニゲーム作成と進行役を兎本さんが担当してくれました。ミニゲームはなつかしのアレです。人間とは不思議なものです。イライラから解放される為にイライラするのです。

画像をクリックするとゲームを遊べます
umoto-game2

解説ページも用意しました。今回参加できなかった方もぜひ親子でやってみてください。
Scratchで「ベルを鳴らせ」ゲームを作ろう!

実際にニンジャに作ってもったのはこのゲームを簡略化して1ステージにしたものです。

ステージ作成

ニンジャにはまず長方形を組み合わせて障害物を描いてもらいました。

ベクターで絵を描くのはちょっと難しかったかな?概念よりも細かい操作をするというのが最初の障害になります。しかしこれもいつか役に立ちます。未来の社会ではスクラッチでインタラクティブなプレゼンテーション資料を作るかもしれません。それは冗談としても、ビジネスアプリケーションのマクロがスクラッチのようなビジュアル言語になっている可能性はあると思います。

しかし図形のハンドルはもう少し大きい方がちびっこニンジャには掴みやすいですね。それとは別に貸し出し用PCの解像度の関係で絵を描くウィンドウが非常に小さくなってしまったのですが、[編集]-[小さいステージ]にチェックを入れると良さそうです。

スクラッチはキーボードをあまり使いませんが、それでも小さい子にはマウスやタッチパッドで細かい操作をするのは難しいものです。興味を持ってもらいつつマウスに慣れるという点ではゲームは良いと思います。少し慣れたら今回のゲームをマウス対応にしてみるのも良いと思います。加速度や慣性を付けると難易度も上がると思います。

プログラミング

ニンジャによっては満足する図が描けるまで描きたいようです。気持ちはわかりますが、大人の事情で次へ進んでもらいました。

DSCF1688-blur

ニンジャ達がまず気づくのは、反対方向に動いてしまう事です。と、ここで座標の説明。これは説明する為の布石でした。

DSCF1693-blur2

僕が子供の頃、言語といえば BASIC か C かアセンブラでした。当時流行っていたテトリスというゲームをBASICとインラインアセンブルで作りました。最近はスクラッチを含め作ったものがクラウドに保存されるので、大人になった時に見る事ができますね。さすがにその時スクラッチが今のままとは思えませんが、BASICも一部で復活しているのを見ると、その時になっても見る方法はありそうです。

何が言いたいかと言えば、アカウント(パスワード)は大切に!

完成

ひとまず完成。ニンジャの作品を一か所で見れるようにしました。家に帰ってからも遊んでみてね。

おわりに

メンターさんは今回とても忙しかったと思います。メンターさん達の一生懸命な姿が印象的でした。次回、第10回は 9/26(土)開催です。メンターの河村さんが何か作ってきてくれる予定です。どんな内容になるか楽しみですね。

0

Scratchで「ベルを鳴らせ」ゲームを作ろう!

CoderDojo八王子スタジオで公開している「ベルを鳴らせ!Ring the bell」を元素材に、初心者でも簡単にゲームが作れるようにはじめの一歩を解説します。

ベルを鳴らせゲームとは?

ベルを鳴らせ!

赤やピンクの色で作られた枠に触らないように上下左右の矢印キー、↑↓→← を押してボールを進めていきます。枠に触っちゃうとやり直しです。無事ベルまでたどり着けた場合はベルが左右に動いてベルが鳴るような感じになります。合計3ステージあります。

この「ベルを鳴らせ」を元に、CoderDojo八王子8月22日イベント向けに作った「ベルを鳴らせ初心者バージョン」の作り方をご紹介します。

ベルを鳴らせ初心者バージョンを作る—絵を描く

初心者バージョンとしてこんな感じのものを作ろうと思います。

実際にscratchで作ってみましょう。

まずはscratchページに行き、ログインします。

1.枠の絵を描く

作る をクリックします

上にある名前を入れるところに好きな名前を入れます。

左下の方にあるスプライトという枠の新しいスプライトを描くボタン(ペンのマーク)をクリック

画面右に絵を描くスペースが表示されます。

右下にある ベクターに変換 ボタンをクリック。赤い枠を描いていきます。

右側にある図形の、四角形 をクリックします

塗りの四角形にしたいので、左下にあるこのマークをクリックします

色を変えたいのでここから、

赤色を選択します。別の好きな色でもかまいません!

こういう感じになります

マウスでドラッグして、四角を枠線を描いていきます

全部描けたら

スプライトの欄にある、を右クリックして 削除 をクリック

枠の位置を調整しようと思います

右上にある 矢印マーク をクリックして、

図形を全部囲って

左の画面を見ながら良さそうな位置に移動します

2.ボールを描く

新しいスプライトの スプライトをライブラリーから選択 ボタンをクリック

こんな感じの画面になります。

もの をクリック

ball をクリック

右下の OK をクリック

こんな感じになります。

コスチューム タブをクリックして

ボールをクリックし、

左画面を見ながらボールをスタート地点まで移動します

枠に入る大きさまでボールを縮めます

四つある角のどこかをクリックして内側にドラッグすると小さくなります。

枠の中に入りました

3.ベルを描く

bellと同じようにベルを選びます

左上の画面にこのように表示されます。ここでクリックしてドラッグしても位置が変えられるのでクリックして良さそうな位置に

移動します。

ベルを鳴らせ初心者バージョンを作る—動きを書く

絵が描けたので、これらを使って動きを書いていきたいと思います。

ボールを最初の位置に戻す

ボールの i という所をクリック

赤枠部分に位置をしめす x と y の数字が書かれています。これが最初の位置の座標です。この数字は後でも使うので何かにメモしておくといいかと思います。

スクリプトタブをクリックして イベント をクリック。(旗)がクリックしたとき を選んで

右側の画面に置きます

スクリプトタブの 動き をクリックして、このボタンを見てみます。先ほどボールの最初の位置の座標を確認しましたが、それと同じ数字が入っています。もしおなじ数字が入っていなければ先ほど確認した最初の位置の座標を入力してください。

これを選んで

右側の画面、先ほど置いた (旗)がクリックしたとき の下にくっつけます

さて、この動きはどんなことをしてくれるんでしょうか?試してみたいと思います。

左の画面でボールを下の方に移動しておきます。

緑色の旗 をクリックします。

すると



とボールが1秒かけて最初の位置に戻りました。この2つのブロックで 緑色の旗をクリックしたら、1秒間で最初の位置(座標x:2、y:-31)に移動する というプログラムができました。

数字によってどんな動きになるか確認したかったらこのブロックの変更できる数字の部分を大きくしたり小さくしたりして動きを確認してみてください。

右向き矢印 → をクリックしたら右に動く

このままだとまだボールは動かせません。右向き矢印 → をクリックしたら右に動くというプログラムを書いてみましょう。

スクリプトタブの イベント をクリックします。

スペース▼ キーが押されたとき というブロックの ▼ をクリックして

右向き矢印 をクリック

このブロックを右のスペースに持って行きます

右向き矢印 がクリックされたら右に動かしたいので、その動きのブロックを作ります

ここでちょっとXY座標について説明します

この図のように縦方向をY軸横方向をX軸と呼びます。今回は右に動かしたいので X座標を増やしていく ことになります。

ということで右に動かすブロックは

スクリプトタブの 動き をクリックして

x座標を10ずつ変える を

先ほどの 右方向矢印キーが押されたときの下にくっつけます

この状態で 右方向矢印キー を押すと、

少しずつ右に動くようになります。

赤い枠に当たったら音を鳴らして元の位置に戻す

今は

赤い枠に当たっても突き抜けて動いてしまいます。ここに 赤い枠に当たったら音を鳴らして元の位置に戻す という動きを追加したいと思います。

スクリプトタブの 制御 をクリック

もし、赤い枠に当たったら音を鳴らして元の位置に戻して そうでなければ 右に動かす という処理を書きたいので

これを選びます。右側に持って行きます。

まだくっつけずにおきます。さっき作った 右に動かす ブロックを

でなければ の中に移動します。次に赤い枠に当たったら、という部分を作ります。

赤い枠に当たったら、は

スクリプトタブ 調べる をクリック

▼ に触れた の  をクリックして

Sprite2 を選びます。これは、

スプライト画面で赤い枠がSprite2となっているからですので、もし違う名前になっていたらその名前を選んでください。

選んだらこのブロックを

ここに移動します。

次に赤い枠に当たったら 音を鳴らす を追加したいと思います。

スクリプトタブで  をクリック

popの音を鳴らす ブロックを

もしSprite2に触れたらの下に持って行きます。

赤い枠に触れたときは失敗なので、元の位置に戻したいと思います。

スクリプトタブ 動き をクリックして

このブロックを使います。先ほど緑の旗をクリックしたとき と同じブロックなのですが、ボールが動いているためか数字が変わってしまっていました。数字

先ほどと同じ 座標x:2、y:-31 にします。

そしてこのブロックを

popの音を鳴らす ブロックの下に移動します。

あとは、先ほどの 右向き矢印キーが押されたとき とくっつけます。

これで右向き矢印をクリックしたときの動きは完成です。試してみます。

緑の旗をクリックすると

ボールが元の位置に戻ります

右向き矢印キー をクリックして右に動かします

右に動かしていき、赤い枠に当たった

popの音が鳴って、元の位置に戻りました!

続きは自分でやってみましょう(^^)/

ここまでで「絵を描く」「動きを書く」という基本的な動作については分かったと思います。

残っているのは

・下向き矢印キーをクリックしたら下に動く
・ベルに当たったら 音を鳴らして元の位置にもどる

という動きです。右向き矢印キーと同じような考え方で作ればきっとできると思いますのでぜひ続きは自分でやってみてください!

と思いましたがちょっと難しいかもなので、できない人はこちらをみてみてください

…と思ったんですが、自分でもやってみてちょっと迷ったところとかがあるので、分からない方はこちらを見てみてください。

自分で出来そうな方は、ここからは自分でやってみてください。そして、自分でできた人も自分のやり方と違うところもあるかもしれないので作り終わってからの参考のために見てみてください。

下向き矢印キーをクリックしたら下に動く

下向き矢印キーをクリックしたら下に動く、というのは右向き矢印の時とほとんど同じように、

こんな感じに作ってください。違うのは下向き矢印キーを押したときの動きで Y軸(縦方向) に 下に移動したいので -10 と入っています。

ベルに当たったら 音を鳴らして元の位置にもどる

今の状態だと、

下向き矢印キーをクリックしていくとベルに当たってもどんどん進んで突き抜けてしまいます。

ということで、ベルに当たったら音を鳴らして元の位置にもどる のブロックを追加します。

今作ったブロックの 下に移動するブロックをいったん外側にはずしておいておきます。

スクリプトタブ の 制御 をクリック

もし なら でなければ ブロックを

この位置にもってきます。さっきはここで下に進めてましたが、もしベルに当たったら音を鳴らして元の位置にもどり、そうでなければ下にすすむ ということにしたいと思います。

ということで下に外してあった

下に進むブロックを でなければ のところに移動します。

ベルに触れたら、の部分を作りたいので

スクリプトタブの 調べる をクリックして、▼ に触れたら、の▼をクリックして Bell を選びます。

そしてそのブロックを

このように移動します。

ベルを鳴らしたいと思います。

スクリプトタブの  をクリック

▼ の音を鳴らす、で選択しようとしても pop と録音しかありません。bellの音を追加するには、

 タブをクリックして、

スピーカーのマーク 音をライブラリから選択 をクリック。

このようにたくさんの音の中から bell toll をクリックします。
* 再生ボタンをクリックすればその音がどんな音か分かるので好きな音を選んでもいいかと思います

右下にある OK をクリックします。

これで音が追加されたので スクリプトタブの  をクリックして 

bell tollの音を鳴らす というブロックにして、

もしBellに触れたら のところに移動します。

ボールを元に戻したいので、スクリプトタブの 動き から

このブロックを

音を鳴らすの下に入れて、

x軸とy軸の数字を元の位置の数字 2と-31にします。

これで完成です(^^)/

ここで作る ベルを鳴らせ はここで見ることができます!

ここで作る ベルを鳴らせ はここで見ることができます!

CoderDojo八王子スタジオ

これは私たちCoderDojo八王子で教材として使ったり、参加した忍者のみんなが作った作品を置いてあるスタジオです。自由に中身を見たり、遊んだり、リミックスして自分のスクラッチを作ったりすることができます。

今回の「ベルを鳴らせ」、は 

これですので、中身を見たかったり動きを確認したかったりしたらみてみてくださいね。リミックスも大歓迎です!

0

第9回 CoderDojo 八王子は8月22日(土)開催です

初めて参加される方は初めて参加される方へをご覧ください。

お申込みは以下からお願いします。

イベントページを表示

準備するもの:
 ・ノートパソコン・電源アダプター・マウス
 ・CoderDojo 所有無料PC4台あり(なるべくお持ち下さると助かります)
 ・ノートパソコンはボランティア又はメンターからお貸しすることも出来ますので、チケットが売り切れた場合でもご相談してみてください。

参加対象者:
 小学2年生から中学3年生まで(原則、小学生以下は保護者の同伴が必要)

日時:
 2015年8月22日 (土) 13:30~15:00(居残り可)

参加費:
 無料

会場:
 コワーキングスペース八王子8Beat http://8beat.tokyo/

*フリードリンクを利用することができます(コーヒー、日本茶、紅茶、リンゴジュース)
*無料のお菓子もあります

ご質問などはお問い合わせフォームからお願いいたします。

1 3 4 5 6