これはBabylon.js アドベントカレンダー2023の 5 日目の記事です。
この記事では、Babylon.js を使ってiOSやAndroidアプリを作るためのReact Naticeの環境構築手順を紹介します。
検証した環境
Mac OS Ventura 13.4
XCode 15.0 beta2
1. Webアプリとネイティブアプリ
厳密には色々と定義がありますが、ここではWebアプリとネイティブアプリを以下のように定義します。
Webアプリ：JavaScriptまたはTypeScriptで作られたWebサイト。ブラウザで表示する
ネイティブアプリ：Xcode、Android Studio、Visual Studioなどで開発されたアプリ。OS固有の実行ファイルであるため、原則対応するOSでしか動かない
今回は、Webアプリの内容を元にXcodde、Android Studio、Visual Studioでネイティブアプリの実行ファイルを作る方法について述べます。
その手段がReact Nativeです。
2. React Nativeとは
Meta (旧Facebook) が開発したフレームワークです。
このフレームワークを使うことで、Webアプリとして作った内容をネイティブアプリにすることができます。（ただし、なんでもできるわけではなさそうです）
Babylon.jsのDocumentationでは、Babylon React Nativeとして、Babylon.jsのコードをReact Nativeを使ってネイティブアプリ化する手順が紹介されています。
3. Babylon React Nativeの環境構築手順
こちらに書いてあります。
github.com
ここではiOS、Android、UWPアプリのビルド手順が書いてあります。今回はiOSの手順を試しました。
まずは上記のソースコードをclone, forkまたはzip保存して、自分の使用環境で展開します。
次は必要なライブラリをインストールします。
Macの場合はCmake, Ruby, cocoapodsをインストールしておく必要があります。
Rubyとcocoapodsはそのままだとうまくインストールできないので、補足説明を入れました。
◼️Cmake
$ brew install cmake
◼️Ruby
$ brew update $ brew install rbenv ruby-build
(1) "「command」＋「shift」＋「.」 " を押して、隠しフォルダを表示させる
(2) /Users/limes(Macのユーザ名)/.zshrcを探して、Visual Studio Codeなどで開く
(3) 以下の２行を追加する
export PATH="/Users/limes/.rbenv/shims:${PATH}"
eval "$(rbenv init - zsh)"
(4) rbenvでインストールすべきRubyのバージョン (今回は3.1.4) を指定し、現在使っているRubyを新しくインストールしたバージョンに変更する
$ rbenv install 3.1.4 $ rbenv global 3.1.4 $ source ~/.zshrc
◼️cocoapods
$ sudo gem install cocoapods
ここまで実行するとBabylon React Nativeを実行するための環境が整います。
4. プロジェクトのビルド手順
Rubyの使用バージョンを書き換えます。GitHubのリポジトリでは以下のファイルに2.7.6と書いてありますが、今回は3.1.4を使う予定なので、3.1.4とします。
Apps/Playground/0.71/.ruby-version
次に、このディレクトリまで移動します。
/＜フォルダパス＞/Apps/Playground
移動後、以下のコマンドを実行します。色々インストールされるので数分かかります。
$ npm ci $ npm run select 0.71
これができたら、今度はiOS向けのビルドを行います。
場所はここです。
/＜フォルダパス＞/Apps/Playground/Playground
$ npm run ios
環境によって数分近くかかりますが、これによりXcodeのプロジェクトが生成されます。
また、途中でXcode Simulatorが起動してiPhoneの画面が出ます。
あとはこれを元に実機にデプロイすれば良いのですが、XcodeのプロジェクトをビルドするところでBuild failedになってしましました。
長いので一部のログを示します。
--- xcodebuild: WARNING: Using the first of multiple matching destinations:
{ platform:iOS Simulator, id:CB16D9C4-2C48-49A0-8C73-69400CE6CECD, OS:17.0, name:iPhone SE (3rd generation) }
{ platform:iOS Simulator, id:CB16D9C4-2C48-49A0-8C73-69400CE6CECD, OS:17.0, name:iPhone SE (3rd generation) }
** BUILD FAILED **
The following build commands failed:
CompileC /Users/limes/Library/Developer/Xcode/DerivedData/Playground-etzatmihrbzzpqgjnicgecxhfsqg/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/RCT-Folly.build/Objects-normal/arm64/json.o /Users/limes/Documents/BJS/BJS_reactnative_git/BabylonReactNative_test/Apps/Playground/0.71/ios/Pods/RCT-Folly/folly/json.cpp normal arm64 c++ com.apple.compilers.llvm.clang.1_0.compiler (in target 'RCT-Folly' from project 'Pods')
(1 failure)
おそらくGitHubで公開されているときのRubyバージョン、Xcodeや指定されるiOSのバージョンが私が試した環境と合っていないためと思われます。
5. おわりに
調べていけばわかると思われますが、ちょっと時間がかかりそうなので後日検証したいと思います。
