2018年07月13日

プログラミング講習会第4日目

西日本豪雨で深刻な報道の多い中、タイ洞窟に閉じ込められた13人が全員救出されたことは明るいニュースでした。
この少年たちに、サッカー日本代表がサイン入りユニホーム13着を用意したそうで、今頃はきっと贈呈されたのではないでしょうか。
WCサッカーで日本が敗退し、サッカーネタが無くなって無理にくっつけているって?済みません、その通りです。
今日はプログラミング講習会の最終日、終わり良ければ全て良しとしたいものです。

日 時:平成30年7月8日(日)13時30分から15時30分
場 所:八王子市心身障害者福祉センター訓練室
参加者:4名

<学習内容>
シューティングゲームを作ろう
・たま、コウモリ、できるもん(キャラクタ)のスプライトを配置する。
・背景を設置する。
・できるもんの左右の動きを設定する。
・たまの動きを設定する。
・コウモリの動きを設定する。
・たまがコウモリに当たった時の画像の効果を設定する。
・たまがコウモリに当たった時の得点の計算をする。
 (10回当たると「まいりました」と言う。)
・ゲームが終了するとリセットするように設定する。
・ジョイスティックをBluetooth接続してゲームを動かす。
Scratchスタジオを利用したプロジェクト共有
・Scratchスタジオの中を見る。
・Scratchスタジオの作品(ゲーム)を試みる。
・受講生各人がスクラッチのアカウントを取得する。
・マネージャーからキュレーターへの招待を受ける。
・招待を受け入れて、自分の作品(プロジェクト)を追加する。

401.jpg  402.jpg  403.jpg
今日の会場は以前より狭いところになり、窮屈な状態で熱気ムンムンです。
講義を始める前に、会のブログの紹介がありました。
ブログを見ると、以前やったことが思い出されて参考になるのではないでしょうか。
その後、それぞれに作ったプロジェクトを共有できるよう、講習会用のScratchスタジオを作ったので、この利用について説明がありました。
スクラッチのアカウントを持つと作品をスタジオに置くことができますが、アカウントがなくても見ることはできますので、それを見てみましょう。

404.jpg  405.jpg  406.jpg
URLの書かれた紙を手に手慣れた様子で入力し、あっという間に見る準備ができました。
興味のあるものがあったら、見てみましょう。

407.jpg  408.jpg  409.jpg
「興味あるもの」と言われると、やっぱゲームですよね。
でもゲームばっかしやってると、この絵のように「またゲームしてるの!」と言われてしまいます。
「してるのじゃなくて、作ってるの」って言えるようにしましょう。
今日のテーマは「シューティングゲームを作ろう」です。

410.jpg  411.jpg  412.jpg
最初はおなじみのこの画面から始まります。
ゲームに必要な材料は、パソコンの中に準備されています。
まず、背景を設置しましょう。

413.jpg  414.jpg  415.jpg
背景の次はスプライトです。
できるもん(キャラクタ)、たま、コウモリの3種類が必要です。
このゲームではできるもんがたまを打って、コウモリに当てます。
10回当てるとゲームオーバーになります。

416.jpg  417.jpg  418.jpg
背景の設置を終えた受講生は涼しい顔をして、次の説明を待っています。
でも後ろの席の方ではまだ・・・・??
スクリプトの作成に入ります。まずは「できるもん」から。
「←」「→」キーで左右に動くように設定します。

419.jpg  420.jpg  421.jpg
次は「たま」のスクリプト、たまを上向きにし、「できるもん」の所から上へ向かって発射できるように設定します。
スペースキーを押すとたまが発射されます。

422.jpg  423.jpg  424.jpg
最後に「コウモリ」のスクリプトを作成します。
10回当たるとゲームオーバーになるよう、新しく「得点」という変数を作ります。
コウモリがパタパタ羽を動かすのは、最初にやったスクラッチキャットが歩くスクリプトと同じですね。
コウモリにたまが当たると色が変わったり、10回当たると「まいりました」と言わせるようにします。
ゲームが終わったら、ゲームクリアの設定も必要ですね。
やっぱりたまが当たったら、何か音が出るようにしましょうかね。
いろいろ複雑なスクリプト作成に取り組みました。
ゲーム完成品の動作は動画にありますので、そちらでご覧下さい。

