Telerik からの移行
このページでは、Telerik AppBuilder プロジェクトを Monaca に移行するための簡単な手順を解説します。Monaca を使って telerik プロジェクトの実行、テスト、デバッグ、ビルドを行うことができます。
ステップ 1: 準備
Telerik ツールを使用してプロジェクトを Cordova プロジェクトに変換します。 次に、プロジェクトを ZIP ファイルに圧縮します。
ステップ 2: Monaca クラウド IDE へのインポート
Monaca ダッシュボードから、
インポート
を選択します。プロジェクト名を入力し、
プロジェクトのパッケージをアップロード
オプションを選択します。 次に、プロジェクトの ZIP ファイルを参照します。

3. インポート
をクリックして、プロジェクトをMonaca にインポートします。
4. Monaca クラウド IDE でプロジェクトを開くには、開く
をクリックします。

5. IDE が表示されたら、プレビュー でアプリを表示できます。

ステップ 3: Monaca でのデバッグ
Monaca デバッガー は、端末上で Monaca アプリをリアルタイムでテスト、デバッグするためのアプリケーションです。Monaca クラウド IDE で Monaca アプリを開発する場合、プロジェクトファイルに加えられた変更は、保存後すぐに Monaca デバッガーに同期されます。
Monaca デバッガーの使い方は、以下になります。
Google Play または App Store から端末に Monaca デバッガーをインストールします。
2. Monaca デバッガーを起動し、Monaca アカウントでサインインします。 Monaca クラウド IDE と同じアカウントを使用していることを確認してください。

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

4. プロジェクトが Monaca デバッガーで実行されているはずです。 プロジェクトのさまざまな操作を試してみてください。
5. Monaca クラウド IDE からプロジェクトのソースコードを変更し、保存します。 Monaca デバッガーに変更が反映されます。
ステップ 4: アプリのビルド
デバッグの次は、ビルドを行います。このステップでは、Android 用デバッグビルドについて解説します。
Monaca クラウド IDE から
ビルド → Androidアプリのビルド
を選択します。

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

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

備考
プロジェクトを Monaca に移行する際には、次のような注意点があります。
サードパーティー製プラグインを使用する場合
Google Play または App Store で公開されているストア版 Monaca デバッガーには、基本プラグイン のみが含まれています。プロジェクトに 基本プラグイン以外のサードパーティー製プラグインが含まれている場合は、プロジェクトをテストするカスタムデバッガーをビルドする必要があります。カスタムデバッガーには、プロジェクトで使用されているプラグインのみが含まれます。 詳しくは、以下を参照してください。
JS/CSS コンポーネントページを使用する場合
Monaca クラウド IDE には、CSS/JavaScript ライブラリを追加するためのページがあります。設定 → JS/CSSコンポーネントの追加と削除
を選択すると、次のページが表示されます。

このページでは、さまざまな CSS/JavaScript ライブラリを追加することができますが、実際にプロジェクトで利用するためには、index.html
ファイルに、次の 2 行を記述する必要があります。
<!--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
ファイルをロードするための設定が追加されているため、上記を追加した場合は、次の行を削除することができます。
<script src="cordova.js"></script>
最終更新
役に立ちましたか?