一時期いろんな場所でノーコードでAI使ってアプリが作れるといろいろ
騒がれたBolt.newというサイトがあるんですが(中身はAnthropic社の
Claudeをウェブ上で使えるようにしたサービス)このサイト、アンドロイド
アプリとかIosアプリのコードを出してくれるんですよね(Reactかタイプ
スクリプトみたいですが)
で、一応使えるようにするところまでコード触らずに一直線でできる
サービスという触れ込みだったんですが、Webアプリはそういう感じ
だったんですが、僕が触ってた頃はというと。
「モバイルアプリは手動でビルドしてください」
という表示とともにExpoというサービスを使ったビルド方法が記された
サイトに飛ばされていたんですよね(今はどうだか知りませんが、当時は
ウェブアプリ以外ビルドまでいかなかった)
で、当然ながら調べながらやるんですが、手動のビルド方法を記した日本語の
情報がどこにもない(海外のサービスなんで当然ですが)上に英語の情報も
限られてるという状況で…。まあ、一言でいえばひどいありさまだったんですが。
というわけでその時徹夜して作ったBolt.newのモバイル用ソースコードを
ビルドする方法を一応記しておきます。ただ当時のバージョンの話なので
今はこんなことしなくてもいいかもしれませんが、一応記しておきます。
必要なもの
・Bolt.newで作ったモバイルアプリのソースコード
・コードエディタ(自分はCursor使いました)
・Node.js、Javaデベロッパーキット(事前にインストールしてください)
・コパイロットとかチャットGPT(どうしてもわからない場合に聞く)
・Expoアカウント(ないとビルドが面倒になって詰みます)
事前にやっておくこと
Power shellの実行ポリシーを変更しておく。出ないと何もコマンド受け付けません。
参考にした記事があるのでどうぞ。Power shellは管理者権限で起動しないと変更
できないので注意してください。
ここからは、当時コパイロットと相談しながら作った手順書を記す。
Bolt.new でエクスポートしたモバイルアプリのビルド方法まとめ
ビルドに必要な環境
- Expo アカウント
- Bolt.new でエクスポートしたソースコード
- Zip を解凍し、フォルダ名を半角英字のアプリ名に変更(例:
nyocalc) - Cursor(AIコードエディタ)
- Node.js(ビルド必須)
- Java Developer Kit(JDK)
- インストール後は必ず PC を再起動
- PowerShell 実行ポリシーの変更(npm 実行前に)
Set-ExecutionPolicy RemoteSigned -Scope Process
- eas.json(生成されないこともあるため、自作する必要がある場合あり)
困った時の味方:Copilot や ChatGPT を活用!
ビルド手順
1. プロジェクトの準備
- Cursor にプロジェクトを読み込ませる
(フォルダ名はアプリ名にして、デスクトップなどに配置) -
app.jsonを開いて、以下のフィールドを修正:(修正するかは任意)"name": "アプリの名前", "slug": "アプリの名前"
2. 依存関係のインストール
npm install
※ PowerShell の実行ポリシー変更が必要な場合あり(上記参照)
3. ローカル確認(Expo Go)
npx expo start
QRコードが表示されれば OK!
4. EAS CLI インストールと初期化
npm install -g eas-cli
eas login
- Expo のユーザー名・パスワードでログイン
eas init
-
Would you like to create a project?→ Y
eas.jsonが生成されない場合は、手動で以下のようなファイルを作成:
{
"build": {
"preview": {
"android": {
"buildType": "apk"
}
}
},
"cli": {
"appVersionSource": "local"
}
}
5. Android ビルドの実行
eas build --platform android --profile preview
以下のようなプロンプトが順に表示される:
-
Git 初期化:
It looks like you haven't initialized the git repository yet.→ Y -
Keystore 作成:
Generate a new Android Keystore?→ Y(初回のみ) -
コミットメッセージ:
Initial commitを入力 - Git ユーザー情報設定(テスト用なら仮の名前・メールアドレスで可)
6. ビルド完了・APK ダウンロード
- ビルドログに
✔ Build finishedと表示されたら成功 -
Install and run the Android build on an emulator?→ 任意で Y/N - APK の保存場所はビルド完了後に表示される URL(または EAS ダッシュボード)からダウンロード
まとめ
- 環境構築を丁寧に済ませる(JDK 再起動忘れずに!)
-
eas.jsonが生成されなければ手動で作成 - Git 初期化、Keystore 生成は対話式なので落ち着いて選択
- わからなくなったら Copilot に相談すれば OK
とまあこんな感じで最後にはコパイロットと相談しながら無事APKファイル生成まで
行きました。これ、徹夜して構築してビルドまでやったので割と徹夜が嫌いになりました。
あとEAC周りがいろいろ変わってるらしいので、そこは適時調べて改変してください。
後これテスト用のAPKファイルの作り方なので、アプリストア用の方のビルドは
また別になります。そこも適時調べてください。
ではでは。