425.jpg  426.jpg  427.jpg
そのままの完成品では飽き足らず、カバや猫を飛ばしている受講生がいました。
「カバをもっと小さくしたら」とか、「猫をもっと早く動かしたら」と外野席から無責任な発言があり、でも受講生はそれに対応してスクリプトを組み換えていました。
大したもんだなぁ!!
次はキーボードからジョイスティックに替えてゲームをやってみます。

428.jpg  429.jpg  430.jpg
ジョイスティックを使うには、ジョイスティックの入力をキーボード入力に変換するアプリが必要になります。
そこでキーマッピングソフト(JoyToKey)のインストールを行います。
このアプリを使うと、たまを自動連射させることもできるようになり、よりゲームがやりやすくなります。
この辺りのことは私達より受講生の方が詳しいかもしれませんね。

431.jpg  432.jpg  433.jpg
さて、ここで最終課題、Scratchスタジオを利用したプロジェクト共有に入ります。
アカウントの作成で、少し躓きました。
既にアカウントをお持ちの受講生がいて、その人のアカウントがマネージャーに認識されません。
でもこの問題は受講生自身で解決されました。
今回の受講生は自宅にインターネット環境をお持ちの方ばかりでしたので、今後は自宅からのアクセスでこのスタジオの利用が可能となります。

434.jpg  435.jpg  436.jpg
今回初めての試み、スクラッチで行うプログラミング講座はいかがだったでしょうか?
この答えは今迄で一番大きい拍手で判りますね。
講師が毎回課題やテキストを、追加準備してくれたことへの感謝の気持ちも大きかったのだと思います。
皆さま、お疲れさまでした。

今回も講義の様子を幾つか動画でご紹介したいと思います。


本日の課題が完成し、ゲームを楽しみました。
それだけでは飽き足らず、カバや猫のキャラクタを追加し、動きを複雑化したスクリプトを作成しました。


キーボード操作からジョイスティックに替えてゲームを行いました。
途中講師がペアリングの話をしていますが、それはとっくに終わって、ゲームに没頭している受講生も居ました。


私たちにとっては懐かしのインベーダーゲームです。
「昔はねぇ。喫茶店にこのゲーム機があってねぇ。コーヒー1杯で粘って・・・・」
そんな話、誰も聞いてくれませんでした。がっくり!!

連日、西日本豪雨の被害が報道されています。
講師は初日「プログラミングは世の中の役に立つ」というお話をされました。
災害防止のプログラムを組む、受講生の中からこういうことをやれる人が出てくるんじゃないかなぁ、優秀な若者を見るとそんな期待をしてしまいます。

             記録 : TUNA
posted by dss at 20:06| Comment(0) | パソコン講習会

2018年07月05日

プログラミング講習会第3日目

今回の講義の中に、ロボットカーでのサッカーゲームが予定されています。
こうなってはサッカーの話題を続ける他ありません。
WC試合終了後の日本人サポーターのゴミ拾いに称賛の声が上がっています。
このことを海外メディアから聞かれた吉田麻也選手が「日本には『来た時よりも美しく』という言葉があります。」と答えたそうです。
今回の講習会の受講生もきっと「来た時よりも詳しく」なって帰られることでしょう。

日 時:平成30年7月1日(日)13時30分から15時30分
場 所:八王子市心身障害者福祉センター第一会議室
参加者:3名(1名欠席)

<学習内容>
自動で動く車を作ろう
・コースをはずれない車を作ろう。
・スプライトと背景をアップロードする。
・スプライトの初期位置を設定する。
・楕円コースを走るスクリプトを作る。
・車の速度を変えてみる。
・車の走るコースを変形する。
・車を左回りにする。
・もう1台車を増やして、2台走らせる。
・車の走る効果音を入れる。
追加テーマ;スクラッチでmBotとロボット・プログラミングVre.2
・mBotの構成を知ろう。
・mBotを自動運転させよう。
・ラインセンサーの動作
・ライントレースの定義
・障害物回避プログラム
・パソコンとmBotを接続する。
・mBotにプログラムをアップロードする。
追加テーマ2;mBotでサッカーゲームをしよう。
・パソコンとmBotをBluetoothでペアリングする。
・ロボットカーの制御(前進・後退・右折・左折・止まる)プログラムの作成
・サッカーゲームを楽しむ。

