プログラミング – りん研究室

拡張Scratch3.0用クラウド連想配列

2022/05/162022/10/10 林向達

昨年度末からずっと開発案件に取り組んでいました。

拡張Scratch3.0用のナンバーバンク（NumberBank）と呼んでいる拡張機能の新バージョン開発です。

ネット上に配列（数値を記憶する変数の並び）を確保することができます。簡易なデータベースとして使えば，データ加工や交換をするScratchプロジェクトも作成可能です。

公式Scratch3.0にはクラウド変数という機能がありますが，ナンバーバンクは拡張Scratch3.0用にクラウド変数を提供しているともいえます。

複数端末間でのプロジェクト連携が可能なので，キャラクター（スプライト）を遠隔操作したり，接続したセンサーからのデータを送信したり，サーボモーターを遠隔制御することも，一斉に可能です。

拡張Scratch3.0サイトとして有名な「Stretch3」で利用できます。

また，拡張Scratch3.0サイトが構築可能な「Xcratch」に追加できるモジュールも公開しています。

—

今回のバージョンアップで，各自が自前で用意するクラウドサーバー（現時点ではGoogle FirebaseのFirestore）をナンバーバンクのデータ保存場所として利用できるようになりました。

各自が用意したクラウドサーバーのAPIキーを預ける場所として新規開発したのがマスターキーバンク（MasterkeyBank）という専用サイトです。

このサイトで，皆さんのAPIキーをお預かりし，ナンバーバンクのマスターキーセットでサーバー情報を適宜提供するという仕組みにしました。

今回のバージョンアップによってブロックの使い方が変わるわけではありませんが，強いて違いを書くなら，マスターキーによって裏側のデータ保存先が変わったり，遅延設定で動作にかかる時間に違いが出るなどがあります。

ご自身がFirebase向けのプログラミングをされるのであれば，他のWebサービスなどとの連係システムを独自に開発することもできます。

—

中学校では，技術・家庭科の技術分野で〔情報の技術〕を内容として扱うことになっており，その中に「ネットワークを利用した双方向性のあるコンテンツのプログラミングによる問題の解決」という学習事項があります。

この学習事項に関する実践事例が，いま急ピッチで蓄積されようとしています。

中学校技術・家庭科（技術分野）内容「D 情報の技術」研修用教材
https://www.mext.go.jp/a_menu/shotou/zyouhou/detail/mext_00617.html

オンライン講座「中学校技術・家庭科 D情報の技術 －授業実践の手引き－」
https://www.sainou.or.jp/senseimanabi/course/211221.html

2021年度 第５回オンライン授業に関するJMOOCワークショップ 「中学校技術・家庭科 D情報の技術におけるプログラミングの指導」
https://www.jmooc.jp/workshop20220322/

ねそプロ - ネットワークを利用した双方向性のあるコンテンツのプログラミング
http://iwate-manabi-net.sakura.ne.jp/nesopuro/

プログル技術
https://middle.proguru.jp/

中学校技術「利便性と安全性に配慮した双方向性のあるコンテンツ」 - TeReP（集まれ！プログラミング教材データベース）
https://terep.hiroshima-u.ac.jp/technology/298/

開隆堂「ネットワークを利用した双方向性のあるコンテンツのプログラミングによる問題解決」
https://www.kairyudo.co.jp/contents/02_chu/gijutsu/r3/r3gi-souhoukou.pdf

20181220「「ネットワーク」に「双方向」!?　倍増するプログラミングの学習内容に中学校の現場はどう対応するのか」（こどもとIT）
https://www.watch.impress.co.jp/kodomo_it/news/1159054.html

様々なアプローチが出てくることで，それぞれの学校の事情や実態に合わせて事例を参照することがしやすくなります。

ナンバーバンクもそのためのツールの一つになればよいなと思います。

ちなみに，Scratchから制御できる低価格な拡張ボード「AkaDako」でも活用事例の中でご利用いただいているので，いろんなフィジカルツールとの組合せも増えていくと楽しいなと思います。

—

