Bluesky 公式クライアント(Android)をビルドしてみる

ピン留めされたアイテム

snaka

これをビルドして Android の実機で動かしてみるまでをやってみる。

ビルドに関しては以下のドキュメントにまとまっている

https://github.com/bluesky-social/social-app/blob/main/docs/build.md

ピン留めされたアイテム

snaka

TL;DR

GitHub (docs/build.md) に掲載されているビルド手順をなぞる前に以下を準備しておく
- Node.js のバージョンは v18 系を使うこと
  - v20 系だと動作しなかった ( 2024-01-01 時点 )
- Xcode ( Command Line Tools じゃない ) をインストールしておくこと
- Apple Silicon Mac の場合、 Android Studio は Arctic Fox 2020.3 以降をインストールすること
上記の準備ができたあと、以下の手順に従う
- https://github.com/bluesky-social/social-app/blob/main/docs/build.md
  - Android クライアント立ち上げるのが目的であれば、ローカルでの server の起動は不要

無事に起動できると以下のように Emulator で Bluesky アプリが立ち上がる

snaka

以下は試行錯誤のログ

React Native まわりのセットアップ

Set up your environment using the react native instructions.

環境は

Apple M2 Pro
Development OS: macOS Ventura 13.6.3（22G436）
Target OS: Android

snaka

node と watchman

node は v20.2.0 が asdf でインストール済みだったのでOK

watchman を Homebrew でインストールする

brew install watchman

snaka

Open JDK (Zulu) のインストール

brew tap homebrew/cask-versions
brew install --cask zulu17

cask インストール先を確認する

$ brew info --cask zulu17
==> zulu17: 17.0.9,17.46.19
https://www.azul.com/downloads/
/opt/homebrew/Caskroom/zulu17/17.0.9,17.46.19 (2 files, 183.5MB)
From: https://github.com/Homebrew/homebrew-cask-versions/blob/HEAD/Casks/zulu17.rb
==> Name
Azul Zulu Java Standard Edition Development Kit
==> Description
OpenJDK distribution from Azul
==> Artifacts
Double-Click to Install Azul Zulu JDK 17.pkg (Pkg)

JDK のインストール先は以下

$ ls /Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home/
DISCLAIMER	bin		demo		jmods		lib		readme.txt
Welcome.html	conf		include		legal		man		release

snaka

Android 開発環境まわり

SDK は Android 13 (Tiramisu) が必要らしい
- API Level だと 33

https://apilevels.com/

Android の Version と API Level と Codename ばらばらで覚えられないな

snaka

Android SDK インストール

snaka

Show Package Details にチェックつけて、 ARM 64 v8a System Image と Google APIs ARM 64 v8a System Image もインストールした

snaka

Android SDK Build-Tools も 33.0.0 を選択してインストール

snaka

Android Studio で `Cannot run program "node"` というエラーが出てビルドできていない (?)

Android Studio 開くと以下のエラーが出ている

Caused by: java.io.IOException: Cannot run program "node" (in directory "/Users/snaka/projects/react-native-app/AwesomeProject/android"): error=2, No such file or directory

snaka

node への PATH が通っていない。

mac の GUI アプリケーションのこのあたり、いつもわからない....

とりあえず /usr/local/bin/node に asdf でインストールしたバイナリを Symbolic Link してみたら、エラーは解消した

sudo ln -s "$(which node)" /usr/local/bin/node

以下を参考にした

snaka

After initial setup

google-services.json を用意する

cp google-services.json.example google-services.json

prebuild

npx expo prebuild

snaka

npx expo が実行できなかったのでその対応

snaka

今度は CodePods で以下のエラー

26 gems installed

A new release of RubyGems is available: 3.4.10 → 3.5.3!
Run `gem update --system 3.5.3` to update your installation.

