こんにちは！
WAKABAスクールです！
本日はScratch(スクラッチ)で作ったゲームやアプリケーションをWindows環境でAndroidアプリにしてみようと思います！
せっかく作ったゲームを自宅や家族、友達と気軽にプレイするならやはりスマホが一番ですね！
スマホにオリジナルアプリをインストールして遊んでみましょう！！
自分のメモも兼ねて、実際に行った手順を紹介するので、みなさんもぜひ試してみてください！
（注意：ここでの手順はAndroid端末のみを対象にしています。iPhoneアプリの場合Xcodeを使いますので、今回は対象外です）
最終的にこんな感じでスマホアプリとして動作させます
ざっくりと流れ
ざっくりやり方としては、Cordovaを使って、HTML化したスクラッチゲームをAndroidアプリとして、端末にインストールしてやります。
基本コマンドベースで環境を構築して、最後にスクラッチプロジェクトをHTMLに変換し、端末に入れますので、まずビルド環境を用意してやります！
ざっくりとながれ
- Cordovaをインストール
- Cordovaプロジェクトを作成
- スクラッチでスマホ用ゲームを制作
- スクラッチゲームをHTMLに変換
- アプリ用の情報(アイコン等)を編集
- Cordovaでビルド
- Android実機にアプリをインストール
前提と注意事項
前提
- JDKのインストール
- npmのインストール
- スクラッチでゲームを制作していること
- Android Studioをインストール
- gradleをインストール(パス通す)
環境
- OS：Windows10
- npm: 8.19.2
- JDK: 11.0
- gradle: 7.6
注意事項
- おそらくJDK17以上だと現在gradleではビルドできないっぽい
- インストールするAndroid端末はデバックONの設定に変更しておく
- iPhone(iOS)へのインストールは未検証のため今回は対象外
Cordovaの導入
Cordovaは、Webブラウザーで動作する、ホームページやゲームを、アプリ化するフレームワークです。
Cordovaを使って HTML5, CSS3,JavaScriptで作られた作品を AndroidやiOSやDesktopアプリに変換することができるようになります。
Cordovaをインストール
さっそく自分のPCへCordovaをインストールします
以下のnpmコマンドからインストールします。
npm install -g cordova
Cordovaでプロジェクト作成
続いて、cordovaプロジェクトを作成します。
プロジェクトを作成したいディレクトに移動したあと、以下のコマンドからプロジェクトを作成します。
ここでは仮で「app01」というプロジェクトを指定しています。
※名称は半角ならOKです
cordova create app01
成功していれば、「app01」というフォルダが作成されていると思います。
Androidプラットフォーム追加
今回はAndroid端末にビルドするので、Androidのプラットフォームを追加します。
まず、上記で作成したプロジェクトフォルダに移動します。
cd app01
以下のコマンドをうって、Androidプラットフォームを追加します
cordova platform add android
ここでいったんcordovaの設定はOKです。
続いて、ビルドするゲームを準備していきます。
スクラッチでゲームをプログラミング
スクラッチ3.0でスマホアプリにするゲームを手直しします。
スマホではマウスもキーボードも基本ないので、タッチ操作で遊べるゲームにします。
このあたりなど参考になるかと思います。
ゲームの準備ができたら、ファイルからコンピューターに保存します。
スクラッチゲームを変換
次に先ほどPCに保存（ダウンロード）したゲームファイルをHTMLに変換します。
なんと一瞬で変換してくれるお便利サイトがあるので、そちらを使います。
以下にアクセスして、先ほどダウンロードしたファイルをアップロードしHTMLへ変換します。
オプションがいろいろありますが、とりあえずデフォルトのままとし、プレーン HTML を指定している状態で「パッケージ」を押します。
HTML変換されたファイルがダウンロードされると思います。
実際に作成されたファイルを開くとこんな感じでゲームをブラウザでプレイできます。
アプリ情報を編集
続いてスマホアプリにしたときに必要となる以下の情報を編集します。
- ID(一意に定める識別子)
- アプリ名
- アイコン画像
- index.htmlの置換
Cordovaプロジェクト内の「config.xml」を編集します。
私の場合は「\app01\config.xml」ですね。
●widgetタグのIDを編集します。(他と重複しないのであれば何でもOKです)
<widget id="io.cordova.app01" ・・・
●widgetタグ内のnameタグにアプリ名を指定します。
<name>オリバの星取りゲーム！</name>
●widgetタグ内に以下を追加します
<platform name="android"> <icon src="res/icon.png" /> </platform>
●config.xmlと同じディレクトリに「res」フォルダを作成し、その中にicon.pngを配置
アイコンにする画像のサイズは520×520くらいにしときます。ファイル名は「icon.png」にします。
私の場合は「\app01\res\icon.png」に配置します。
●\wwww配下の「index.html」をHTML変換したゲームファイルに置換します。
（ファイル名はindex.htmlとします）
私の場合は「app01\www\index.html」ですね。
Android実機にインストール
これでビルド準備ができたので、Android端末をPCに接続します。
接続できているかどうかの確認は以下のコマンドで確認します。(確認はスキップしてもOKです)
※実行できない場合、\Sdk\platform-toolsに移動して実行します。
端末の情報が表示されれば、OKです！
adb devices
自分のcordovaプロジェクトへ移動して、以下のコマンドからビルドします。
cd app01 ※私の場合 cordova build android
【※ビルドで失敗した場合のメモ】
gradleのパスが通っていることを確認！
詳しくはこちらを参考に！
「ANDROID_HOME」と「ANDROID_SDK_ROOT」の環境変数を設定しておく
JDKについて「JAVA_HONE」「Path」の環境変数を設定しておく
プロジェクトのディレクトパスに全角文字が含まれていないか
半角にする必要があります。
JDKとGradleの互換性は問題ないか
詳細はこちらをチェック
私の場合、最初「JDK17」でビルドすると最新のGradleでもエラーになりました。。。
おそらくJDK16～8であれば、問題ないと思います。
ビルドが成功したら、以下のコマンドを実行し、実機でアプリを起動します。
これで端末にアプリがインストールされます。
cordova run android
※もしNo fileXXXXみたいなのが表示された場合、Androidプラットフォームを追加しなおしましょう。
いったん、現在のAndroidプラットフォームを削除して、以下を実行します。
（私の場合「\app01\platforms\android」のフォルダを削除）
cordova platform add android
無事Android端末にスクラッチで作成したゲームをアプリとしてインストールできました！
アイコンも動作もばっちりですね！！
（オリバがいい感じに輝いてます！！）
さいごに
いかがだったでしょうか。
すこし手順が多いですが、それほど難しいものはないと思うので、みなさんもぜひ試してみてください！
せっかくスクラッチでゲームを作るのであれば、ぜひスマホアプリにして遊んでみてください！
WAKABA教室では、今回のようなスマホアプリやWEB制作など様々なことを学習できる環境を用意しております。
もしお困りのことや相談などあればお気軽にお問い合わせください！！
それでは！
無料体験授業 受付中！
コース・料金については以下をご確認ください。
Instagramをチェック！！
Twitterをチェック！！
LINEからのお問い合わせも随時受付中です。