見出し画像

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

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

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

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

JavaScript って?

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

さっそく使ってみよう!

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

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

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

CodeSandboxを開こう

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

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

画像1

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

phvZSq6Ir6 - コピー

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

画像3

すると、いろんな人が作ったプログラムが表示されるページに移動します。

画像4

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

画像5

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

画像6

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

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

画像7

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

画像8

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

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

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

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

画像9

テキストを編集する場所の上の方を見ると、今開いているファイルの名前がわかります。上の図だと「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>

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

画像10

見た目が変わるのも良いですが、今回はココロキットを動かすことが目的です!ではココロキットを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のココロキット拡張機能の次ブロックと同じ機能です。

画像11

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

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

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

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

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

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

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

画像12


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

「ココロキット」を使えばロボットに個性がつけられるよ!
1
ユカイ工学の教育シリーズ「kurikit」で子どものものづくり体験をユカイに!おうちでカンタンに始められるオリジナルロボットづくりやプログラミング教育支援キットを発売中! https://kurikit.ux-xu.com 【7/15まで「#うちロボ」コンテスト開催中!】

この記事が入っているマガジン

テキストプログラミングをはじめよう
テキストプログラミングをはじめよう
  • 2本

JavaScriptを用いたテキストプログラミングのはじめかたについて説明します。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。