Telerik からの移行

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

ステップ 1: 準備

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

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

  1. Monaca ダッシュボードから、インポート を選択します。

  2. プロジェクト名を入力し、プロジェクトのパッケージをアップロード オプションを選択します。 次に、プロジェクトの ZIP ファイルを参照します。

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

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

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

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

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

Monaca デバッガー は、端末上で Monaca アプリをリアルタイムでテスト、デバッグするためのアプリケーションです。Monaca クラウド IDE で Monaca アプリを開発する場合、プロジェクトファイルに加えられた変更は、保存後すぐに Monaca デバッガーに同期されます。

Monaca デバッガーの使い方は、以下になります。

  1. Google Play または App Store から端末に Monaca デバッガーをインストールします。

Android エミュレータに Monaca デバッガーをインストールする場合は、 Android エミュレーター向け Monaca デバッガー を参照してください。

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

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

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

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

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

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

  1. 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>
前へVue からの移行次へiOS ビルド

最終更新

役に立ちましたか？