まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

たまに子供や初心者を相手にプログラミングを教えてみせたりする際に Scratch を使っています:
Screenshot from 2018-05-04 15-28-23


MIT メディアラボが開発した GUI によるプログラミング開発言語および実行環境です。プログラムをエディタでガリガリと記述するような、いわゆる「コーディング」に相当する作業があまり必要なく、GUI を中心とした見た目に対する処理や変更をイベント単位に足していきながら少しずつ動くものを作っていくものです。そのためユーザーが完成形をイメージしながら作っていくことができ、コーディングそのものに不慣れな人がプログラミングを理解するのに向いていると思っています。

この Scratch は良くも悪くも GUI 中心の作業になるため、他の環境との連携が難しい(というか、そもそもどういう外部インターフェースが用意されているのかわかっていなかった)という印象を持っていました。Scratch の閉じた世界の中では初心者にも簡単でわかりやすい、という面があるのと同時に、Scratch 以外の環境とは繋がりにくいと思っていました。

で、なんかインターフェースが公開されてないかなあ・・・ と思って探していたら、この Scratch の国内第一人者でもある石原さんが書かれた一連のブログを見つけました:
Scratch(スクラッチ)を外部のプログラムなどとつなぐ「遠隔センサー接続」を解説する(その1)


↑このブログで書かれている内容は Scratch 1.4 の「遠隔センサーを有効に設定」して 42001 番ポートを開放した上で、TCP/IP のメッセージングによる連携を Ruby で行う、というものです。基本的にはほぼ同じ内容を Node.js で実装してみようと思い、調べた結果をまとめました。


なお、石原さんは「まちくえすと」の開発などで活躍されていてご存知の方もいらっしゃると思いますが、拙作マンホールマップiOS アプリ版の開発に尽力いただいたご縁もあり、そのお付き合いの中で Scratch のことも教えていただきました。僕にとっては「Scratch の先生」でもあります。石原さん、このブログとても助かりました。ありがとうございます!



まず、以下の作業を行う前提として、Scratch はローカルインストール可能なバージョン 1.4 を使う必要があります。公式サイトからオンライン版であるバージョン 2.0 以降を利用することも可能ですが、以下で紹介する Node.js 連携は Scratch 1.4 をローカルインストールして使う想定で記載しています。各種 OS 向けの Scratch 1.4 はこちらからダウンロードして導入してください(以下、Ubuntu 16.04 環境に Scratch 1.4 を導入した前提で記述します):
https://scratch.mit.edu/scratch_1.4/



まず最初に、Scrach を外部連携するためのポート開放を行います。Scratch 1.4 を起動し、「調べる」カテゴリ内「●●センサーの値」と書かれたブロックを右クリックして、「遠隔センサー接続を有効にする」を選択します:
Screenshot from 2018-05-04 15-29-09


すると「遠隔センサー接続が有効になりました」という確認ダイアログが表示されます:
Screenshot from 2018-05-04 15-29-39



この作業後、Scratch は 42001 番ポートで接続できるようになっています。つまり僕の以前のブログで紹介したような TCP/IP プログラミングによって Scratch との TCP/IP 接続が可能になっているのでした。試しに以下のような Node.js プログラム(scratch01.js)を書いて実行してみます(以前のブログで書いたものよりも更に簡略化し、最小限必要な内容だけにしています):
var net = require( 'net' );

//. 接続先 IP アドレスとポート番号
var host = '127.0.0.1';
var port = 42001;

//. 接続
var client = new net.Socket();
client.connect( port, host, function(){
  console.log( '接続: ' + host + ':' + port );
});

//. サーバーからメッセージを受信したら、その内容を表示する
client.on( 'data', function( data ){
  console.log( '' + data );
});

↑このプログラムを実行すると、127.0.0.1(自分自身)の 42001 番ポートに TCP/IP 接続し、接続先から何かメッセージが送られてくるとそのメッセージ内容を文字列化してそのまま表示する、というものです。これをまず node コマンドを使って実行しておきます:
$ node scratch01.js

これで 42001 番ポートに接続し、メッセージの受信待ち状態になりました。


そして Scratch 側からはこの(42001 番ポートの)接続先に対してメッセージを送信してみます。この処理を行うには「制御」カテゴリ内「●●を送る」ブロックを使います:
Screenshot from 2018-05-04 15-40-55


同ブロックを右クリックして「新規」を選択し、メッセージの名前を任意に指定します。以下の例ではメッセージの名前に Hello と指定してます:
Screenshot from 2018-05-04 15-42-14


するとブロックの表示内容が「Hello を送る」と切り替わります。この状態で同ブロックを何度かマウスでクリックします(クリックするたびにこのブロックが処理を実行します):
Screenshot from 2018-05-04 15-42-41


すると先に実行していた Node.js プログラムのコンソール画面に(最初の制御文字に続いて) 
broadcast "Hello"
という文字行がクリックするたびに表示されます:
Screenshot from 2018-05-04 15-46-59


この結果から Scratch の「●●を送る」ブロックを1回実行すると
broadcast "(指定したメッセージ)"

という文字列が送信される、ということが分かりました。これで Scratch から Node.js のプログラムにメッセージを送信し、Node.js プログラム側でその内容を受信することができました。


