スクラッチくらぶ中級編ーtoio

「トイオ(toio)」は、Play Stationで良く知られている会社 Sony Interactive Entertainment (SIE) で開発され、、おもちゃ、ゲームの枠を超えた、新しい価値を生み出すためのロボットを使った新しいあそびのプラットフォームです。

★★★★★ ★★★★★ ★★★★★

★★★★★ ★★★★★ ★★★★★

「toio」は、「toio コンソール」と、モーター内蔵で動き回ることのできる「toio コアキューブ」が2台。そして、それぞれのキューブの動きを制御する2台のコントローラー「toio リング」により構成されます。

別売りの、「トイオ・コレクション」を始めとして、toio専用タイトル(以降タイトル)に付属するあそびプログラムが格納された「toio カートリッジ」と専用のマットを組み合わせて使用します。これらのあそび方はここでは省略させていただきます。

★★★★★ ★★★★★ ★★★★★

「toio」では、アンプラグドプログラミングや、パソコン上でScratchと同じブロックを使ってプログラミングできるビジュアルプログラミング、JavaScript言語など、プログラミングをはじめたばかりの初級者から中級・上級者まで、「あそびを通じて楽しく学べる環境」が用意されています。

★★★★★ ★★★★★ ★★★★★

※「STEM教育」と「STEAM教育」の違い

【 STEM教育とは 】

STEMとは、Science(科学)、Technology(技術)、Engineering(工学)、Mathematics(数学) の頭文字を取ったもので、これら4つの学問の教育に力を注いで、IT社会とグローバル社会に適合した国際競争力を持った人材を多く育てていこうという考えをベースにして、2000年代に米国で始まった教育システムです。

21世紀型の新しい教育「STEAM教育」が世界各国で導入され始めています。「Scratch（スクラッチ）」は、STEAM教育に適したビジュアルプログラミング言語です。

【 STEAM教育とは 】

STEAMとは、Science(科学)、Technology(技術)、Engineering(工学)、Mathematics(数学) の頭文字に、Art (芸術) を加えたもので、これら5つの学問の教育に力を注いで、課題発見・解決力や創造力等を培い、国際競争力を持った人材を多く育てていこうという教育システムです。

日本で2020年度から始まる「小学校でのプログラミング教育の必修化」もその一環といえるでしょう。

★★★★★ ★★★★★ ★★★★★

★★★★★ ★★★★★ ★★★★★

ビジュアルプログラミング言語「Scratch（スクラッチ）」は、テキストではなくブロックを組み合わせて視覚的にプログラムができる仕組みで、世界中の学校やプログラミング教室で積極的に採用されています。

ここでは、ビジュアルプログラミング言語「Scratch（スクラッチ）」の学習を行います。パソコンと「toio コアキューブ」と専用マットを使ったプログラムを作成します。

操作はとても簡単で、ドラッグ＆ドロップでブロックをつなげるだけ。直観的にプログラムが組めるので、プログラミングをはじめたばかりのお子さまでも、気軽にプログラムを作ってあそぶことができます。

必要なもの

  • toio コアキューブ
    ※toio本体セット付属のキューブでもOKです。
  • パソコン
    ・Windowsの場合
    Windows 10 64bit バージョン1709以上を搭載かつ、BluetoothR 4.0対応のパソコン
    ・macの場合
    macOS 10.13以上を搭載かつ、BluetoothR 4.0対応のMac
  • ウェブブラウザ
    Chrome (ver 63以降), Firefox (ver 57以降), Safari (ver 11以降)またはEdge(ver 15以降)
  • Scratch Link
    Version 1.3.0.0（Windows 10の場合）
    Version 1.3.0（macOSの場合）
  • インターネット接続環境
    （プロキシを介さない接続が必要です）
  • toio専用マット
    （付属のプレイマットを使えば、toioならではの座標を使ったプログラミングを楽しむことができます）

はじめかた

①.ソフトウェアをインストール