› Successfully installed CocoaPods CLI with Gem
✔ Installed CocoaPods CLI.
⚠️  Something went wrong running `pod install` in the `ios` directory.
Command `pod install` failed.
└─ Cause: Failed to load 'glog' podspec:
[!] Invalid `glog.podspec` file: undefined method `[]' for nil:NilClass.

 #  from /Users/snaka/ghq/github.com/bluesky-social/social-app/node_modules/react-native/third-party-podspecs/glog.podspec:38
 #  -------------------------------------------
 #    match = xcode_path.match(/Xcode (\d+)\.(\d+)/)
 >    major_version = match[1].to_i
 #    minor_version = match[2].to_i
 #  -------------------------------------------

pod install --repo-update --ansi exited with non-zero code: 1

snaka

Xcode か... そう言えば、入れた記憶が無い

snaka

Xcode のどのバージョンが入っているか見る

CommandLineTools は入れてたっぽい

$ /usr/bin/xcodebuild -version
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

pkgutil コマンドなんてのがあった

$ pkgutil --pkg-info=com.apple.pkg.CLTools_Executables | grep version
version: 15.1.0.0.1.1700200546

snaka

エラーの箇所のコード見ると以下のとおり

  # TODO: T167482718 Remove this code after April 2024, when Apple will
  # push the lower version of Xcode required to upload apps to the Store.
  xcode_path = `xcodebuild -version` # This return the current version of Xcode

  match = xcode_path.match(/Xcode (\d+)\.(\d+)/)
  major_version = match[1].to_i
  minor_version = match[2].to_i

xcodebuild -version コマンドの出力は前述のとおりだったので、 react-native の前提として Xcode は GUI がインストールされてる必要がありそう？

snaka

App Store で Xcode インストールしたら、 xcodebuild -version で出るようになった

$ /usr/bin/xcodebuild -version
Xcode 15.1
Build version 15C65

snaka

やっと prebuild 完了

$ npx expo prebuild
✔ Created native directories | reusing /android, /ios
✔ Updated package.json | no changes
✔ Finished prebuild

snaka

`npx expo` が CommandError: Cannot determine which native SDK version your project uses because the module ``expo`` is not installed. Please install it with ``yarn add expo`` and try again. というエラーで失敗する

snaka

そう言えば yarn install してなかった... と思い実行したら以下のエラー

error /Users/snaka/ghq/github.com/bluesky-social/social-app/node_modules/better-sqlite3: Command failed.
Exit code: 1
Command: prebuild-install || npm run build-release
Arguments: 
Directory: /Users/snaka/ghq/github.com/bluesky-social/social-app/node_modules/better-sqlite3
Output:
prebuild-install warn install No prebuilt binaries found (target=20.2.0 runtime=node arch=arm64 libc= platform=darwin)

> better-sqlite3@7.6.2 build-release
> node-gyp rebuild --release

gyp info it worked if it ends with ok
gyp info using node-gyp@9.3.1
gyp info using node@20.2.0 | darwin | arm64
gyp info find Python using Python version 3.11.6 found at "/opt/homebrew/opt/python@3.11/bin/python3.11"
gyp info spawn /opt/homebrew/opt/python@3.11/bin/python3.11
... ( 略 ) ...

In file included from ../src/better_sqlite3.cpp:4:
In file included from ./src/better_sqlite3.lzz:11:
In file included from /Users/snaka/Library/Caches/node-gyp/20.2.0/include/node/node.h:73:
In file included from /Users/snaka/Library/Caches/node-gyp/20.2.0/include/node/v8.h:24:
In file included from /Users/snaka/Library/Caches/node-gyp/20.2.0/include/node/v8-array-buffer.h:13:
In file included from /Users/snaka/Library/Caches/node-gyp/20.2.0/include/node/v8-object.h:9:
/Users/snaka/Library/Caches/node-gyp/20.2.0/include/node/v8-maybe.h:106:45: error: no template named 'is_lvalue_reference_v' in namespace 'std'; did you mean 'is_lvalue_reference'?
  template <class U, std::enable_if_t<!std::is_lvalue_reference_v<U>>*>
                                       ~~~~~^~~~~~~~~~~~~~~~~~~~~
                                            is_lvalue_reference
/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/usr/include/c++/v1/__type_traits/is_reference.h:26:29: note: 'is_lvalue_reference' declared here
struct _LIBCPP_TEMPLATE_VIS is_lvalue_reference : _BoolConstant<__is_lvalue_reference(_Tp)> { };
                            ^

snaka

これっぽい？

snaka

node-gyp とは？

node-gyp is a cross-platform command-line tool written in Node.js for compiling native addon modules for Node.js.

ネイティブなアドオン(何に対する?)をコンパイルするための、Node.js で記述されたクロスプラットフォームな CLI ツール?

https://github.com/nodejs/node-gyp

snaka

better-sqlite3 側が参照している sqlite3 のインターフェースと異インストール済みの sqlite3 のものが合ってないとかかな？

snaka

関係あるかわからないが、バージョンを確認する

$ sqlite3 -v
No version is set for command sqlite3
Consider adding one of the following versions in your config file at /Users/snaka/.tool-versions
sqlite 3.42.0

error /Users/snaka/ghq/github.com/bluesky-social/social-app/node_modules/better-sqlite3: Command failed.
Exit code: 1
Command: prebuild-install || npm run build-release
Arguments: 
Directory: /Users/snaka/ghq/github.com/bluesky-social/social-app/node_modules/better-sqlite3
Output:
prebuild-install warn install No prebuilt binaries found (target=20.2.0 runtime=node arch=arm64 libc= platform=darwin)

> better-sqlite3@7.6.2 build-release
> node-gyp rebuild --release

snaka

better-sqlite3 を新しいものにしたらOKみたいな話はありそう

v7.6.2 は 2022 年のバージョンだしな

snaka

better-sqlite3 v7.6.2 が Node.js 20 をサポートしてないってことか

snaka

Node.js v18 にしたらあっさり通った

$ node -v
v18.19.0

snaka

After initial setup ( 続き )

まだ、ロケール周りのビルドが残ってた

yarn intl:build

特に問題なく完了。

snaka

Start the dev servers

Android アプリ動かすだけであれば不要かもしれないけど、試しておく。

git clone git@github.com:bluesky-social/atproto.git
cd atproto
pnpm i
pnpm build
cd packages/dev-env && pnpm start

上記を実行すると、 Docker Image の pull などが走ったあと、以下のように server が立ち上がる

██████╗
██╔═══██╗
██║██╗██║
██║██║██║
╚█║████╔╝
 ╚╝╚═══╝  protocol

[ created by Bluesky ]
👤 DID Placeholder server started http://localhost:2582
🌞 Personal Data server started http://localhost:2583
🌅 Bsky Appview started http://localhost:2584
🤖 Feed Generator started http://localhost:55215
🤖 Feed Generator started http://localhost:55217

この Ascii Art 、"D" かと思ったら "@" か...

snaka

`pnpm i` で以下のエラーがでてた

│ gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
│ You have not agreed to the Xcode license agreements. Please run 'sudo xcodebuild -license' from within a Terminal window to review and agree to the Xcode and Apple SDKs license.
│ gyp ERR! build error
│ gyp ERR! stack Error: `make` failed with exit code: 69
│ gyp ERR! stack at ChildProcess.<anonymous> (/Users/snaka/.asdf/installs/nodejs/18.19.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:209:23)

なにか Xcode を立ち上げて同意が必要そう

snaka

sudo xcodebuild -license

これを実行するとライセンスに関するテキストがでてくるので agree と入力

snaka

これで pnpm i は完了した

snaka

Run the dev app ( Web クライアント )

とりあえず Web クライアントを起動してみる

yarn web

上記を実行すると... 以下のように表示されたのち、 http://localhost:19006 が Web ブラウザで開かれる

$ yarn web
yarn run v1.22.21
$ expo start --web
Starting project at /Users/snaka/ghq/github.com/bluesky-social/social-app
Starting Metro Bundler
Starting Webpack on port 19006 in development mode.
(node:37348) [DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR] DeprecationWarning: Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:37348) [DEP_WEBPACK_DEV_SERVER_LISTEN] DeprecationWarning: 'listen' is deprecated. Please use the async 'start' or 'startCallback' method.

(QRコード)

snaka

ローカルで立ち上げた web クライアント、ログイン先として Bluesky.Social 選べるんだな ( 接続できるとは思ってたが )

snaka

web クライアントがローカルで動いた 🎉

snaka

Run the dev app ( Android クライアント )

つづいて Android クライアントを試す

yarn android

snaka

emulator の起動に失敗している

yarn android で以下のエラーがでていた

$ yarn android
yarn run v1.22.21
$ expo run:android
› Opening emulator Galaxy_A30_by_snaka_API_28
Error: The emulator (Galaxy_A30_by_snaka_API_28) quit before it finished opening. You can try starting the emulator manually from the terminal with: /Users/snaka/Library/Android/sdk/emulator/emulator @Galaxy_A30_by_snaka_API_28
Error: The emulator (Galaxy_A30_by_snaka_API_28) quit before it finished opening. You can try starting the emulator manually from the terminal with: /Users/snaka/Library/Android/sdk/emulator/emulator @Galaxy_A30_by_snaka_API_28
    at stopWaitingAndReject (/Users/snaka/ghq/github.com/bluesky-social/social-app/node_modules/@expo/cli/build/src/start/platforms/android/emulator.js:110:20)
    at ChildProcess.<anonymous> (/Users/snaka/ghq/github.com/bluesky-social/social-app/node_modules/@expo/cli/build/src/start/platforms/android/emulator.js:121:13)
    at ChildProcess.emit (node:events:517:28)
    at ChildProcess._handle.onexit (node:internal/child_process:292:12)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
~/ghq/github.com/bluesky-social/social-app [main]

snaka

AVD (Android Virtural Device?) のリストを見る

$ emulator -list-avds
Galaxy_A30_by_snaka_API_28
Pixel_XL_API_28
Pixel_XL_API_33

snaka

Host の CPU アーキテクチャが x86_64 だと言われてるな...

$ emulator @Galaxy_A30_by_snaka_API_28
INFO    | Android emulator version 33.1.24.0 (build_id 11237101) (CL:N/A)
INFO    | Found systemPath /Users/snaka/Library/Android/sdk/system-images/android-28/google_apis/arm64-v8a/
PANIC: Avd's CPU Architecture 'arm64' is not supported by the QEMU2 emulator on x86_64 host.

QEMU2 が Rosetta ( Applie Silicon 上の x86 エミュレーション ) で動いてて、さらにその QEMU2 で ARM を動かそうとしてる？

snaka

読む

snaka

Apple Silicon 対応の Emulator は Android Stuido の AVD Manger からダウンロードできるようになっているはず

Support for downloading the M1-based emulator was added to SDK Manager, so it's not necessary to go to the Github releases page to download a standalone .app anymore. In AVD Manager go to the Other Images tab as by default it doesn't show the ARM64 images.

snaka

Android Emulator は Android Studio とは別サイクルでリリースされてるんだな

snaka

Android Emulator の Issue Tracker 見つけた

snaka

環境構築したときのログ追っかけてみたら x64 版の Android Emulator がインストールされてたっぽいな...

Packages to install: 
- Android Emulator (emulator)

Preparing "Install Android Emulator (revision: 33.1.23)".
Downloading https://dl.google.com/android/repository/emulator-darwin_x64-11150993.zip

snaka

なるほど... ( 最初から file コマンド使ってたらよかった )

$ file ~/Library/Android/sdk/emulator/emulator
/Users/snaka/Library/Android/sdk/emulator/emulator: Mach-O 64-bit executable x86_64

snaka

Apple Silicon に対応した Android Studio を入れ直す

Arctic Fox | 2020.3 であれば Apple Silicon に対応してるようなので、今の Android Studio をアンインストールして入れ直した。

snaka

インストール済みの AVD のリストを確認する

$ emulator -list-avds
Pixel_3a_API_34_arm64-v8a

snaka

Emulator を起動してみた

$ emulator -avd Pixel_3a_API_34_arm64-v8a

snaka

今度は Emulator が普通に起動した

snaka

Run the dev app ( Android クライアント ) 【2回目】

つづいて Android クライアントを試す

yarn android

snaka

ビルドが始まって 10 分以上待たされたが... やっとローカル環境で Bluesky アプリ (Android) が立ち上がった 🎉

snaka

ついでに iOS も動かしてみる

yarn ios したら、以下のエラーが出て止まった

$ yarn ios
yarn run v1.22.21
$ expo run:ios
✔ Installed CocoaPods
CommandError: No iOS devices available in Simulator.app
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

snaka

関連 Scrap

TL;DR

React Native まわりのセットアップ

node と watchman

Open JDK (Zulu) のインストール

Android 開発環境まわり

Android Studio で Cannot run program "node" というエラーが出てビルドできていない (?)

After initial setup

npx expo が CommandError: Cannot determine which native SDK version your project uses because the module ``expo`` is not installed. Please install it with ``yarn add expo`` and try again. というエラーで失敗する

After initial setup ( 続き )

Start the dev servers

pnpm i で以下のエラーがでてた

Run the dev app ( Web クライアント )

Run the dev app ( Android クライアント )

emulator の起動に失敗している

Apple Silicon に対応した Android Studio を入れ直す

Run the dev app ( Android クライアント ) 【2回目】

ついでに iOS も動かしてみる

Android Studio で `Cannot run program "node"` というエラーが出てビルドできていない (?)

`npx expo` が CommandError: Cannot determine which native SDK version your project uses because the module ``expo`` is not installed. Please install it with ``yarn add expo`` and try again. というエラーで失敗する

`pnpm i` で以下のエラーがでてた