構想はずいぶん前から描いていましたが，３月あたりから始めて，週末休みや連休はほぼ開発作業でした。おかげで何とか形にはなりました。いまは少し休憩。

次はもう一つの拡張機能であるパソリッチ（PaSoRich）もICカードリーダーの新型に対応する必要があるので，少しずつ作業を始めたいと考えています。

いろいろフィードバックいただけると嬉しいです。よろしくお願いします。

「サーバーをもたない」時代

2019/08/292019/09/21 林向達

私たちがインターネット上で利用するサービスには，それを提供するための処理をする「サーバー」コンピュータというものが存在しています。

企業が自社のメールやWebサイトを運営したりする場合には自前で「サーバーをもつ」（オンプレミス）というのが一般的でした。大きな組織ならサーバールームという専用の部屋が確保されることもあったわけです。

学校もコンピュータネットワークを利用するようになって「ファイルサーバー」あるいは「ネットワークHDD」（NAS: Network Attached Storage）といったものをもつことがあります。みんなで使うコンピュータファイルの共有置き場所として，昭和時代の物置のような感覚で一家に一つ，自前でもつようにイメージする人が少なくありません。

この「サーバーをもつ」あるいは「サーバーをたてる」というのは，システムを設置・管理することを通して所有欲を満たしたり，万能感を抱かせる側面があります。また手元で運用することが安心感ももたらしました。

しかし時代は，「サーバーをもつ」時代から「サーバーをもたない」時代へと移りつつあります。

たとえば，物が爆発的に増えてしまった状況の物置を考えてみると，家の物置で対応するには容量が足りず，やがて外部の「貸し物置」（レンタルスペース）を利用するようになってきたことは知られています。

サーバーも，自前で管理するより外部の専門家が管理するものを利用するのが最も楽で安心。しかも外部専門家は，サーバーの提供の仕方も多様なものを用意してくれていて，私たちが商売や業務で必要とするものにフィットした形のサーバーサービスを提供してくれるのです。

というわけで，こうした流れは「サーバーレス」とも呼ばれており，クラウドというものを構成し支える一つのピースなのです。

—

もちろん，これはGoogleやアマゾン，マイクロソフトのような，世界中に「サーバーをもつ」クラウド企業の存在があって，それらが無償・有償でサービス提供してくれるからこそ「サーバーをもたない」でよくなっていることになります。

逆に外部に頼らないならば「サーバーをもたざるを得ない」ことも事実。

ある人はクラウドでも大規模障害が起こりうるのだから，自前で管理した方が安心だと考える向きもあるようです。どちらが安心かは，現実の設計や運用に拠るのでしょう。

とはいえ，何かを始めるために最初は「サーバーをもたない」状態から始めて，いずれ必要ならば自前の「サーバーをもつ」ことにすればよいのではないでしょうか。

最近は「クラウド・バイ・デフォルト」という言葉で，外部クラウドサービス等の利用を基本にするといった原則が再確認されています。サーバーを自前でもたずにサーバー機能を活用するスタイルが標準となっているのです。

「サーバーをもたない」時代であることの認識が高まる必要がありそうです。

—

ちなみに，りん研究室ではGoogleのサーバーレスソリューションである「Firebase」をいじっている最中です。

基本的にはモバイルアプリケーション開発を助けるものですが，これを使うと大掛かりな投資の必要もなく，世界的なサービスを開発して公開することが出来ます。

HTML5（html,css,javascript）を使いこなしさえすれば，自分自身で簡易なメッセージやSNSサービス等を構築することは可能です。

その具体的なやり方については機会を改めてご紹介したいと思います。

スマートカードとScratch 3.0と教育と

2019/06/092019/06/09 林向達

ICカードリーダーをScratch 3.0と組み合わせて使える拡張機能を開発しています。

ICカードは世界的にSmart Card（スマートカード）と呼ばれています。クレジットカードが実用の代表例で，カード表面のICチップ端子を利用する「接触型」が有名ですが，最近では電子マネーでもお馴染のかざすだけで利用できる「非接触型」があります。