PCの設定画面で、「BlueTooth」が有効（オン）になっていることを確認してください。PCに必要なソフトウェアをインストールします。次のボタンをクリックして、Scratch Linkをダウンロード＆インストールしてください。

②.Scratch Link を起動します。

  • WindowsのスタートメニューからScratch Linkを起動します。
  • デスクトップ右下にScratch Linkのアイコンが表示されていることを確認します。

③.コアキューブの電源を入れます。

写真を参考にtoio コアキューブの電源ボタンを押し、電源を入れます。電源が入るとコアキューブのランプが点灯します。

④.ビジュアルプログラミングを立ち上げます。下図の「ビジュアルプログラミング(ベータ版)をはじめる」をクリックします。

ここがプログラムのあるサイトです。
https://toio.github.io/toio-visual-programming/beta/

ビジュアルプログラミングの画面が表示されます。

サンプルプログラムを作成して見ました。

ステージの画面の大きさは、横座標は（-250〜0〜+250ピクセル）、縦座標は（-180〜0〜+180ピクセル）です。

⑤.ビジュアルプログラミングの画面

toioのマークが表示されないときに、上図画面の左下の部分をクリックした場合は、下図の画面が表示されます。

PCの設定画面で、「BlueTooth」が有効（オン）になっていることと、「Wi-Fi」が有効（オン）になっていることを改めて確認してください。

⑥.接続画面を表示する。

コアキューブとパソコンが接続されていないときは、！（ビックリマーク）が表示されます。

！（ビックリマーク）をクリックします。

⑦.コアキューブを接続する。

2台のコアキューブの電源を「ON」にした場合

通常は、1台のコアキューブの電源を「ON」にした場合

画面の中から「接続する」ボタンをクリックします。コアキューブから音が鳴れば接続完了です。
※電源の入った状態のコアキューブが複数あると、複数のコアキューブが画面に表れますが、一度に接続できるコアキューブは１つまでです。
※コアキューブがPCの近くにあると電波強度が強くなります。

⑧.エディター画面にいきます。

エディター画面です。

コアキューブとパソコンが正常に接続されているときは、「レ点」が表示されます。エディターでプログラムを作成します。

エディターを使用中に上図のような画面になったときは、コアキューブの電源を入れ直して、「再接続」をクリックして下さい。

⑨.いよいよ、プログラムを実行します。

専用マットにコアキューブを置きます。

「フラッグ(旗)」マークをクリックすると、プログラムが実行します。

★★★★★ ★★★★★ ★★★★★

⑩.開発者向けのビジュアルプログラミング

ここがプログラムのあるサイトです。
https://toio.github.io/toio-visual-programming/dev/

開発者向けビジュアルプログラミングの画面

上図画面の左下の部分をクリックした場合は、下図の画面が表示されます。

下図の画面のように、2台のコアキューブのプログラム開発が出来ます。

1台目のコアキューブが2台目のコアキューブを常に追いかけ回すようになります。2台目のコアキューブの中心を常に追いかけてしまうので、止める場合は2台目のコアキューブをマットから取り外してみてください。

同じ動きをさせる場合、この様にプログラミングすることも出来ます。

★★★★★ ★★★★★ ★★★★★

ここがサンプルプログラムのあるサイトです。
https://toio.io/programming/visual-programming.html

注意：サンプルプログラムは該当するページの最後辺りにあります。

1．サンプル1：お絵かき

　①.お絵かき初級編････
　　toio-vp-sample_painter_basic_v1.sb3

　②.お絵かき初級編その1････
　　toio-vp-sample_painter_basic_v1.0.2.sb3

　③.お絵かき初級編その2････
　　toio-vp-sample_painter_easy_v1.0.2.sb3

　④.お絵かき上級編････
　　toio-vp-sample_painter_v1.0.2.sb3

2．サンプル2：多角形・図形

　①.多角形・図形初級編････
　　toio-vp-sample_turtle-graphics_easy_v1.0.1.sb3

