# Ionic からの移行 このページでは、[Monaca CLI](https://ja.docs.monaca.io/products_guide/monaca_cli)を使用して、 プロジェクトを Monaca に移行するための手順を説明します。このガイドを終えたら、Monaca を使って プロジェクトからアプリを実行、テスト、デバッグ、ビルドすることができます！始めましょう！ ## 前提条件 1. 移行を開始する前に、[キーポイント](https://ja.docs.monaca.io/products_guide/migration/key_point)を一読してみてください。 2. Monaca CLI を npm でグローバルにインストールする ```bash $ npm install -g monaca ``` ## 移行手順 1. Monaca CLIのインストール後、Monacaアカウントでログインしてください。 ```javascript $ monaca login ``` 2\. プロジェクトディレクトリに移動します。 ```javascript $ cd ``` 3\. 次に、プロジェクトをMonacaのプロジェクト構造に変換するために **monaca init** を実行します。 ```javascript $ monaca init $ ... $ ? Are you sure you want to continue initializing this project? Yes $ ? Is it a transpilable project? Yes $ ? Which command do you use to serve the app? ionic-app-scripts serve $ ? Which command do you use to build the app? ionic-app-scripts build $ ? Which command do you use to watch the changes from your app? ionic-app-scripts watch ``` 次のように **package.json** ファイルに3つの新しいコマンドを注入する必要があります： ```javascript "scripts": { "monaca:preview": "ionic-app-scripts serve & ionic-app-scripts watch", "monaca:transpile": "ionic-app-scripts build", "monaca:debug": "ionic-app-scripts watch" } ``` ## アプリをデバッグする [Monaca デバッガー](https://ja.docs.monaca.io/products_guide/debugger) は、端末上で Monaca アプリをリアルタイムでテスト、デバッグするためのアプリケーションです。\ Monaca クラウド IDE で アプリを開発する場合、ファイルに加えられた変更は、保存後すぐに Monaca デバッガーに同期されます。 Monaca デバッガーの使い方は、以下になります。 1. Google Play または App Store から端末に Monaca デバッガーをインストールします。 [![](https://docs.monaca.io/images/monaca_ide/tutorial/testing_debugging/App_Store.jpg) ](https://itunes.apple.com/us/app/monaca/id550941371?mt=8)[![](https://docs.monaca.io/images/monaca_ide/tutorial/testing_debugging/Google_play.png)](https://play.google.com/store/apps/details?id=mobi.monaca.debugger\&hl=en) {% hint style="info" %} Android エミュレータに Monaca デバッガーをインストールする場合は、 [Android エミュレーター向け Monaca デバッガー ](https://ja.docs.monaca.io/products_guide/debugger/installation/debugger_emulator)を参照してください。 {% endhint %} 1. Monaca デバッガーを起動し、Monaca アカウントでサインインします。 Monaca クラウド IDE と同じアカウントを使用していることを確認してください。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgYjOfw4t5MtodgrUtg%2F-MgYkZAmuoe2erWewuXu%2Fimage.png?alt=media\&token=05496a71-ae37-40b3-93a9-5cc37f14bb4e) 1. デバッグを開始する前に、Monaca DebuggerとローカルPCをペアリングする必要があります。ペアリング前に次の点に注意してください。 * Monaca DebuggerとローカルPCは、同じネットワーク接続（LANまたはWi-Fi）に接続する必要があります。 * ローカルPCのファイアウォールを無効にする。 1. 上の点を確認後、ペアリングを開始できます。ターミナルでプロジェクトディレクトリに移動し、 `monaca debug`と入力します。 ```javascript $ cd $ monaca debug ``` 1. 次に、デバッガとローカルPCをペアリングするよう促すポップアップメッセージがMonaca Debuggerの中に表示されます。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgYjOfw4t5MtodgrUtg%2F-MgYkxrMaFRZsRMS0BP-%2Fimage.png?alt=media\&token=ae15957e-3d9a-44c0-a7a3-11974631071a) 1. ペアリングが成功した場合、ローカルプロジェクト名がMonaca Debuggerの `Local Projects`に表示されます。 ペアリングに失敗した場合は、[Fail to Pair Monaca Debugger](https://ja.docs.monaca.io/products_guide/debugger/troubleshooting)を参照してください。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgYjOfw4t5MtodgrUtg%2F-MgYlE-q_J0ce2suixUB%2Fimage.png?alt=media\&token=8d102090-d474-4860-855e-4965823c46b8) 1. プロジェクトを実行するには、Monaca Debuggerのプロジェクト名をタップします. 2. プロジェクトがデバッガで実行されているはずです。プロジェクトのさまざまな操作を試してみてください！ その後、コードを変更して保存してみてください。次に、デバッガに反映された変更が表示されます。 {% hint style="info" %} デバッグを停止し、デバッガのペアを解除するには、 `Ctrl + c` を押します。 {% endhint %} ## アプリをビルドする ### CLI コマンドのみを使用 1. プロジェクトディレクトリに移動します。 ``` $ cd ``` 2. Android Debug Buildを開始する ``` $ monaca remote build android --build-type=debug ``` ### GUI での使用 1. プロジェクトディレクトリに移動します。 ``` $ cd ``` 2. ビルドウィンドウを開いてビルドを開始します。 ``` $ monaca remote build --browser ``` 3. デバッグビルドはデフォルトで選択されています。`Start Build`をクリックしてください。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgYlPlqE1F3_BcQgU8V%2F-MgYlllLWIRnAo5VQnLM%2Fimage.png?alt=media\&token=7ad8b602-374e-4355-a85d-04261ec849bc) 1. ビルドが完了するまでに数分かかることがあります。ビルドが正常に完了すると、次の画面が表示されます。アプリをデバイスにインストールするさまざまな方法を選択できます。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgYlPlqE1F3_BcQgU8V%2F-MgYlsVRFaiW5LGNsiE_%2Fimage.png?alt=media\&token=ed2a0941-5e6b-49f9-8489-267b077b42da)