Scratch 3.0 自分専用機 を作ろう!! (4) Scratch3.0 を Androidアプリとして動作させてみよう (3)

By kyorohiro (河村潔広)

昨日の続きです。以下のような感じで進めるのでした。

1. Cordovaをインストール
2. Cordovaで、ブラウザーアプリを動作させる
3. Cordovaで、Androidアプリを作成してみる
4. Scratch3.0 を、ビルドしてサーバを経由しなくても動作するようにする
5. 4で作成したScratchアプリをCordovaに移植してみる
6. Scratch3.0をCorodovaブラウザーアプリとして動作させてみる
7. Scratch3.0をAndroidアプリとして動作させてみる。

3まで進んでいます。

Scratch3.0 用の 静的なWebページを出力してみよう。

以前にScratch3.0 を Local で動作させて見ました。(http://blogger.firefirestyle.net/2017/12/scratch30-1-scratch30.html)

npm start

として、Localに Webサーバーを立ち上げました。

しかし、Scratch3.0は、Webサーバーを用意しなくても動作する形式を出力することができます。

さっそく、試して見ましょう。

試す

1. git clone https://github.com/LLK/scratch-vm.git

2. cd scratch-vm

3. npm install

4. npm run build

と、入力して見ましょう!! 1-3までは、前と同じですね。

すると、dist/配下に、パッケージ化されたライブラリーが、出力されます。

playground/には、Webページが出力されます。

※ もしかすると、npm start のタイミングでも、生成されていたかも...

playground/index.htmlファイルをブラウザーで起動させて見てください。

無事、Local サーバーを立ち上げなくても、動作するScratchを手に入れることができました。

Cordovaで動作させてみよう

Cordovaを利用しれば、Webページをスマートフォンアプリに変換できるのでした。

試して見ましょう。

まずは、前回、試した Hello Worldを実行して見ましょう。

1. npm install -g cordova

2. cordova create MyApp

3. cd MyApp 

4. cordova platform add browser

5. cordova run browser

>

> startPage = index.html

> Static file server running @ http://localhost:8000/index.html

> CTRL + C to shut down

>

Webページを Scratch3.0 に置き換える

npm run build で生成した、playground/配下を、MyApp/www 配下にコピーして見ましょう。

>

>.MyApp/www/extension-worker.js

>.MyApp/www/extension-worker.js.map

>.MyApp/www/index.html

>.MyApp/www/media

>.MyApp/www/media/1x1.gif

>...

>..

※ src/playgroundでなくて、 ./playgroundをコピー

そして、もう一度実行してみる

5. cordova run browser

> 

> startPage = index.html

> Static file server running @ http://localhost:8000/index.html

> CTRL + C to shut down>

> 

ほいさ、無事、Scratch3.0が、Cordovaで動作しました!!

Androidで動作させて見ましょう!!

emulator上で動作しませんでした。実端末で実行して見てください。

実端末とPCに繋げてから

※ 色々とググりながら..(https://developer.android.com/studio/command-line/adb.html)

6. cordova platform add android

7. cordova build android

8. cordova run android

と、すると、

無事、Android端末でアプリとして動作しました!!

ではでは

良い感じの調整してみてください

- 画面サイズを調整したり、
- ゲーム画面だけ表示するようにしたり。
- 最初に起動するアプリを自分が作成するアプリにしたり
※ 実は、Scratch( https://scratch.mit.edu/ )から作品データーを読み込んでいます。

困った時はググる

大体の場合は上手くビルドできません。
ドンドン、グーグル検索して見てください。対処方法が見つかるはずです。


つづく

PS

Scratch 3.0 自分専用機 を作ろう!! (0)

火の型 With Scratch 2.0 (プログラム入門) 第00巻

火の型 With Scratch 2.0 (プログラム入門) 第01巻

炎の型 With Scratch 2.0 (ゲームプログラム入門)


炎の型工房 ScratchとDartでゲームプログラム入門 Advent Calendar 2016

Qiita: Scratch Advent Calendar 2017