　②.多角形・図形初級編････
　　toio-vp-sample_turtle-graphics_easy_v1.0.2.sb3

　③.多角形・図形上級編････
　　toio-vp-sample_turtle-graphics_v1.0.2.sb3

3．サンプル3：リモコンで操作

矢印（→、↑、↓、←）キーボードでコアキューブが移動します。

　①.リモコン操作初級編････
　　toio-vp-sample_keybord-control_easy_v1.0.1.sb3

　②.リモコン操作初級編････
　　toio-vp-sample_keybord-control_easy_v1.0.2.sb3

　③.リモコン操作上級編････
　　toio-vp-sample_keybord-control_v1.0.2.sb3

★★★★★ ★★★★★ ★★★★★

toioコアキューブに関する、「ハードウェア仕様」と「通信仕様」のページがありますので、参考にして下さい。

「ハードウェア仕様」には、各コンポーネントの説明、形状やサイズ、コアキューブの基本性能などのハードウェア関連の情報を公開しています。コアキューブに取り付ける工作物を制作する際の情報としてご参照下さい。

「通信仕様」には、コアキューブを制御するための通信プロトコルの仕様を公開しています。コアキューブを走らせる、ランプを光らせる、音を鳴らすといったプログラムを制作する際の情報としてご参照下さい。

ここを参照してください。 https://toio.github.io/toio-spec/

【重要】通信概要（通信仕様）

ここを参照してください。
https://toio.github.io/toio-spec/docs/ble_communication_overview.html

★★★★★ ★★★★★ ★★★★★

JavaScriptでtoioコアキューブを動かそう！

toioでプログラミングのページの上級編を参照して下さい。
https://toio.io/programming/

「toio」の技術仕様とJavaScriptライブラリが公開されました。

具体的に公開された情報は
-Cubeのハードウェア仕様
-BLEの通信仕様
-node.jsを用いたJavaScriptライブラリ
の3つです。

通信仕様を見てみると、BLE ペリフェラル（Peripheral）として起動することや、ServiceやCharacteristicsなどのBLE通信仕様が記載されています。

Caracteristicsをみると以下の機能を持つようです。
– ID Information / 読み取りセンサー
– Sensor Information / モーションセンサー
– Button Information / ボタン
– Battery Information / バッテリー
– Motor Control / モーター
– Light Control / ランプ
– Sound Control / サウンド
– Configuration / 設定

当初、JavaScript でtoioコアキューブを動かそうとしましたが、力量不足のため途中で挫折してしまいました。

★★★★★ ★★★★★ ★★★★★

ブラウザでtoioコアキューブを動かそう！

toio.jsをブラウザで動かしてみた。
https://snoguchi.github.io/toio-browser-example/dist/

Node.jsは使わないで、ブラウザだけでtoioを制御しています。

「connect to cube」をクリックすると、下図のような画面が表示されます。

（注意）上図の画面ではなく、下図のような画面が表示された場合は、コアキューブの電源が入っていないことが考えられます。

「ペア設定」をクリックすると、コアキューブとの接続が正常に行われたときは、下図のような画面が表示されます。

  • 矢印（→、↑、↓、←）キーボードでコアキューブが移動します。
  • LED（Red、Green、Blue）が点灯します。
  • 音（効果音のID0、1、2、3、4、5、6、7、8、9、10）

※実行結果は、実際に動きました！（感動）

★★★★★ ★★★★★ ★★★★★

toio-browser-exampleのソースプログラム

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"/>
<link rel="stylesheet" href="main.css" />
<script src="https://kit.fontawesome.com/5462eb1aba.js"></script>
</head>

<body class="cube-disconnected">
 <h1 class="section center">toio browser example</h1>

<div class="section display-if-disconnected">
 <button id="connect" class="pure-button pure-button-primary button-block">connect to cube</button>
</div>

<div class="section display-if-connecting center">
 connecting ...
</div>

