GitHub・.zip・Lovable から既存のアプリをインポートする
要点「プロジェクト」ページで「インポート」を開き、GitHub、.zip、Lovable のどれかを選びます。MonstarX が数秒でコードを確認し、そのまま動くかどうかをお知らせします。「インポートして実行」を押すとアプリがプレビューで開き、チャット、編集モード、バージョン、QA がすべてあなたのコードのまま使えます。MonstarX で動かせないアプリ(スマホアプリ、Django、Rails など)は、代わりに読み込んで作り直せます。
開発者が作ったアプリ、別の AI ビルダーからエクスポートしたアプリ、GitHub のリポジトリにあるアプリなど、すでにアプリがあるならインポートしましょう。MonstarX がまず中身を確認し、動かせるかどうかを数秒でお知らせします。その後はプレビューでそのまま動き、MonstarX が作ったアプリと同じように、チャットで改良を続けられます。
アプリはどうやってインポートしますか?
Section titled “アプリはどうやってインポートしますか?”プロジェクト ページのプロンプト欄で インポート を開き、コードのある場所を選びます。
-
インポート → GitHub を選びます。
-
リポジトリのアドレス(
github.com/acme/shop、またはacme/shopだけでも可)を貼り付け、確認 を押します。GitHub アカウントを接続していれば、非公開のものも含めてあなたのリポジトリが一覧になり、そこから選べます。 -
確認結果を読みます。別の ブランチ や、アプリがフォルダの中にある場合は別の フォルダ を選ぶと、もう一度確認されます。
-
インポートして実行 を押します。
公開リポジトリなら、アドレスだけでインポートできます。非公開のリポジトリは、先にプロジェクトの GitHub メニューから GitHub を接続してください。詳しくは GitHub をご覧ください。
-
インポート → .zip を選びます。
-
プロジェクトのフォルダをまとめた .zip をドロップするか、選択します。まずお使いのコンピューター上で確認され、インポートするまで何もアップロードされません。
-
確認結果を読んで インポートして実行 を押します。コードからプロジェクトが作成され、続いて画像が1つずつアップロードされます(「画像をアップロード中… 3 / 9」)。
zip はブラウザ上で展開されるので、node_modules、ビルド用のフォルダ、.env ファイルがお使いのコンピューターから外に出ることはありません。zip は100 MB まで扱えます。小さく保つために、node_modules とビルド用のフォルダは除いてください。
-
インポート → Lovable を選びます。
-
Lovable のワークスペース API キーを貼り付けて プロジェクトを表示 を押します(API キーには Lovable の Business または Enterprise のワークスペースが必要です)。MonstarX はキーを一覧の取得にだけ使い、保存しません。
-
プロジェクトを選びます。Lovable は API でコードを提供していないので、MonstarX は Lovable のプロジェクトが同期している GitHub リポジトリを尋ねます。Lovable でプロジェクトの設定 → Git → GitHub を開き、必要なら接続して、リポジトリのアドレスを貼り付けます。
-
コードを確認 を押し、次に インポートして実行 を押します。
API キーがない場合は、API キーがない場合は、同期した GitHub リポジトリを使う を選び、リポジトリのアドレスを直接貼り付けてください。
確認結果にはどんな意味がありますか?
Section titled “確認結果にはどんな意味がありますか?”| バッジ | 見出し | 意味 |
|---|---|---|
| そのまま動きます | 「このまま MonstarX で動きます」 | Vite のアプリ(または MonstarX からエクスポートしたアプリが戻ってきたもの)。MonstarX で動かし、編集し、公開できます。 |
| そのまま動きます · 公開は今のホスティング先 | 「MonstarX で動きます(公開は今のホスティング先から)」 | 独自のサーバーを持つアプリ(Next.js、Remix、Astro、Nuxt、SvelteKit、Create React App)。ここで動かして編集できます。公開は 公開 → Vercel から行うか、変更を GitHub に保存して今のホスティング先を使い続けます。 |
| ここでは動かせません | 「MonstarX ではこのままでは動かせません — 作り直すことはできます」 | スマホアプリやデスクトップアプリ、シンプルな HTML サイト、Django、Rails、Laravel、Go などで作られたサイト。MonstarX が読み込んで、Web アプリとして作り直せます。 |
| まだインポートできません | たとえば「アプリではなくライブラリです」や「大きすぎてインポートできません」 | MonstarX が動かすことも作り直すこともできないもの。理由と、どうすれば結果が変わるかが書かれています(多くの場合、アプリが入っているフォルダをインポートします)。 |
どの確認結果にも、アプリの使用技術、サイズ、そしてサンプルの環境ファイルに書かれたキー(VITE_MAPBOX_TOKEN のような設定値)の名前が表示されます。値は表示されません。インポートを止めるほどではない注意点は、黄色で表示されます。コミットされた .env ファイル(コピーはされず、キーは バックエンド → シークレット に入れます)、Docker Compose で起動するサービス、独自の API サーバー、Git LFS で管理されたファイル、10 MB を超えて取り込まれないファイルなどです。
インポートした後はどうなりますか?
Section titled “インポートした後はどうなりますか?”ワークスペースが開き、取り込んだ内容を説明するカードが表示され、アプリがプレビューで起動します(初回の起動ではパッケージをインストールするため、1〜2分かかります)。
キー には、コードが読み込む設定値が、本当に必要かどうかで分けて並びます。必須(それを読み込む部分は値がないと動作しません)、任意(コードに代わりの値が用意されています)、未使用 です。値を貼り付けて 追加 を押すか、プロジェクトのサンプルファイルに値が書かれていれば 「…」を使う を押すと、その値でプレビューが再起動します。値は暗号化されて バックエンド → シークレット に保存されます。
値がまったくわからない場合は、値がわからない場合は、プロジェクトを作ったツールに聞く を押してください。プロジェクトを作ったツール(Lovable のプロジェクトなら Lovable のチャット)に貼り付けるメッセージが表示されます。コードを一切変えずに、すべてのキーと、それをどこからコピーできるかを挙げてもらうためのメッセージです。
コードに直接書かれたキーを見つけた場合、カードにはその種類とファイル名が表示されます(値は表示されません)。Stripe のシークレットキーや OpenAI のキーなど、秘密にすべきものは一番上に警告として表示されます。
インポートした後は何が使えますか?
Section titled “インポートした後は何が使えますか?”- プレビュー、チャット、編集モード、バージョン、QA は、すべて今のコードのまま使えます。MonstarX はアプリ自身のコードと書き方に沿って作業し、アプリに必要なパッケージがあれば追加します。
- 公開:Vite のアプリは、ほかのアプリと同じように MonstarX で公開できます。独自のサーバーを持つアプリは、今のホスティング先で公開します。公開 → Vercel から行うか、GitHub に保存してホスティング先に取り込んでもらいます。詳しくは ほかのホスティング先 をご覧ください。
- エクスポート では、画像も含めてリポジトリをそのまま受け取れます。
- MonstarX のデータベースとアカウント は追加されません。インポートしたアプリは、コードが使っているもの(Supabase、Firebase、独自の API)をそのまま使い続け、バックエンド → データベース にもそのことが表示されます。アプリに必要なキーは バックエンド → シークレット に入れます。
monstarx ブランチとは何ですか?
Section titled “monstarx ブランチとは何ですか?”ご自身の GitHub アカウントを接続して GitHub からインポートし、そのリポジトリにプッシュする権限がある場合、プロジェクトはリポジトリと連携したままになります。MonstarX はインポートしたコミットの位置に monstarx というブランチを作り、変更をそこに保存します。デフォルトブランチが動くことはありません。変更をメインのブランチに入れたいときは、monstarx からプルリクエストを作成してください。プロジェクトの GitHub メニューに、GitHub の比較ページへのリンクがあります。GitHub でそのブランチにプッシュされた変更も、MonstarX に取り込まれます。詳しくは GitHub をご覧ください。
MonstarX でアプリを動かせないときは?
Section titled “MonstarX でアプリを動かせないときは?”スマホアプリ(Expo、React Native、Flutter、Swift、Android)、デスクトップアプリ、Django、Rails、Laravel、Go のサイトの場合、確認結果に コードを読み込んで、作り直しのプランを立てる が表示されます。
MonstarX は新しいプロジェクトを作り、元のコードを横に(読み取り専用で)置いたまま読み込んで、再構築プラン を提案します。画面、データ、コードにあるルール、使っているサービスとそれぞれの扱い(維持、置き換え、移行なし)、移行しないもの、そのまま引き継ぐロジックです。違っている点を伝えるとプランが修正され、作成する を押すと作成が始まります。細部はいつでも元のコードを検索して確認できます。ここで動かせるアプリにも 代わりに MonstarX で作り直す があり、MonstarX のデータベース、アカウント、公開を使いたいときに選べます。
インポートできるアプリの大きさは?
Section titled “インポートできるアプリの大きさは?”| 上限 | 値 |
|---|---|
| コード | 3,000ファイル、12 MB まで(1ファイル400 KB まで) |
| 画像などのファイル | 100 MB まで(1ファイル10 MB まで) |
| .zip | 100 MB まで |
| 作り直し | 1,500ファイル、コード5 MB まで |
上限を超えた場合は、確認結果に、実際の数、上限、そして解決方法が表示されます。たいていは、アプリが入っているフォルダだけをインポートします。
よくある質問
Section titled “よくある質問”インポートすると GitHub のリポジトリは変更されますか?
デフォルトブランチは変更されません。プッシュの権限があれば変更は monstarx ブランチに入り、権限がなければリポジトリは読み込まれるだけです。
モノレポをインポートできますか?
はい。MonstarX がアプリの入っているフォルダを見つけ、確認結果から別のフォルダを選ぶこともできます。
MonstarX からエクスポートしたアプリをインポートできますか?
はい。MonstarX のプロジェクトとしてすべて元どおりに戻ります(データベースは新しく空のものになり、元のアプリのデータは元の場所に残ります)。
インポートしたコードを動かしても安全ですか?
コードは専用の安全なクラウドのコンピューターで動き、パッケージはインストールスクリプトを無効にしてインストールされます。
ほかの人が書いたコードをインポートできますか?
利用する権利のあるコードだけにしてください。確認結果にはリポジトリのライセンスが表示されるか、記載がないことが示されます。