301.jpg  302.jpg  303.jpg
本日の講義が始まりました。
講師は前回私が報告した、スタッフの作った作品を取上げ、真ん中の指揮者にタクトを振らせるようなことをチャレンジしたらどうかと提案されました。
スクラッチはGIFアニメを導入できます。
ちょっと難しい課題かもしれませんね。
その後、今日のテーマの説明に入りました。

304.jpg  305.jpg  306.jpg
講義の後半に使うロボットカーはこれです。
これでサッカーゲームをやります。
講師はご丁寧に、日本とベルギーの国旗を貼り付けてくれました。
WCサッカーの前哨戦ですので、結果が気になりますね。
では最初のテーマに入ります。
スーパーカーをこの楕円コースに沿って走らせます。
スーパーカーのスプライトやコースに使う背景は予め夫々のPCに準備されています。

307.jpg  308.jpg  309.jpg
スクリプトの作成を行いましょう。
スーパーカーをスタート地点の旗の下に配置します。
X座標とY座標を正確に入力する必要があります。
今日も受講生の皆さんは真剣な顔で講師の説明を聞いています。
講師の説明通りスイスイ進められますので、講師もやりがいを感じています。

310.jpg  311.jpg  312.jpg
スーパーカーがコースを外れない設定を行います。
角度を微妙に調整する必要があります。
なお右端の写真で、受講生のPCの左側にあるハガキ大の紙は、今後の学習会の予定が記されています。
この講座の終了後、自分のやりたいテーマを持って、参加することができます。

313.jpg  314.jpg  315.jpg
この後講師はコースを変形させたら、スーパーカーを2台にしたら、反時計回りにスーパーカーを動かしたら、等々次々問題を出して受講生自身に考えて貰う試みを行いました。
言われた通りにやるだけでなく、自分で考えてやってみるのは、プログラミングの醍醐味ですね。
スーパーカーに爆音を付けるのは少し手こずりました。
爆音が1回しか鳴らなかったり、鳴ったらスーパーカーが走らなかったりとか。
こういうところを考えるのもプログラムの構造を理解するには重要なことです。
後ろの席では講習と同時並行的に、見学参加者向けとして「レゴ EV3を自動運転させる」の説明がなされました。

316.jpg  317.jpg  318.jpg
休憩後、ロボットカーを動かす講義に入ります。
まずはmBotの構成の説明です。
前にある障害物を検出する超音波センサーと車の下に引かれたラインを検出するライントレースセンサーを装備しています。
次はmBotを自動運転させるライントレース&障害物回避プログラムです。

319.jpg  320.jpg  321.jpg
両側のセンサーが黒か白を検出した際の命令で、黒いコースを走行させます。
受講生のPCにmBotをUSBケーブルで繋いで、プログラムをアップロードします。
その前にWindowsのデバイスマネージャーを開き、シリアルポートの設定が必要です。

322.jpg  323.jpg  324.jpg
もう1台の方も接続準備完了かな?
シリアルポートに接続したことを確認出来たら、mBotへプログラムをアップロードします。

325.jpg  326.jpg  327.jpg
画面の右側にプログラムが表示されたら、アップロードします。
ちゃんとプログラムが表示されていますね。
「アップロード完了」と出れば成功です。
mBotをPCから外し、早速動かしてみましょう。
どんな風に動くかは動画でご覧下さい。

328.jpg  329.jpg  330.jpg
最後にお待ちかねのサッカーゲームです。
mBotを制御するプログラムを準備します。
上下、左右、停止の各動作を矢印キーやスペースキーに割り当ててあります。
夫々のスピードをどのくらいにするかは、やってみて決めた方がいいかもしれません。
PCとmBotをBluetoothでペアリング出来たら、mBotをPCで遠隔操縦できるようになります。

331.jpg  332.jpg  333.jpg
サッカーゲームの様子も動画でご覧下さい。
講師はちゃんとゴールポストとサッカーボールを用意してくれていました。
周りの人も結構興奮して応援していました。
スポーツの力?は偉大です。
結果が白板に書き込まれました。
白板が光り、写真が見にくくて申し訳ありません。
日本 2 : ベルギー 1 で日本の勝ちでした。
本番もこうなることを願ったのですが、残念ながら負けてしまいましたね。
本日の講義はこれでお終いです。いかがでしたか?
感想は前回より一段と大きい拍手で答えてくれました。

