Adaloのカスタムコンポーネント開発環境構築

経緯

• NoCodeプログラミングツール「Adalo」でアプリを作成していたら、カスタムコンポーネントが欲しくなったので作った
• そのときの開発（シミュレーション）環境構築の流れを記載

実施環境

• Windows 11 + WSL2 + Docker + docker-osx（OSX Monterey）
  • 構築方法は下記を参照
    • Windows（WSL2）でMacOSXを動かす
    • docker-osxのマニュアルインストール手順
• 実施したのはiOSシミュレーション環境のみ

手順

OSXの準備

1. XCodeインストール
   • AppleStoreから普通にインストール
2. Homebrewインストール
   $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
3. Watchmanインストール
   $ brew update
$ brew install watchman
4. Cocoapodsインストール
   $ brew install cocoapods
5. Node.jsのver.14 をインストールしてリンク
   $ brew install node
$ brew install node@14
$ brew unlink node
$ brew link --force node@14
   • versionを14にする理由はこちら
6. yarnをインストール
   $ brew install yarn

$ yarn --version
1.22.19

mobile-previewerの準備

1. mobile-previewerをclone
   $ git clone https://github.com/AdaloHQ/mobile-previewer.git
2. ディレクトリ移動
   $ cd mobile-previewer
3. moduleをインストール
   $ yarn install
4. iosディレクトリに移動
   $ cd ios
5. Xcodeワークスペースの依存ライブラリをインストール
   $ pod install
   • 遭遇したエラー1 [configure: error: C compiler cannot create executables]: 解決策
   • 遭遇したエラー2 xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools install : 解決策
6. 2 のディレクトリ（mobile-previewer）に移動して下記を実行
   $ yarn start

XCodeでエミュレータ起動

1. Xcodeを開き、Command Line Toolsを設定
   • Preference > Location > Command Line Toolsを設定
2. 前節4. のディレクトリ（ios）のAdaloApp.xcworkspaceを開く
3. 左上の実行ボタン「▶」をクリックし、エミュレータが立ち上がることを確認
4. 前節 7.で実行しているサービスと連携する
   • エミュレータ上で「Reload」を実行する
   • 上記で連携されなければ、前節7. のサービスをで r を入力する

以上で、iOSシミュレータでカスタムコンポーネントを試す環境構築が完了。

参考

• mobile-previewerでカスタムコンポーネントをimportする手順
• docker-osxを使う場合はこちらもどうぞ