Monaca Docs
検索…
Telerik からの移行
このページでは、Telerik AppBuilder プロジェクトを Monaca に移行するための簡単な手順を解説します。Monaca を使って telerik プロジェクトの実行、テスト、デバッグ、ビルドを行うことができます。
Cordova バージョンとビルド環境
移行を開始する前に、Monaca で新しく作成されたプロジェクトは、すべてデフォルトでサポートされている最新の Cordova バージョン (現在は Cordova 7.1) を使用します。下位バージョンを使用する場合は、問い合わせ窓口 までご連絡ください。
Cordova 7.1 のビルド環境:
- Cordova Android platform:
6.4.0(API level 26) - Gradle version:
4.3.1 - Cordova iOS platform:
4.5.4 - Xcode:
9
ステップ 1: 準備
Telerik ツールを使用してプロジェクトを Cordova プロジェクトに変換します。 次に、プロジェクトを ZIP ファイルに圧縮します。
ステップ 2: Monaca クラウド IDE へのインポート
- 1.
- 2.プロジェクト名を入力し、
プロジェクトのパッケージをアップロードオプションを選択します。 次に、プロジェクトの ZIP ファイルを参照します。
3.
インポート をクリックして、プロジェクトをMonaca にインポートします。 4. Monaca クラウド IDE でプロジェクトを開くには、
開く をクリックします。
Ajax リクエストまたは Cordova API が使用されている場合、プレビューウィンドウの表示や操作が正しく機能しないことがあります。詳しくは、 プレビューの制限 を参照してください。 この場合は、Monaca デバッガーを使用してプロジェクトを テスト/デバッグ することができます (次の項目で解説します) 。
ステップ 3: Monaca でのデバッグ
Monaca デバッガー は、端末上で Monaca アプリをリアルタイムでテスト、デバッグするためのアプリケーションです。Monaca クラウド IDE で Monaca アプリを開発する場合、プロジェクトファイルに加えられた変更は、保存後すぐに Monaca デバッガーに同期されます。
Monaca デバッガーの使い方は、以下になります。
- 1.Google Play または App Store から端末に 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 行を記述する必要があります。1
<!--Load selected JavaScript libraries-->
2
<script src="components/loader.js"></script>
3
<!--Load selected CSS libraries-->
4
<link rel="stylesheet" href="components/loader.css”>
Copied!
loader.js ファイルには、 cordova.js ファイルをロードするための設定が追加されているため、上記を追加した場合は、次の行を削除することができます。1
<script src="cordova.js"></script>
Copied!
さらに詳しく
Monaca の詳細については、以下を参照してください。
最終更新 3mo ago