今回，ソニー社の非接触型スマートカードリーダーライター「PaSoRi」（RC-S380）をWebブラウザから通信できる技術でScratch 3.0と組み合わせました。先人たちの知見を利用させていただいて実現したので，貴重な情報を共有していただいたこと改めて感謝したいと思います。

開発したScratch 3.0拡張機能は「PaSoRich」（パソリッチ）と名付けて，以下のサイトで試験公開しています。公式のScratch 3.0サイトでは個人が開発した拡張機能を公開する仕組みが整ってないためです。

ICカードリーダーが使えるScratch 3.0体験サイト
 https://con3office.github.io/scratch-gui/

—

非接触型スマートカードリーダーで何ができるようになるのか。

単純に，スマートカードの実用例を疑似体験できる教材の開発が出来ます。

たとえば「shopping_banking_20.sb3」というデモプログラムは，電子マネーの登録チャージと買物決済をシミュレートしたものです。

Shopping banking03 Shopping banking02

今まで自作のおもちゃ紙幣を使った買物や支払い体験は行なわれてきました。紙幣と商品という実物交換によって買物（売買）の仕組みを実践的・体験的に学習するわけです。

今後は，電子マネー等のキャッシュレス決済も日常生活に普及することを考えると，そうした可視化の難しい仕組みを実践的・体験的に学習する手段が別に必要になります。

このデモプログラムは，その助けになるのではないかと考えています。

平成29年改訂学習指導要領では，小学校家庭科で「買物の仕組みや消費者の役割」を，中学校技術・家庭科で「金銭管理に関する内容」が新設されるなど，消費者教育の充実が図られました。キャッシュレス化についても中学校の学習指導要領解説で言及されています。検討に値する題材と考えます。

ただし，家庭科全体からすれば，この単元に割り当てられる時数は限られています。総合的な学習の時間との連携を視野に入れて，ポイント還元やFinTechを含めた今日の電子経済社会について探究していく学習活動を構想するくらいでないともったいないかも知れません。

—

技術的なデモンストレーションとして「math_0to9card_15.sb3」というプログラムも作りました。

スマートカードを数字と記号カードとして登録して，かざすと式が入力でき，「=」カードで計算結果を表示するというものです。

20190609

20190609b

あらかじめお伝えしておきますが，計算できるといっても「便利ではありません」。

ぜんぜんスマートじゃないです。

あくまでもスマートカードを数字入力方法に使えるという実演が出来るという程度のものです。式の入力はキーボードで入力した方が遥かに早いです。

このプログラムを作ってみて分かったことは，スマートカードを利用するのは，ある程度まとまった情報や行為と組み合わせて初めて意味があるということです。たとえば，決済情報や伝言メッセージといったものは，カードを識別して結びつけるのに適しています。

このプログラムの実用性はゼロですが，大事な役割が１つあります。

拡張機能PaSoRichに対応したプログラムを開発する土台に利用してもらうことです。

このプログラムには…

・カード読取機能
・カード登録機能
・数字スプライト表示機能

という基本機能が用意されています。

先ほどの買物と電子マネー決済プログラムのようなものも，このプログラムの中身を再利用しながら開発するのが一番手っ取り早いといえます。

たとえば，スマートカードごとにメッセージを伝える「伝言板プログラム」のようなものも，このデモプログラムを土台にして作ることが出来ると思います。合成音声を組み合わせて使うのも面白いかもしれません。

—

さて，スマートカードリーダー「PaSoRi」に対応した拡張機能は出来ました。

ただ，世界の人たちは日本とは別形式のスマートカードを使用していることも多いです。

Scratch 3.0は世界中の人が利用しているプログラミング環境ですから，世界の人たちが利用しやすい手に入れやすいカードリーダーに対応させた方が良いはずです。

そこで，海外製スマートカードリーダーであるACS社の「ACR122U」を手に入れて開発してみようと考えました。米国Amazonで安価に注文できる商品の一つです。

早速，先に開発した拡張機能で使っていたWebUSBという技術と同様な手法で動作させようと試してみたのですが，残念ながら諸事情でこの方法での使用がブロックされている模様。そう簡単にはいかないようです。

