これまでよりもさらに手軽に。テキストプログラミングで遊んでみよう！

ココロキットやココロキット＋は、Webサイトで使われる技術を使ってモータを動かすことができるキットです。

Webサイトの技術としては、HTML, CSS, JavaScript という３つの言語が基礎として必要なのですが、JavaScript だけを使ってココロキット達を動かす方法が生まれたのでご紹介したいと思います🙌

これまでご紹介していた CodeSandBox を使う方法よりも簡単なので、前に一度試したけど難しくて…😢という方も試してもらえたら嬉しいです！

まずは、ページを開いてみましょう！

今回使うのは、Dnotebook と呼ばれる Web アプリです。👇の四角をクリックするとページを開くことができます。

Danfo Notebooks | Interactive Notebook Interface for JavaScript Developers

ページを開くとまずこのような画面が出てきます。

Dnotebookのドキュメントでは、次のような利用をオススメしています。

Dnotebook は何に使える？
・データサイエンス / データアナリシス
・機械学習
・JavaScript の結果を随時確認して勉強できる
・シンプルなプロトタイプや実験
引用（筆者訳）：Dnotebook Documentation - What can it be used for?

３つ目と４つ目に当てはまりますね！ココロキット製品を動かすことを目的に、JavaScript を学び始める環境としては最高だと思います😁

Dnotebook の基本的な使い方について

Dnotebook は「セル」という単位でコードを実行していきます。下の画像の黒く見えているのが１つのセルです。

まずは動かして見ましょう🙋
下の黒い四角の中に書いてあるプログラムをセルの中に書きます。

console.forlog("こんにちは！"); // 文字列を表示する
var test = 1;
console.forlog(test); // test の中身を表示する

セルの中にプログラムを書いて、セルの中にマウスを移動させると、下のような画像になります。

そしたら、このプログラムを動かしてみましょう！「▷ RUN」というボタンを押すか、Ctrl + Enter を押すとセルの中に書いたコードを実行できます。

JavaScript のプログラムを動かすことができました！👏

セルは追加することができます。

「▽ Code」「△ Code」というボタンを押すと、セルを新しく追加することができます。どんどん追加していくことで、動かすことができる JavaScript のコードが増えていきます。

Dnotebook の機能として、
・セルで作った変数（var test）は、他のセルでも使えます。
・実行結果を表示するときには「console.forlog」を使います。「console.log」ではないので注意！

JavaScript の使い方までをここでは説明できませんが、JavaScriptの教科書に載っているようなことなどを試してみると面白いと思います！

ココロキット＋とつないでみる

では、ココロキット＋をテキストプログラミングで動かして見たいと思います！ココロキット＋は次のnoteのように用意しておいてくださいね👀

まず、１つ目のセルで次のプログラムを動かします。

load_package(['https://unpkg.com/@ux-xu/cocorokit-plus-js-sdk@1.3.0/cocorokit-plus.js']);

これは、ココロキット＋を動かすためのプログラムを外部から読み込むためのものです。

そうしたら、次に２つ目のセルで次のプログラムを動かします。

var ccrplus = null;

CocorokitPlus.find(CocorokitPlus.defaultFilter).then(device => {
 ccrplus = device;
})

このプログラムでは、まずココロキット＋を保存するための変数を用意して、そして、ココロキット＋を探すための「find」という関数を動かしています。

この２つ目のセルを実行すると、次のようなものが画面上に現れます。

これはビジュアルプログラミングでも使っているものですね。いつも通りにココロキット＋と接続します。

最後に、３つ目のセルで次のプログラムを動かします。

ccrplus.setPwmDutyAll(700, 700, 700, 700);

どうですか？ココロキット＋につないだモータが動いたと思います！🙌

もっとココロキット＋をテキストプログラミングで動かすには

最後に、ココロキット＋を動かすためのテキストプログラミングについては、次の記事の中に書いています。

上のページで「await window.cocoro」となっている部分を、「ccrplus」と入れ替えてもらえれば、全部動きます！

今回は「Dnotebook の初めての使い方と、ココロキット＋接続してみる」ところで終わりです。Dnotebookを使って、ビジュアルプログラミングではできなかったことを紹介したいと思っています！

ぜひ、試していただけたら嬉しいです😁