JavaScript でココロキットを動かしてみよう！

2020年3月5日 13:00

ココロキットをビジュアルプログラミング言語の Scratch だけではなく、テキストプログラミング言語の JavaScript でも動かしてみましょう！

・Scratch では物足りない、物足りなくなった
・ココロキットで作ったものをもっと他の人にも見てもらいたい
・テキストプログラミングに挑戦してみたい
・他のライブラリと組み合わせて使ってみたい

そんな方におすすめです！

JavaScript って？

JavaScript はテキストプログラミング言語の1つで、近年注目が集まっている言語です。一昔前はWebサイトを作るために使われていたのですが、最近は、スマホのアプリやデスクトップアプリ、メディアアートや IoT になども使われるプログラミング言語です。

さっそく使ってみよう！

必要なものは Scratch の時と変わりません！Google Chrome ブラウザとココロキットが動いている端末があれば JavaScript でも動かすことができます。

新しく使うものは、CodeSandbox と呼ばれるサービスです。

このサービスに日本語は用意されていないのですが、どこを押せば良いのかなどは説明しますのでご安心ください！

CodeSandboxを開こう

上のリンクから、CodeSandboxを開いてください。または次のURL（ https://codesandbox.io/ ）をアドレスバーに入力して Webページを開いてください。

このようなページが表示されます

そして、「Create Sandbox」をクリックしてください。

phvZSq6Ir6 - コピー

上の方にある虫眼鏡マークをクリックします。（検索ボックスではなく、虫眼鏡をクリックしてくださいね）

すると、いろんな人が作ったプログラムが表示されるページに移動します。
（虫眼鏡マークが押せないという場合は、こちらをクリックしてください。）

Searchの下にある検索ボックスに、「kurikit hello cocoro kit」と入力します。すると、１つの検索結果が表示されます。それをクリックしましょう。

クリックすると以下のようなページになります。これでテキストプログラミングを編集する準備ができました！

まずはこの用意したプログラムがどのような動きをするのか確かめながら、CodeSandbox でココロキットを動かす方法を覚えましょう！

プログラムを実行するには、ページの右側の方にある「四角い箱から矢印が出ているアイコン」をクリックします。

すると、新しい画面が開かれます。

Find ボタンを押すとココロキットと接続を開始します。「接続されました」の文字が表示されたら、RUN ボタンをクリックします。ココロキットのLEDが赤く光ります。そうしたら、STOP ボタンをクリックしてください。ココロキットのLEDが消えます。

このプログラムは、RUNボタンを押したらココロキットのLEDが光り、STOPボタンを押したら消えます。

プログラムを編集してみよう！

CodeSandboxの画面の構造は、以下のようになっています。

テキストを編集する場所の上の方を見ると、今開いているファイルの名前がわかります。上の図だと「index.html」です。

試しに「index.html」を変えてみましょう。テキストを編集する場所の真ん中の方に下のようなプログラムが書いてあります。

<h1>cocoro kit テキストプログラミング</h1>
<p>
  Find を押したらココロキットを探します。<br />
  「接続しました」と表示されたら RUN を押して、動作を確認しよう！
</p>
<div class="section">
  <button id="find" onclick="window.connect()">Find</button>
</div>

この中のこれを

<h1>cocoro kit テキストプログラミング</h1>

次のように書き換えて見ましょう。

<h1>はじめてのココロキット</h1>

すると、画面右の結果を見るところの表示が変わっています。

見た目が変わるのも良いですが、今回はココロキットを動かすことが目的です！ではココロキットをJavaScriptで動かしてみましょう。

ココロキットのプログラムを編集する前に

ココロキットを動かすためのプログラムは、「func.js」というファイルの中に保存されています。まずは「func.js」を開いてみましょう。

画面左のファイルが置いてある場所に「func.js」というファイルがあるのでそこをクリックしてください。そうするとテキストを編集する場所で新しく func.js が開かれます。

この func.js がココロキットを JavaScript で動かすために使うファイルです！このファイルの構造は以下のようになっています。

ココロキットで使う関数を読み込むプログラム

/**
* Cocorokitを動かすためのSDKを読み込む
*/
import CocoroKit from "@ux-xu/cocorokit-js-sdk";

RUNボタンを押したら動くプログラム

/**
* そして、RUNボタンを押したら実行することを書く
**/
let run = function() {
  window.cocorokit.color(CocoroKit.CONST.COLOR.RED, 100);
};

STOPボタンを押したら動くプログラム

/**
* STOPボタンを押したら実行することを書く
*/
let stop = function() {
  window.cocorokit.reset(CocoroKit.CONST.RESET.LED);
};

RUNとSTOPを登録するプログラム

/**
* 上で準備した関数を登録
*/
window.run = run;
window.stop = stop;

ココロキットの動きを変えてみよう！

今はLEDが赤色に光っていると思いますが、青色に光らせて見ましょう！

それをするためには、次の部分を編集します。

window.cocorokit.color(CocoroKit.CONST.COLOR.RED, 100);

これはScratchのココロキット拡張機能の次ブロックと同じ機能です。

「window.cocorokit」には、Scratch のブロックと同じようにココロキットを動かすための関数が入っています。

「CocoroKit.CONST」には、Scratchのブロックの中にある「右、左」「赤、青、緑」のような選択できるものが保存されています。

例えば、上のプログラムを下のように「RED」を「BLUE」に変えると、RUNボタンを押すと青色に光るようになります。

window.cocorokit.color(CocoroKit.CONST.COLOR.BLUE, 100);

上の方で覚えた方法で、実行をしてみてください！青色に光りましたか？

次の記事では、テキストプログラミングの用意している関数について説明しますね。

次の記事 👉 テキストプログラミングの関数について

この記事が気に入ったらサポートをしてみませんか？