そういう意味では日本のPaSoRiが使えるというのは国際的にも珍しいということ。こういう体験を世界に先駆けてScratchで体験できる特権があるともいえます。

拡張機能の国際デビューにはまだ時間がかかりそうですが，ご覧いただいたようにアイデア次第でスマートカードを学校教育で実践的に体験できる教材をいろいろプログラミングすることができます。

この機会にいろいろ考えてみてはいかがでしょうか。

Scratchで数字表示

2019/06/012020/08/09 林向達

Scratchのサンプルプログラムを作成しています。

その際，変数に入れた数値や文字を大きく表示したい場面が出てきます。

変数の内容を確認するためだけなら，Scratchでこんな感じの表示ができます。

20190601 123456c

しかし，これだとあまりに小さい。吹き出しに表示する方法も控えめな大きさです。

願わくは，もっと大きく表示したい。たとえばこんな感じ…

20190601 123456

Scratchプログラムを教室のスクリーンに提示する際，ありそうなニーズのように思えます。

ところが，Scratchでこのようなことをするのは意外と難しいのです。

—

似たような表示をさせるだけならこんな感じで６つの数字スプライトを用意して並べる方法があり得ます。変数から数字を読み取って必要な数字スプライト（そのコスチューム）を用意するといった仕組みです。

20190601 123456a

しかし，この方法には問題が残ります。

たとえば，表示できる数字が６桁縛りになることです。

６桁もいらない数字のときや，６桁よりも大きな数字を表示したいときには，そういう場合に対応するための準備やプログラムが必要になります。

そもそも，桁数分だけのスプライトを用意しなければならないことも面倒です。

—

そこで他に方法がないかを調べてみたところ，スタンプ機能を使った方法が紹介されていました。

「【Scratch】数字を表示するスプライト」（コドモとアプリ）
https://studio.beatnix.co.jp/kids-it/kids-programming/scratch/scratch-material/scratch-label/

望む位置合わせに応じたスプライトが用意され，好きな桁数の数字を好きな大きさを指定して表示できるので，大変便利なサンプルです。用意されているフォントもオーソドックスなので使いやすいかも知れません。

このサンプルでほぼ解決！ともいえるのですが，ペン拡張機能のスタンプ機能を利用しているため，数字を消去しようとするとペンで描かれたもの（たとえば図形）が一緒に消えてしまうという弱点があります。

算数教材を作成しているときには，このような弱点が大変困る場合もあるわけです。

—

というわけで，スタンプ機能を使わずにスプライトをクローンする方法で作ってみました。

20190601 123456b

数字表示 - スプライトクローンによる数値表示
https://scratch.mit.edu/projects/314069120/

ご覧のように一つのスプライトと，あとは数字のための変数を用意するだけ。（ネコはおまけです）

文字のデザインはScratchに標準で付いているものを利用していますが，必要であれば自分でデザインし直してもらえれば，どんな文字デザインでも応用できるのはスタンプ方式と違いはありません。

変数とメッセージ（broadcast）で呼び出すため，複製して複数の数字を表示したい場合はメッセージを異なるものに設定し直す必要はあります。

数字ではなくて数式を表示したい場合も出てくるので，別に「式表示」プログラムも作りました。

式表示
https://scratch.mit.edu/projects/314409226/

さて，これらを使ってサンプルプログラム作りに励むことにします。

—

今回ご紹介したScratchで数値表示する方法は別のところで紹介し直していますので参考にしてください。

［素材］数字表示スプライト

ICカードでIdm番号を読み取ったり，計算した時など，数字を大きく表示したい場面があります。Scratchは数…

PaSoRich – ICカードリーダーをScratch3.0で

2019/05/192020/09/07 林向達

グラフィカルなプログラミング環境であるScratch。

2019年に3.0へと移行し，HTML5対応Webブラウザのみでも利用できるようになりました。

Scratch 3.0には「拡張機能」を追加する仕組みがあり，ブロックを増やすだけでなく，外部機器を制御できるようになっています。たとえば「micro:bit」や「LEGO Education WeDo 2.0」といったものです。