<div class="display-if-connected">
 <table id="move" class="section">
  <tbody>
   <tr>
  　<td></td>
    <td>
     <button id="move-forward" class="pure-button button-huge fas fa-caret-up"></button></td>
   　<td></td>
  　</tr>
  　<tr>
  　 <td><button id="move-left" class="pure-button button-huge fas fa-caret-left"></button></td>
  　 <td></td>
  　 <td><button id="move-right" class="pure-button button-huge fas fa-caret-right"></button></td>
 　 </tr>
 　 <tr>
   　<td></td>
   　<td><button id="move-backward" class="pure-button button-huge fas fa-caret-down"></button></td>
   　<td></td>
  　</tr>
 　</tbody>
 </table>

 <div class="section center">
  <button id="turnOnLight-red" class="pure-button button-colored" style="background: rgb(255, 0, 0);">
   <i class="far fa-lightbulb"></i> Red
  </button>

  <button id="turnOnLight-green" class="pure-button button-colored" style="background: rgb(0, 255, 0);">
Green
 　</button>

　 <button id="turnOnLight-blue" class="pure-button button-colored" style="background: rgb(0, 0, 255);">
Blue
 　</button>

 　<button id="turnOffLight" class="pure-button button-colored" style="background: rgb(70, 70, 70);">Off</button>
</div>

 <div id="playPresetSound">
 　<div class="section center">
  　 <button class="pure-button" data-sound-id="0"><i class="fas fa-music"></i> 0</button>
  　 <button class="pure-button" data-sound-id="1">1</button>
  　 <button class="pure-button" data-sound-id="2">2</button>
 　  <button class="pure-button" data-sound-id="3">3</button>
 　  <button class="pure-button" data-sound-id="4">4</button>
  　 <button class="pure-button" data-sound-id="5">5</button>
　  </div>

 　 <div class="section center">
  　 <button class="pure-button" data-sound-id="6">6</button>
  　 <button class="pure-button" data-sound-id="7">7</button>
 　  <button class="pure-button" data-sound-id="8">8</button>
 　  <button class="pure-button" data-sound-id="9">9</button>
   　<button class="pure-button" data-sound-id="10">10</button>
　  </div>
　</div>

　<table class="section pure-table">
　 <thead>
 　　<tr>
   　<th>name</th>
  　 <th>value</th>
 　 </tr>
　 </thead>

 　<tbody>
  　<tr>
 　　 <td>address</td>
 　　 <td id="address"></td>
　  </tr>
 　　<tr>
  　 <td>id</td>
  　 <td id="id"></td>
 　 </tr>
 　 <tr>
 　　 <td>battery</td>
   　<td>
  　  <span id="battery"></span>
 　   <button id="getBatteryStatus" class="pure-button button-small fas fa-sync-alt" style="float:right"></button>
  　 </td>
 　 </tr>
  　<tr>
　　 <td>button</td>
 　  <td>
   　 <span id="button"></span>
   　 <button id="getButtonStatus" class="pure-button button-small fas fa-sync-alt" style="float:right"></button>
 　　 </td>
 　 </tr>
 　 <tr>
  　 <td>collision</td>
  　 <td>
   　　<span id="collision"></span>
   　  <button id="getCollisionStatus" class="pure-button button-small fas fa-sync-alt" style="float:right"></button>
   　</td>
 　　</tr>
 　　<tr>
　　　<td>slope</td>
　　　<td>
　　　　<span id="slope"></span>
　　　　<button id="getSlopeStatus" class="pure-button button-small fas fa-sync-alt" style="float:right"></button>
　　　</td>
　　</tr>
　　<tr>
　　　<td>position-id</td>
　　　<td id="position-id"></td>
　　</tr>
　　<tr>
　　　<td>standard-id</td>
　　　<td id="standard-id"></td>
　　</tr>
　</tbody>
</table>
</div>

<script src="main.js"></script>
</body>
</html>

★★★★★ ★★★★★ ★★★★★