目次はじめに p1 1.Scratch- スクラッチ - って? p4 2.Kinect- キネクト - って? p5 3.Scratch 画面ってどうなってるの? p6 4.Scratch- スケルトンセンサーの値見取り図 - p7 5. プログラムを作ってみよう 1 ネコとボール p8 5-1

Size: px

Start display at page:

Download "目次はじめに p1 1.Scratch- スクラッチ - って? p4 2.Kinect- キネクト - って? p5 3.Scratch 画面ってどうなってるの? p6 4.Scratch- スケルトンセンサーの値見取り図 - p7 5. プログラムを作ってみよう 1 ネコとボール p8 5-1"

ありみちあみおか
6 years ago
Views:

1 はじめに皆さんいきなりですが今の時代どのようなものがコンピュータによって制御されていると思いますか? 信号機や鉄道車など実は身の回りのあらゆるものがコンピュータによって制御されていますそれらは先ほど挙げたように私たちの生活に密接に関係しているものばかりですそしてそのコンピュータを制御するためにプログラムが構築されていますつまりプログラムなどの技術は今や生活の基盤といっても過言ではありません今回はその生活の基盤ともいえるプログラムを一緒に開発していきましょう!! ちょっと難しそうこのように思った人はいませんか?? このワークショップでは Kinect という Xbox のゲームデバイス Scratch というプログラム言語( ワークショップ内で説明します ) 以上 2つを組み合わせて進めていきますこれらによって一見難しそうと思われがちなプログラミングがより一層楽しくそして簡単にできてしまうのですだから安心してくださいね (^^) ワークショップとは体験型講座のことです一緒に作業をしながらみんなのスキルを伸ばしていきましょう! プログラミングに対する難しそうだなぁというイメージが少しでも無くなりますように (* `*) モーションセンサーワークショップ企画班一同 1

2 目次はじめに p1 1.Scratch- スクラッチ - って? p4 2.Kinect- キネクト - って? p5 3.Scratch 画面ってどうなってるの? p6 4.Scratch- スケルトンセンサーの値見取り図 - p7 5. プログラムを作ってみよう 1 ネコとボール p ボールのスプライト作成 p ボールのプログラム p ネコのプログラム p10 6. プログラムを作ってみよう 2 バナナでピアノ p スケルトンの読み込み p スプライトの選択 p バナナのプログラム p バナナの複製 p19 7. プログラムをカスタマイズしてみよう! p スプライトのコスチュームを変更しよう p スプライトのコスチュームを編集しよう p 音を変えてみよう p 背景を変更してみよう p24 2

3 8. オリジナルプログラム集 p25 その 1 かんたん壁打ち! p25 その 2 お絵かき p27 その 3 蝶をかわせ! p29 その 4 爆弾ゲーム p30 9. 最後に p 付録 p33 3

は視覚的にわかりやすいプログラミングができるためプログラミングの入門に向いているといわれています

命令が書かれたブロックを組み合わせていくことでプログラムを作成することができます

4 1.Scratch- スクラッチ - って? マサチューセッツ工科大学 (MIT) が開発したプログラミング言語スクラッチ (Scratch) はアメリカのマサチューセッツ工科大学 (MIT) で開発された小学生にも使える教育用のプログラミング環境ですスクラッチ (Scratch) は視覚的にわかりやすいプログラミングができるためプログラミングの入門に向いているといわれていますブロックを組み立てるようにカンタンスクラッチでは難しいプログラミング言語を打ち込む必要はなく命令が書かれたブロックを組み合わせていくことでプログラムを作成することができますつくったプログラムを共有できる SCRATCH 想像プログラム共有 ( 自分が作成したプログラムを公開共有できる Scratch のコミュニティサイトがあります登録プロジェクト数は 6000 を超えています 4

人の動きをそのまま取り込む斬新な発想をしたデバイスが注目を集め短期間で最も売れたコンシューマーデバイスとしてギネス記録にも認定されました Kinect の機能とは

音声が発生した方向を取得します最近では Kinect はプログラミングやダンスの授業にも用いられ始めています注意 )Kinect は2 種類ある!

5 2.Kinect- キネクト - って? 2011 年マイクロソフトの家庭用据え置き型ゲーム機 Xbox360 の新しい入力センサーとして登場しました人の動きをそのまま取り込む斬新な発想をしたデバイスが注目を集め短期間で最も売れたコンシューマーデバイスとしてギネス記録にも認定されました Kinect の機能とはスケルトン情報: 人体の各部位 ( 骨格や関節 ) の 3 次元の情報を取得します深度情報: 物体のセンサーからの距離を取得します音声方向: 音声が発生した方向を取得します最近では Kinect はプログラミングやダンスの授業にも用いられ始めています注意 )Kinect は2 種類ある! Kinect は現在 2 種類発売されています Scratch と連携できるのは上記の画像で紹介した Xbox 360 Kinect センサーですもうひとつの kinect for windows では Scratch と連携できないので注意してください Xbox 360 Kinect センサー kinect for windows 定価 :14,800 円定価 :21,310 円 5

6 3.Scratch 画面ってどうなっているの? コマンドグループパレットステージスプライトスクリプトエリアブロックパレットスプライト一覧スプライトプログラムに登場するキャラクターのことです Scratch 起動時にはオレンジ色のネコが用意されていますスプライトはネコから変更することも自分で新しく作ることも増やすこともできます作成追加したスプライトはスプライト一覧で確認することができますステージスプライトを配置して動かす画面のことですステージの右上の緑の旗をクリックするとプログラムが実行されそのとなりの赤いボタンをクリックするとプログラムが停止しますスクリプト Scratch でのスプライトに対する命令つまりプログラムのことです画面左上にあるコマンドグループパレットの中から項目を選択するとブロックパレットにスプライトを動かすためのいろいろなコマンドが出てきますそのブロックパレット内からブロックを選択しスクリプトエリアで組み合わせて作ります 6

7 4.Scratch- スケルトンセンサーの値見取り図 - スケルトンのセンサーはこのように対応しています図 4-1 センサの値対応図靴のスクリプトにおいて座標の指定を行うときなどに使います x 座標やy 座標を下図のように指定するとスプライトを体の動きに反応させて操作することができます図 4-2 センサの使用例 ( リフティングの左足 ) 7

8 5. プログラムを作ってみよう 1 ネコとボールボールのスプライトの作成 1 図 5-1 ネコとボールのスプライト一覧 1 1 スプライト作成ボタンをクリックします 2 3 図 5-2 ペイントエディター 2 楕円ツールボタンをクリックします 3 パレットのをクリックします 4 緑の枠の中に円を作成する作成したら OK ボタンをクリックします 8

ボールのプログラム 1 1 ボールのスプライトをクリックします図 5-3 ネコとボールのスプライト一覧 2 2 3 4 5 図 5-4

の2つのブロックをスクリプトエリアに移動します 3 コマンドグループパレットの動きをクリックします 4

9 ボールのプログラム 1 1 ボールのスプライトをクリックします図 5-3 ネコとボールのスプライト一覧図 5-4 ボールのスクリプト 2 図 5-4 のようにコマンドグループパレットの制御からオレンジ色の旗がクリックされたときとずっとの2つのブロックをスクリプトエリアに移動します 3 コマンドグループパレットの動きをクリックします 4 ブロックパレットにある四角で囲んだ2つのブロックをスクリプトエリアに移動し図 5-4 のように組み合わせます 5 図 5-4 のようにブロックの数字をそれぞれ 5 に変更します 9

10 ネコのプログラム 1 1 ネコのスプライトを選択します図 5-5 ネコとボールのスプライト一覧 3 2 図 5-6 ブロックパレット 2 コマンドグループパレットで制御を選択します図 5-6 のようにブロックパレットにある3つのブロックをスクリプトエリアに移動してブロックを組み合わせます 10

11 3 4 図 5-7 コマンドグループパレット調べる 3 コマンドグループパレットの調べるをクリックします 4 色に触れたをもしならに入れます 5 6 図 5-8 ボールの色抽出 5 色に触れたの中のをマウスでクリックします 6 マウスカーソルがスポイトの形に変わりますそのままマウスカーソルを赤いボールの上に移動してクリックすれば色に触れたの四角の色がからになります 11

12 7 8 図 5-9 コマンドグループパレット色 7 コマンドグループパレットの音をクリックします 8 ブロックパレットにあるニャーの音を鳴らすをスクリプトエリアに移動し図 5-9 のようにブロックを組みます 12

13 6. プログラムを作ってみよう 2 バナナでピアノスケルトンの読み込み 1 図 6-1 ファイルから開く 1 ウインドウ上部のファイル開く 2 図 6-2 Sample を選択 2 図 6-3 Kinect2Scratch Skelton を選択 2 デスクトップ Sample Kinect2Scratch Skelton をクリックし OK ボタンをクリックします 13

14 3 図 6-4 サンプルプログラム Skelton の読み込み完了 3 すると図 6-4 のような画面になりスケルトンの読み込みは完了です遠隔センサ接続が有効になりましたというウインドウは OK ボタンをクリックして閉じますスプライトの選択 1 図 6-5 新しいスプライトを選択する 1 新しいスプライトをファイルから選ぶのボタンをクリックします 14

15 2 2 Things をクリックして開きます図 6-6 ファイル Thing を選択 3 図 6-7 バナナを選択 3 バナナのイラストをクリックし OK ボタンをクリックしますステージとスプライト一覧にバナナが追加されましたか? 図 6-8 バナナが追加されました 15

16 バナナのプログラム 1 1 バナナのスプライトをクリックします図 6-9 バナナのスクリプトを選択 2 図 6-10 コマンドグループパレット制御 2 コマンドグループパレットで制御を選択します図 6-11 ブロックの組み立てその 1 3 図 6-11 のように 3 つのブロックをスクリプトエリアに移動し組み立てます 16

17 4 図 6-12 コマンドグループパレット調べる 4 コマンドグループパレットの調べるをクリックします図 6-13 ブロックの組み立てその 2 5 色に触れたをもしならに入れます赤い部分をクリック図 6-14 関節から色を取る 6 色に触れたの中のをクリックしますするとマウスカーソルがスポイトの形に変わりますそのままマウスカーソルをステージに移動してスケルトンの関節の赤い部分をクリックするとを色に触れたのの色が赤色に変化します 17

18 7 図 6-15 コマンドグループパレット音 7 コマンドグループパレットの音をクリックします図 6-16 ブロックの組み立てその 3 8 ブロックパレットにあるの音符を拍鳴らすをスクリプトエリアに移動し図 6-16 のようにブロックを組みます 9 図 6-17 音の変更その 1 9 図 6-17 のようにの音符をのブロックのの部分をクリックしますすると鍵盤が表示されるので出したい音の鍵盤をクリックします 18

19 バナナの複製図 6-18 バナナの複製その 1 図 6-19 バナナの複製その 2 1 スプライト一覧のバナナを右クリックし複製をクリックしますするとバナナがスプリクトごと複製されます 19

20 図 6-20 複製したバナナの編集 2 スプライト一覧上で複製されたバナナをクリックしますするとスクリプトエリアに複製されたバナナのスプリクトが表示されます 3 図 6-21 音の変更その 2 3 の音符をのブロックのの部分をクリックし出したい音の鍵盤をクリックします 4 1~3の作業を繰り返し音階を作成します出来上がったら実行してみましょう! 図 6-22 バナナでピアノ完成図 20

21 7. プログラムをカスタマイズしてみよう!! スプライトのコスチュームを変更しよう 1 2 図 7-1 スプライトのコスチューム1 1 変更したいスプライトを選択した状態で図 7-1 のコスチュームタブをクリックします 2 図 7-1 の読み込みをクリックします図 7-2 画像の読み込み 3 すると図 7-2 のような画面が出てきます使いたいコスチュームは登録しておく必要がありますコスチュームはグループ分けして保存してあるので自分のお気に入りのコスチュームを選択し OK をクリックしてください新しいコスチュームを選ぶとコスチュームタブの下に登録されます 21

22 スプライトのコスチュームを編集しよう 1 2 図 7-3 スプライトのコスチューム2 1 変更したいスプライトを選択した状態で図 7-3 のコスチュームタブをクリックします 2 図 7-3 の編集をクリックします 5 図 7-4 スプライトのペイントエディター 4 すると図 7-4 のような画面が出てきますここで好きなように画像を編集してみましょう 5 お気に入りの画像ができたら図 7-4 の右下の OK ボタンをクリックします 22

音を変えてみよう 2 1 1 音タブをクリックします図 7-5 スプライトの音 2

23 音を変えてみよう音タブをクリックします図 7-5 スプライトの音 2 読み込みボタンをクリックし音を読み込むウィンドウを表示させます図 7-6 音の読み込み 3 スクラッチには図 7-6 のようにグループごとにたくさんの音が用意してあります 4 気に入った音が見つかったらその音を選んで OK をクリックします 5 すると選んだ音が音のタブエリアに新しく登録されます 23

背景を変更してみよう 2 3 1 図 7-7 ステージの背景 1 図 7-7 の右下のステージ

24 背景を変更してみよう図 7-7 ステージの背景 1 図 7-7 の右下のステージをクリックします 2 図 7-7 の真ん中の背景タブをクリックします 3 図 7-7 の読み込みボタンをクリックします 5 図 7-8 背景の読み込み 4 背景を読み込むウインドウが開いたら図 7-8 のように画像の種類ごとに分けられたフォルダが表示されます 5 自分のお気に入りの画像を選んで OK ボタンをクリックします 24

25 8. オリジナルプログラム集これから紹介するプログラムはワークショップのスタッフが作成したオリジナルのプログラムです同じものを実際に作って遊んでみたり新しいプログラム開発の参考にしたり自由に活用してください! その 1 かんたん壁打ち! < 実行画面のイメージ > 図 8-1 かんたん壁打ち! 実行画面壁に当たって跳ね返るボールを赤い線に触れさせないように打ち返そう! < ラケットのスクリプト > 図 8-2 ラケットのスクリプト注意 ) ラケットのスプライトに使用するブロック HandRight_x センサーの値と HandRight_y センサーの値の HandRight_x と HandRight_y は Kinect に接続しないと選択できないよ! 25

26 < テニスボールのスクリプト > ステージの横の赤線のことだよ! 図 8-3 テニスボールのスクリプト 26

27 その 2 お絵かき < 実行画面のイメージ > 2 1 図 8-4 お絵かき実行画面自分の手の動きに合わせてお絵かきができるよ! 1 ( 消しゴム ) に触れると今まで描いたものが全消しされて手に持ったはけで➁( 絵の具 ) に触れるとそれぞれの絵の具の色に変わります (^O^) ( スクリプトの説明は次のページへ ) 27

28 < はけのスクリプト > 右手の位置を取得ペンのスクリプトはけで絵の具に触れると色を変える 1 消しゴムのスクリプト図 8-5 はけと消しゴムのスクリプト注意 ) はけのスプライトに使用するブロック HandRight_x センサーの値と HandRight_y センサーの値の HandRight_x と HandRight_y は Kinect に接続しないと選択できないよ! 28

29 その 3 蝶をかわせ! < 実行画面のイメージ > 図 8-6 蝶をかわせ! 実行画面ねこちゃんの姿になった自分に危険な蝶々がせまってくる!! 軽いフットワークで蝶々から逃げ出そう!! ねこちゃんの顔に蝶々が触れるとねこちゃんからの苦しい声が < 危険な蝶のスクリプト > がついているところは自由に変更できるよ^^ 蝶々のスクリプトは何個でも増やすことができるよここでは3 匹だねスプライトは蝶々以外でも作ることができるよお気に入りの画像で作ってみよう! 図 8-7 危険な蝶のスクリプト 29

その 4 爆弾ゲーム < 実行画面のイメージ > 図 8-8 爆弾ゲーム実行画面これは 2

count とは爆弾を触ると増える変数です out とは爆弾を爆発させる基準を決める変数です

30 その 4 爆弾ゲーム < 実行画面のイメージ > 図 8-8 爆弾ゲーム実行画面これは 2 人以上で行う対戦ゲームです爆弾にタッチすると爆弾が大きくなるよ交互に爆弾にタッチし続けて爆弾を爆発させたほうが負け! < 爆弾のスクリプト> 最初に count と out という二つの変数を作ろう! count とは爆弾を触ると増える変数です out とは爆弾を爆発させる基準を決める変数です out は 500 から 800 の中の 1 つの数字が設定されます爆弾を触るたび爆弾のコスチュームは 2 ずつ大きくなります図 8-9 爆弾のスクリプト 1 30

31 次に count の数字が out の数を超えたとき爆発するように設定しよう! count が out の数字を超えたとき効果音とともに爆弾のコスチュームを爆発のコスチュームに変えることができます図 8-10 爆弾のスクリプト 2 増えていく count の数字によって爆弾の画像を変えて臨場感を出そう! 図 8-11 爆弾のスクリプト 3 31

9. 最後にこのワークショップを通してプログラミングの楽しさを学んでいただけたでしょうか?

無料でダウンロードできるソフトですぜひ家に帰ってからダウンロードして自分のオリジナルのプログラムを開発してみてください

もっと深く学びたいと思ったりするきっかけになれば幸いですこのワークショップや進路のことなどで相談がある場合は

32 9. 最後にこのワークショップを通してプログラミングの楽しさを学んでいただけたでしょうか? みなさんが感じたように最近では誰もが簡単にプログラムを開発できるようになってきているのです今回使ったスクラッチは無料でダウンロードできるソフトですぜひ家に帰ってからダウンロードして自分のオリジナルのプログラムを開発してみてください今日学んだことを活かしていきましょうまた様々なアレンジをして楽しむことができるので友達や周りの人とも楽しく作って遊んで学んでみてもよいかもしれません本日はワークショップに参加してくださりありがとうございましたこのワークショップがみなさんがプログラミングについて興味を抱いたりもっと深く学びたいと思ったりするきっかけになれば幸いですこのワークショップや進路のことなどで相談がある場合は下記のアドレスにメールを送っていただければ微力ながらサポートいたしますこれからも関わりをもっていけることまたお会いできることをスタッフ一同楽しみにしていますモーションセンサーワークショップ企画班 SKPUK アドレス 32

33 10. 付録ワークショップで使っていた Scratch や Kinect と連動させるためのソフトはすべてフリーつまりネット上から無料でダウンロード ( 以下 DL) することができます皆さんの家の PC にもDLして使いこなせるようになりましょう! 手順 1 Scratch の DL 2 Scratch のサンププロジェクトの DL 3 MS Kinect SDK BETA 2 の DL 4.Net Framework 4.0 の DL 5 WindwosUpdate を実施 6 Kinect2Scratch の DL 7 Kinect を接続し Kinect2Scratch を起動 "Launch Kinect" ボタンをクリックここで失敗してしまった場合は DirectX SDK の DL が必要です 1 Scratch の DL (1) Scratch ホームページ ( にアクセスし Download Scratch をクリックします ( 次のページへ ) 33

34 (2) 自分の OS に対応するものを選びインストールしますインストールしたものを実行しセットアップ画面へ移ります (3) セットアップ画面が表示されたら後は NEXT> をクリックしていきます完了するとショートカットがデスクトップに表示されるのでクリックします Scratch が正しく起動すれば成功です 34

35 2 Scratch のサンプルプロジェクトの DL (1) d.php?id=2 にアクセスしサンプルプロジェクトを保存します (2) 右クリック保存したファイルをすべて展開します (3) プロジェクトを全て選択し (shift キーを押しながら ) コピーします 35

をどこにインストールしたか覚えておきましょう 3 MS Kinect SDK BETA 2 の DL の DL

36 (4) コピーしたファイルを /Scratch /Projects に貼り付けます人によって Program Files 内に Scratch が入っている場合もあります Scratch をどこにインストールしたか覚えておきましょう 3 MS Kinect SDK BETA 2 の DL の DL (1) へアクセスし DOWNLOADSDK ボタンをクリックします 36

保存したファイルを実行するとセットアップ画面が開きますライセンス条項に同意にチェックをいれ

37 (3) ページの真ん中にある DOWNLOAD LATEST SDK のボタンをクリックしますクリックするとダイアログが開き保存するかどうか聞いてくるので保存を選択します (4) 保存したファイルを実行するとセットアップ画面が開きますライセンス条項に同意にチェックをいれインストールボタンを押します後は流れにそって進んでいくと完了します最後に ToolKit をダウンロードするかどうか聞かれますがキャンセルしても問題ありません 37

38 4.Net Framework 4.0 の DL (1) へアクセスします言語が日本語になっていることを確認しダウンロードボタンを押します (2) 間に他の製品のダウンロードを奨められますがキャンセルで構いません次の画面に遷移したら保存をクリックします 38

39 (3) 保存したファイルを実行しますセットアップ画面が立ち上がったら同意するにチェックを入れインストールボタンをクリックしますインストールが行われ完了ボタンをクリックすると終了です環境によって再起動を奨められる場合もあります 5 WindwosUpdate を実施 (1) デスクトップ画面に戻りすべてのプログラムから WindowsUpdate を選択します (2) 更新プログラムの確認ボタンをクリックします 39

40 (3) 利用可能な更新プログラムが検出されたら更新プログラムのインストールをクリックします (4) インストールが完了しいますぐ再起動ボタンが表示されたら再起動を行います表示されない場合はそのまま WindowsUpdate の画面を閉じます 6Kinect2Scratch の DL (1) にアクセスします 40

(2) 画面真ん中にあるフォームに必要事項を入力してメールを送信します DL の URL

保存したファイルを展開しますデスクトップにショートカットを作成しておくと便利になります 6

左上の LAUNCH KINECT ボタンを押しますここまでの DL などが上手くいっていると

41 (2) 画面真ん中にあるフォームに必要事項を入力してメールを送信します DL の URL が入力したメールアドレスに返信されます URL にアクセスしファイルを保存します (3) 保存したファイルを展開しますデスクトップにショートカットを作成しておくと便利になります 6 Kinect を接続し Kinect2Scratch を起動 "Launch Kinect" ボタンを押す (1) Kinect と PC を USB ケーブルで繋ぎますセンサーのみのパックには同梱されています (2) Kinect2Scratch を起動します左上の LAUNCH KINECT ボタンを押しますここまでの DL などが上手くいっていると Kinect との接続に成功しカメラの映像が映りますもしここでうまく繋がらなかったりエラーの表示が出た場合は DirectX 41

42 SDK の DL が必要になります DirectX SDK の DL 方法 (1) にアクセスします Directx SDK の最新版をクリックします (2)DOWNLOAD ボタンを押し保存します (3) ファイルを実行しセットアップ画面の指示に従います使用許諾に同意するを選択しチェックして完了ですこれで終了だよ! お疲れ様 (^ ^)/ 42

43 SKPUK ~ 体がコントローラー!?Scratch で作る体験型プログラム教室 ~ 第 2 回 12 月 16 日教科書発効日 2012 年 12 月 10 日第 1 版第 1 刷平成 24 年度熊本県立大学後援会自主研究推進助成事業事業名高校生を対象にしたモーションセンサーワークショップに関する研究発行者モーションセンサーワークショップ企画班お問い合わせ等はこちらまで skpuk.iimuralab@gmail.com 43

はじめに皆さんいきなりですが今の時代どのようなものがコンピュータによって制御されていると思いますか? 信号機や鉄道車など実は身の回りのあらゆるものがコンピュータによって制御されていますそれらは先ほど挙げたように私たちの生活に密接に関係しているものばかりですそしてそのコンピュー

はじめに皆さんいきなりですが今の時代どのようなものがコンピュータによって制御されていると思いますか? 信号機や鉄道車など実は身の回りのあらゆるものがコンピュータによって制御されていますそれらは先ほど挙げたように私たちの生活に密接に関係しているものばかりですそしてそのコンピューはじめに皆さんいきなりですが今の時代どのようなものがコンピュータによって制御されていると思いますか? 信号機や鉄道車など実は身の回りのあらゆるものがコンピュータによって制御されていますそれらは先ほど挙げたように私たちの生活に密接に関係しているものばかりですそしてそのコンピュータを制御するためにプログラムが構築されていますつまりプログラムなどの技術は今や生活の基盤といっても過言ではありません

目次 はじめに p1 1.Scratch- スクラッチ - って? p4 2.Kinect- キネクト - って? p5 3.Scratch 画面ってどうなってるの? p6 4.Scratch- スケルトンセンサーの値見取り図 - p7 5. プログラムを作ってみよう 1 ネコとボール p8 5-1

目次はじめに p1 1.Scratch- スクラッチ - って? p4 2.Kinect- キネクト - って? p5 3.Scratch 画面ってどうなってるの? p6 4.Scratch- スケルトンセンサーの値見取り図 - p7 5. プログラムを作ってみよう 1 ネコとボール p8 5-1