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/

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

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

0

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

今回は夏休みという事もあり参加者が多くて賑やかでした。メンターが不足ぎみで奥の手も考えておりましたが、なんと4人も新人メンターさんが参加してくれまして今回も無事に開催する事ができました。

DSCF9107

第8回は 8Beat スタッフでもある栗川君に進行を務めてもらいました。ゲーム以外にも作ることができる事を示したかったと語る栗川君が作ってきてくれたのは電子ピアノです。鍵盤をマウスでクリックすると音が鳴ります。「お手本とはシンプルで荒削りが良いのだ」と言っていたような言っていなかったような。

P7180004

栗川君がピアノの作り方を伝授すると、ニンジャはさっそくアレンジしてノートパソコンのキーを押すと鍵盤から音が出るように改良したようです。生演奏をしてもらいました!

作品は以下のページからご覧になれます。メンターの兎本さんが用意してくれました。ありがとうございます。
https://scratch.mit.edu/studios/1400524/projects/
今後はこちらのページにみんなの作った作品が見れるようにしていく予定です。楽しみですね。

また、今回はなんと中学生の女の子が一人で来てくれました(小学生以下は原則保護者同伴です)。自分でもスクラッチを触ったことがあるとの事でとても呑み込みが早くて感心しました。
新人メンターさんは、現役プログラマー2名、美術大学の学生さんが参加してくれました。また、アシアルスクールのプログラミング講師をされている Justice 岡本さんも参加してくれました。次回以降も参加してくれると嬉しいです。

P7180008

1年は12か月です。そのうち月1回1時間だとしたら、12時間しかありません。それだけの時間で学べることは限られてしまいます。家に帰ってもまたやってみたい。そう思ってもらえたら嬉しいです。
子供たちに接していると、同じ子は一人として居ないことに気づかされます。道場だって、きっと同じ道場は一つとしてありません。
みんなの思いが詰まったかけがえのない道場になってほしいです。近い将来この道場のニンジャ達がメンターになる日が来るかもしれません。その日を楽しみに、この活動を続けて参りたいと思っております。

0

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

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

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

イベントページを表示

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

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

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

参加費:
 無料

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

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

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

0

【レポート】 第7回 CoderDojo 八王子

【レポート】 第7回 CoderDojo 八王子

今回の進行を務めてくれたのはメンターの怜君です。

怜君の作品はこちらで実際に遊んだり、中を見たり(ソースコード=ブロックの組み合わせを見る事)、改造したりできますよ。

P6210085

今回は新人メンターが3人来てくれました。

P6210093
自宅でも作ってきたという作品。なかなか良い動きをしています。

P6210086

アンドロイドTシャツとポロシャツを販売しました。本日は特別に売上の全てを CoderDojo 八王子に寄付して頂きました。ありがとうございます。モデルになってくれたのは新人メンターの末永さん。

P6210104

 

終わってから、メンター同士でマインドストームを導入したいという話や、スクリプト言語を教えたらどうかという話をしました。それらもいろいろ考えるといくつもの問題が出てきます。少しづつクリアしていけるよう皆で頑張って参ります。

 

0

第6回の様子

[レポート] 第6回 CoderDojo 八王子

会場の様子です。今回のオープニングトークは小泉さんが担当しました。

この日の為に作ったゲームを見せてくれました。

雰囲気

3Dプリンターのデモを見る子供たち。

3Dプリンターのデモ

今日のメンターさん

ホワイトボード

募金箱を作りました。

募金箱

1 3 4 5 6