当サイトは2020年小学生のプログラミング必修化に関して、関連する情報を纏めています。

Scratch V2.0とアンドロイドアプリとの接続について

Scratch V2.0とアンドロイドアプリとの接続について

Scratchには、現在V1.4、V2.0、V3.0がありますが、それぞれ外部デバイスと接続する仕組みが準備されています。今回はV2.0オフラインエディターとアンドロイドアプリとの接続について紹介します。

Scratch2.0にはHTTPで通信する仕組みが組み込まれています。この仕組みを利用するにはHTTPサーバーを同じパソコンの中に準備する必要があります。当初サーバー作成も考えましたが、この記事では、コントローラースマホアプリとScratch2.0を接続するウインドウズアプリがありましたので、それを利用した手順を紹介します。使用していないアンドロイド端末があれば、それに導入してお子様に使ってもらうことができるのではないでしょうか。前提としてウインドウズ、スマホは同じ無線LANに接続されている必要があります。接続は以下のようなイメージです。
scratch2_extension1a

準備(ウインドウズ用)

Scratch2.0の導入

V2.0オフラインエディターが導入されていない場合は、こちらの記事で導入してください。V1.4が導入されていても、別のアプリとして導入できます。

アンドロイドスマホアプリ(Scratch2.0対応英語版)の導入

1.当記事を導入したいアンドロイドスマホで閲覧していただき、以下のアプリファイルをダウンロードしてください。導入しますかというメッセージが表示されると思いますので、その画面に従って下さい。また、前の記事で既にScratch1.4用を導入済みの方は事前に削除してください。

当アプリは、以前http://khanning.com/scratchercontrol/で公開されていましたが、現在サイトにアクセスできません。また、グーグルプレイでも見つかりませんでした。アンドロイドOS4.4と7.0でテストしました。また、セキュリティ対策ソフトでも問題ないことを確認済みです。

ウインドウズアプリ HackEducaConecta の導入手順

このアプリは、ブラジルの方が作成されたものです。このアプリだけでスマホ接続、Micro:bit接続、Arduino接続をサポートしている優れものです。但し、Scratch DesktopはサポートされておらずScratch2.0用です。開発者の方と連絡をして日本語テキストを提供して日本語サポートをしていただきましたので導入手順を紹介します。注:アプリをダウンロードするために、ユーザー登録が必要です。

導入手順

1.こちらにアクセスすると、以下の画面になります。
hackeduca1

2.右上のLOGINメニューから以下を選択します。
hackeduca2

3.以下のようなログイン画面が表示されますので、①名前Taro Yamada、②メールアドレスxxxx@yyyyを入力して、③に✔を入れて④をクリックします。登録完了すると登録したメールアドレスにメールが送られます。
hackeduca4

4.届いたメールにアクセス用のリンクがありますので、クリックします。
hackeduca5

5.以下のように、自動的に作られたパスワードが表示されますので、①必要なら変更して②をクリックします。
hackeduca6

6.以下のような画面になりますので、①をクリックします。
hackeduca7

7.ログイン画面が表示されますので、①登録したメールアドレス、②登録したパスワード、③に✔を入れて④をクリックします。
hackeduca8

8.トップページが表示されますので、メニューの『DOWNLOAD』をクリックします。
hackeduca9

9.ダウンロードページが表示されます。
hackeduca10

10.少しスクロールダウンすると、以下のようなフォルダーのようなアイコンが並んだところがありますので、上から2番目の『Conecta』をクリックします。
hackeduca11

11.フォルダーが開いて『HackEduca Conecta』が表示されますので、クリックします。
hackeduca12

12.ダウンロード画面が表示されますので、少しスクロールダウンすると『DOWNLOAD』アイコンがあります。クリックするとダウンロードが始まります。少し時間がかかりますので、完了するまで待ちます。
hackeduca13

13.ダウンロードフォルダーに『HackEducaConecta_v3.0.0.3.zip』が保存されますので、適当なフォルダーに解凍してください。(ファイル名のv3.0.0.3は現時点の最新ですので、今後変わる場合があります)

14.解凍すると『HackEducaConecta_v3.0.0.3』フォルダーが作成され、その中に『HackEducaConecta_v3.0.0.3.exe』がありますので、それをダブルクリックすると導入が始まります。

15.導入の最初にライセンス同意を求められますので、『I accept the agreement』を選択して『Next>』をクリックします。
hackeduca14

