> For the complete documentation index, see [llms.txt](https://ja.docs.monaca.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ja.docs.monaca.io/products_guide/migration/telerik_migration.md).

# Telerik からの移行

このページでは、Telerik AppBuilder プロジェクトを Monaca に移行するための簡単な手順を解説します。Monaca を使って telerik プロジェクトの実行、テスト、デバッグ、ビルドを行うことができます。

## ステップ 1: 準備

Telerik ツールを使用してプロジェクトを Cordova プロジェクトに変換します。 次に、プロジェクトを ZIP ファイルに圧縮します。

## ステップ 2: Monaca クラウド IDE へのインポート

1. Monaca [ダッシュボード](https://monaca.mobi/ja/dashboard)から、`インポート` を選択します。
2. プロジェクト名を入力し、`プロジェクトのパッケージをアップロード` オプションを選択します。 次に、プロジェクトの ZIP ファイルを参照します。

![](/files/-MgYqSaEsDUsWb9Tz9dO)

    3\. `インポート` をクリックして、プロジェクトをMonaca にインポートします。

    4\. Monaca クラウド IDE でプロジェクトを開くには、`開く` をクリックします。

![](/files/-MgYqhcNsobKgrzGHAAF)

    5\. IDE が表示されたら、[プレビュー](/products_guide/monaca_ide/overview.md#pureby) でアプリを表示できます。

![](/files/-MgYqqEu9inDw-WlU_sA)

{% hint style="info" %}
Ajax リクエストまたは Cordova API が使用されている場合、プレビューウィンドウの表示や操作が正しく機能しないことがあります。詳しくは、[ プレビューの制限 ](/products_guide/monaca_ide/overview.md#purebyno)を参照してください。 この場合は、Monaca デバッガーを使用してプロジェクトを テスト/デバッグ することができます (次の項目で解説します) 。
{% endhint %}

## ステップ 3: Monaca でのデバッグ

[Monaca デバッガー](/products_guide/debugger.md) は、端末上で Monaca アプリをリアルタイムでテスト、デバッグするためのアプリケーションです。Monaca クラウド IDE で Monaca アプリを開発する場合、プロジェクトファイルに加えられた変更は、保存後すぐに 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 デバッガー ](/products_guide/debugger/installation/debugger_emulator.md)を参照してください。
{% endhint %}

    2\. Monaca デバッガーを起動し、Monaca アカウントでサインインします。 Monaca クラウド IDE と同じアカウントを使用していることを確認してください。

![](/files/-MgYrQ11yQ2acg1NaBn0)

    3\. プロジェクトを実行するには、Monaca デバッガーのプロジェクト名をタップするか、Monaca クラウド IDE の `実機で実行` をクリックします。

![](/files/-MgYr_Eo0Sg5Q3usxupS)

    4\. プロジェクトが Monaca デバッガーで実行されているはずです。 プロジェクトのさまざまな操作を試してみてください。

    5\. Monaca クラウド IDE からプロジェクトのソースコードを変更し、保存します。 Monaca デバッガーに変更が反映されます。

## ステップ 4: アプリのビルド

デバッグの次は、ビルドを行います。このステップでは、Android 用デバッグビルドについて解説します。

1. Monaca クラウド IDE から `ビルド → Androidアプリのビルド` を選択します。

![](/files/-MgYrfp5Gs4dW3hXUBPJ)

    2\. デフォルトでは、デバッグビルドが選択されています。`ビルドを開始する` をクリックすると、ビルド画面が新しいタブで開かれます。

![](/files/-MgYrmWWZJESIMHrxwsX)

    3\. ビルドが完了するまでに数分かかる場合があります。ビルドが正常に完了すると、次の画面が表示されます。ビルドアプリを端末にインストールするさまざまな方法を選択することができます。

![](/files/-MgYropOYmFp4vnN-i2T)

## 備考

プロジェクトを Monaca に移行する際には、次のような注意点があります。

### サードパーティー製プラグインを使用する場合

Google Play または App Store で公開されているストア版 Monaca デバッガーには、[基本プラグイン](/reference/core-cordova-plugins.md) のみが含まれています。プロジェクトに 基本プラグイン以外のサードパーティー製プラグインが含まれている場合は、プロジェクトをテストするカスタムデバッガーをビルドする必要があります。カスタムデバッガーには、プロジェクトで使用されているプラグインのみが含まれます。 詳しくは、以下を参照してください。

* [カスタムビルド版 Monaca デバッガーのビルド方法 ( iOS )](/products_guide/debugger/installation/debugger_ios.md#kasutamubirudo-monaca-debaggnobirudo)
* [カスタムビルド版 Monaca デバッガーのビルドとインストール ( Android )](/products_guide/debugger/installation/debugger_android.md#kasutamubirudo-monaca-debaggnobirudotoinsutru)

### JS/CSS コンポーネントページを使用する場合

Monaca クラウド IDE には、CSS/JavaScript ライブラリを追加するためのページがあります。`設定 → JS/CSSコンポーネントの追加と削除` を選択すると、次のページが表示されます。

![](/files/-MgYsAwUR2p4lpyvZI8h)

このページでは、さまざまな CSS/JavaScript ライブラリを追加することができますが、実際にプロジェクトで利用するためには、`index.html` ファイルに、次の 2 行を記述する必要があります。

```markup
<!--Load selected JavaScript libraries-->
<script src="components/loader.js"></script>
<!--Load selected CSS libraries-->
<link rel="stylesheet" href="components/loader.css”>
```

`loader.js` ファイルには、 `cordova.js` ファイルをロードするための設定が追加されているため、上記を追加した場合は、次の行を削除することができます。

```markup
<script src="cordova.js"></script>
```