ウディタ作品ブラウザ化(by ruka様) ＆ Androidスマホアプリ化が実現！(手順紹介あり)

　この一週間でウディタ作品のブラウザ化やスマホアプリ化について急激に話が進みましたのでご報告です！
　なおブラウザウディタはruka様のプロジェクトです！　私は横から見てるだけで、技術的にどうやっているのかなどについてはよく分かっていません。

　↓ブラウザ版は普通にスマホで動きます！

◆ウディタ作品のブラウザ化、実現！

　2024-08-10、ruka様がウディタのブラウザ化プロトタイプを公開されました！

【ブラウザウディタ:プロトタイプ版を公開】
　https://ci-en.net/creator/12702/article/1207619

　なんとこちらで公開されているファイルをサーバーにアップするだけでウディタ作品がブラウザゲームとして動作！　すごい簡単！（でもアップ可能なサーバー持ってない人の方が多そう）

　ちなみに「ブラウザ化で何できるの？」って話ですが、単純に【ダウンロードしなくてもすぐゲームが遊べる】ようになります！　フリーゲームをDLして遊ぶのって地味にハードル高いですからこれは大きな利点！
　さらに大きい利点が、【スマホ上】でもブラウザを開いてウディタ作品が遊べるようになる点！

　たとえば、私の持ってるスマホ「Pixel 6a」で『片道勇者（無印版）』が動くのを確認済みです！　動作上、気になる点といっても「インターネット接続機能が使えない」、「ごく一部の挙動がPC版と違う気がする」くらいで、「他は全部Windows版通りに動作」し「普通に安定して60fps（100%の動作速度）」が出ました！
　安定性だけでなくてパフォーマンスもすでにかなり高い完成度！

　もちろんまだまだ動作しない部分や、こうなって欲しいなあ～という部分などもあると思いますが、プロトタイプでこのポテンシャルなら十分すぎると思います！

【ブラウザ化の簡単な注意点】

　『ブラウザウディタ』の使い方自体は上の記事からダウンロードできるZipファイルにも書いてありますが、ひとまず私から利用時に注意しておいていただきたい点は以下の5点！

●プロトタイプのZipに入ってるpublicフォルダをそのままサーバーにアップするだけでとりあえず同梱のサンプルゲームが動きます！
　→　それが大変な人は、K-Shin07様の「Wodistant」というツールを使えば、サーバーにアップしなくてもブラウザ版のテストが可能です！

●「Data.wolf」を自前で用意したものに上書きすれば自分のゲームが動きます！
　→　ただしゲームデータの「BasicData」フォルダ内に、ブラウザウディタに入ってる「BrowserWoditor.dat」を入れてから暗号化する必要がありますので、そこはご注意を。

●ブラウザウディタのpublicフォルダには作品名などを設定するテキストファイル「settings.js」も用意されているので、それもいじっておくとバッチリです。そこに設定されているゲーム名がセーブデータの保存場所の区別に使われているようです。

●まだ今後も修正が入りそうなので今いじるのはリスクがありますが、ブラウザウディタのpublicの「index.html」をいじればボタンインターフェースや画面の置き方を変えられそうです。やれば広告を入れたりもできそうですね！

●サポートしてる人が私ではないので、色んなご都合でサポートが止まる可能性があります。利害が一致しそうな人はよければ少しでも活動続けられるようにruka様にチップあげてください！　よろしくお願いします！（私もできる限り支援させていただこうと思います）

◆さらにAndroidスマホアプリ化もできた！

　この『ブラウザウディタ』、「.wasm」というファイル形式のエンジンやJavaScriptなどによってHTML上で動いているものなのですが、なんといろいろ変換すればスマホアプリにできます！

　私はAndroidスマホ化に成功しましたが、その作業途中でコマンドを変えればiOS用にも変換できるらしいので、たぶんiOS用アプリも作れると思います。
　（ただその場合、macを持ってて、かつApp Storeに出すための権利をお金払って持ってないといけない？ らしいです）

Android化に成功してスマホ上で撮影した画面　↓
https://twitter.com/WO_LF/status/1822528445567701363

　Androidアプリ化のやり方は下の方に入れました。コマンドプロンプトとか使うのでちょっと大変ですよ。

　ということで、夢が広がるブラウザ化がとても良い感じに進んでいます！

　もしブラウザウディタが簡単にみんなアップできる方法が見つかったら、次回ウディコンでは作品一覧に「ブラウザ版」へのリンクも掲載していいかもしれません。そしたらスマホからでもウディコン作品が遊べます！　今のところ問題の方が多そうなので実現できるかは分かりませんが！
　（仮によそのサイト借りてアップするにしてもそこのトップページからの流入があると不公平になったりするので悩ましいとか、自前で借りても通信帯域がすぐオーバーしちゃうとか）

　それでも、みなさまのすばらしいゲームの数々を遊べるチャンスが増やせるなら、可能な限り取り込んでいきたいと思っています！

◆ブラウザウディタをAndroidアプリ化する具体的な方法！