以下は動画でのご紹介です。

楕円コースでスーパーカーを走らせます。
講師からスピードアップの要求が出て、どんどん早くなります。
最後はゴールから外れてしまいますが、これもうまく修正できました。


楕円コースを変形してスーパーカーを走らせます。
スーパーカーを2台にして、逆走させています。
2台が接触しそうになったら回避するプログラムを考えた受講生もいましたが、時間が足らず完成に至りませんでした。
私事ながら、先日運転免許証の後期高齢者講習を受けてきました。
私の脳味噌に逆走防止プログラムがインストールできるといいのになぁ。
ごめんなさい。余談です。


スーパーカーが走る際、これに効果音を付けるという課題です。
爆音が1回しか出なかったり、音が出たら車が走らなかったりと、最後の方は講師自身も少し混乱気味です。


mBotをコースに沿って走らせます。
「2台のmBotを衝突させたら」とスタッフからの要望が出ましたが、勝手にそれを避けるようなコースを選んだりしています。
最後の方では、いろんな人がいろんなことを言うので、mBotは嫌気がさしたのか、コースを外れて遁走します。


ロボットカーによるサッカーゲームです。
途中車を止めて、目にも止まらぬ早業でプログラムを修正し、再度試合に臨みます。
これは凄かったですね。オジサン族にはマネができない!!
試合途中は結構外野も興奮、思わず大きい声が出ていますので、聞いてみて下さい。

             記録 : TUNA


posted by dss at 14:57| Comment(0) | パソコン講習会

2018年06月28日

プログラミング講習会第2日目

前回に続き、サッカー・ワールドカップロシア大会の話題です。
セネガルに引分てグループリーグ突破の可能性が上がり、盛り上がっていますね。
西野ジャパンのチーム力が前回より良くなった感じが致します。
これと同様、今回の受講生の皆さんも第1回よりぐっと力を付けたようで、進行スピードが更にアップしました。
まずは講義の様子をご覧下さい。

日 時:平成30年6月24日(日)13時30分から15時30分
場 所:八王子市心身障害者福祉センター第一会議室
参加者:3名(1名欠席)

<学習内容>
音を鳴らしてみよう
・背景とスプライトを変更する。
・シンバルとドラムのスプライトを設置する。
・数字のスプライトを配置する。
・シンバルの音を設定する。
・シンバルのスクリプトをドラムに複製して、設定を変更する。
・数字のスプライトに音階を設定する。
・他のスクラッチ完成作品を見て、スクリプトを考察する。
追加テーマ;圧電スピーカーで「ドラムパッド」を作ろう
・ドラムパッドプログラムを作る。
・えんぴつスプライトの作成
・ペンスクリプトの編集
・しきい値の設定
・ドラムのスプライトを準備する。
・センサーからのイベントで音が出るスクリプトを作成する。

201.jpg  202.jpg  203.jpg
では、講義を始めましょう。
今日のテーマは「音を鳴らしてみよう」です。
矢印キーでシンバルとドラムを鳴らし、数字キーでメロディを奏でます。
これだけでは早く終わってしまうので、「圧電スピーカーでドラムパッドを作ろう」という追加テーマを準備しました。
圧電スピーカーを振動センサーとして用い、振動を与えて音を出します。
その前に前回の疑問点を少し考えてみましょう。

204.jpg  205.jpg  206.jpg
手書き部分から「Hello!」と表示される問題です。
手書き部分を1つのスプライトと解釈しているように思われますが、手書き部分を下の方へ書くと「Hello!」が表示されなくなります。
もっと詳しく研究しないとよく判らないところです。

207.jpg  208.jpg  209.jpg
では今日の本題に入ります。
最初に「背景ライブラリー」から好きな背景を選んでください。
テキストでは「circles」ですが、同じでなくて構いません。
受講生は皆さん「circles」でないものを選んでいます。
このあたりは個性が出ます。

