Scratch3.0 を Androidアプリとして動作させてみよう (3)

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

```
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ページが出力されます。

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

![スクリーンショット 2017-12-02 3.11.50.png](https://qiita-image-store.s3.amazonaws.com/0/54192/e7de3f57-2fae-0dae-d7db-5927ac1c0287.png)


無事、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 に置き換える

```
6. 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をコピー
```


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

```
7. cordova run browser
> 
> startPage = index.html
> Static file server running @ http://localhost:8000/index.html
> CTRL + C to shut down>
> 
```

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

![スクリーンショット 2017-12-02 3.11.50.png](https://qiita-image-store.s3.amazonaws.com/0/54192/e7de3f57-2fae-0dae-d7db-5927ac1c0287.png)




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

emulator上で動作しませんでした。実端末で実行して見てください。
実端末とPCに繋げてから
※ 色々とググりながら..(https://developer.android.com/studio/command-line/adb.html)

```
8. cordova platform add android
9. cordova build android
10. cordova run android
```

と、すると、

![Screenshot_20171125-160858.png](https://qiita-image-store.s3.amazonaws.com/0/54192/0fcf0de6-3d72-565e-9cac-e38ddf24cc3b.png)


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


# ではでは

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

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

### 困った時はググる

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


# つづく



# PS
以下の場所でも、アレコレ書いていきます。
https://firefirestyle.blogspot.com/

[Scratch3.0 自分専用機 を作ろう!! (0)](http://blogger.firefirestyle.net/2017/09/scratch30-0.html)
[Scratch3.0 自分専用機 を作ろう!! (1) Scratch3.0をビルドしてみよう](
http://blogger.firefirestyle.net/2017/12/scratch30-1-scratch30.html)
[Scratch3.0 自分専用機 を作ろう!! (2) Scratch3.0 を Androidアプリとして動作させてみよう (1)](http://blogger.firefirestyle.net/2017/12/scratch30-2-scratch30-android-1.html)
[Scratch 3.0 自分専用機 を作ろう!! (3) Scratch3.0 を Androidアプリとして動作させてみよう (2)](http://blogger.firefirestyle.net/2017/12/scratch-30-3-scratch30-android-2.html)
[Scratch 3.0 自分専用機 を作ろう!! (4) Scratch3.0 を Androidアプリとして動作させてみよう (3)](http://blogger.firefirestyle.net/2017/12/scratch-30-3-scratch30-android-3.html)

[火の型 With Scratch 2.0 (プログラム入門) 　第00巻](https://firebook.firefirestyle.net/)
[炎の型 With Scratch 2.0 (ゲームプログラム入門)](https://firefirebook.firefirestyle.net/)