タグ: プログラミング

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

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

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

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

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

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

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

—

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

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

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

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

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

—

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

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

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

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

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

—

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

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

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

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

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

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

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

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

—

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

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

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

グラフィカルなプログラミング環境である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カードの識別番号を読み取ることが出来ます！

簡単なデモプロジェクトでは，「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環境を構築するのです。

以下が手順です。

1. コンピュータに「Node.js」と「Git」というソフトウェアをインストールする
2. GitHubサイトにあるScratchの大元ソフトウェアをコンピュータにコピーする
3. 2.をするときは，あらかじめPaSoRichを追加したバージョンを選んでコピーする。
4. コピーしたScratchの準備を整え，scratch-guiを（「npm start」で）動かす
5. Webブラウザで http://localhost:8601（または http://0.0.0.0:8601 ）をアクセスする
6. ローカルな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をまとめてみた