Scratch 3.0自体がリリースされて間もないため，拡張機能は限られたものが提供されている段階です。いずれ様々な拡張機能が登場したり，ユーザーが作ったものを申し込みで追加できるようになると思います。

—

今回，Scratch 3.0の拡張機能としてICカードリーダーを扱えるように作業してみました。

量販店で最も入手しやすいICカードリーダーの１つであるソニー社「PaSoRi」パソリをScratch 3.0で利用するための拡張機能「PaSoRich」パソリッチです。

PaSoRi with Scratch 3.0
https://con3.com/sc2scratch/
https://con3office.github.io/pasorich/

これを利用するとICカードの識別番号を読み取ることが出来ます！

Pasorich2019

簡単なデモプロジェクトでは，「s」キーでICカードを読み取って配列に識別番号を登録し，「スペース」キーでICカードを読み取って登録した識別番号に対応したセリフを表示します（デモなので３パターンだけ）。物理的なカードと画面上のステージを組み合わせたプログラムが組めるわけです。

ICカードは，いま使っている会員カードや電子マネーカードが利用できます。使い切って家で眠っているもの，旅行先で利用したが持って帰って使ってないものも使えます。

つまり，カードを入手するのに大きな苦労はしない上，数を用意するのも難しくない。それでいて，識別番号という面白い特性が利用できるのです。

カード対戦ゲームを作ることから始まって，かざす果物カードによって果物が表示されていく提示教材とか，宝探しで見つけ出したヒントカードをかざすと次なるヒントが音声で流れてくるとか，児童生徒カードと先生カードとの組み合わせでいろんな記録システムを作成するといったことも可能です。

ちょっと面白そうでしょ？

—

（追記）

試す環境を構築するのも大変なので，デモサイトを用意してみました。

Scratch 3.0 GUI with PaSoRich
https://con3office.github.io/scratch-gui/

Windows環境の方はICカードリーダーが認識されないことがあります。以下のZadigという汎用USBドライバをインストールすると認識することもあるようです。Windowsユーザーの方はお試しください。

Zadig - USB driver installation made easy
https://zadig.akeo.ie/

（追記ここまで）

—

でも残念ながら，いまのところこの拡張機能を使うのはとても難しいです。

第１に，ICカードリーダーが必要です。ソニー社のパソリという製品のみ対応です。

第２に，ChromeというWebブラウザのみ対応です。

第３に，冒頭で説明した理由のため正式なScratch 3.0では利用できません。

~~第４に，技術的理由で，ネットを介した環境では利用できません。~~
（これはHTTPS通信なら大丈夫だったようです）

へ？それではどうやって使うのか？

自分のコンピュータに自分専用のローカルなScratchをつくって，そこで利用するしかありません。（もしくはデモサイトをどうぞ。）

PaSoRichを追加したローカルなScratch環境を構築するのです。

以下が手順です。

コンピュータに「Node.js」と「Git」というソフトウェアをインストールする
GitHubサイトにあるScratchの大元ソフトウェアをコンピュータにコピーする
2.をするときは，あらかじめPaSoRichを追加したバージョンを選んでコピーする。
コピーしたScratchの準備を整え，scratch-guiを（「npm start」で）動かす
Webブラウザで http://localhost:8601（または http://0.0.0.0:8601 ）をアクセスする
ローカルなScratchが使い始められるのでPaSoRichの拡張機能を追加する。

以上です。

PaSoRichを組み込んだ「scratch-vm」と「scratch-gui」のGitHubリポジトリは以下の通りです。

https://github.com/con3office/scratch-vm

https://github.com/con3office/scratch-gui

これを以下のページの説明のように作業を進めることでローカルなScratchを構築できます。（アドレスを置き換えて入力します。）

Scratch 3.0の拡張機能を作ってみよう/下準備

ぜひ挑戦してみてください。

—

（追記）

動作条件が厳しく，動かないケースが多いと思われます。まさに挑戦して確かめてください。

［参考情報］Web USBでPaSoRiを扱えるOSをまとめてみた