この応用で逆に Node.js から Scratch にメッセージを送ることもできます。例えば scratch02.js を以下の内容で作成します(接続後に 'broadcast "a"' というメッセージを Scratch に送信する、という内容です):
//. scratch02.js
var net = require( 'net' );
var host = '127.0.0.1';
var port = 42001;

var client = new net.Socket();
client.connect( port, host, function(){
  console.log( '接続: ' + host + ':' + port );

  var msg = 'broadcast "a"';
  var len = msg.length;
  var buf = pack( len );
  client.write( buf + msg );  //. msg の内容を Scratch へ送信
});

//. 4バイトのバイト列(Buffer)に変換
function pack( n ){
  var m1 = n % 256;
  n = Math.floor( n / 256 );
  var m2 = n % 256;
  n = Math.floor( n / 256 );
  var m3 = n % 256;
  var m4 = Math.floor( n / 256 );

  return new Buffer( [ m4, m3, m2, m1 ] );
}



そして Scratch 側では 'broadcast "a"' というメッセージを受け取ったら何らかの処理がスタートする、というプログラムを書いておきます(下の例ではスプライト1の猫のキャラクターが画面内を歩き始める処理がスタートする、という内容にしています):
Screenshot from 2018-05-05 15-54-06


この状態で scratch02.js を実行すると、TCP/IP 通信によって Scratch に接続し、broadcast "a" というメッセージが送られ、Scratch のスプライト1のキャラクターが壁に跳ね返りながら動き回る処理がスタートします(特に止める方法を用意していないので、止めるには画面右上の赤丸部分をクリックしてください):
Screenshot from 2018-05-05 16-02-12


これで Scratch から Nodejs にメッセージを送ったり、逆に Node.js から Scratch にメッセージを送る、ということが実現できました。

 

Node.js はサーバーサイドで動く JavaScript ということもあって、Express などを使ってサーバーサイドのアプリケーションランタイムとして利用することが多いと思っています。

が、必ずしもサーバーサイド開発言語にのみに使えるということはなく、クライアント側のアプリケーションを記述・実行することも可能です。そんな一例として(HTTP よりも汎用的な)TCP/IP を使ったクライアントアプリケーションを作るサンプルを紹介します。

以下は 127.0.0.1 の 42001 番ポートで待ち受けるサーバーに対して、クライアントとして接続したり、メッセージを送信したり、受信したり、切断したときの挙動を実装しています:

var net = require( 'net' );

//. 接続先 IP アドレスとポート番号
var host = '127.0.0.1';
var port = 42001;

//. 接続 var client = new net.Socket(); client.connect( port, host, function(){ console.log( '接続: ' + host + ':' + port ); //. サーバーへメッセージを送信 client.write( 'ハロー' ); }); //. サーバーからメッセージを受信したら、その内容を表示する client.on( 'data', function( data ){ console.log( data ); }); //. 接続が切断されたら、その旨をメッセージで表示する client.on( 'close', function(){ console.log( '切断' ); })

実際の挙動としてはサーバーへメッセージを送る必要があるのかないのか、サーバーからメッセージを受信することがあるのかないのか、・・・といったサーバー側の挙動も考慮してクライアント側を作ることになりますが、特定のポートに対する TCP/IP 接続はこんな感じで実現できるようです。

恥ずかしながら、今回紹介する Linux の sc コマンドの存在を全くしりませんでした。。


sc(spreadsheet calculator) コマンドは UNIX/Linux のコンソールから使える表計算アプリケーションです。X Window で動作する GUI アプリではなく、あくまで CUI のコンソール上で動く表計算アプリケーションです。オッサン的には DOS 時代の Lotus 1-2-3 を彷彿とさせる画面に胸騒ぎを禁じえません:
2018042900


インストール方法はソースからビルドするものも含めて数通りありますが、Debian ベースの Ubuntu や Raspberry Pi であれば、apt-get コマンドを使って普通に導入できます:
$ sudo apt-get install sc

このコマンドを実行するだけで導入できます。私のラズパイで実行した時の様子がこちら↓です。コマンド実行前のライブラリの導入状況も含めた環境にも依存するとは思いますが、私の環境ではアプリケーション全体で 369 キロバイト( 0.37 メガバイト)しか使いませんでした。超軽量アプリです:
2018042901


インストール後、プロンプトで "sc" を実行すると起動します:
2018042902
 (↑ DOS 版 Lotus 1-2-3 を知っていると、この時点で感動の涙モノ)


起動後の使い方は '?' キーを入力することで参照できますが、ざっと調べた限りでカーソル移動を含めた主なものはこちらです。いわゆる vi エディタのコマンドに近い操作体系になっているので、vi 派であればすぐに使えるようになると思っています:

操作キー解説
カーソル移動(上下左右)方向キーまたは kjhlvi キーバインド
数値入力カーソル位置で = を入力してから数値を入力
文字入力カーソル位置で > を入力してから文字を入力
値の削除カーソル位置で x を入力vi キーバインド
足し算・引き算などカーソル位置で = を入力してからセルを指定して A0 + A1 のような式を入力
終了q


機能的に Excel と比較するようなレベルのものではありませんが、むかーし 1-2-3 の製品開発に関わっていた自分的にはノスタルジックを越えた何かを感じるツールです。

このページのトップヘ