じゃんけんのルールを、一度も迷わずに説明できますか？

「グーはチョキに勝つ」と言えても、「同じ手ならあいこ」「どれにも当てはまらない手の形はどうする？」まで言葉にしようとすると、意外と穴が見つかります。

今回の題材は、カメラに手をかざすと自分の手を読み取ってくれるScratchのじゃんけんゲーム。

作り方の流れと、その途中でお子さんが自然に身につける「ルールを細かく決める力」について、保護者の方向けにまとめました。

じゃんけんは「知っているけど説明できない」ルールの代表

教室でゲーム作りを始めると、子どもたちが最初につまずくのは難しい命令ではありません。

「自分が当たり前だと思っていること」をコンピューターに伝える場面です。じゃんけんはその典型で、誰でも遊べるのに、プログラムにしようとした途端に手が止まります。

コンピューターは「だいたいグーっぽい形」を察してくれません。

指が何本開いていたらパーなのか、親指だけ立てたらどう扱うのか。人間が無意識に処理している判断を、一つずつ条件として書き出す必要があります。

動画でも、グーの判定を作る場面で

「親指だけ上げる、小指だけ上げるといった形までグーと判定されたら困る」

という話が出てきます。

そこで「パー＝全部の指が開いている」「チョキ＝人差し指と中指だけ」「グー＝全部閉じている」と定義し、どれにも当てはまらなければ「うーん」と考えるセリフを出す仕組みにしています。

この「どれでもない場合」を用意する発想こそ、プログラミングで繰り返し鍛えられる部分です。

カメラで手を読み取るしくみ（Stretch3とHandpose2Scratch）

今回使うのは、Scratchに追加機能を足して使える「Stretch3（ストレッチ3）」と、その中の拡張機能「Handpose2Scratch」です。ブラウザで開くだけで使え、パソコンのカメラに映った手の、指先や関節の位置を数字（座標）として取り出してくれます。

指が伸びているかどうかの判定は、とてもシンプルにしています。

  • 人差し指〜小指：指先の高さ（Y座標）が、第2関節より上にあれば「伸びている」と判断し、変数に1を入れる。そうでなければ0を入れる
  • 親指：親指は横に開くので、高さではなく横の位置（X座標）で比べる

つまり、手の形を「1と0が5つ並んだもの」に置き換えているわけです。パーなら「1・1・1・1・1」、グーなら「0・0・0・0・0」。目に見える手の形を数字の組み合わせに変えるという考え方は、プログラミングならではの発想です。

なお、親指だけうまく判定されない場合は、右手か左手か、カメラが左右反転しているかによって比べる向きが逆になっていることがほとんどです。動画の中でも「うまくいかなければ入れ替えてみて」と説明しています。こうした「原因を考えて一か所だけ変えてみる」経験も、この作品の大事な学びです。

作りながら出会うプログラミングの考え方

じゃんけんゲーム1本の中に、Scratchの基本がほぼそろっています。どの場面でどんな考え方を使うのか、日常との結びつきとあわせて整理しました。

作る場面使う考え方日常・教科とのつながり
指ごとに伸びているか記録する変数（1か0を入れる箱）表に〇×をつけて整理する感覚
グー・チョキ・パーを見分けるもし〜なら／でなければ「雨なら傘、そうでなければ帽子」という判断
5本の指の状態をまとめて調べる「かつ」でつなぐ条件算数の「すべて満たすもの」を探す問題
相手の手を決める乱数（1〜3のランダムな数字）サイコロ、確率の入り口
勝ち・負け・あいこを判定する「または」でつなぐ条件、イコール場合分けをもれなく書き出す力

特におもしろいのが勝ち負けの判定です。

グーを1、チョキを2、パーを3と数字にしておくと、「自分が1で相手が2」「自分が2で相手が3」「自分が3で相手が1」のどれかなら勝ち、という3パターンにまとめられます。

あいこはさらに簡単で「自分と相手が同じ数字」だけで判定できます。

教室で多くの子を見ていて感じるのは、この「あいこは一行で書ける」と気づいた瞬間の表情の変化です。長い条件を並べるより、ルールの本質をつかんだほうが短く書ける。

この感覚は、算数の文章題で式を立てるときにもそのまま生きてきます。

ご家庭で取り組むときのポイント

保護者の方から「家でScratchを始めさせたいけれど、何から手をつければいいか分からない」というご相談をよくいただきます。子どもにとってScratchの始め方として定番なのはキャラクターを動かす練習ですが、目的のないまま触ると数回で手が止まりがちです。

じゃんけんのように「完成形がはっきりしていて、すぐ遊べる」題材は、最初の1本としても向いています。

ご家庭で今回のプログラムに取り組む場合は、次の点を押さえておいてください。

  • カメラ付きのパソコンを用意する：ノートパソコンの内蔵カメラで十分です。ブラウザでカメラの使用を許可する必要があります。
  • 顔を映したくない場合はビデオの透明度を100にする：手の認識は続けたまま、画面上の映像だけを消せます。
  • 明るい場所で、手のひらをカメラに向ける：暗い部屋や背景がごちゃごちゃしていると認識が不安定になります。
  • 完成したらアレンジを考える：点数をつける、何回戦かできるようにするなど、動画の最後でも改造のアイデアを紹介しています。

途中で思った通りに動かないことは必ずあります。

そのとき、すぐに答えを教えるより「どの指の判定がおかしい？」と一緒に画面の数字を見てあげてください。変数の値は画面に表示できるので、どこで間違っているかが目で確かめられます。

プログラメイクでは、こうした「カメラ」「センサー」など身近な仕組みを使った作品づくりを、年中・年長・小中学生・高校生のお子さんと進めています。

小学生のプログラミングの習い事を検討中の方、中央区でプログラミング教室をお探しの方は、まずは体験で実際の雰囲気をご覧ください。

動画でもっと詳しく見る

本記事の内容を動画でもご覧いただけます。

ブロックの置き方や、Handpose2Scratchの画面の様子は動画のほうが分かりやすいです。

記事で全体像をつかんでから動画を見ながら手を動かすと、迷う時間がぐっと減ります。

東京都中央区にあるプログラミング教室「プログラメイク」では、ぴょろ先生が教室でも同じように一つずつ一緒に作っていきます。ぜひ体験会へお越しください！

体験会のお申し込みはこちら