210.jpg  211.jpg  212.jpg
次にシンバル、続いてドラムのスプライトを設置します。
受講生は手慣れた様子で、スイスイ進めていきます。
サポーターは今回も相変わらず「見てるだけ――!?」

213.jpg  214.jpg  215.jpg
更に数字の1〜8のスプライトを設置します。
こういう場合はシフトキーを押しながら1〜8をクリックすると一度にできます。
数字が塊りになっているので、適当な位置に配置します。

216.jpg  217.jpg  218.jpg
シンバルスプライトに音を出すスクリプトを作ります。
次にドラムですが、こういう場合はシンブルスプライトのスクリプトをドラムスプライトの上にドラッグ&ドロップしてコピーし、違っている部分だけ修正すると時間短縮になります。
更に数字スプライトに音階を設定します。
「1」 ができれば次々コピーして「8」まで簡単にできますね。
このあたり、私は「マニュアル読まない人間」ですのでテキストをちゃんと読まず、ご丁寧に1個ずつ8回も音階を設定しました。
バッカみたい!!!

219.jpg  220.jpg  221.jpg
出来上がった作品で、早速音を鳴らします。
講師の予測通り、最初の1時間で完成してしまいました。早い!!
写真中央が教室全体の風景です。
付き添いで来られている受講生のお父さん、お母さんも一緒にPCを操作して貰います。
シンバルとドラムの間に指揮者?の入った作品もありました。

222.jpg  223.jpg  224.jpg
ここで音の出る作品のご紹介です。
カエルの歌の輪唱を聞いてみましょう。
スクリプトを見てみると、最初のスプライトのスクリプトをコピーして、次のスプライトが途中から演奏し出すようになっており、これで輪唱を演出しています。
次はおなじみのスーパーマリオの音楽が流れます。
この音源を取り出すことができます。
取り出した音源を個人的に使用するのは構いませんが、外部へ発表するような場合は著作権を考える必要があるので注意して下さい。
休憩の後、追加テーマの「圧電スピーカーでドラムパッドを作ろう」に入りたいと思います。

225.jpg  226.jpg  227.jpg
最初に原理の説明です。
「圧電(ピエゾ) 効果」とか、振動センサーなど難しい単語が並びます。
これが圧電スピーカーです。
これをPCに繋いで、音を出します。

228.jpg  229.jpg  230.jpg
ではスクリプトを作成しましょう。
背景は「xy-grid」を選択します。
えんぴつスプライトを用いて、ペンスクリプトを作成します。
その前に鉛筆のコスチュームが傾いていますので、垂直に直します。

231.jpg  232.jpg  233.jpg
直線のペイントアイコンを選択して水平の線を引き、しきい値のスプライトを設定します。
この直線をマウスで動かして、自由にしきい値を変更できるようにします。
次いでドラムのスプライトを準備、センサーからのイベントで音が出るスクリプトを作成します。

    234.jpg    235.jpg
スクリプトが完成しましたか?
圧電スピーカーをPCに取り付けて、音を鳴らしてみて下さい。

今回も少し動画で講習内容をご紹介します。

これは最初の作品が完成した時の動画です。
あちこちからメロディが聴こえてきます。


受講生にはお馴染みのスーパーマリオのゲームです。
皆さん暫しゲームを楽しみました。
こんなのがスクラッチで作れるのですねぇ。
スクラッチ 恐るべし!!!


ドラムパッドのスクリプトが完成し、音を鳴らしているところです。
受講生のPCをTVに繋いだところ、音が出ません。
でもTVゲーム等で経験済みなのでしょうか?自分自身で設定等をいじって修正されました。
案外サポーターより詳しい??

受講生の感想は今回も「面白かった。簡単だった。」とのことです。
受講生のお一人は、もっと自分でいろいろやってみたいと、圧電スピーカーを持って帰られました。
西野ジャパン・セネガル戦、引分けには終わりましたが、多くのPV会場ではその素晴らしい戦い振りに拍手が起こりました。
ここ講習会場でも同様に、講義終了後拍手がありました。
講師の受講生ファーストの的確な説明に感謝を示されたのだと思います。
私は何回かの講師経験がありますが、未だ拍手を戴いたことはありません。
次回の講師担当時は私も頑張れねばと感じました。

             記録 : TUNA





posted by dss at 19:30| Comment(0) | パソコン講習会