　ざっくりですが『ブラウザウディタ』のデータをAndroidアプリ化する方法メモを掲載しておきます！
　まだメモ状態なのでスクリーンショットなどはありませんが、参考にできる人は参考にしてみてください。

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

1-1. https://nodejs.org/en/download/package-manager
のサイトを開き、「Prebuilt Installer」のタブを開き、インストーラーをダウンロード
　(今どきのWindowsなら選択肢は「最初に出てるバージョン」「Windows」「x64」を選んでダウンロードすればいいと思います。万が一32bitのWindowsなら最後は「x86」を選んでください）

1-2.DLしたファイルを実行し、インストールを進める。
　途中の「I accept the terms in the Liecense Agreement」はチェックを当然入れる。
　全部「Next」。（追加のChocolatey？がどうとか言うのはインストールしなくても動きました）

【2. Ionic CLIをインストールします】
　Windowsの「コマンドプロンプト」を開き、以下のコマンドを実行します。
　（npmはNode.jsをインストール後に使えるコマンドです）

npm install -g @ionic/cli

【3. Capacitor用のまとめフォルダと作品フォルダを作ります】
　Capacitor（スマホアプリ用データを作るソフト）用のまとめフォルダを作ります。ここでは「Cドライブ」の「Capacitor-apps」フォルダを作るとします。
　この中に、作品ごとのフォルダが新たに作られます。

　Windowsの「コマンドプロンプト」を開いて以下を実行してください（Windowsの検索窓を開いて「cmd」と入れてもでてきます）。

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入れるらしいですけど知らないので何も入れずに「com.example.app」のままEnterして進めたとします。

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

【4.Capacitorフォルダの中にAndroid用のプロジェクトを作成】
　コマンドプロンプトで以下を実行し、Androidプロジェクト作成処理をします。【さっき作った「my-app」フォルダ内に移動】してから色々インストールしてるのが分かりますね。

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)」と出るかもしれないのでその場合は「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"のままだと、後にapkを作ってもCapacitorの紹介画面しか出てこなかったりしますので注意して下さい。1回やらかしました。
　
※5-1で作ったゲームデータ用フォルダ、「www」フォルダでなく最初から「dist」フォルダを作っておいたらよくない？　って感じはしますが、いちおうこのjsonファイル内で指定してるんだよってのを示すために「www」にしました。それに将来の初期フォルダが「dist」フォルダじゃなくなるかもしれない。
　
※appIdとappNameはアプリの識別に使ってるようです。たとえばスマホにapkを再インストールしたとき、この2つが前と同じだとアプリを上書きするか聞いてくれます。

【6.Android Studioをインストール（ここは1回やれば以後やる必要なし）】

6-1.
https://developer.android.com/studio?hl=ja
で「Android Studio Koalaをダウンロード」をクリック（2024/08/11時点）
1.2GBくらいあります。DLしたらインストールしてください。
→　インストール時は全部「Next」とか「Finish」でいいです。

→ インストール後に英語でなんか出てきますが「前のデータ読み込むか」とか「匿名のデータ送信」なので「Do not import settings(設定をインポートしない)」とか「Send usage satistics to Google(Googleに送る）」とか選んでおけばいいと思います。

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)」ファイルが存在するフォルダを開かないとビルドできません。
　　　まちがえて「my-app」のフォルダを開いて何もできなかったことがありました。

　→ 選んだ後、途中で「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スマホで読ませてインストールすると、スマホ上で実行できます。
　その辺りの手順は紹介しないので、調べてがんばってみてください。私は「Google Drive」にアップしたapkファイルをスマホでダウンロードしています。

※なお、スマホ側の設定で「野良APKを許可する」的な設定をオンにする必要がある場合があります。
　私だとGoogle Drive上でapkファイルをクリックすると「不明なアプリのインストール」みたいな画面が出てくるので「許可する」を選ぶ、という手順が必要でした。

※今回作ったapkファイルはdebug(デバッグ)版です。アプリストアに公開するなら他にも色々設定してrelease(リリース)版を作れるところまでがんばらないといけないそうですが、今回は調べてません。

【8. 今後、Data.wolfの新しいのができたら】
　もし今後Data.wolfを新しくした場合は、以下の手順を行えばOKです！

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

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

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

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

　以上です！
　もしかしたらインストールしたてのWindowsパソコンでやると他にインストールが必要なファイルなども出てくるかもしれませんが、私のパソコンだとこの手順でなんとかなりました。
　もし自分のゲームをAndroidスマホアプリとして動かしてみたいという人がいらっしゃいましたらぜひお試しください。
　ウディタが実質的にスマホアプリメーカーになりますので夢が広がります！

（ちなみに今回の作業4(Android用のプロジェクトを作成)あたりからアレンジすればiOS用の基礎ファイルもそのまま作れるらしいです、Capacitorすごい。ただしiOSのスマホアプリ用データ作成には、macOS上でのみ起動できる「Xcode」というソフトや、年100ドル(約1.5万円)かかるApple Developer Programへの登録などが必要だそうです）