16.次にデスクトップにショートカットを作るかどうかの確認です。不要であればチェックを外して『Next>』をクリックします。
hackeduca15

17.『Install』をクリックします。
hackeduca16

18.導入が始まります。パソコンの性能によりますが私は数分かかりました。完了前に次のステップのメッセージが表示されます。
hackeduca22

19.私のパソコンには既に『Adobe AIR』が導入されていますので以下のようなメッセージが表示されますが、導入されていない場合は『Adobe AIR』の導入メッセージが表示されると思いますので、必要に応じて答えてください。(Scratch2.0を導入済の方は、Adobe AIRも導入済みと思います)
hackeduca17

20.続いてScratch2.0を導入する画面が表示されますが、導入済みの方はキャンセルしてください。今までScratch2.0を導入されていない方には異なるメッセージが表示されると思いますので、適切に答えて導入してください。
hackeduca18

21.導入が終わると以下のメッセージが表示されますので、『Finish』をクリックします。Hackeduca Conectaが起動します。
hackeduca19

22.ポルトガル語が選択されて起動しますので、日本の国旗をクリックします。
hackeduca20

23.日本語になりました。これで導入は完了です。
hackeduca21

アンドロイドアプリとScratch2.0をつなぐ

1.HackEducaConectaを立ち上げると以下のウインドウが表示されます。
scratch2_extension2x

2.左下の3つの猫のアイコンをクリックすることで、Arudino、Micro:bit、アンドロイドアプリにそれぞれ接続することができます。この記事では、『サンプルを開く』に☑をいれてアンドロイドアプリ用アイコンをクリックします。
hackeduca23

3.Scratch2.0が『その他』のところにアンドロイドアプリ用のブロックが追加されて開きます。
scratch2_extension4

4.併せてHTTPサーバーのウインドウが開きます。HTTPサーバーとScratch2.0が接続されてConnectedになります。まだ、アンドロイドアプリを接続していないのでXのままです。
scratch2_extension5

5.アンドロイドアプリで必要ですので、まずウインドウズでIPアドレスの確認をします。ウインドウズ左下の『ここに入力して検索』があります。
scratch14_extension4

6.ここに『cmd』と入力すると選択メニューが開き、コマンドプロンプトというアプリが見つかると思いますので、クリックします。
scratch14_extension6

7.以下のような画面が開きますので、『ipconfig』と入力してエンターキーを押します。
scratch14_extension7

8.以下の内容が表示されますので、『Wireless LAN adapter Wi-Fi』の下の『IPv4アドレス...192.168.1.18』の 192.168.1.18 部分をメモしておきます。
scratch14_extension8

9.スマホで、アプリアイコンscratch14_extension9をタップし起動すると、最初に『Scratch Connection』画面が表示されますので、前の手順でメモしたIPアドレスを入力してConnectをクリックします。
scratch2_extension8

10.左上に『Connected』と表示されて、ボタンコントローラーが表示されます。
scratch2_extension9

11.HTTPサーバーのウインドウは、以下のようにScratcher Control AppもConnectedになります。
scratch2_extension6

12.これでアプリの準備完了ですが、もし、接続メニューが開かない場合は右上のアイコンをタップして開くメニューで『Connection』をタップします。アプリを終わる場合は『Exit』をタップします。
scratch2_extension7

Scratchでプログラムする

ここでは、例としてスマホを前後左右に傾けたら猫が前後左右に動くプログラムを作りたいと思います。

1.スマホを傾けると右上のx、y、zの数字が変わります。左に傾けるとxが-9、右に傾けると+9前後になります。以下は右に傾けたときです。
scratch14_extension12

2.まず、画面にxとyの値を表示するために『その他』の中の『Accelermeter X』と『Accelermeter Y』に☑を入れます。ステージにそれぞれの値が表示されます。
scratch2_extension10

3.プログラムは簡単です。緑の旗が押されたら、ずっと猫の座標をXとYの値で変更していきます。
scratch2_extension11

4.スタートをクリックしてスマホを動かすと、以下のように猫が動きXとYの値が表示されます。
scratch2_extension

次の記事ではScratch2.0とMicro:bitの接続を紹介します。


最後まで記事をお読みいただきありがとうございます。
記事の改善に役立てたいと思いますので、よろしければアンケートにご協力ください。

記事内容についてお伺い


    良く解る解る解りにくい部分がある解りにくい 


    スクラッチカテゴリの最新記事