ウディタをAndroidアプリにする方法

目次

前提条件は、ブラウザウディタを無料版をDL、または買い切り版を購入済みである事

ブラウザウディタのダウンロード先は左側のリンクに貼っています。

1. Node.jsをインストール

以下のサイトを開き、「Prebuilt Installer」のタブを開き、インストーラーをダウンロード
(選択肢は「最新版」「Windows」「x64」を選んでダウンロード)

https://nodejs.org/en/download/package-manager

DLしたファイルを実行し、インストール
途中の「I accept the terms in the Liecense Agreement」はチェックを入れる
全部「Next」
(追加のChocolatey？はインストール不要)

2. Ionic CLIをインストール

Windowsの「コマンドプロンプト」を開き、以下のコマンドを実行
(Windowsの検索ウィンドウで「cmd」と入れてもOK）
(npmはNode.jsをインストール後に使えるコマンド)

npm install -g @ionic/cli

3. Capacitor用のまとめフォルダと作品フォルダを作成

Capacitor(スマホアプリ用データを作るソフト)用のまとめフォルダを作成
ここでは「Cドライブ」の「Capacitor-apps」フォルダを作成
この中に、作品ごとのフォルダが新たに作成される

Windowsの「コマンドプロンプト」を開いて以下を実行
(Windowsの検索ウィンドウで「cmd」と入れてもOK）

cd C:\
mkdir Capacitor-apps
cd Capacitor-apps
npm init @capacitor/app

※「\」はコマンドプロンプト中で「＼」と出るかもしれませんが意味は同じ

ここまで実行すると初回だけ
「Need to install the following packages:
@capacitor/create-app@0.3.0
Ok to proceed? (y)」
と出るのでyを押してEnterする

ここからは作品ごとのフォルダ作成フェイズ

次に「? What is the name of your app? 」と出たらゲーム名を入力
ここでは「SampleGame」と入力
「? What directory should be used for your app?」は作成するフォルダ名を指定
ここではただ「Enter」して「my-app」フォルダを作った前提で進める
「 ? What should be the App ID for your app?」でAppID入れるけど
ここではただ「Enter」して「com.example.app」のまま前提で進める

これで準備完了！
「Capacitor-apps」フォルダの中に「my-app」フォルダが作られ、その中に色々ファイルが作成されている
これらの質問で打ち込んだ内容は「my-app」フォルダ内の「capacitor.config.json」ファイルに書かれているので、後の手順で修正

4.Capacitorフォルダの中にAndroid用のプロジェクトを作成

コマンドプロンプトで以下を実行し、Androidプロジェクト作成処理を実行

cd c:\Capacitor-apps\my-app\
npm install @capacitor/core @capacitor/cli
npm install @capacitor/android
npx cap add android

※初回だけ「? Share anonymous usage data? » (Y/n)」と出るかもしれないので「n」を入力

5.wwwフォルダを作ってブラウザウディタのファイルを入れる

5-1

作ったフォルダが「my-app」の場合、その中に以下のファイル構成で「www」フォルダを作り、「ブラウザウディタ用ゲームデータ」のファイルをコピー

my-app/
├── android/
├── src/
├── node_modules/
├── www/ ← ★このフォルダを新たに作成し、ブラウザウディタの
│ │　　　　　「public」フォルダ内の全ファイルを入れます
│ ├──→ index.htmlやwoditor.wasm ← つまりここに入ります
│ └── Data.wolf　←★あなたのゲームのData.wolfを上書きしてください、ただしBasicData内にはブラウザウディタの「BrowserWoditor.dat」を入れておく必要あり
├── capacitor.config.json
└── package.json など

5-2

「my-app」下の「capacitor.config.json」をむりやりメモ帳などで開いて
(メモ帳にドラッグ＆ドロップ）
必要ならちょっと書き換え
特に、webDirが「dist」などになっていたら「www」に書き換える事
このファイルには、「スマホアプリ化されるときのアプリ情報」や「(my-appフォルダ内の)どのフォルダをスマホアプリ化するか」が記載されている

{
　"appId": "com.example.app", ←動かすだけならこのままで可
　"appName": "SampleGame", ←ここがスマホ内でアプリアイコンの下に表示されるゲーム名
　"webDir": "www", ←★スマホアプリ化するフォルダ、この行が"dist"などになってたら"www"に書き換えてください！！
　"plugins": {
　　"SplashScreen": {
　　　"launchShowDuration": 0
　　 }
　 }
}

※"webDir"が"dist"のままだと動きません！

※appIdとappNameはアプリの識別に使っている模様
たとえばスマホにapkを再インストールしたとき、この2つが前と同じだとアプリを上書きするか聞いてくれる

6.Android Studioをインストール

(ここは1回やれば以後やる必要なし)

6-1

以下のサイトで「Android Studio Koalaをダウンロード」をクリックしてダウンロードした後にインストール
(ただし、執筆時点では更新が入り、Koalaでないバージョンになってる模様)
(1.2GBくらい)

https://developer.android.com/studio?hl=ja

インストール時は全部「Next」とか「Finish」でOK
インストール後に英語でなんか出てきますが「前のデータ読み込むか」とか「匿名のデータ送信」なので「Do not import settings(設定をインポートしない)」とか「Send usage satistics to Google(Googleに送る）」でOK

6-2

Android Studioを起動してインストールするとセットアップウィザードが始まる
選択肢は「Standard」でその後「Next」
「License Agreement」画面まで来たら「Accept」を選んで、最後は「Finish」

なお「Starting Downloading...」 から全然進まないように見えるがちゃんと進んでるので信じて待つ
質問が出たり管理者モード質問でたらとにかく「Yes」とか「はい」をする
終わったら「Finish」

7. Android Studioを起動してビルド

7-1

以下のコマンドをコマンドプロンプトで実行します
(フォルダ名はあなたの作ったものに合わせて変更する事)
この手順は「www」フォルダ内のData.wolfを最新にするたびに実行が必要

cd C:\Capacitor-apps\my-app\
npx cap sync android

7.2

Android Studioを起動して「Open」を選び、「C:\Capacitor-apps\my-app\android\」を選択
※「android」フォルダ側を選ぶ事
「settings.gradle(.kts)」ファイルが存在するフォルダを開かないとビルド不可
選んだ後、途中で「Trust and Open Project 'my-app'?」と出てきた場合は「Trust Project」を選択
プロジェクトが開いたら左上の「三」メニューから「Build」→「Build App Bundles(s) / APK(s)」→「Build APK(s)」を選択
初回だけ終わるまですごい時間かかるので待つ事
2回目からは数秒で終わる
もし途中でなにかが足りないってでてきたら適宜インストールやらアップデートする事

7.3

処理が終わったら
C:\Capacitor-apps\my-app\android\app\build\outputs\apk\debug
あたりにdebug用のAPKファイルが出力される

7.4

そのapkファイルを色々な方法でAndroidスマホで読ませてインストールすると、スマホ上で実行可能
「OneDrive」とか「GoogleDrive」を持ってる方は、共有していないフォルダ上に上げて、それをスマホで開いてダウンロードする事を推奨
※なお、スマホ側の設定で「外部のAPKを許可する」設定をオンにする必要がある
apkファイルをクリックすると「不明なアプリのインストール」画面が出てくるので「許可する」を選ぶ事
※今回作ったapkファイルはdebug(デバッグ)版です
アプリストアに公開するなら他にも色々設定してrelease(リリース)版を作成する必要があるがここではアプリストアに公開しない前提であるため、debug版のまま、自サイトやフリーゲーム夢現などのサイトに公開する

8.APKファイルのサムネやスプラッシュの画像を差し替えたい場合

8-1

「C:\Capacitor-apps\(アプリ名)\android\app\src\main\res」内に以下のフォルダを作成する

• 「drawable-land」
• 「drawable-port」
• 「mipmap」

8-2

「drawable-land」内に以下のファイルを入れる

• 「splash.png」
  横800
  縦480

8-3

「drawable-port」内に以下のファイルを入れる

• 「splash.png」
  横480
  縦800

8-4

「mipmap」内に以下のファイルを入れる

• 「ic_launcher.png」
  横と縦のサイズは任意だが、横と縦のサイズは同じにする事
• 「ic_launcher_foreground.png」
  横と縦のサイズは任意だが、横と縦のサイズは同じにする事
• 「ic_launcher_round.png」
  横と縦のサイズは任意だが、横と縦のサイズは同じにする事

8-5

「C:\Capacitor-apps\(アプリ名)\android\app\src\main\res/drawable」内の以下のファイルを差し替え

• 「splash.png」
  横480
  縦320

8-6

「C:\Capacitor-apps\(アプリ名)\android\app\src\main\res」内の以下のフォルダを削除

• 「drawable-land-hdpi」
• 「drawable-land-mdpi」
• 「drawable-land-xhdpi」
• 「drawable-land-xxhdpi」
• 「drawable-land-xxxhdpi」
• 「drawable-port-hdpi」
• 「drawable-port-mdpi」
• 「drawable-port-xhdpi」
• 「drawable-port-xxhdpi」
• 「drawable-port-xxxhdpi」
• 「mipmap-hdpi」
• 「mipmap-mdpi」
• 「mipmap-xhdpi」
• 「mipmap-xxhdpi」
• 「mipmap-xxxhdpi」

8-7

「Build > Clean Project」を選択した後に「Build > Rebuild Project」を選択して再ビルドする

8-8

Android Studioで「Build」→「Build App Bundles(s) / APK(s)」→「Build APK(s)」を選択

8-9

お使いのスマホで、アイコンとスプラッシュ画像が置き換わってるのを確認したらOK

9. 今後、Data.wolfの新しいのができたら

もし今後Data.wolfを新しくした場合は、以下の手順を行えばOK

9-1

「www」フォルダ内に新しいData.wolfを上書き

9-2

「コマンドプロンプト」で以下を実行する

cd C:\Capacitor-apps\my-app\
npx cap sync android

9-3

Android Studioで「Build」→「Build App Bundles(s) / APK(s)」→「Build APK(s)」を選択

以上！

---

今日のアクセス数	1
昨日のアクセス数	9
合計アクセス数	539

ゲーム ゲーム制作 ウディタ wolfrpgエディター テクニック 講座