" %}
パッケージを解凍すると、次のようなディレクトリー構成が表示されます。
### plugin.xml ファイル
`plugin.xml` ファイルとは、プラグインの設定ファイルであり、プラグインの詳細が定義されています。詳細は、[Cordova プラグインの仕様 ( 英語サイト )](http://cordova.apache.org/docs/en/latest/plugin_ref/spec.html) をご確認ください。
先ほどダウンロードしたサンプルプラグインの `plugin.xml` ファイルの内容を、次に記します。
```markup
HelloWorldPlugin
HelloWorldPlugin Description
Asial Corporation
Apache 2.0 License
```
### hello\_world.js ファイル
`hello_world.js` は、`plugin.xml` ( 前述のプラグインの定義ファイル ) 内の `js-module` で指定されています。このため、 `cordova.js` から自動で読み込まれます ( この処理は、 `loader.js` 内に記述されています )。
```javascript
var HelloWorld = function() {};
HelloWorld.prototype.say = function(success, fail) {
cordova.exec(success, fail, "HelloWorldPlugin","say", []);
};
var helloWorld = new HelloWorld();
module.exports = helloWorld;
```
Cordova のコールバック関数の記法については、[プラグインの開発ガイド (英語サイト)](http://cordova.apache.org/docs/en/latest/guide/hybrid/plugins/index.html) をご確認ください。
### iOS と Android のネイティブコード
プラットフォームにもよりますが、ネイティブコードは、Objective-C または Java になります。関数名は、JavaScript ファイルで定義した名と同じものを使用します。また、コールバック関数は非同期で呼び出されます。
ネイティブコードの開発に関しては、次のリンクをご確認ください。
* [Android 向けプラグインの開発 ( 英語サイト )](http://cordova.apache.org/docs/en/latest/guide/platforms/android/plugin.html)
* [iOS 向けプラグインの開発 ( 英語サイト )](http://cordova.apache.org/docs/en/latest/guide/platforms/ios/plugin.html)
## ユーザー Cordova プラグインのインポート
ユーザー Cordova プラグインをインポートする場合、次の手順に従います。
1\. Monaca クラウド IDE のメニューから、 **`設定 → Cordova プラグインの管理`** を選択します。
2\. Cordova プラグインページが表示されます。`Cordova プラグインのインポート` ボタンをクリックします。
3\. プラグインファイル ( zip ファイル ) を選択し、`OK` をクリックします。
## ユーザー Cordova プラグインと Monaca デバッガー
App Store または Google Play で入手できる Monaca デバッガーは、通常版のデバッガーです。こちらの通常版 Monaca デバッガーには、基本プラグインとサードパーティー製プラグイン ( Monaca 側であらかじめ提供しているサードパーティー製のプラグインとその詳細は、[サードパーティー製プラグイン](/reference/third_party_phonegap) を参照のこと ) のみが実装されています。このため、デフォルトの状態では、ユーザー Cordova プラグインまたは外部の Cordova プラグイン ( 第三者が提供する、Monaca 側で用意しているプラグイン以外 ) は、デバッガー上で使用できません。これらのプラグインを使用する場合、Monaca デバッガーをカスタムビルドする必要があります。
カスタムビルド版の Monaca デバッガーは、Monaca クラウド IDE 上でビルドするデバッガーです ( ユーザー Cordova プラグインまたは外部の Cordova プラグインを組み込んだプロジェクトを使用してビルドします )。カスタムビルド版デバッガーのビルド方法、および、通常版とカスタムビルド版のデバッガーの相違に関しては、次のリンク先をご確認ください。
* [iOS 用カスタムビルド版 Monaca デバッガーのビルド方法](/products_guide/debugger/installation/debugger_ios#kasutamubirudo-monaca-debaggnobirudo)
* [Android 用カスタムビルド版 Monaca デバッガーのビルドとインストール](/products_guide/debugger/installation/debugger_android#kasutamubirudo-monaca-debaggnobirudotoinsutru)
{% hint style="info" %}
カスタムビルド版デバッガーをビルドする前に、ユーザー Cordova プラグインまたは外部の Cordova プラグインを必ず 「 インポート 」 してください。
{% endhint %}
また、ユーザー Cordova プラグイン開発の技術支援 ( 有料 ) も、弊社にて承っております。サポートチームまで、お気軽に詳細を [お問い合わせ](https://ja.monaca.io/service/index.html) ください。
## ユーザー Cordova プラグインの検証
1\. Monaca クラウド IDE上でプロジェクトを作成します。ここでは、`最小限のテンプレート` を使用します。
2\. [ユーザー Cordova プラグインの構成](/products_guide/monaca_ide/dependencies/custom_cordova_plugin#yz-cordova-puraguinno) でダウンロードしたユーザー Cordovaプラグインのサンプルをインポートします。
3\. `index.html` ファイルへ次のコードを追加します ( ユーザー Cordova プラグインのサンプルを使用して、メッセージダイアログを表示するコードです )。
```javascript
```
4\. 通常版の Monaca デバッガー上でプロジェクトを実行してみましょう。ユーザー Cordova プラグインが標準デバッガーに存在しないため、メッセージダイアログは表示されません。
5\. カスタムビルド版 Monaca デバッガーをビルドします。ビルド方法につきましては、次のリンク先をご確認ください。
* [iOS 用カスタムビルド版 Monaca デバッガーのビルド方法](/products_guide/debugger/installation/debugger_ios#kasutamubirudo-monaca-debaggnobirudo)
* [Android 用カスタムビルド版 Monaca デバッガーのビルドとインストール](/products_guide/debugger/installation/debugger_android#kasutamubirudo-monaca-debaggnobirudotoinsutru)
6\. カスタムビルド版 Monaca デバッガーをインストールします。
7\. デバッガーを起動させ、ログイン画面上で `デバッガー情報` をタップします。
8\. デバッガー情報に、追加したユーザー Cordova プラグインが表示されていることを確認します ( 下のスクリーンショットを参照のこと )。
9\. デバッガーにログインして、ユーザー Cordova プラグインを追加したプロジェクトを実行します。メッセージダイアログが表示されることを確認します。
# バージョン管理
{% content-ref url="/pages/-MfWrbHT4oQoB2NvGXkM" %}
[概要](/products_guide/monaca_ide/version_control/introduction)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbI52zSC2LmWikkV" %}
[GitHub との連携](/products_guide/monaca_ide/version_control/github_integration)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbI3pd2wkljDZqRa" %}
[Git SSH との連携](/products_guide/monaca_ide/version_control/git_ssh_integration)
{% endcontent-ref %}
# 概要
バージョン管理システムとは、変更履歴の記録を含む、ソースコードに対して行われた操作を管理するためのツールです。通常、変更履歴を追うためには、リビジョンコード ( 数と文字の組み合わせ ) などを、変更のたびに割り振っていく必要がありますが、バージョン管理システムを使用すれば、このようなことをしなくても、変更履歴を簡単に追うことができます。加えて、以前のファイルとの比較、以前の状態へのリストア、複数のファイルとのマージなど、ソースコードに関わる全般の操作も行えます。他にも、バージョン管理システムを使用する利点として、システムを介すれば、オープンソースの開発に参加している開発者全員で、または、あるプロジェクトに参加している特定のチームメンバー間で、共同で作業を行うことができます。
バージョン管理は、Monaca クラウド IDE 内でユーザーフレンドリーなインターフェイスで利用できます。 多くのバージョン管理システムがありますが、 現在、Monaca クラウド IDE では [GitHub](https://github.com) と SSH を使用する Git サービスをサポートしています。 この機能を使用すれば、リモートリポジトリと Monaca プロジェクトを接続後、Monaca クラウド IDE からソースコードの管理ができるようになります。
ここでは、Monaca プロジェクトを GitHub または SSH を使って Git サービスに連携する方法について解説します。 次に、リポジトリを使って Monaca プロジェクトを設定する方法を解説します。
{% hint style="info" %}
ここでは、Public 指定されたリポジトリを対象として解説を進めます。Private 指定のリポジトリに接続する場合には、対応する Monaca プランに加入する必要があります。詳細は、[料金プラン ](https://ja.monaca.io/pricing.html)をご確認ください。
{% endhint %}
Monaca アカウントと Git サービスを統合する方法は 2 つあります。
* [GitHub との連携](/products_guide/monaca_ide/version_control/github_integration)
* [Git SSH との連携](/products_guide/monaca_ide/version_control/git_ssh_integration)
# GitHub との連携
{% hint style="info" %}
ここでは、Public 指定されたリポジトリを対象として解説を進めます。Private 指定のリポジトリに接続する場合には、対応する Monaca プランに加入する必要があります。詳細は、 [料金プラン ](https://ja.monaca.io/pricing.html)をご確認ください。
{% endhint %}
## セットアップ
この項目では、Monaca アカウントと GitHub アカウントをリンクする方法を解説します。
1\. [GitHubアカウント連携](https://monaca.mobi/ja/vcs) ページへ移動します。
2\. `連携する`ボタンをクリックします。GitHub にログインする必要があります。
3\. \[ Authorize application ] ページでは、Monaca と GitHub の連携に必要となる認証手続きを行います。`Authorize application` ( アプリケーションの認証 ) をクリックます。
4\. ここまでの手順で、Monaca アカウントと GitHub アカウントの連携が完了しました。
{% hint style="danger" %}
1 つの GitHub アカウントに対して、1 つの Monaca アカウントのみ、連携を行えます。「 一対多数 」の設定はできません。設定した場合、エラーになります。
{% endhint %}
## Monaca プロジェクトを新しい GitHub リポジトリに接続する
### ステップ 1: 新しい空のリポジトリを作成する
GitHub アカウントに移動し、新しい空のリポジトリを作成します（Readme ファイルなし）。
### ステップ 2: リポジトリと Monaca プロジェクトの接続
連携完了後、次に、リポジトリとプロジェクトを接続させるため、Monaca クラウド IDE 側で行う設定があります。なお、ここでは、Monaca と GitHub 間の連携が完了していることを前提に解説します。
次の手順に従い、設定を行います。
1\. Monaca Dashboard から、リポジトリに接続するプロジェクトを開きます。
2\. Monaca クラウド IDE のメニューから、\*\*`プロジェクト → バージョン管理設定`\*\*を選択します。
3\. `GitHub` を選択します。
4\. リモートの空のリポジトリを選択します。 次に、`設定する`ボタンをクリックして設定を保存します。
{% hint style="info" %}
設定後に別のリポジトリに変更することはできませんのでご注意ください。
{% endhint %}
5\. GitHub 上の新規のリポジトリにプロジェクトがアップロードされます。デフォルトでは、作業ブランチは master として設定されます。別の作業ブランチに切り替える場合は、 **`プロジェクト → バージョン管理設定`** へ移動します。
## プロジェクトを GitHub リポジトリから Monaca にインポートする
Monaca と GitHub の連携後、GitHub リポジトリ―に置かれているプロジェクトを、Monaca クラウド IDE にインポートすることもできます。
1\. ダッシュボード上で、`インポート`を選択します。
2\. \[ プロジェクトのインポート ] ダイアログが表示されます。必要な情報の入力後、`GitHubのリポジトリからインポート` を選択します。次に、対象のリポジトリを選択して、`インポート`ボタンをクリックします。
3\. インポートの完了後、ダッシュボード上で対象のプロジェクトが表示されていることを確認します。デフォルトでは、master ブランチのコンテンツがインポート対象となります。ブランチは、 \*\*`プロジェクト → VCS バージョン管理設定`\*\*で切り替えることができます。
## リモートリポジトリを使用した作業
リポジトリとプロジェクト間の接続完了後は、チームメンバーと同じプロジェクトで作業を開始し、Monaca クラウド IDE から最新のアップデートと同期させることができます。
Monaca クラウド IDE では、ユーザーフレンドリーなバージョン管理用のインターフェイスを提供しています。このインターフェイスを使用すれば、Git のコマンドの詳細を意識せずに、基本的な操作を一通り行うことができます。
### ブランチの切り替え ( Git コマンドの checkout )
複数のブランチを使用したプロジェクトで、ブランチの切り替えを行う場合は、次の手順に従います。
1\. Monaca クラウド IDE のメニューから、\*\*`プロジェクト → バージョン管理設定`\*\*を選択します。
2\. 現在の作業ブランチから切り替えたいブランチを選択し、`アップデート`ボタンをクリックします。
{% hint style="info" %}
現在のブランチで行った変更をコミットせずに、ブランチの切り替えを行う場合、エラーが表示されます。ブランチを切り替える場合には、最初に、作業内容をコミット ( 場合によっては、リモートにプッシュまで ) してください。
{% endhint %}
### リモートリポジトリから最新の内容を取得
Git コマンドでは、リモートリポジトリから最新の情報を取得/ダウンロードする場合、`git pull` ( git プル ) コマンドを使用します。Monaca クラウド IDE では、リモートリポジトリから最新の情報を取得する場合、Monaca クラウド IDE のメニューから、\*\*`プロジェクト → プル`\*\*を選択します。リモートリポジトリ側の内容が更新されている場合、その内容がダウンロードされ、対応するブランチ側に反映されます。
{% hint style="info" %}
IDE 上でプロジェクトを作成した場合、開発者側が自由に作業できるファイルのほとんどは、`www` フォルダー内に置かれています。これ以外にも、IDE 上には表示されないシステム側のファイルもありますが、リモートリポジトリとの同期時には、これらのファイルも一緒にアップロード・ダウンロードされています。
{% endhint %}
### 変更箇所のコミットとリモートリポジトリへの反映
現在作業をしているブランチで行った変更を、リモートリポジトリ側に反映させます。最初に、次の手順に従い、コミットを行い、リモートリポジトリ側へプッシュします ( コミット前に、ファイルを保存する必要があります )。
1. Monaca クラウド IDE のメニューから、\*\*`プロジェクト → コミット`\*\*を選択します。
2. コミットメッセージを入力して、コミット対象のファイルにチェックを入れます。次に、`コミット`ボタンをクリックします。
3. ここまでの手順で、リモートリポジトリに更新を反映させる準備ができました。次に、 \*\*`プロジェクト → プッシュ`\*\*を選択します。コミット後、リモートリポジトリ側が更新されているか確認します。
### リモートリポジトリ側のコミット履歴の表示 ( GitHub 側の履歴ページ )
リモートリポジトリ側 ( GitHub 側 ) のコミット履歴を確認する場合、\*\*`プロジェクト → リモートのコミット履歴`\*\*を選択します。現在作業しているブランチのコミット履歴が表示された、GitHub 側のサイト ( 外部ページ ) にリダイレクトされます。
### ローカルコミットの履歴表示 ( Monaca クラウド IDE 側の履歴ページ )
ローカルコミットとは、Monaca クラウド IDE 上で行ったコミットを指します。 \*\*`プロジェクト → コミット履歴`\*\*を選択すれば、ローカルコミットの履歴を表示できます。各コミットの内容を確認する場合には、コミットメッセージ横の ID をクリックします。
## Monaca アカウントと GitHub アカウントとの連携の解除
1. [GitHubアカウント連携](https://monaca.mobi/ja/vcs) ページへ移動します。
2. `連携を解除する`ボタンをクリックします。
## GitHub との再度の連携時にエラーが発生した場合
Monaca と GitHub の連携を解除して、再び上記の [セットアップ](#settoappu) に従い、連携を行ったところ、次のようなエラーが表示される場合があります。
この場合、次の手順に従います。
1\. Monaca クラウド IDE からログアウトします。
2\. [Monaca ログイン](https://monaca.mobi/ja/login) ページに移動して、`Sign In With GitHub`をクリックします。
3\. GitHub のアカウント情報を入力します。
4\. GitHub の \[ Authorize application ] ページにリダイレクトされます。`Authorize application`ボタンをクリックして、先に進みます。
5\. ここまでの手順を行えば、Monaca と GitHub が再び連携されています。\[ GitHub アカウント連携 ] ページに移動して、次のような画面が表示されていることを確認します。
# Git SSH との連携
Monacaでは、Git サービスを使ってリポジトリとプロジェクトを SSH 認証で接続することができます。GitHub は、SSH 接続をサポートする Git サービスの 1 つです。 次の項目では、GitHub を例として使用します。
{% hint style="info" %}
ここでは、Public 指定されたリポジトリを対象として解説を進めます。Private 指定のリポジトリに接続する場合には、対応する Monacaプランに加入する必要があります。詳細は、 [料金プラン ](https://ja.monaca.io/pricing.html)をご確認ください。
{% endhint %}
## 事前準備
Monaca クラウド IDE のバージョン管理機能を使用する場合、次のアカウントが必要となります。
* SSH をサポートしている Git サービスのアカウント
## セットアップ
### ステップ 1: SSH キーの生成
1\. [SSHキー管理](https://monaca.mobi/en/ssh) 画面を表示します。
2\. `SSHキー 再生成`ボタンをクリックします。
3\. 次の項目 ( [Git サービスに SSH キーを追加する](#suteppu-2-git-sbisuni-ssh-kwosuru) ) で使用するために生成されたキーをコピーします。
### ステップ 2: Git サービスに SSH キーを追加する
Monaca と Git サービスプロバイダ間の正しい認証のために、前の項目で生成された SSH キーを Git サービスアカウントに追加する必要があります。
例では、GitHub を使用しています。 他のサービスについては、Git サービスのドキュメントを参照してください。
1. [SSH Key](https://github.com/settings/keys) 画面を表示します。
2. `New SSH key`ボタンをクリックします。
3. 以下の情報を入力します。
* `Title`: キーのタイトル
* `Key`: Monacaアカウントから生成された SSH キー（「1. SSH キーの生成」で作成した SSH キー）
4. `Add SSH key`ボタンをクリックします。
## Monaca プロジェクトを新しい Git リポジトリに接続する
### ステップ 1: 新しい空のリポジトリを作成する
任意の Git サービスで、新しいリポジトリを作成できます。この項目では、次のようにGitHubに新しいリポジトリを作成します。
1. GitHub アカウントに移動し、新しい空のリポジトリを作成します（Readme
ファイルなし）。
2. `SSH`ボタンを選択します。
3. SSH リンクをコピーします（下記のスクリーンショットを参照）。 次の項目の後半に Monaca クラウド IDE でこのリンクを使用します。
### ステップ 2: リポジトリと Monaca プロジェクトの接続
1\. Monaca Dashboard から、リポジトリに接続するプロジェクトを開きます。
2\. Monaca クラウド IDE のメニューから、\*\*`プロジェクト → バージョン管理設定`\*\*を選択します。
3\. `Git SSH` オプションを以下のように選択してください。
4\. 次に、 `Repository URL` (上記のリンク) と `Committer Name` を入力する必要があります。
{% hint style="info" %}
設定後に別のリポジトリに変更することはできませんのでご注意ください。
{% endhint %}
5\. `設定する`ボタンをクリックします。
6\. プロジェクトは新しいリポジトリにアップロードされます。 デフォルトでは、作業ブランチは master として設定されます。 別の作業ブランチに切り替える場合は、\*\*`プロジェクト → バージョン管理設定`\*\*へ移動します。
## プロジェクトを Git リポジトリから Monaca にインポートする
1\. Monaca アカウントを使用して、[Monaca クラウドIDE](https://monaca.mobi/ja/login) にログインします。
2\. ダッシュボード上で、`インポート`を選択します。
3.「Gitのリポジトリ」を選択し、`リポジトリURL` 等の必要な情報を入力し、`プロジェクトのインポート`ボタンをクリックします。
4\. インポートの完了後、Monaca ダッシュボード上で対象のプロジェクトが表示されていることを確認します。デフォルトでは、master ブランチのコンテンツがインポート対象となります。ブランチは、\*\*`プロジェクト → バージョン管理設定`\*\*で切り替えることができます。
## リモートリポジトリを使用した作業
リポジトリとプロジェクト間の接続完了後は、チームメンバーと同じプロジェクトで作業を開始し、Monaca クラウド IDE から最新のアップデートと同期させることができます。
Monaca クラウド IDE では、ユーザーフレンドリーなバージョン管理用のインターフェイスを提供しています。このインターフェイスを使用すれば、Git のコマンドの詳細を意識せずに、基本的な操作を一通り行うことができます。
### ブランチの切り替え ( Git コマンドの checkout )
複数のブランチを使用したプロジェクトで、ブランチの切り替えを行う場合は、次の手順に従います。
1\. Monaca クラウド IDE のメニューから、\*\*`プロジェクト → バージョン管理設定`\*\*を選択します。
2\. 現在の作業ブランチから切り替えたいブランチを選択し、 `アップデート`ボタンをクリックします。
{% hint style="info" %}
現在のブランチで行った変更をコミットせずに、ブランチの切り替えを行う場合、エラーが表示されます。ブランチを切り替える場合には、最初に、作業内容をコミット ( 場合によっては、リモートにプッシュまで ) してください。
{% endhint %}
### リモートリポジトリから最新の内容を取得
Git コマンドでは、リモートリポジトリから最新の情報を取得/ダウンロードする場合、`git pull` ( git プル ) コマンドを使用します。Monaca クラウド IDE では、リモートリポジトリから最新の情報を取得する場合、Monaca クラウド IDE のメニューから、**`プロジェクト → プル`** を選択します。リモートリポジトリ側の内容が更新されている場合、その内容がダウンロードされ、対応するブランチ側に反映されます。
{% hint style="info" %}
IDE 上でプロジェクトを作成した場合、開発者側が自由に作業できるファイルのほとんどは、`www` フォルダー内に置かれています。これ以外にも、IDE 上には表示されないシステム側のファイルもありますが、リモートリポジトリとの同期時には、これらのファイルも一緒にアップロード・ダウンロードされています。
{% endhint %}
### 変更箇所のコミットとリモートリポジトリへの反映
現在作業をしているブランチで行った変更を、リモートリポジトリ側に反映させます。最初に、次の手順に従い、コミットを行い、リモートリポジトリ側へプッシュします ( コミット前に、ファイルを保存する必要があります )。
1. Monaca クラウド IDE のメニューから、\*\*`プロジェクト → コミット`\*\*を選択します。
2. コミットメッセージを入力して、コミット対象のファイルにチェックを入れます。次に、 `コミット`ボタンをクリックします。
3. ここまでの手順で、リモートリポジトリに更新を反映させる準備ができました。次に、 \*\*`プロジェクト → プッシュ`\*\*を選択します。コミット後、リモートリポジトリ側が更新されているか確認します。
### リモートリポジトリ側のコミット履歴の表示 ( GitHub 側の履歴ページ )
{% hint style="info" %}
選択可能な公開 Git サービスとプライベート Git サービスが多数存在するため、リモートコミット履歴の URL は、すべてのサービスで認識されません。このオプションは、SSH リポジトリにリンクされたプロジェクトでは使用できません。
{% endhint %}
リモートリポジトリ側 ( GitHub 側 ) のコミット履歴を確認する場合、\*\*`プロジェクト → リモートのコミット履歴`\*\*を選択します。現在作業しているブランチのコミット履歴が表示された、GitHub 側のサイト ( 外部ページ ) にリダイレクトされます。
### ローカルコミットの履歴表示 ( Monaca クラウド IDE 側の履歴ページ )
ローカルコミットとは、Monaca クラウド IDE 上で行ったコミットを指します。\*\*`プロジェクト → コミット履歴`\*\*を選択すれば、ローカルコミットの履歴を表示できます。各コミットの内容を確認する場合には、コミットメッセージ横の ID をクリックします。
# Monaca CI
{% content-ref url="/pages/-MfWrbG-Eiq9Snupvi3g" %}
[概要](/products_guide/monaca_ide/monaca_ci/overview)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbKpvmEpNIqUAAr7" %}
[アプリ配信 / 配布サービス (デプロイサービス)](/products_guide/monaca_ide/monaca_ci/supported_services)
{% endcontent-ref %}
# 概要
Monaca CI は、Monaca の開発環境で CI ( Continuous Integration/継続的インテグレーション ) を実現するためのサービスです。プロジェクトのビルド処理の自動化、検証版アプリの配信/配布処理の自動化を行えるため、開発を大幅に効率化できます。
## 事前準備
Monaca CI を使用する前に、Monaca アカウントと GitHub を連携させる必要があります。連携手順は、次のとおりです。
1. Monaca アカウントと GitHub を連携させます。詳細は、[GitHub との連携](/products_guide/monaca_ide/version_control/github_integration#settoappu) をご確認ください。
2. GitHub リポジトリとプロジェクトを接続させます。詳細は、[Monaca プロジェクトを新しい GitHub リポジトリに接続する](/products_guide/monaca_ide/version_control/github_integration#monaca-purojekutowoshii-github-repojitorinisuru) をご確認ください。
## Monaca CI の使用方法
次の手順に従い、Monaca CI を使用します。
事前準備が完了していることを前提に、ここでは解説をします。
1. Monaca クラウド IDE のメニューから、\*\*`設定 → 継続的インテグレーション`\*\*を選択します。
2. デフォルトでは、Monaca CI は無効にされています。有効にするため、`トリガーイベント`にチェックを入れ、`保存`をクリックします。
これで、Monaca CI を使用する準備が完了し、設定内で指定している GitHub のブランチ/タグへコミットをプッシュするとビルドが実行されます。プッシュ後は、\[ ビルド一覧 ] パネルからビルド済みのファイルをダウンロードできます。
{% hint style="warning" %}
Monaca CI にてビルド処理を行う場合、初回のビルドは、Monaca クラウド IDE での実行が必要です。初回ビルド以降は、Monaca CI での自動ビルドが可能です。
{% endhint %}
## デプロイサービス ( 配信/配布サービス ) の連携
Monaca CI を使用すれば、アプリの配信/配布処理を自動化することもできます。自動化の方法は、次のとおりです。
1. Monaca クラウド IDE のメニューから、\*\*`設定 → デプロイサービス`\*\*を選択します。
2. `新しく追加する`をクリックします。
3. デプロイサービスを選択して、以下のような詳細設定を入力します。
* エイリアス名 :
各サービスの管理に使用する、一意の識別子を入力します。
* ユーザー名 ( DeployGate 専用 ) :
アプリ所有者のユーザー名または組織名を入力します。
* API キー ( DeployGate の場合 ) または API トークン ( Appetize の場合 ) :
デプロイサービスのプロバイダーから入手できます。各サービスの API キーを取得する方法については、[アプリ配信/配布支援サービス (デプロイサービス)](/products_guide/monaca_ide/monaca_ci/supported_services) を参照してください。
4\. デプロイサービスの登録後、Monaca クラウド IDE のメニューから、\*\*`設定 → 継続的インテグレーション`\*\*を選択します。
5\. 対象のCI設定の`編集` をクリックし、CI設定のデプロイメントにて対象のサービスを設定します。
{% hint style="info" %}
Monaca CI では、複数のデプロイサービスとの連携ができます。サポートしているデプロイサービスに関しては、[こちら](/products_guide/monaca_ide/monaca_ci/supported_services)をご確認ください。
{% endhint %}
## Monaca CI 側の処理
リリースビルド版アプリをビルドする例を紹介します。プロジェクトコードのプッシュ先には、`master` ブランチを指定しています。また、Monaca CI を使用して、DeployGateへビルド済みファイルを送ります。
1\. GitHub へコードをプッシュします。
2\. GitHub 上のブランチ/タグへコードがプッシュされた後、Monaca サーバー側では、プロジェクトのビルドを開始します。
3\. ビルドの進捗状況を確認する場合には、IDE 上の\*\*`ビルド → 継続的インテグレーション結果一覧`**を確認ください。また、ビルド済みのファイルをダウンロードする場合には、**`ビルド → ビルド履歴一覧`\*\*を確認ください。
3\. ビルド処理の完了後、Monaca サーバー側から、指定されたデプロイサービス側へ、ビルド済みファイルを送ります。
# アプリ配信 / 配布サービス (デプロイサービス)
外部のデプロイサービスを利用して、ビルドしたアプリケーションを配布することができます。
## サポートしているサービス
* [Appetize.io](/products_guide/monaca_ide/monaca_ci/appetizeio)
* [DeployGate](/products_guide/monaca_ide/monaca_ci/deploygate)
* [Firebase](/products_guide/monaca_ide/monaca_ci/firebase)
# Appetize.ioへの配信
[Appetize.io](https://appetize.io/) では、AndroidとiOSアプリをブラウザ上でシミュレートすることができます。\
このサービスを利用すると、iOS証明書やプロビジョニングファイルなしで、アプリの動作確認が可能となります。
### API トークンの取得方法
1. [Appetize.io](https://appetize.io/) のアカウントを作成し、ログインします。
2. [アカウント設定ページ](https://appetize.io/account)のAPIトークン取得欄からトークンを取得します。
### Monaca へのサービスの追加
API トークンを取得後、Appetize.io を Monaca に追加する方法は、以下になります。
1\. Monaca クラウド IDE メニューの**`設定 → デプロイサービス`**を選択します。
2\. `新しく追加する`をクリックします。
3\. `AppetizeIo` を選択し、以下の必要情報を入力します。
* `エイリアス名`: 各サービスの一意の識別子
* `API トークン`: Appetize.io から取得した API トークン
4\. `追加`をクリックします。
以上で、Appetize のシミュレータを使用してビルドアプリをインストールできるようになります。
#### 設定パラーメーター
Monaca CI では、次のパラメーターをサポートしています ( JSON 形式 )。\
詳細は、[Appetize.io ドキュメント ( 英語サイト )](https://appetize.io/docs#creating-apps) をご確認ください。
| パラメーター | タイプ | 説明 |
|---|
| パラメーター | タイプ | 説明 |
platform | string | [必須項目] ios or android |
timeout | number | セッションが自動的に終了するまで待機する秒数。30, 60, 90, 120, 180, 300 または 600 を指定。(デフォルトは120。) |
disableHome | boolean | ホームボタンを無効にします。 |
disabled | boolean | このアプリのストリーミングを無効にします。 |
useLastFrame | boolean | セッションが終了した後、シミュレータの画面上に、最後の表示されていた画像を表示します。 |
buttonText | string | セッションの開始を促すメッセージをカスタマイズします。 (デフォルトは「Tap to play」) |
postSessionButtonText | string | セッションを再開するように促すメッセージをカスタマイズします。 (デフォルトは「Tap to play」) |
launchUrl | string | アプリの起動時に、特定の場所にユーザーを誘導するためのディープリンクを指定します。 |
note | string | メモを残せます。メモは管理ダッシュボードに表示されます。 |
appPermissions | JSON オブジェクト | 値は authenticated、public、またはnull(デフォルトにリセット)に設定します。キーは次のいずれかです。 run: アプリ実行networkProxy: アプリ実行時のネットワークプロキシを指定するnetworkIntercept: アプリ実行時にAppetize.ioプロキシを使用するdebugLog: アプリのNSLogまたはLogcatの出力を見るadbConnect: ホストされているエミュレータにADBを接続してアプリケーションをデバッグするandroidPackageManager: アプリの実行中に追加のAPKをインストールできるようにする
|
# DeployGateへの配信
[DeployGate](https://deploygate.com/) を使用すれば、開発中の iOS と Android アプリを、参加メンバー間で簡単に共有できます。また、このサービスを使用すれば、さまざまな段階 ( プロトタイプ、開発、検証、マーケティングなど ) におけるアプリの配信作業を、滞りなく行えます。
### API キーの取得方法
1\. [DeployGate](https://deploygate.com/) にログインします。
2\. `アカウント設定/Account Settings`を選択します。
3\. \[ プロフィール ] 画面が表示されます。ページの最下部まで移動して、\[ API key ] を確認します。
### 設定パラーメーター
Monaca CI では、次のパラメーターをサポートしています ( JSON 形式 )。詳細は、[DeployGate API ドキュメント ( 日本語サイト )](https://docs.deploygate.com/ja/docs/api/) をご確認ください。
| パラメーター | 説明 | 備考 |
|---|
| パラメーター | 説明 | 備考 |
token | 「 API キー 」を指定します。グループでの利用の場合には、グループのページに表示されている API キー を使用します。これにより、メンバーの種類 ( 役割/権限 ) とは関わりなく、アプリをアップロードすることができます。 | このキーは、自動的に生成されます。DeplyGate サイトの [ 配信支援サービス設定 ]、または、Monaca クラウド IDE の [ デプロイサービス一覧 ] 上で、API キーを確認できます。 |
file | 対象アプリのバイナリ―ファイルを設定します。 | 自動で生成されます。 |
message | [ 任意 ] プッシュ時に表示する通知メッセージを設定します。 | |
distribution_key | [ 任意 ] 配布キー ( Distribution Key ) を設定します。配布キーとは、配布ページを指し示す URL に使用されている hash 値です ( たとえば、https://deploygate.com/distributions/ [ 配布キー ] )。また、配布ページとは、配布対象者向けに作成された、アプリのダウンロード用のページです。配布ページの作成は、DeployGate のサイト上から行えます。 | |
release_note | [ 任意 ] 配布ページ ( ダウンロード用ページ ) からアプリをダウンロードするときに表示するメッセージ | |
disable_notify | [ 任意 ](iOS 専用) yes を設定した場合、email での通知を行いません。 | |
visibility | [ 任意 ] アップロードするアプリのセキュリティー設定です。private ( デフォルト ) または public を指定します。個人開発者向けの無料プラン ( Personal Free ) を利用している場合、public に設定します。無料プランの場合、プライベート ( 非公開 ) 設定は利用できません。また、private に指定しても、無視されます。 | |
# Firebase への配信
[Firebase](https://firebase.google.com) への配信方法について説明します。\
Firebaseへの配信は、[Firebase Hosting機能](https://firebase.google.com/docs/hosting/quickstart?hl=ja)を利用しています。また、Firebaseへの配信は、PWAビルドされたアプリのみ対応しています。
## 準備
配信のするための事前準備として、`プロジェクトID`と`APIトークン`を用意する必要があります。
### プロジェクトID
1. [Firebaseコンソール](https://console.firebase.google.com)にて、プロジェクトを作成します。
2. プロジェクトIDは、下の赤枠に表示されます。
### API トークンの取得方法
1. [Firebase CLI ガイド](https://firebase.google.com/docs/hosting/quickstart?hl=ja) に沿って`Firebase CLI をインストール`します。
2. Firebase CLIをインストールした後、次のコマンドにてトークンを取得します。
```bash
firebase login:ci
```
### firebase.jsonファイル
初期化後、Firebaseはfirebase.jsonファイルをローカルプロジェクトのルートに追加します。このファイルをMonacaの対象プロジェクトのルートに追加する必要があります。
## デプロイサービスの登録
事前に用意したFirebaseの情報をMonacaへ登録する方法は、次のとおりです。
1. Monaca クラウド IDE メニューの**`設定 → デプロイサービス`**を選択します。
2. `新しく追加する`をクリックします。
3. `Firebase` を選択し、以下の必要情報を入力します。
* `エイリアス名`: 各サービスの一意の識別子 (Monaca内で管理するための識別子)
* `API トークン`: Firebase CLI で取得した API トークン
* `プロジェクト ID`: Firebase コンソールから取得したID
4. `追加`をクリックします。
## デプロイを実施
登録したデプロイサービスを利用して、Firebaseへの配信を行います。
1. PWAビルドを行います。ビルドの手順は、[PWA アプリのビルド](/products_guide/monaca_ide/build/build_pwa)を参照ください。
2. ビルド完了後に、ビルド結果画面に遷移します。
3. ビルド結果画面からデプロイを実行します。画面下部に登録したデプロイサービスが表示されますので、クリックし配信を開始します。
# ビルド
## ビルド 環境
| Cordova バージョン | Android | iOS |
| ------------- | ----------------------- | ------------------------------------------- |
| Cordova 12.0 | AndroidSDK version : 33 | Xcode version : 14.2.0 / 15.1.0 |
| Cordova 11.0 | AndroidSDK version : 30 | Xcode version : 13 / 14.2.0 |
| Cordova 10.0 | AndroidSDK version : 29 | Xcode version : 11.3 / 12.2 / 12.5.1 / 13 |
| Cordova 9.0 | AndroidSDK version : 28 | Xcode version : 10.1 / 10.2 / 10.2.1 / 11.3 |
{% content-ref url="/pages/-MfWrbG42GkVVrPTt\_mb" %}
[iOS アプリのビルド](/products_guide/monaca_ide/build/ios)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbFpSJFE2hxsUy6Q" %}
[Android アプリのビルド](/products_guide/monaca_ide/build/build_android)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbNaojmBumoWDuxB" %}
[Windows アプリのビルド](/products_guide/monaca_ide/build/build_winrt)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbEwzObZkde625l6" %}
[Electron アプリのビルド](/products_guide/monaca_ide/build/electron)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbDwEL-4j1igitVv" %}
[PWA アプリのビルド](/products_guide/monaca_ide/build/build_pwa)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbIl6eQUZpkkRbqg" %}
[一般的なビルドとアップロードエラー](/products_guide/monaca_ide/build/build_error)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbNUqCYaHt62V7pn" %}
[ビルド環境の設定](/products_guide/monaca_ide/build/build_env_settings)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbF79FhLS0t5CxQF" %}
[ビルド履歴一覧](/products_guide/monaca_ide/build/build_history)
{% endcontent-ref %}
# iOS アプリのビルド
{% hint style="info" %}
2026年4月以降、App Store に送信されるiOS アプリは、iOS 26 SDK 以降をサポートする必要があります。詳細は、[アプリの提出](https://developer.apple.com/jp/app-store/submitting/) を参照していください。
Monacaで開発するアプリを AppStore に公開するには、Cordova 13 以降のプロジェクトを使用する必要があります。
{% endhint %}
{% content-ref url="/pages/-MfWrbHJxfQ21N1crXkk" %}
[iOS アプリのビルド](/products_guide/monaca_ide/build/ios/build_ios)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbO9K9YXlWkpKdUt" %}
[Monaca と Xcode 間でのビルド設定の再利用](/products_guide/monaca_ide/build/ios/import_export)
{% endcontent-ref %}
# iOS アプリのビルド
{% hint style="info" %}
2026年4月以降、App Store に送信されるiOS アプリは、iOS 26 SDK 以降をサポートする必要があります。詳細は、[アプリの提出](https://developer.apple.com/jp/app-store/submitting/)を参照していください。
Monacaで開発するアプリを AppStore に公開するには、Cordova 13 以降のプロジェクトを使用する必要があります。
{% endhint %}
## 事前準備
事前準備として、次の内容を行います。
* [Apple Developer Program](https://developer.apple.com/programs/ios/) への登録
* [ビルドの種類](https://ja.docs.monaca.io/products_guide/monaca_ide/build/ios/pages/-MfWrbHJxfQ21N1crXkk#ビルドの種類) と要件の確認
### ビルドの種類
Monaca では、次のビルド種類をサポートしています。
| ビルドの種類 | 説明 | 要件 ( 準備するアイテム ) | インストール方法 |
|---|
| ビルドの種類 | 説明 | 要件 ( 準備するアイテム ) | インストール方法 |
| デバッグ | 開発用の端末にインストールするためのアプリをビルドします。 | - 開発用証明書
- 開発用 プロビジョニング プロファイル
| |
| Ad Hoc | 限られたグループにインストールするためのアプリをビルドします。 | - 配布用証明書
- 配布用 ( Ad Hoc )
プロビジョニング プロファイル
| - Apple Configurator 2 ( Mac のみ )
- QR コード
|
| In-house | App Store 経由以外で配布するためのアプリをビルドします。 | - 配布用証明書
- 配布用 ( In-house ) プロビジョニング プロファイル
| - Apple Configurator 2 ( Mac のみ )
- QR コード
|
| リリース | App Store 経由で配布するためのアプリをビルドします。 | - 配布用証明書
- 配布用 ( App Store ) プロビジョニング プロファイル
| |
| シミュレーター | シミュレータで動作確認するためのビルドです。(ターゲットはiPhoneとなります) | | |
{% hint style="info" %}
Ad Hoc 配布とは、App Store を経由せずに、アプリを配布するための仕組みです ( 評価配布用 )。Ad Hoc プロビジョニング プロファイルを使ってビルドする、評価用アプリは、現在、最大 **100 台** まで、Ad Hoc 形式で配布できます。ただし、アプリの配布先は、開発関係者に限定されます。
{% endhint %}
## ステップ 1 : Monaca 上での iOS アプリ設定
### iOS アプリの設定
1. Monaca クラウド IDE のメニューから、`設定 → iOS アプリ設定` を選択します。
2. アプリに関する次の情報を入力します。
| アプリケーション名 | アプリの名前を入力します。マーケット上などで表示されます。 |
|---|
| アプリケーション名 | アプリの名前を入力します。マーケット上などで表示されます。 |
| App ID | アプリを識別する一意の ID です。逆ドメイン形式を推奨します ( mobi.monaca.appname など )。英数字とピリオドのみ使用できます ( ピリオドは最低限 1 つ使用 )。各節 ( 各レベルのドメイン ) はピリオドで区切り、各節の先頭には英字を使用します。 |
| バージョン | アプリのバージョン番号です。App Store Connect 経由で、アプリをアップロードするとき ( 配布する場合 ) に必要となります。3 つの節を、それぞれドットで区切ります ( 例 : 1.10.2 )。各節の数字には、[0-99] を使用します。 |
{% hint style="danger" %}
Monaca のアプリ設定では、App ID にアスタリスク (\*) を使用することはできません。使用した場合、ビルドは失敗します。また、この App ID には Apple Developer Program に登録した App ID と同じ ID を使用します。詳細は、[ App ID の登録 ](/products_guide/monaca_ide/build/ios/build_ios#app-id-no)をご確認ください。
{% endhint %}
3\. 設定後、`保存する` をクリックします。
{% hint style="info" %}
現在、iOS の \[ App ID ] または Android の \[ パッケージ名 ] のいずれかを変更すると、両方とも同じ名前に更新されます。それぞれに別の名を設定する場合には、[ App ID ( iOS 側 ) と パッケージ名 ( Android 側 ) にそれぞれ異なる値を設定するには？ ](/faq/application#app-id-ios-to-pakkji-android-nisorezorenaruwosuruniha)をご確認ください。
{% endhint %}
### iOS のビルド設定
1. Monaca クラウド IDE のメニューから、`設定 → iOS ビルド設定` を選択します。
2\. 秘密鍵を作成します。または、既存の秘密鍵がある場合には、インポートもできます。ここでは、新規に秘密鍵を作成します。`秘密鍵と CSR の生成` ボタンをクリックして、ユーザー名 ( 秘密鍵に付ける名前 ) ・ メールアドレス ( Apple ID ) ・ 国コードを入力します。
{% hint style="info" %}
既存の秘密鍵をインポートする場合には、その秘密鍵に関連付けされた証明書も Monaca へアップロードする必要があります。詳細は、 [ステップ 2 : 秘密鍵と証明書の Monaca へのインポート ](/products_guide/monaca_ide/build/ios/import_export#suteppu-2-tono-monaca-henoinpto)をご確認ください。
{% endhint %}
3\. 秘密鍵の作成後、その秘密鍵に関連付けされた CSR ファイルも同時に作成されます。次に、`エクスポート` ボタンをクリックして、この CSR ファイルをダウンロードします。このファイルは、後ほど、Apple Developer Program で証明書を発行するときに使用します。
4\. [「 証明書の作成 」](https://ja.docs.monaca.io/products_guide/monaca_ide/build/ios/pages/-MfWrbHJxfQ21N1crXkk#証明書の作成) の内容に従い、Apple Developer Program で証明書を作成して、ダウンロードします。
5\. [「 プロビジョニング プロファイルの作成 」](https://ja.docs.monaca.io/products_guide/monaca_ide/build/ios/pages/-MfWrbHJxfQ21N1crXkk#プロビジョニング-プロファイルの作成)の内容に従い、Apple Developer Program でプロビジョニングプロファイルを作成して、ダウンロードします。
6\. 証明書とそれに対応するプロビジョニング プロファイルを、Monaca クラウドへアップロードします。
{% hint style="info" %}
Monoaca のビルド設定上では、証明書とそれに対応するプロビジョニングプロファイルを、複数個、アップロード・保管しておくことができます。
{% endhint %}
## ステップ 2 : Apple Developer Program 上での iOS アプリ設定
1. [Apple Developer ページ](https://developer.apple.com/) へ行き、`Account` をクリックします。
2. Apple Developer Program に登録した、Apple IDとパスワードを使用して、サインインします。このプログラムに未登録の場合には、[こちら](https://developer.apple.com/programs/)で登録します。
3. `Certificates, Identifiers/IDs & Profiles` へ行き、次のページを表示します。
4\. このページ上で行う処理は、次のとおりです。
* [証明書の作成](https://ja.docs.monaca.io/products_guide/monaca_ide/build/ios/pages/-MfWrbHJxfQ21N1crXkk#証明書の作成)
* [App ID の登録](https://ja.docs.monaca.io/products_guide/monaca_ide/build/ios/pages/-MfWrbHJxfQ21N1crXkk#app-id-の登録)
* [開発用端末の登録](https://ja.docs.monaca.io/products_guide/monaca_ide/build/ios/pages/-MfWrbHJxfQ21N1crXkk#開発用端末の登録)
* [プロビジョニング-プロファイルの作成](https://ja.docs.monaca.io/products_guide/monaca_ide/build/ios/pages/-MfWrbHJxfQ21N1crXkk#プロビジョニング-プロファイルの作成)
### 証明書の作成
Apple Developer Program では、2 種類の証明書を発行できます。
* 開発用証明書 : デバッグビルドを行うときに、必要となります。
* 配布用証明書 : リリースビルドまたは Ad Hoc
ビルドを行うときに、必要となります。
CSR ファイルのダウンロード後 ( [iOS のビルド設定](https://ja.docs.monaca.io/products_guide/monaca_ide/build/ios/pages/-MfWrbHJxfQ21N1crXkk#ios-のビルド設定) を参照のこと )、Apple Developer Program で証明書を発行して、ダウンロードします。
開発用証明書の発行とダウンロードを、次の手順で行います。
1. `Certificates` 項目を選択します。
2. 追加ボタン 「`+`」 をクリックします ( 下のスクリーンショットを参照のこと )。
3\. `iOS App Development` を選択し、`Continue` ボタンをクリックします。
{% hint style="info" %}
配布用の証明書を発行する場合には、 `App Store and Ad Hoc` を選択します。
{% endhint %}
4\. `Continue` ボタンをクリックし、Monaca クラウド IDE からダウンロードした CSR ファイル をアップロードします。次に、`Generate` ボタンをクリックします。
5\. 開発用証明書の発行が、これで完了しました。発行された証明書をダウンロードします ( 後から、Monaca クラウド IDE にアップロードします )。
{% hint style="info" %}
配布用証明書をインポートする場合も、ほぼ同様の手順です。
{% endhint %}
### App ID の登録
App ID は、開発用と配布用のプロビジョニング プロファイルの作成時に、主に、使用します。Wildcard App ID ( 複数の アプリで共通 ) または Explicit App ID ( アプリを識別する、一意の Bundle ID と一致 ) を作成できます。
App ID の登録を、次の手順で行います。
1. `Identifiers` 項目を選択します。
2. 追加ボタン 「`+`」 をクリックします ( 下のスクリーンショットを参照のこと )。
3\. App ID は、「`.`」 で区切られた、2 つの文字列 ( Prefix と Suffix ) で構成されています。次の内容を参考にして、App ID の情報を入力します。
* App ID Description : App ID の説明を入力します。「 `@、&、*、'、"` 」 などの特殊文字は使用できません。
* App ID Prefix : Team ID となります ( デフォルト )。
* App ID Suffix : アプリを識別するための Bundle ID となります。App ID Suffix には、次の 2 種類があります。
| データ | 説明 |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Explicit App ID | Game Center、In-App Purchase、Data Protection、iCloud などのサービスを、アプリで利用する場合、または、あるアプリ専用のプロビジョニング プロファイルが必要な場合、Explicit App ID を登録します。この場合、アプリの Bundle ID と一致する文字列を、Explicit App ID の Bundle ID 欄に入力します。指定する ID は、Monaca クラウド IDE 上で設定した App ID と同じものである必要があります ( [iOS アプリの設定](https://ja.docs.monaca.io/products_guide/monaca_ide/build/ios/pages/-MfWrbHJxfQ21N1crXkk#ios-アプリの設定) ) |
| Wildcard App ID | 複数のアプリのビルドとインストールに、1 つの App ID を使用したい場合、Wildcard App ID を登録します。この場合、最後の文字がアスタリスク ( `*` ) になるように、Bundle ID を入力します。 |
* App Services : アプリ上で使用したいサービスを選択します。
4\. `Continue`をクリックします。App ID の登録内容を確認して、`Submit` をクリックします。ここまでの手順で、Apple Developer Program への App ID の登録が完了しました。
### 開発用端末の登録
開発用と配布用のプロビジョニング プロファイルを作成する前に、開発用の端末を登録する必要があります。
アプリ開発時に使用する端末を、次の手順で登録します。
1. `Devices` 項目を選択します。
2. 追加ボタン 「`+`」 をクリックします ( 下のスクリーンショットを参照のこと )。
3\. 端末の情報を入力します。
* `Name` : 端末を識別するための名前を入力します ( 例 : MyiPhone )
* `UDID` : 端末固有の識別コードです。UDID は、コンピューターに iOS 端末を接続して確認できます。macOS の場合は、システム情報の `シリアル番号` から、Windows の場合は、デバイスマネージャーの `デバイス インスタンス パス` から確認できます。( 下のスクリーンショットを参照のこと )。
4\. 入力後、`Continue` をクリックします。次の画面で入力情報を確認して、`Register` をクリックします。Apple Developer Program 上での開発用端末の登録は、これで完了です。
### プロビジョニング プロファイルの作成
アプリのビルドの最終工程として、プロビジョニング プロファイルを作成します。プロビジョニング プロファイルには、次の2種類があります。
* 開発用 プロビジョニング プロファイル : デバッグビルドを行うときに、開発用証明書と共に使用します。
* 配布用 プロビジョニング プロファイル : Ad Hoc または配布 ( 実稼働 ) 用ビルドを行うときに、配布用証明書と共に使用します。
開発用 プロビジョニング プロファイルを、次の手順で作成します。
1. `Profiles` 項目を選択します。
2. 追加ボタン 「`+`」 をクリックします。
3\. `iOS App Development` を選択し、`Continue` ボタンをクリックします。
{% hint style="info" %}
* Ad Hoc ビルド用に、配布用 プロビジョニング プロファイルを作成する場合には、`Ad Hoc` を選択します。
* リリースビルド用に、配布用 プロビジョニング プロファイルを作成する場合には、`App Store` を選択します。
{% endhint %}
4\. 対象の App ID を選択して、`Continue` ボタンをクリックします。
5\. このプロファイルに紐付けする証明書を選択して、`Continue` ボタンをクリックします。
6\. 先ほど登録した開発用の端末を選択して、`Continue` ボタンをクリックします。
7\. プロビジョニング プロファイルの名前を入力して、`Generate` ボタンをクリックします。
8\. 開発用 プロビジョニングプロファイルの準備が完了しました。プロファイルをダウンロードします。後ほど、Monaca上で、iOS アプリをビルドするときに、このファイルを使用します。
{% hint style="info" %}
配布用 プロビジョニング プロファイルの作成も、ほぼ同様の手順で行えます。
{% endhint %}
## ステップ 3 : アプリのビルド
1. Monaca クラウド IDE のメニューから、`ビルド → iOS アプリのビルド`を選択します。
2. 目的に応じたビルドの種類を選択して、`ビルドを開始する` ボタンをクリックします。
3\. ビルドが完了するまで、しばらく待ちます。ビルドが成功した場合には、次のような画面が表示されます。ビルドの完了後、ビルド済みアプリをインストールまたはダウンロードできます。
{% hint style="info" %}
macOS Catalina 10.15 以降でシミュレーターを使用している場合は、アプリ実行前にターミナルで下記のコマンドを実行する必要があります。
* すべてのアプリケーションを許可を有効
sudo spctl --master-disable\
\
設定を戻す場合は、下記のコマンドを実行します。
* すべてのアプリケーションを許可を無効
sudo spctl --master-enable
{% endhint %}
# Monaca と Xcode 間でのビルド設定の再利用
Monaca クラウド IDE と Xcode ( Mac OS X ) を併用して、Monaca アプリを作成する場合、両環境で、同じビルド設定 ( 秘密鍵と証明書 ) を使用できるように準備する必要があります。
ここでは、次の項目に関して解説します。
* [Xcode から Monaca クラウド IDE へのビルド設定のエクスポート](https://ja.docs.monaca.io/products_guide/monaca_ide/build/ios/pages/-MfWrbO9K9YXlWkpKdUt#xcode-から-monaca-クラウド-ide-へのビルド設定のエクスポート)
* [Monaca クラウド IDE から Xcode へのビルド設定のエクスポート](https://ja.docs.monaca.io/products_guide/monaca_ide/build/ios/pages/-MfWrbO9K9YXlWkpKdUt#monaca-クラウド-ide-から-xcode-へのビルド設定のエクスポート)
## Xcode から Monaca クラウド IDE へのビルド設定のエクスポート
ここでは、Mac OS X ( Xcode ) 上で使用しているビルド設定 ( 秘密鍵と証明書 ) を、Monaca クラウド IDE へエクスポートする手順を解説します。
### ステップ 1 : キーチェーンアクセス上での秘密鍵と証明書のエクスポート
キーチェーンアクセス上で、秘密鍵をエクスポートします。次の手順に従います。
1. Mac OS X 上で、`アプリケーション → ユーティリティー → キーチェーンアクセス` を選択します。
2. `キーチェーンアクセス` 画面の左下に表示されている、`証明書` をクリックします。
3\. エクスポートする証明書を右クリックして、`「 証明書名 」 を書き出す` を選択します。このとき、秘密鍵と関連付けされている証明書を選択します。秘密鍵と関連付けされている証明書のみ、Monaca にインポートできます。
4\. エクスポート用の画面が表示されます。今回は、秘密鍵として保存するため、フォーマットを `個人情報交換 (.p12)` にして、`保存` ボタンをクリックします。
5\. 秘密鍵用のパスワードを入力して、`OK` ボタンをクリックします。 `.p12` の拡張子を持つ、秘密鍵のファイルが作成されます。後ほど、Monaca クラウド IDE 上で、このファイルのインポートするときに、このパスワードを使用しますので、メモします。
6\. エクスポートする証明書を右クリックして `「 証明書名 」 を書き出す` を選択します。今回は、証明書として保存するので、フォーマットを `証明書 (.cer)` にして、`保存` ボタンをクリックします。
### ステップ 2 : 秘密鍵と証明書の Monaca へのインポート
{% hint style="info" %}
Monaca では、秘密鍵を 1 つのみ登録できます。開発用証明書と配布用証明書で異なった秘密鍵を使用している場合、使用する証明書に紐付けされている秘密鍵を、再びインポートする必要があります。
{% endhint %}
Monaca クラウド IDE へ秘密鍵と証明書をインポートします。次の手順に従います。
1. Monaca クラウド IDE のメニューから、 `設定 → iOS ビルド設定` を選択します。表示された画面上で、`インポート` ボタンをクリックします。
2\. 秘密鍵のファイル (`.p12` ファイル ) を参照・選択して、対応するパスワードを入力します。次に、 `インポート`ボタンをクリックします。
3\. `発行された証明書を登録する` 項目の `証明書のアップロード` をクリックします。インポートした秘密鍵に関連付けされた証明書 ( 開発用または配布用 ) をアップロードします。
4\. 証明書のファイル (`.cer` ファイル ) を参照・選択して、アップロードします。
## Monaca クラウド IDE から Xcode へのビルド設定のエクスポート
{% hint style="info" %}
Monaca クラウド IDE からエクスポートする場合、1 つのファイル上に、秘密鍵と証明書は保存されます。
{% endhint %}
Monaca クラウド IDE から秘密鍵と証明書をエクスポートします。次の手順に従います。
1. Monaca クラウド IDE メニューから、`設定 → iOS ビルド設定` を選択します。
2. 「 Monacaに登録された証明書 」の一覧で、証明書の`エクスポート`アイコンをクリックします。
3\. エクスポートの前にパスワードを入力します。後から、証明書をインポートするときに、このパスワードが必要になります。
4\. エクスポート ボタンをクリックすると、`.p12` の拡張子が付いたファイルがダウンロードされます ( 例 : `dev_certification_ios.p12` )。このファイルには、秘密鍵と証明書の両方が保存されています。
5\. ダウンロードしたファイルをダブルクリックします。ファイルのパスワードを聞かれますので、入力して、`OK` をクリックします。これで、秘密鍵と証明書を Xcode 上でも使用できます。
# Android アプリのビルド
## ビルドの種類
Monaca では、デバッグビルド版、リリースビルド版の 2 種類の Android アプリをビルドできます。これらの相違点は、次のとおりです。
| ビルドの種類 | 説明 | インストール方法 |
| ----------- | ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **デバッグビルド** | パッケージに署名がないため、
マーケットでの配布は行えません。
| |
| **リリースビルド** | コードサイン ( コード署) を使用して、
署名したパッケージです。
マーケットで配布できます。
| - サイドローディング
Google Play ストア経由
または他のマーケット経由
|
{% hint style="info" %}
サイドローディング ( Sideloading ) とは、一般的にはファイルのアップロード・ダウンロードを指しますが、ここでは、アプリのパッケージ ( APK 形式 ) を、マーケットを経由せずに、端末にインストールすることを指します。ビルド後、APK ファイルを直にダウロードして、インストールします。
{% endhint %}
## ステップ 1 : Android アプリの設定
1. Monaca クラウド IDE のメニューから、`設定 → Android アプリ設定` を選択します。
2. アプリに関する情報を入力します。
* 一般的な設定
| アプリケーション名 | アプリの名前を入力します。
マーケット上などで表示されます。
|
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| パッケージ名 | Android のマーケットへのアップロード時に使用される、一意の名前を入力します。
逆ドメイン形式を推奨します ( io.monaca.app\_name など )。
英数字のみ使用でき、各節はピリオドで区切ります ( 1 つ以上のピリオドを使用 )。
ピリオドで区切られた各節の先頭文字には、英字を使用します。
また、アンダースコア ( \_ ) も使用可能です。
|
| ビルド種別ごとにパッケージ名を分ける | 有効にした場合、リリースビルド版アプリのパッケージ名と
デバッグビルト版アプリのパッケージ名は、異なる名になります。
デバッグビルド版アプリのパッケージ名の拡張子は .debug となり、
プロジェクトのデバッガーのパッケージ名の拡張子は .debugger となります。
ただし、デフォルトでは、このオプションは無効になっています。
有効にしてしまうと、
決まったパッケージ名に紐付けされているプラグインが存在する場合 ( In-App Purchase など )、デバッグができなくなるためです。
|
| バージョン | アプリのバージョン番号を入力します。
バージョン番号には、ドット区切りの数値を使用します ( 例 : 1.0.0 )。
|
| バージョンコード | 内部処理で使用する、アプリのバージョン番号です
( バージョンが複数ある同一アプリの処理用 )。
整数を使用します。このコードを使用して、アプリの更新の有無を決定します。
|
| フルスクリーン | 有効にした場合、フルスクリーン ( 全画面表示 ) でアプリを実行します。ステータスバーは非表示になります。 |
* その他 : ここでは、Android アプリに関する詳細を設定します。
| 許可する外部 URL | `*` | アプリからアクセスできる URL ( 単数または複数 ) を指定します。「 \* 」 に設定した場合、すべてのドメインへのアクセスを許可します。 |
| ------------------ | ------- | ------------------------------------------------------------------------ |
| バックグラウンド時もアプリを常に実行 | 有効 | バックグラウンド時にも Cordova を実行したい場合、有効化します。 |
| オーバースクロールを無効 | 有効 | WebView の端を越えたときの挙動 ( オーバースクロールの有無 ) を設定します。 |
| 画面の向き | Default | Landscape または Portrait を指定できます ( アプリ実行時の画面の向き )。 |
設定後、`保存する` をクリックします。
{% hint style="info" %}
現在、iOS の \[ App ID ] または Android の \[ パッケージ名 ] のいずれかを変更すると、両方とも同じ名前に更新されます。それぞれに別の名を設定する場合には、[ App ID ( iOS 側 ) と パッケージ名 ( Android 側 ) にそれぞれ異なる値を設定するには？ ](https://docs.monaca.io/ja/faq/application/#app-id-ios-%e5%81%b4-%e3%81%a8-%e3%83%91%e3%83%83%e3%82%b1%e3%83%bc%e3%82%b8%e5%90%8d-android-%e5%81%b4-%e3%81%ab%e3%81%9d%e3%82%8c%e3%81%9e%e3%82%8c%e7%95%b0%e3%81%aa%e3%82%8b%e5%80%a4%e3%82%92%e8%a8%ad%e5%ae%9a%e3%81%99%e3%82%8b%e3%81%ab%e3%81%af)をご確認ください。
{% endhint %}
3\. アダプティブ アイコンの設定
Cordova 9.0 以降の Monaca プロジェクトを使用している場合は、Android 8.0 以降にアダプティブ アイコンを設定することができます。
アダプティブ アイコンを設定する場合は、`res` フォルダー配下に画像ファイルをアップロードし、config.xml の `icon` タグに `background` 属性と `foreground` 属性を追加します。これまでの `src` 属性が設定されている場合は、src 属性の値は使用されません。
アダプティブ アイコンに対応していない OS バージョン場合は、`foreground` 属性に設定された画像が表示されます。これまでの `src` 属性を設定した場合は、src 属性の値が優先されます。
以下は、`/res/android/icon/` 配下に画像を配置している例になります。
```markup
```
以下は、src 属性を設定した例になります。
```markup
```
{% hint style="info" %}
現在、Androidアプリ設定画面からはアダプティブ アイコン用アイコン画像の表示・アップロードができません。上記の方法で直接config.xmlファイルに設定を加えてください。
{% endhint %}
## ステップ 2 : Android キーストア ( KeyStore ) の設定
キーストアは、バイナリーファイルです。このファイルには、秘密鍵 ( 単数または複数 ) が格納されています。秘密鍵は、組織または個人を表す 「 判子 」 の役割をします。キーストアは、パスワードを使用して、暗号化されます ( パスワードを紛失した場合には、復旧できません )。キーストアを紛失した場合、または、別のキーストアで上書きされてしまった場合、同じ鍵を使用しても、署名済みパッケージを再署名することはできません。\[ 翻訳者メモ ： キーストアの内容に関しては、いろいろな説明方法があるようで、人によっては、「 キーストアには秘密鍵と証明書の情報がセットで格納されている 」、「 キーストアとは証明書そのものであり、そこには鍵情報が格納されている 」 としています。なお、このキーストアを apk ファイルに添えれば、「 署名 」 完了となります ]
リリースビルド版の Android アプリをビルドするときに、キーストアが必要となります。Monaca では、新規のキーストアを作成するか、または、既存のキーストアをインポートできます。ここでは、新規に作成することを前提に解説します。次の手順に従います。
1. Monaca クラウド IDE のメニューから、`設定 → Android キーストア設定`を選択します。
2. 「 キーストアとエイリアスの管理 」 画面が表示されます。
3\. `クリアして新規作成`ボタンをクリックすると、キーストアの設定画面が表示されます。
4\. 上のスクリーンショットに表示されている項目に、必要な情報を入力します。
* エイリアス : アプリの署名時に使用する秘密鍵の名前です。1 つのキーストア内に、複数のエイリアスを格納できます。
* エイリアスのパスワード : エイリアス ( 秘密鍵 ) 用のパスワードです。
* キーストアのパスワード : キーストア用のパスワードです。このキーストアをインポートするときに、このパスワードが必要となります。
5\. 次に、`キーストアとエイリアスを作成する` ボタンをクリックして、キーストアを作成します。
{% hint style="info" %}
キーストアを紛失した場合、同じ鍵を使用しても、署名済みのパッケージに再署名を行うことはできなくなります。よって、アプリの署名に使用したキーストアの取り扱いには注意しましょう。バックアップを取ることを推奨します。キーストアをダウンロードする場合には、`エクスポート` ボタンをクリックします。
{% endhint %}
## ステップ 3 : アプリのビルド
1. Monaca クラウド IDE のメニューから、`ビルド → Android アプリのビルド` を選択します。
2. 目的に応じたビルドの種類を選択して、 `ビルドを開始する`ボタンをクリックします。
3\. 「 リリース向けビルド 」 の 「 リリースビルド 」 を選択した場合、ビルドを開始する前に、署名用エイリアスの選択とパスワードの入力を行います。
4\. ビルドが完了するまで、しばらく待ちます。ビルドが成功した場合には、次のような画面が表示されます。ビルドの完了後、ビルド済みアプリをインストールまたはダウンロードできます。
# Windows アプリのビルド
{% hint style="danger" %}
Cordova 9.0 以降の Windows ビルドにつきましては、Electron アプリでの対応になります。\
Electron アプリの Windows ビルドにつきましては、[こちら](/products_guide/monaca_ide/build/electron/build_electron_windows)を確認ください\
Cordova 7.1 プロジェクトでは、Windowsビルドをご利用いただけます。
{% endhint %}
## Windows ストアアプリ
Windows ストアアプリは、HTML5 と JavaScript で作成され、WinRT アーキテクチャー上で、ネイティブと同じように実行されます。また、Monaca で作成したアプリにも、Visual Studio などで作成したアプリと同じ機能が実装されており、WinJS を含む、すべてのネイティブ機能を使用できます。
また、Windows ストアアプリは、Windows および Windows RT を搭載した PC とタブレット上で動作します。なお、Monaca では、Windows ストア向けのビルド ( リリースビルド ) をサポートしていないため、Windows ストア向けにアプリを作成する場合には、Visual Studio などを使用して、別途、アプリを再ビルドする必要があります。
また、Windows ストアアプリには、Android と iOS にはない制約があります。
* Trident/Chakra ( レンダリングエンジン/JavaScript エンジン )のストアアプリ向けの実行モードで、HTML5 と JavaScriptは実行されるため、標準メソッドと機能の一部に、サポートされていないものがあります( Trident は、IE と同じ描画エンジンでもあります )。詳細は、「 [HTML, CSS, and JavaScript features and difference](https://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx) 」 ( 外部サイト ) をご確認ください。
## 事前準備
Windows アプリの構築には、Microsoft 社が発行する、有効な開発者用ライセンスが必要です。ライセンス自体は無料ですが、Microsoft アカウントが必要です。ライセンスを取得する場合には、最初に [こちら](https://dev.windows.com/en-us/programs/join) で登録をします。
## ステップ 1 : Windows アプリの設定
1. Monaca クラウド IDE のメニューから、`設定 → Windows アプリ設定`を選択します。
2. アプリに関する情報を入力します。
| パッケージ証明書キー | Monaca アプリを Windows アプリに変換 ( 再コンパイル ) するときに、この証明書を使用します。また、この証明書は、サイドローディング ( side-loading ) を行うとき、および、Windows ストアに申請するときにも使用されます。既存の証明書がなければ、Windows アプリを初めてビルドするときに、証明書は自動的に発行されます。既存の証明書ファイルをアップロードする場合には、パスワード無しの PKCS#7 形式のファイルを使用します。 |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| アプリ表示名 | アプリの名前を入力します。スタート画面に表示されます。 |
| パッケージ表示名 | パッケージ名を入力します。 |
| 短い名前 / 略称 | タスクバーに表示する文字を入力します。 |
| 名前の表示 | スタート画面 ( Windows 8 以上 ) 上に表示されるロゴのデフォルト設定を選択します。 |
| バージョン | アプリのバージョン番号を入力します。バージョン番号には、ドット区切りの数値を使用します ( 例 : 1.0.0 )。 |
| 説明 | アプリの概要を入力します。 |
| 発行者表示名 | 開発者名、開発グループ名、企業名などを入力します。 |
| アーキテクチャー | CPU のアーキテクチャーを選択します。AnyCPU、x86、x64、Arm のいずれかのオプションを選択します。 |
3\. 設定後、`保存する` をクリックします。
## ステップ 2 : アプリのビルド
1. Monaca クラウド IDE のメニューから、`ビルド → Windows アプリのビルド`を選択します。
2. `ビルドを開始する` ボタンをクリックします。
3\. ビルド後、zip ファイルをダウンロードします。
## ステップ 3 : アプリのインストール
1. 先ほどダウンロードした zip ファイルを解凍します。
2. 解凍したフォルダー内の `Add-AppDevPackage.ps1` ファイルを右クリックして`PowerShell で実行` を選択すると、インストールが始まります。
3\. 選択したファイルを開くか確認するメッセージが表示されます。`開く` をクリックします。
4\. \[ Enter ] を押して、処理を続けます。
5\. 管理者権限を付与するかを確認するメッセージが表示されます \[ ユーザーアカウント制御 ( UAC ) 機能 が有効な場合 ]。`はい` をクリックします。
6\. PowerShell のウィンドウ上に、次のメッセージが表示されます。 `R` と入力します。
7\. `Y` ( はい ) を入力します。
8 インストール後、\[ Enter ] を押します。
9\. これで、インストールが完了しました。次に、アプリビュー ( アプリ一覧 ) 上にアプリが追加されていることを確認します。
10\. アプリをクリックして、起動します。
# Electron アプリのビルド
{% content-ref url="/pages/-MfWrbEv5NwtEft8QreZ" %}
[Windows アプリのビルド](/products_guide/monaca_ide/build/electron/build_electron_windows)
{% endcontent-ref %}
# Windows アプリのビルド
## ビルドの種類
Electron アプリケーションには、2種類のビルド(デバッグとリリース)があります。\
デバッグとリリースの違いは次のとおりです。
| ビルド種別 | 説明 |
| ----------- | ------------------------------------------------------------------- |
| **デバッグビルド** | アプリケーションの起動時にデフォルトでデバッグ用ツール「DevTools」が表示されます。このツールは手動で閉じたり開いたりできます。 |
| **リリースビルド** | リリース用のため、デバッグ用ツール「DevTools」は表示されません。 |
## ステップ 1: アプリ設定
1. Monaca クラウド IDE のメニューから、`設定 → Windows アプリ設定` を選択します。
2. アプリに関する情報を入力します。
* アプリ情報
| アプリケーション名 | アプリケーションの名前を入力 |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| App ID | ストアにアップロードするときに使用される一意の名前。 App IDには、逆ドメインスタイル（io.monaca.app\_nameなど）を使用することをお勧めします。英数字、ピリオド（少なくとも1つのピリオドを使用する必要があります）、およびアンダースコアのみが許可されます。各セグメントはピリオドで区切られ、アルファベット文字で始まる必要があります。 |
| バージョン番号 | アプリのバージョン番号。バージョン番号は、ドットで区切られた番号のみで構成されます。（例:1.0.0） |
| 説明 | アプリの概要を入力します。 |
* アプリ アイコン
アプリケーションのアイコンを設定します。 PNG形式がサポートされています。すべてのオペレーティングシステムでアイコンを利用する場合は、「512x512」ピクセルのものが最低限必要となります。
3. 設定後、`保存する` をクリックします。
## ステップ 2: アプリのビルド
1. Monaca クラウド IDE のメニューから、 `ビルド → Windows アプリのビルド` を選択します。
2. 出力するアプリのパッケージ種別を選択し、`ビルドを開始する` ボタンをクリックします。
Windowsリリースビルドは、次のビルドパッケージをサポートしています。
| パッケージ | 説明 |
| -------- | ------------------------ |
| **NSIS** | NSIS（EXE）インストーラーが生成されます。 |
| **ZIP** | アプリをZIP形式で出力します。 |
{% hint style="info" %}
Windowsデバッグビルド用のパッケージオプションはありません。デフォルトのパッケージはZIPです。
{% endhint %}
3\. ビルドが完了するまで数分かかる場合があります。ビルドが完了すると、ビルドされたアプリケーションをダウンロードできます。
## ステップ 3: アプリのインストール(ZIP形式)
1. ダウンロードした zip ファイルを解凍します。
2. 実行可能ファイルをダブルクリックします。次の画面のように、アプリケーションを実行する前に確認を求めるダイアログが表示される場合があります。
## ステップ 3: アプリのインストール(NSIS形式)
1. NSIS(exe)ファイルをダウンロードします。
2. NSISファイルをダブルクリックします。アプリケーションを実行する前に、確認を求めるダイアログが表示される場合があります。次の画面のように、「詳細」をクリックして、「実行」をクリックします。
アプリケーションのインストールが始まります。
## ステップ 4: アプリの署名(ZIP形式)
1. Windowsソフトウェア開発キット（Windows SDK）のダウンロード。
Microsoftの公式ページからダウンロードしてください。 Windows 10を使用している場合は、 からダウンロードできます。
2. アプリの署名
`signTool`コマンドを使用して、実行可能ファイル（`exe`）に署名します。`signTool`は、Windows SDKに含まれます。 ファイルに署名するには、 `コマンドプロンプト` を開き、 `signtool sign /f MyCert.pfx /p "MyPassword" "MyApp.exe"`を実行するだけです。\
`signTool`コマンドの使用方法の詳細については、 [公式ドキュメント](https://docs.microsoft.com/en-us/windows/win32/seccrypto/using-signtool-to-sign-a-file) を参照してください。
ファイルが署名されているかを確認するには、次を実行します。`signtool verify /pa /v "MyApp.exe"`.
## ステップ 4: アプリの署名(NSIS形式)
### 事前準備
アプリ署名には、次の準備が必要となります。
1. MSIX パッケージツール\
Microsoftの公式ページからダウンロードしてください。 Windows 10を使用している場合は、[こちら ](https://www.microsoft.com/en-us/p/msix-packaging-tool/9n5lw3jbcxkf)からダウンロードできます。
2. 証明書ファイル(pfx)\
`MSIX Packaging Tool`を使用して、既存のEXEインストーラーからMSIXアプリケーションパッケージを作成できます。 公式ガイドは [こちら ](https://docs.microsoft.com/ja-jp/windows/msix/packaging-tool/create-app-package-msi-vm)になります。
### 操作手順 (MSIX パッケージツール)
1. `MSIX Packaging Tool` を開き、「Application Package」を選択します。
2\. ダウンロードしたNSIS（EXE）ファイルと証明書ファイル(pfx)を選択します。
3\. パッケージを作成する場所を選択します。
4\. パッケージに必要な情報を入力します。
5\. 次に、パッケージ化するための確認として、 `MSIX Packaging Tool Driver`のインストール状態や各種ツールの有効化または無効化を確認します。
6\. ツールはアプリケーションインストーラーのテストを開始します。
7\. 「最初の起動タスク」では、エントリポイントが自動的に入力されます。入力されない場合は、\[参照]ボタンをクリックして、エントリポイントに実行可能ファイルを選択してください。
8\. パッケージを保存したい場所を指定します。
9\. パッケージの作成には数分かかる場合があります。
**テスト環境**
* Windows 10 Pro, Version 1803, OS build 17134.885
* Windows Software Development Kit - Windows 10.0.18362.1
# PWA アプリのビルド
## ステップ 1 : アプリの設定
1. Monaca クラウド IDE のメニューから、`設定 → PWA アプリ設定` を選択します。
2. アプリに関する情報を入力します。
* アプリケーション情報
| 名前 | アプリ名を設定します。 |
| -------- | ----------------------------------------------------------------------------------------- |
| 短い名前 | フルネームを表示する十分な領域がない場所(ホーム画面など)で使用されます。 |
| 説明 | アプリの一般的な説明を指定します。 |
| 言語 | `name`メンバーと `short_name` メンバーで使用する言語を指定します。 |
| テキストの向き | テキストの書字方向を指定します。 |
| 適用範囲 | ウェブサイトのナビゲーション範囲を定義します。この設定により表示することができるウェブページを制限できます。範囲外にユーザーがアクセスした場合は、通常のWebページに遷移します。 |
| 開始URL | アプリケーションを起動したときに読み込むURLです。 |
* アプリケーションの表示設定
| 表示 | アプリケーションの表示モードを設定します。ネイティブアプリのように表示させるためデフォルトは、`standalone`に設定されています。 |
| ------- | --------------------------------------------------------------------- |
| 画面の向き | 画面の表示向きを設定します。 |
| 背景色 | スプラッシュ画面の背景色として利用されます。 |
| テーマカラー | ステータスバーの色を設定します。 |
* アプリアイコン
アプリアイコンの設定ができます。1つの画像から各サイズのアイコンを自動生成します。設定したアイコンは、端末のホーム画面に表示されるアイコンやスプラッシュ画像に表示されるアイコンとして利用されます。
1. 設定後、`保存する` をクリックします。
## ステップ 2 : アプリのビルド
1. Monaca クラウド IDE のメニューから、`ビルド → PWA アプリのビルド` を選択します。
2. 目的に応じたビルドの種類を選択して、`ビルドを開始する` ボタンをクリックします。
3\. ビルドが完了するまで、しばらく待ちます。ビルドが成功した場合には、次のような画面が表示されます。ビルドの完了後、ダウンロードやデプロイサービスでの配布ができます。
参考ページ
* [Firebase への配信](/products_guide/monaca_ide/monaca_ci/firebase)
# ビルド環境の設定
アプリをビルドする際の環境情報を設定できます。 設定内容は、プロジェクト単位で保持されます。
## ビルド環境の変更
1. Monaca クラウド IDE のメニューから、 `ビルド → ビルド環境の設定` を選択します。
2. アプリビルド時に利用する環境情報を設定します。
3. 設定後、 `保存する`をクリックします。設定内容はプロジェクトごとに保持されます。
# ビルド履歴一覧
Monaca クラウドサービスでアプリのビルド ( ローカル環境用の開発ツールから、または、クラウド IDE 上で直接 ) を行うたびに、Monaca 側には、ビルド結果の履歴が保存されます。\[ ビルド結果一覧 ] では、これらのビルドの処理情報 ( エラーログなど ) を確認できます。
## ビルド履歴一覧
ビルド履歴の確認方法は、次のとおりです。
1. Monaca クラウド IDE のメニューから、`ビルド → ビルド結果一覧`.
2. 次のように、ビルド履歴が表示されます。
3\. ビルド履歴から特定のビルドを削除する場合は、`削除` ボタンをクリックします。ダウンロードを行う場合は、`Download` ボタンをクリックします。ビルドを削除した場合は、元に戻すことはできません。
# 一般的なビルドとアップロードエラー
ビルドまたは App Store Connect にアップロードする際の一般的なエラーのリストを次に示します。
## minSdkVersion
```bash
minSdkVersion 14 cannot be smaller than version 16 declared in library ["library name"]
```
プロジェクトの標準設定と異なる API レベルが必要な Cordova プラグインを使用している可能性があります。この場合、プロジェクトの最小 API レベルの設定は 14（`minSdkVersion = 14`）になります。Cordova プラグインでは、API レベル 16 以上が必要なため、Cordova プラグインが要求している API レベル より低い `android-minSdkVersion` が設定されています。
このエラーに対応する場合は、下記のように `config.xml` ファイルに `minSdkVersion` の設定を行います。
```bash
```
## Provisioning Profile
```bash
minSdkVersion 14 cannot be smaller than version 16 declared in library ["library name"]
```
Cordova 6.5 以降のプロジェクトを使用している場合、 `MomacaBackend` プラグイン または `NIFCloudMB` プラグイン」を使用する場合は、ビルド時に iOS プッシュ通知に必要な設定を行う必要があります。
このエラーに対応する場合は、下記のプッシュ通知に必要な設定を行う必要があります。
* プッシュ通知用の App ID
* プッシュ通知用の証明書
* プッシュ通知用のプロビジョニングプロファイル
```bash
Provisioning profile "profile_xxx" has app ID "com.example.xxx", which does not match the bundle ID "com.example.zzz".
```
対象プロジェクトに設定されている App ID とバンドル ID が一致していません。App ID の設定がプロビジョニングプロファイルの設定と一致しているか確認してください。
```bash
Code Sign error: No matching provisioning profiles found
```
iOS ビルド設定に問題がある可能性があります。ビルド時に使用している「App ID」「証明書」「プロビジョニングプロファイル」に問題がないか確認してください。
```bash
Error code 65 for command: xcodebuild
```
プロビジョニングプロファイルに設定されているバンドルIDとプロジェクトの App ID が一致していない等の iOS ビルド設定に問題がある可能性があります。ビルド時に使用している「App ID」「証明書」「プロビジョニングプロファイル」に問題がないか確認してください。
## アプリケーション名
```bash
ld: framework not found Pods_____
clang: error: linker command failed with exit code 1 (use -v to see invocation)
```
アプリ設定画面の `アプリケーション名` に `日本語` が設定されている可能性があります。
アプリ設定画面のアプリケーション名に日本語が設定されいる場合は、アプリ設定画面のアプリケーション名に `アルファベット` のアプリケーション名を設定し、`config.xml` にある `name` タグの `short` 属性の値に `日本語のアプリケーション名` を設定してください。
```bash
Minimum Template
```
```bash
CordovaError: Error validating project name. Project name must not begin with a number
```
アプリケーション名の先頭に `数字` が設定されている可能性があります。
アプリ設定画面の `アプリケーション名` に設定されている値の先頭が数字になっていないか確認していください。
## スプラッシュ スクリーン
```bash
AAPT: libpng error: Not a PNG file
```
このエラーは、次のようなスプラッシュ画面イメージファイルに関連するエラーです。
* PNG 形式以外のファイル形式が使用されている可能性があります。現在、Monaca
ではスプラッシュ画面イメージとして PNG 形式ファイルのみがサポートされています。
* スプラッシュ画像ファイルに問題がある可能性があります。
* 9-patch 形式の画像を使用している場合は、9-patch 画像に問題がないか確認してください。
## プロジェクト ファイル
```bash
Process 'command '/data/android-sdk/build-tools/23.0.3/aapt'' finished with non-zero exit value 1
```
このエラーは、プロジェクトファイルに無効なファイル名が設定されている可能性があります。 対象プロジェクト内のリソースファイル名に日本語等の 2 バイト文字や特殊文字が使用されていないか確認してください。
## メモリー利用超過
Androidビルドが次のエラーで失敗した場合、メモリの利用が上限値を超えている可能性があります。
[こちらのプラグイン](/reference/power_plugins/android_build_mem)を利用し、Androidビルドメモリサイズを変更してください。
```
java.lang.OutOfMemoryError (no error message)
```
## Android キーストア
```bash
Failed to read key keyname from store "/tmp/monaca/xxxxxxxxxxx/output/etc/keystore.private": Cannot recover key
```
キーストアからキー名を読み取ることができませんでした。 以下を確認してください。
* Android キーストア設定で、正しいキーストアが設定されているか確認してください。
* ビルドの際、選択したエイリアスのパスワードが、正しく入力されているか確認してください。
## App Store Connect
### Apple ID / パスワードのエラー
```
Unable to validate your application. Your Apple ID or password was entered incorrectly.
```
App Store Connect へのアップロード時に使用される`Apple ID` または `Password` が、正しく入力されていない可能性があります。 `Apple ID` と `Password` が、正しく入力されている確認してください。
### 2 ファクタ認証
```bash
Unable to validate your application. Please sign in with an app-specific password. You can create one at appleid.apple.com.
```
App Store Connect へアップロードする際に使用している「Apple ID」が、2 ファクタ認証を利用している場合は、App 用パスワードをお試しください。詳しくは [App 用パスワードを使う](https://support.apple.com/ja-jp/HT204397) を参照してください。
### App Store Connectへのアプリ未登録
```bash
No suitable application records were found. Verify your bundle identifier 'com.example.xxx' is correct.
```
App Store Connect に「com.example.xxx」アプリが登録されているか確認してください。
### バージョン番号の重複
```bash
There already exists a binary upload with build version '1.0.0' for train '1.0.0'
```
App Store Connect に同じビルドバージョンのアプリがあります。対象プロジェクトのビルドバージョンを確認してください。
### 不正なバージョン番号
```bash
The value for key CFBundleShortVersionString [0.0.1] in the Info.plist file must contain a higher version than that of the previously approved version [1.0.0]
```
対象アプリのバージョン番号は、最後に認定されたアプリよりも低くなっています。 より高いバージョン番号を設定してビルドを行なってください。
### サポートデバイス数
```bash
This bundle does not support one or more of the devices supported by the previous app. This bundle does not support one or more of the devices supported by the previous app version. Your app update must continue to support all devices previously supported. You declare supported devices in Xcode with the Targeted Device Family build setting.
```
iOS アプリを更新する場合、サポートするデバイスの数を減らすことはできません。 iOS アプリ設定の対象デバイス設定を確認してください。
### 不正なアイコン
```bash
Invalid App Store Icon. The App Store Icon in the asset catalog in 'xxx.app' can't be transparent nor contain an alpha channel.
```
App Store アイコンが透過されているかアルファチャネルが含まれている可能性があります。App Store アイコンを確認してください。
### 古いXcodeバージョン
```bash
SDK Version Issue. This app was built with the iOS 10.3 SDK. All iOS apps submitted to the App Store must be built with the iOS 11 SDK or later, included in Xcode 9 or later. Further, starting March 2019, all iOS apps submitted to the App Store must be built with the iOS 12.1 SDK or later, included in Xcode 10.1 or later.
```
対象プロジェクトが Xcode 9 以降でビルドされていません。対象プロジェクトが Cordova 7.1 未満の場合は、Cordova 7.1 へアップグレードしてください。\
2019年3月からは、Xcode 10.1 でビルドをする必要があります。[ビルド環境の設定](/products_guide/monaca_ide/build/build_env_settings) を参考に、対象プロジェクトの Xcode バージョンを `10.1` に設定してビルドを行なってください。
### バージョン番号 エラー
```
ERROR ITMS-90060: "This bundle is invalid. The value for key CFBundleShortVersionString 'x.x.x.x' in the Info.plist file must be a period-separated list of at most three non-negative integers.
```
iOSにおいては、バージョン番号は3桁となります。4桁以上を指定している場合は、上記のエラーが発生します。
## Crosswalk プラグイン
```bash
Build Error: Error: App File not found. null
```
このエラーは、Cordova 6.2 プロジェクトで `Crosswalk WebView Engine` プラグイン v2.2.0 以降が有効になっている可能性があります。 Cordova 6.2 プロジェクトで `Crosswalk WebView Engine` プラグインを使用している場合は、`v2.1.0` 以下を使用してください。
Cordova 6.2 プロジェクトでは、`Crosswalk WebView Engine` プラグインの以下の設定で正常にビルドができることを確認しています。
1. プラグインバージョン: 1.7.2 / Crosswalk のバージョン (標準設定)
2. プラグインバージョン: 2.1.0 / Crosswalk のバージョン: 21.51.546.7
# 配布方法
{% content-ref url="/pages/-MfWrbE2DlZd8JLC\_qo8" %}
[App Store での配布](/products_guide/monaca_ide/deploy/appstore)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbHwBPJ7wS7KVBYF" %}
[Google Play での配布](/products_guide/monaca_ide/deploy/google_play)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbIagRZQevwRl5Rg" %}
[公式ストア経由以外での配布](/products_guide/monaca_ide/deploy/non_market_deploy)
{% endcontent-ref %}
# App Store での配布
App Store で iOS アプリを配布するためには、Apple 社による審査を通過する必要があります。審査のためにアプリを提出するときには、 App Store Connect を使用します。App Store Connect 上では、アプリの提出に必要な手続き ( アプリ情報の登録など ) を含む、さまざまな処理・操作を行います。なお、審査では、App Store での配布基準に適合しているかが審査されます。アプリの提出後、審査終了までには、通常、2 週間程度かかります。
{% content-ref url="/pages/-MfWrbE1mZ9GdB3\_yZUa" %}
[App Store Connect ガイド](/products_guide/monaca_ide/deploy/appstore/app_store_connect)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbIM8oVuH0spc\_yh" %}
[iOS アプリ アップロード機能](/products_guide/monaca_ide/deploy/appstore/app_submission)
{% endcontent-ref %}
# App Store Connect ガイド
App Store にアプリを提出する場合には、App Store Connect を使用します。ここでは、その使用方法を解説します。
## 事前準備
[Apple Developer Program](https://developer.apple.com/programs/ios/) の [Team Agent account](https://developer.apple.com/support/roles/) が必要になります。
## アプリの登録
次に手順に従い、App Store Connect へアプリを登録します。
1\. チームエージェントのアカウントを使用して、[App Store Connect](https://appstoreconnect.apple.com/) にログインします。
2\. `マイ App` を選択します。
3\. **`+ → 新規 App`**を選択します。
4\. アプリ情報を入力します。
| データ | 説明 |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| プラットフォーム | アプリのプラットフォームを選択します。 |
| 名前 | App Store で表示されるアプリ名を入力します。255 文字まで入力できます。 |
| プライマリ言語 | デフォルトの言語を選択します。 |
| バンドル ID | バンドル ID を選択します。バンドル ID には、Explicit App ID または Wildcard App ID を使用します。Wildcard App ID を使用する場合には、バンドル ID のサフィックスも指定します。Explicit App ID を使用する場合には、アプリに使用している バンドル ID と同じものを使用します。 |
| バンドル ID のサフィックス | バンドル ID の選択後、\[ バンドル ID のサフィックス ] 項目が表示されます。バンドル ID のサフィックスとは、Wildcard App ID をバンドル ID に指定した場合、バンドル ID のプロパティに付記する文字列です。バンドル ID は、このサフィックスと組み合わせて構成されます ( アプリに使用されている バンドル ID と同じものになります )。 |
| SKU | アプリを識別するためのコード名を入力します。内容に制限はありませんが、アプリを一意に識別できる ID にします。 |
5\. `作成`ボタンをクリックします。次に、\[ App 情報 ] ページに遷移します。
6\. \[ App 情報 ] ページ上で、アプリの \[ カテゴリ ] を適宜選択して、`保存`ボタンをクリックします。
7\. `価格および配信状況` ページに移動して、必要な情報 ( 価格表、配信地域、割引設定など ) を設定し、 `Save`ボタンをクリックします。
8\. `提出準備中` へ移動して、次の情報を入力します。
* App ビデオプレビューとスクリーンショット (最低限 1 つ、スクリーンショットが必要)
* 説明
* キーワード
* サポート URL
* App アイコン
* Copyright
* 連絡先情報
9\. 設定後、 `保存`ボタンをクリックします。
## アプリのアップロード
Monaca では、Monaca クラウド IDEから App Store Connect へアプリをアップロードできる [iOS アプリ アップロード機能](/products_guide/monaca_ide/deploy/appstore/app_submission) を提供しています。
Monaca 提供のアップロード機能以外に、[Transporter](https://apps.apple.com/jp/app/transporter/id1450874784?mt=12) や Xcode に含まれる `altool` を使用して、App Store Connect へアプリをアップロードすることができます。
**altool 使用例**
```bash
xcrun altool --upload-app -f file -u username -p password
```
altool については、[altoolの使用方法（英語）](https://help.apple.com/asc/appsaltool/) を参照してください。
{% hint style="info" %}
バージョンが異なる同一アプリをアップロードする場合、ファイル内のバージョン情報を、対応するバージョンに変更しておく必要があります。それ以外の場合、アップロードが失敗します。
{% endhint %}
## アップロード後に行うアプリの設定
App Store Connect へアプリをアップロードした後、App Store へ提出する 「 ビルド 」 を選択します。次の手順に従います。
1\. App Store Connect 上の `提出準備中` へ移動して、\[ ビルド ] 項目へ行き、 `+`をクリックします。
2\. 対象のビルドを選択して、`終了`ボタンをクリックします。
3\. `保存する`ボタンをクリックします。
## アプリの提出
ここまでの手順で、申請に必要な設定が完了しました。次は、申請に向け、アプリを実際に提出します。
1. App Store Connect 上の `提出準備中` へ移動します。
2. `レビュー審査のために送信`をクリックします。
アプリの登録申請後、Apple による審査が行われます。この過程では、App Store での配布基準に適合しているかが審査されます。レビューには、2 週間ほど通常かかります。
## アプリの配布
審査の通過後、App Store 上にて、アプリの配布が開始されます。
# iOS アプリ アップロード機能
{% hint style="info" %}
iOS アプリ アップロード機能を使用するためには、対応するプランへの加入が必要です。詳細は、[ こちら ](https://ja.monaca.io/pricing.html)をご確認ください。
{% endhint %}
Monaca 提供のアップロード機能を使用すれば、Monaca クラウド IDE から App Store Connect に、アプリをアップロードできます。
手順は、次のとおりです。
1\. リリースビルド版のアプリを Monaca 上で作成します。詳細は、[iOS アプリのビルド](/products_guide/monaca_ide/build/ios/build_ios) をご確認ください。
2\. リリースビルド版アプリの作成後、次のページが表示されます。次に、`AppStore` ボタン ( 下のスクリーンショットの赤枠部分 ) をクリックします。
{% hint style="info" %}
プロジェクトを他のメンバーと共有している場合には、プロジェクトのオーナーだけが iOS アプリ アップロード機能を使用できます。
{% endhint %}
3\. アプリのアップロード用のウィンドウが表示されます。`次へ`をクリックします。
4\. 有効な Apple ID 情報を入力して、`次へ`をクリックします。
パスワードには、`App 用パスワード` を入力します。\
App 用パスワードの取得方法については、[こちら ](https://support.apple.com/ja-jp/HT204397)をご確認ください。
5\. App Store Connect 上でアプリの登録を事前に行っておく必要があります。詳細は、[こちら](/products_guide/monaca_ide/deploy/appstore/app_store_connect#apurino) をご確認ください。ここでは、登録済みであることを前提として、`App Store Connect にアプリ情報を登録しました。` にチェックを入れます。次に、`アップロード`をクリックします。
6\. 課金が必要なプランの場合は、次の画面が表示されます。`課金する`をクリックします。
7\. \[ 6 ] の課金処理が完了すると、次の画面が表示されます。`アップロード`をクリックします。
8\. アップロードが完了するまで、しばらく待ちます。
{% hint style="info" %}
バージョンが異なる同一アプリをアップロードする場合、ファイル内のバージョン情報を、対応するバージョンに変更しておく必要があります。それ以外の場合、アップロードが失敗します。
{% endhint %}
9\. アップロード完了後、次のページが表示されます。App Store Connect 上にアプリが表示されるまでには、しばらく時間がかかる場合があります。
{% hint style="info" %}
App Store Connect へのアップロードの際に、Apple 側でエラーを出力する場合があります ( アカウントに登録しているメールアドレス宛にもエラー通知が送信されます )。その場合、エラー内容を確認してください。エラーの解消後、再度アプリをアップロードします。
{% endhint %}
10\. これで、アプリのアップロードが完了しました。\
この後、App Store Connect 上で申請に向けた手続きがあります。詳細は、[アップロード後に行うアプリの設定](/products_guide/monaca_ide/deploy/appstore/app_store_connect#appurdoniuapurino) をご確認ください。
{% hint style="danger" %}
アクティベーション コードを使用してアップロード機能を使用する場合には、アップグレード後のプランが、この機能をサポートしている必要があります。不明な点がご質問がございましたら、こちらの[ お問い合わせ ](https://ja.monaca.io/service/index.html)までご連絡ください。
{% endhint %}
# Google Play での配布
## 事前準備
Google Play ストアでアプリを配布するためには、 *Google Play Developer Console* アカウントに登録しておく必要があります。ディベロッパー登録料は、`25 ドル` です ( 定期的な更新はありません )。 登録処理が完了するまで、`2` 日ほど要します。登録は、[ディベロッパー登録](https://play.google.com/apps/publish/) から行えます。
{% hint style="info" %}
有料アプリを配布する場合は、Google Payments Merchant Center アカウントにも登録します。登録に関しては、 [こちらのリンク ](https://support.google.com/googleplay/android-developer/answer/answer.py?hl=en\&answer=2972701)をご確認ください。
{% endhint %}
## リリースビルドのアプリを作成
リリースビルド版のアプリをビルドする場合、 [Android アプリのビルド](/products_guide/monaca_ide/build/build_android) を参照してください。ビルドの完了後、アプリ ( apk ファイル ) をダウンロードします。
## Google Play へのアプリの登録
1\. [Google Play Developer Console](https://play.google.com/apps/publish/) へ行き、ログインします。
2\. `アプリの作成`ボタンをクリックします。
3\. デフォルトの言語を選択し、アプリのタイトルを入力します。次に、`作成`をクリックします。 その後、 *ストアの掲載情報* ページへ移動します。
4\. このページでは、以下の必要な情報を入力し、`未公開版を保存`をクリックする必要があります。
| データ | 説明 |
| ------------ | --------------------------------------------------------------------------------------- |
| 簡単な説明/簡潔な概要 | Google Play で表示されるアプリの説明です。 `80` 文字まで入力できます。 |
| 詳細な説明 | Google Play で表示されるアプリの説明です。`4000` 文字まで入力できます。 |
| スクリーンショット | 最低限 2 つのスクリーンショットが必要です。また、最大 8 つのスクリーンショットをタイプごとにアップロードできます。 |
| 高解像度アイコン | 高解像度のアイコンをアップロードします ( `512 x 512` の PNG ファイル )。 |
| プロモーション画像 | プロモーション用の画像をアップロードします ( `1024 x 500` の PNG ファイル )。 |
| アプリのタイプ | `アプリ` または `ゲーム` を選択できます。Google Play では、この 2 種類が主です。 |
| カテゴリ/カテゴリー | アプリのカテゴリーを選択します。 |
| コンテンツ レーティング | 対象ユーザーを指定します。 |
| 連絡先情報 | アプリに関する問い合わせ窓口を、最低 1 つ登録します。Web サイト、メール、電話番号を、窓口として指定できます。この情報は、Google Play 上で表示されます。 |
| プライバシーポリシー | プライバシー ポリシーを掲載したページ ( URL ) がある場合に入力します。ない場合には、`今回はプライバシーポリシーの URL を送信しない` にチェックを入れます。 |
5*. コンテンツのレーティング* に移動し、`次へ`をクリックします。
6\. メールアドレスを入力し、アプリカテゴリを選択してください。次に、選択したアプリカテゴリに関連する質問に答えるように求められます。
7\. `アンケートを保存`と `レーティングを算定`をクリックします。
8\. 評価情報を確認し、`レーティングを適用`クリックします。
9\. `価格と販売 / 配布地域` に移動します。 このページでは、アプリの価格と在庫状況に関するさまざまな質問を完了するように求められます。この時点で、アプリのリリース準備のために必要な情報が整います。
## アプリのリリース
このセクションでは、APK ファイルのアップロードを開始し、Play ストアに送信する前にアプリのリリース情報を設定します。
1\. `アプリのリリース` に移動します。 このページでは、テスト用の APK ファイル ( ベータ版とアルファ版 ) と製品版をアップロードできます。
2\. `製品版` 項目で、`製品版を管理`をクリックします。次に、`リリースを作成`をクリックします。
3\. 次に、以下が必要になります。
* `Google Play App Signing ( アプリの署名 )` を完了します。
* APK ファイルを追加します。
* リリース名（リリースバージョン）を設定します。
* このリリースの新機能を記載します。
4\. `保存`と `確認`をクリックします。
5\. アプリのリリース情報を確認し、 `製品版として公開を開始`ボタンをクリックしてアプリを Play ストアに送信します。アプリの設定に問題がある場合は、アプリを送信することはできませんのでご注意ください。必要な設定が完了していない場合は、`製品版として公開を開始`ボタンをクリックすることはできません。
参考ページ:
* [Android アプリのビルド](/products_guide/monaca_ide/build/build_android)
* [App Store での配布](/products_guide/monaca_ide/deploy/appstore)
* [公式ストア経由以外での配布](/products_guide/monaca_ide/deploy/non_market_deploy)
# 公式ストア経由以外での配布
## iOS アプリの場合
App Store を経由せずに、アプリの配布を行う場合があります。次のような、2 つのシナリオが考えられます。
1. 検証目的の場合 : アプリのリリース前には、さまざまな検証を行います。このため、複数のテストユーザーに、AppStore経由以外の方法でアプリを配布できる方が、都合がよい場合があります。
2. 社内 ( In-house ) での使用を前提にしたアプリの場合 : 企業または組織内での使用目的で作成されたアプリの場合、App Store経由以外の方法でアプリを配布できる方が、都合がよい場合があります。
{% hint style="info" %}
社内( In-house ) だけの配布でも、[ Apple Developer Enterprise Program ](https://developer.apple.com/programs/enterprise/)アカウントに登録する必要があります。
{% endhint %}
Apple Developer Program と Apple Developer Enterprise Program の比較表を、次に記します。
| | Apple Developer Program | App Developer Enterprise Program |
| ------------------------------------------- | ----------------------- | -------------------------------- |
| ベータ版リリースの OS への配布 | 可 | 可 |
| Ad Hoc 配布 | 可 | 可 |
| App Store での配布 | 可 | 不可 |
| 社内( In-house ) 専用の配布 | 不可 | 可 |
| TestFlight Beta Testing ( Beta 版アプリの検証アプリ ) | 可 | 不可 |
| チームの管理 | 不可 | 可 |
| アプリ解析 | 可 | 不可 |
各プログラムの比較に関しては、[こちら](https://developer.apple.com/support/compare-memberships/) をご確認ください。
プレリリース版アプリの配布方法 ( 検証目的 ) は、2 通りあります。
* App Store Connect を使用 : iOS Developer Programアカウントの登録およびアプリの審査 ( Apple Review )が、事前に必要です。
* Ad Hoc 配布 : iOS Developer Program または iOS Developer Enterprise Program アカウントが必要です。アプリの審査 ( Apple Review )は、必要ありません。
社内 ( In-house ) 配布は、限定的 ( 社員・スタッフ向け ) な、iOS アプリの配布時に使用されます。この配布形式を使用すれば、業務用のすべての端末に、アプリを配布できます。検証目的で、社外の関係者に配布する場合、または、配布対象の端末を限定する場合には、Ad Hoc 形式で配布します。
Ad Hoc 配布では、Ad Hoc 配布用 プロビジョニング プロファイル を使用して、アプリの配布を行います。登録された端末が対象で、`100` 台まで配布できます。
アプリのインストール方法に関しては、いずれの配布形式でも同じです。プロビジョニング プロファイルはそれぞれ異なります。
App Store 経由以外でアプリを入手した場合、次のいずれかの方法でインストールできます。
### Apple Configurator 2 を使用してインストールする（ Mac のみ ）
1\. App Store から `Apple Configurator 2` をインストールします。
2\. 端末と PC を接続します。
3\. `Apple Configurator 2` を開き、端末を選択します。 端末が表示されない場合は、端末が Mac に正常に接続されていることを確認してください。
4\. `追加`ボタンをクリックし、`App` を選択します。
5\. `自分の Mac から選択`ボタンを選択し、`.ipa` ファイルを参照すると端末ににアプリがインストールされます。
### Xcode を使用したインストール方法
次のように、Xcode 経由で、iOS アプリ ( `.ipa` ファイル ) をインストールできます。
1\. 端末と PC を接続します。
2\. Xcode を開き、**`Window → Devices`**を選択します。
3\. Devices 画面が表示されます。アプリをインストールする端末を選択します。
4\. 右下の Installed Apps に、 `.ipa` ファイルをドラッグ & ドロップします。
### iTunes を使用したインストール方法
{% hint style="info" %}
iTunes 12.7 for Mac では、アプリに大きな変更が行われました。 音楽、映画、テレビ番組、オーディオブック、ポッドキャストの販売に焦点を当てるように iTunes を再設計し、iPhone や iPad 用のアプリを購入するための App Store は廃止されました。そのため、iTunes を使用してiOS アプリ ( `.ipa` ファイル) をインストールすることはできません。
{% endhint %}
1. デバッグビルドまたは Ad Hoc ビルドで、アプリをビルドします。iOS のビルド手順に関しては、 [iOS アプリのビルド](/products_guide/monaca_ide/build/ios/build_ios) をご確認ください。
2. ビルド完了後、 `.ipa` ファイルをダウンロードします。
3. iTunes を開き、`Apps` を選択します。
4. ダウンロードした `.ipa` ファイルを、App 上に、ドラッグ & ドロップします。
5. 端末と iTunes を接続して、ホーム画面上に、アプリの一覧を表示します。
6. 対象アプリの`インストール`ボタンをクリックして、次に、`同期`ボタンをクリックします。次に、例を示します。
### OTA 配布形式でのインストール方法
OTA ( Over-The-Air ) 配布形式であれば、HTTPS 経由でビルド済みアプリをインストールできます。
1. デバッグビルド、Ad Hoc ビルド、または、In-house ビルドでアプリをビルドします。iOS のビルド手順に関しては、 [iOS アプリのビルド](/products_guide/monaca_ide/build/ios/build_ios) をご確認ください。
2. ビルド完了後、 `.ipa` ファイルをダウンロードします。
3. ダウンロード元となるサイトに、 `.ipa` ファイルをアップロードします。
4. ビルド済みアプリ用の `.plist` ファイルを作成します。 `.plist` の内容を、次に記します。
```markup
items
assets
kind
software-package
url
https://www.anysite.com/application/your_app.ipa
metadata
bundle-identifier
com.example.helloworld
bundle-version
1.0.0
kind
software
title
HELLO
```
{% hint style="info" %}
`.plist` ファイル作成時の注意点：
* `.plist` ファイルは、HTTPS プロトコル経由でアクセスできること。
* App ID を使用して、bundle-identifier を更新すること。
* `.ipa` ファイルへのパスを、正しく指定すること。
{% endhint %}
5\. ダウンロード元となるサイトに、 `.plist` ファイルをアップロードします。HTTPS プロトコル経由で、このファイルにアクセスできることを確認します。
6\. アップロードした `.plist` ファイルへのリンクを組み込んだ Web ページを作成します。次の例のように、 `itms-services://` プロトコルも使用します。
```markup
Download
```
7\. 接続準備の完了後、端末上からリンク先にアクセスすると、次のように、アプリのインストールが開始されます。
 
## Android アプリの場合
Google Play ストアや Amazon AppStore などの公式ストアを経由せずに、アプリの配布を行う場合があります。次のような、2 つのシナリオが考えられます。
1. 検証目的 : アプリのリリース前には、さまざまな検証を行います。このため、複数のテストユーザーに、公式ストア経由以外の方法でアプリを配布できる方が、都合がよい場合があります。
2. プライベートでの使用 : 不特定多数への配布を目的とせず、プライベートでアプリを使用します。
### ADB コマンドを使用したインストール方法
ADB ( Android Debug Bridge ) は、コマンド ライン ツールです。このツールを使用して、端末・PC 間で、各種処理を行えます。
事前準備:
* Android SDK を、PC 上にインストールします。
* Android SDK のインストール後、システム環境変数の設定で、ADB へのパスを追加します。
* USB デバッグを有効化します。次に、セキュリティー設定を変更して、Google Play ストアではなく、指定するソースから、アプリ ( 提供元不明のアプリ ) をインストールできるようにします。
ADB コマンドを使用して、ビルド済みアプリをインストールする方法を、次に記します。
1. デバックビルド形式で、アプリをビルドします。Android のビルド手順に関しては、 [Android アプリのビルド](/products_guide/monaca_ide/build/build_android) をご確認ください。
2. ビルド完了後、 `.apk` ファイルをダウンロードします。
3. USB を使用して、PC と端末間を接続します。
4. PC 上で、次のコマンドを実行します。 `.apk` ファイルへのパスは、正しく入力します。
```markup
adb install foo.apk
```
### 直リンクを使用したインストール方法
こちらは、 `.apk` ファイルへの直リンクを使用したインストール方法です。
1. デバックビルド形式で、アプリをビルドします。Android のビルド手順に関しては、 [Android アプリのビルド](/products_guide/monaca_ide/build/build_android) をご確認ください。
2. ビルド完了後、 `.apk` ファイルをダウンロードします。
3. ビルド後にダウンロードしたファイルを、ダウンロード元となるサイトにアップロードします。
4. 端末からアップロードしたファイルへのリンクをクリックして、アプリのインストールを開始します。
{% hint style="info" %}
事前に確認する項目：
* USB デバッグ の有効化。
* セキュリティー設定の変更。 ( Google Play ストアではなく、指定するソースから、提供元不明のアプリをインストールできること )
{% endhint %}
関連項目：
* [iOS アプリのビルド](/products_guide/monaca_ide/build/ios/build_ios)
* [Android アプリのビルド](/products_guide/monaca_ide/build/build_android)
* [Google Play での配布](/products_guide/monaca_ide/deploy/google_play)
* [App Store での配布](/products_guide/monaca_ide/deploy/appstore)
# パッケージダウンロード機能
この章では、パッケージダウンロード機能について説明します。
## パッケージダウンロード機能とは
パッケージダウンロード機能は、モバイル端末から使用します。\
ログインユーザーが行ったビルド結果を簡単にモバイル端末にインストールするための機能です。\
ログインユーザーが所有する全てのプロジェクトのビルド結果を横断的に管理できます。
### MonacaクラウドIDEでログインQRコードを表示
ご使用のPCからMonacaクラウドIDEの[ダッシュボード](https://console.monaca.mobi/dashboard)にアクセスします。
ダッシュボードヘッダーの「パッケージダウンロード」をクリックします。
「パッケージダウンロード」をクリック
表示されるダイアログのQRコードを、モバイル端末のカメラ機能を使って読み取ります。QRコードは1分間のみ有効です。
QRコードを端末からスキャン
### モバイル端末からアクセス
QRコードをモバイル端末で読み取ると、Monacaにログインします。\
ログイン時に使用したQRコードは、ログイン後は無効となります。
端末のプラットフォームに応じてビルド結果が表示されます。\
iOS端末にはiOSビルド結果、Android端末にはAndroidビルド結果のみが表示されます。
## ビルド結果画面の絞り込み
ビルド結果画面の絞り込み条件を変更できます。\
画面ヘッダーのフィルターアイコンをタップしてください。
 
下記条件で絞り込みを行います。条件を変更して「適用」ボタンをタップしてください。
| 項目 | 説明 |
| ------ | ------------------------------------------------------------------------------------------------------------------ |
| プロジェクト | プロジェクトを選択します |
| ビルドタイプ | iOS:
デバッグ/デバッガー/アドホック/In House
Android:
デバッグ/デバッガー/リリース
|
| 日付 | 1週間以内/3日以内/1日以内 |
## ビルド結果のインストール
ビルド結果のインストールアイコンをタップします。ビルド結果を端末にインストールします。\
### iOSの場合
インストールが始まり、ホーム画面にアイコンが作成されます。
### Androidの場合
apkファイルのダウンロードが始まります。ダウンロード後、apkファイルを開いてください。
## ビルド結果一覧をリフレッシュ
ビルド結果画面の更新は、画面ヘッダーのリフレッシュアイコンをタップしてください。
## パッケージダウンロード機能をホーム画面に追加
パッケージダウンロード機能に簡単にアクセスできるように、モバイルデバイスのホーム画面に追加できます。
### **iOSの場合 (Safari)**
Safariの共有ボタンをタップします。
 
「追加」ボタンをタップします。
ホーム画面に「Monaca App」が追加されます。
 
### **Androidの場合 (Chrome)**
Chromeのメニューを開き、「ホーム画面に追加」をタップします。
 
「追加」ボタンをタップします。
ホーム画面に「Monaca App」が追加されます。
 
# チュートリアル
Monaca クラウド IDEは、ブラウザベースの開発環境をサービスとして提供します。 あなたの Web ブラウザから、あなたの アプリ開発はすべてセットアップなしで完了します。 [Monaca デバッガー](/products_guide/debugger) に加えて、Live プレビュー (Monaca クラウド IDE の機能）を使用すると、開発中のアプリの進捗状況を簡単に確認することができます。
このチュートリアルを始める前に、下記が必要になります。
* \[オプション] スマートデバイス ( iOS または Android 端末 )。端末上で検証を行う場合には必要となります。
{% content-ref url="/pages/-MfWrbJekAfuWiLvAVHN" %}
[パート 1 : プロジェクトの作成](/tutorials/monaca_ide/starting_project)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbNjuoWPWSqJFTPQ" %}
[パート 2 : Monaca クラウド IDE と Monaca デバッガーとの連携](/tutorials/monaca_ide/testing_debugging)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbLeZBxQFeh1BsL\_" %}
[パート 3 : Monaca アプリのビルド](/tutorials/monaca_ide/building_app)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbMSu79qfhyi1L2W" %}
[パート 4 : Monaca アプリの配布申請](/tutorials/monaca_ide/publishing_app)
{% endcontent-ref %}
# 新しい Monaca クラウド IDE
## 概要
新しい Monaca クラウド IDE は、[code-server](https://github.com/coder/code-server)で構成されています。code-server を利用することで、VSCode（Visual Studio Code）を使用してアプリ開発を行う事ができます。
このガイドでは、新しい Monaca クラウド IDE で利用できる機能について説明します。
* [IDE バージョン間の切り替え](/products_guide/shii-monaca-kuraudo-ide/ide-bjonnorie)
* [言語の切り替え](/products_guide/shii-monaca-kuraudo-ide/norie)
* [プロジェクト プレビューア](/products_guide/shii-monaca-kuraudo-ide/purojekuto-purebya)
* [IDE ターミナル](/products_guide/shii-monaca-kuraudo-ide/ide-tminaru)
* [基本的なファイル操作](/products_guide/shii-monaca-kuraudo-ide/nafairu)
* [拡張機能](/products_guide/shii-monaca-kuraudo-ide/kuo-zhang-ji-neng)
* [ソース管理](/products_guide/shii-monaca-kuraudo-ide/ssu)
# IDE バージョン間の切り替え
このガイドでは、新しい IDE バージョンと旧 IDE バージョンを切り替える方法について説明します。
***
### 新しい IDE への切り替え
新しい IDE への切り替は、次の通りです。
1. **プロジェクトを開く**
* プロジェクトを選択します。
* **クラウドIDEで開く** をクリックして、現在の IDE でプロジェクトを開きます。
2. **新しいIDEを試す** リンクを確認する
* 現在の IDE で、**新しいIDEを試す** リンクを確認します。
3. **新しいIDEを試すをクリックする**
* リンクをクリックして、新しい IDE への切り替えを開始します。
4. **切り替えを確認する**
* **切り替え** ボタンを含む確認ダイアログが表示されます。
* **切り替え** をクリックして続行します。
5. **新しい IDE の表示**
* 新しい IDE の設定が完了して起動するまで、少し時間がかかります。
* 設定が完了すると、新しい IDE インターフェイスが表示されます。
***
### 旧 IDE への切り替え
旧 IDE への切り替は、次の通りです。
1. **プロジェクトを開く**
* 開きたいプロジェクトを選択します。
* **クラウドIDEで開く** をクリックして、新しい IDE でプロジェクトを開きます。
* **注:** ボタンの横にドロップダウン アイコンは、ありません。
2. **コマンド パレットを開く**
* 左下隅にある設定アイコンをクリックします。
* メニューから **コマンド パレット...** を選択します。
3. **Switch コマンドを検索**
* コマンド パレットの検索ボックスに**Monaca: Switch Old IDE**と入力します。
* **Enter** を押すか、関連する検索結果をクリックします。
4. **スイッチの確認**
* **OK** ボタンを含む確認ダイアログが表示されます。
* 続行するには、**OK** をクリックします。
5. **現在の IDE タブを閉じる**
* 現在の IDE タブを閉じるように求めるプロンプトが表示されます。**OK** をクリックしてダイアログを閉じます。
* タブを手動で閉じます。
6. **旧 IDE の表示**
* 旧 IDE が新しいタブで開きます。
***
### 注記
* IDE のバージョンを切り替えても、ファイルやプロジェクトには影響しません。
* 一部の機能は、旧 IDE と新しい IDE で異なる場合があります。
* 問題が発生した場合は、サポートにお問い合わせください。
# 言語の切り替え
## 言語の切り替え
このガイドでは、IDE でサポートされている言語を切り替える方法について説明します。現在、IDE は、 **英語** と **日本語** をサポートしています。
***
### 前提条件
デフォルトでは、新しい IDE は **英語** 言語のみをサポートします。**日本語** を使用するには、**日本語言語パック** 拡張機能をインストールする必要があります。このインストールは 1 回だけ必要です。インストール後は、必要に応じて英語と日本語を切り替えることができます。
***
### 日本語言語拡張
新しい IDE で初めてプロジェクトを開くと、システムは **日本語言語パック** がインストールされているかどうかを確認します。インストールされていない場合は、下のスクリーンショットに示すように、システムが自動的にインストールを試みます。
インストール ログは、 **ターミナル** タブで確認できます。
インストールが成功すると、右下隅にポップアップ ダイアログが表示されます。**Change Language and Restart** をクリックして IDE を再読み込みし、日本語の言語設定を適用します。
### 注記
* **Freeプラン** では、IDE を開くたびに日本語言語パックがインストールされます。
* **有料プラン** では、拡張機能は 1 回インストールされ、ユーザーのホーム ディレクトリに保存されます。
***
### 手動インストール
自動インストールが失敗した場合は、次の手順に従って **日本語言語パック** を手動でインストールしてください。
1. **拡張機能ビューを開く**
* アクティビティバーの **拡張機能** アイコンをクリックします。
* インストールされている拡張機能のリストが表示されます。デフォルトでは、**Monaca 拡張機能** がリストに表示されます。
2. **日本語言語拡張機能を検索**
* **日本語言語パック** がリストされていない場合は、検索バーを使用して次のように入力します:
* **Japanese Language Pack for Visual Studio Code**。
1. **拡張機能をインストール**
* **Install** ボタンをクリックして拡張機能をインストールします。
* インストールが完了すると (手動または自動)、日本語言語パックが**インストールされた拡張機能リスト** の下に表示されます。
* 拡張機能の詳細ページに **アンインストール** ボタンが表示されていれば、インストール成功です。
***
### 言語の切り替え
#### 英語から日本語への切り替え
1. **コマンド パレットを開く**
* 左下隅の **設定** アイコンをクリックします。
* メニューから **Command Palette...** を選択します。
2. **言語構成コマンドを検索**
* **コマンド パレット** 検索ボックスに**Configure Display Language**と入力します。
* **Enter** を押すか、関連する検索結果をクリックします。
3. **日本語 (ja)を選択します**
4. **IDE を再起動します**
* **Restart** をクリックして言語の変更を適用します。
5. **IDE が再読み込みされ、日本語に切り替わります。**
***
#### 日本語から英語への切り替え
1. **コマンド パレットを開きます**
* 左下隅にある **設定** アイコンをクリックします。
* メニューから\*\*コマンドパレット...\*\*を選択します。
2. **言語構成コマンドを検索**
* **コマンド パレット** 検索ボックスに**表示言語を構成する**と入力します。
* **Enter** を押すか、関連する検索結果をクリックします。
3. **英語（en）を選択します**
4. **IDE を再起動します**
* **再起動** をクリックして言語の変更を適用します。
5. **IDE が再読み込みされ、英語に切り替わります。**
***
### 注記
* 日本語に切り替える前に、日本語言語パックをインストールする必要があります。
* **Freeプラン** では、新しい IDE を開くたびに言語パックを再インストールする必要があります。
* **有料プラン** では、拡張機能を永続的にインストールしたままにできます。
* 問題が発生した場合は、サポートにお問い合わせください。
# プロジェクト プレビューア
## プロジェクト プレビューア
このガイドでは、プロジェクト プレビューアのサイズ変更、位置変更、開く、閉じるなどの管理方法について説明します。
***
### レイアウト
デフォルトでは、プレビューアはエディター グループの **右側** に表示されます。
#### プレビューアのサイズ変更
プレビューアのサイズを変更するには、カーソルをパネルの**左端**に移動します。クリックして**左または右**にドラッグし、サイズを調整します。
#### プレビューアの移動
プレビューアは、エディター グループ内の任意の場所に再配置できます。たとえば、ファイル タブ (例: `index.html`) の横に移動できます。
1. **プレビュー** タブをクリックします。
2. マウス ボタンを押したまま、目的の位置までドラッグします。*(この例では、ファイル タブの横に移動します。)*
位置を変更すると、次のようになります。
***
### プレビューアの起動と終了
#### プレビューアの終了
プレビューアが不要になった場合は、**X** アイコンをクリックして閉じることができます。
#### プレビューアを再度開く
プレビューアを再度開く方法は、次の通りです。
1. **コマンド パレット** を開きます。
2. **Monaca: Open Preview** を検索して選択します。
3. プレビュー タブがエディター グループに復元されます。
***
### 注記
* プレビューアは、ソース コードを変更すると、プロジェクトのプレビュー コンテンツを **表示** し、**ライブ リロード** します。
* プレビューアがコンテンツを正しく表示しない、またはエラーが発生する場合は、IDE の下部にある **プレビュー ターミナル** タブを確認してください。
* プレビューアの動作は、プロジェクトによって異なる場合があります。
# IDE ターミナル
## IDE ターミナル
IDE には、**プレビュー ターミナル** と **ターミナル** の 2 種類のターミナルが用意されています。
***
### プレビュー ターミナル
**プレビュー ターミナル** は、IDE の起動時に自動的に実行される特殊なターミナルです。コンテンツをプレビューするための開発サーバーを作成するためにプロジェクトで定義されている **`monaca:preview`** スクリプトを実行します。
#### プレビュー ターミナルの識別
* **プレビュー ターミナル** は、タイトルの **monaca:preview** によって標準ターミナルと区別できます。
* **プレビュー ターミナル** は、**プレビュー ユーザー** にコンテンツを提供するために不可欠なため、実行したままにしておくことをお勧めします。
**プレビュー ターミナル** が誤って閉じられたり、起動に失敗したりした場合は、次の手順に従って再度開くことができます。
1. **コマンドパレット**を開きます。
2. **Monaca: Open Previewer Terminal**を検索して選択します。
***
標準の **ターミナル** を使用すると、コマンドを実行し、プロジェクト環境を管理できます。
#### 新しいターミナルの作成
新しいターミナルを作成するには:
1. ターミナル パネルの **"+"** アイコンをクリックします。
2. 既存の **プレビュー ターミナル** の横に新しい **Bash ターミナル** が作成されます。
#### 初期設定
* 新しいターミナルを開くと、自動的に **`.monacarc`** が実行され、Node.js バージョンの設定などの環境が設定されます。
* このターミナルでは、標準の **Bash コマンド** を実行できます。*(例: `ls` コマンドを実行して、プロジェクトのファイルとディレクトリを一覧表示します。)*
#### ターミナルの削除
ターミナルを閉じるには:
1. ターミナルのタイトル (例: **Bash**) にマウスを移動します。
2. **削除 (ゴミ箱)** アイコンをクリックします。
***
### 注記
* Freeプランのユーザーは、端末の使用時に一定の制限を受ける場合があります。
# 基本的なファイル操作
## 基本的なファイル操作
このガイドでは、新しい IDE でファイルとフォルダーを管理するための基本的な手順を説明します。
***
### 1. 新しいファイルまたはフォルダの作成
#### 新しいファイルの作成
1. アクティビティ バー (左側のサイドバー) の **ファイル アイコン** をクリックして、**エクスプローラー** パネルを開きます。
2. ファイルを作成する **目的のディレクトリ** を右クリックします。
3. **新しいファイル** を選択します。
4. ファイル名を入力します (例: `index.html`、`script.js`)。
5. **Enter** を押してファイルを作成します。
#### 新しいフォルダーを作成する
1. **エクスプローラー** パネルで、**目的のディレクトリ** を右クリックします。
2. **新しいフォルダー** を選択します。
3. フォルダー名を入力します。
4. **Enter** を押してフォルダーを作成します。
***
### 2. ファイルを開く
1. **エクスプローラー** パネルを開きます。
2. 開きたいファイルをクリックします。
3. ファイルはエディターの新しいタブで開きます。
***
### 3. ファイルの編集と保存
#### ファイルの編集
1. エディターでファイルを開きます。
2. ファイル内をクリックして編集を開始します。
#### 変更を保存
* **`Ctrl + S`** (Windows/Linux) または **`Cmd + S`** (Mac) を押します。
* または、メニューから **ファイル > 保存** に移動します。
***
### 4. ファイルまたはフォルダの削除
1. **エクスプローラー** パネルを開きます。
2. 削除する **ファイルまたはフォルダ** を右クリックします。
3. **削除** を選択します。
4. プロンプトが表示されたら削除を確認します。
***
### 5. ファイルまたはフォルダの名前を変更する
1. **エクスプローラ** パネルを開きます。
2. 名前を変更する **ファイルまたはフォルダ** を右クリックします。
3. **名前の変更** を選択します。
4. 新しい名前を入力して **Enter** を押します。
***
### 6. ファイルのダウンロード
1. **エクスプローラー** パネルを開きます。
2. ダウンロードするファイルを右クリックします。
3. **ダウンロード** を選択します。
4. ファイルがローカル システムにダウンロードされます。
***
### 7. ファイルのアップロード
1. **エクスプローラー** パネルを開きます。
2. **ファイルのアップロード** ボタンをクリックします (またはフォルダーを右クリックして **ファイルのアップロード** を選択します)。
3. ローカル コンピューターからファイルを選択します。
4. 選択したディレクトリにファイルがアップロードされます。
***
### 8. ファイルとフォルダの移動
1. **エクスプローラー** パネルを開きます。
2. ファイルまたはフォルダをクリックして新しい場所にドラッグします。
3. 目的のディレクトリにドロップします。
***
### 9. ファイルとフォルダのコピー
1. **エクスプローラ** パネルを開きます。
2. ファイルまたはフォルダを右クリックします。
3. **コピー** を選択します。
4. ターゲット ディレクトリを右クリックし、**貼り付け** を選択します。
***
### 10. ファイルの検索
1. **`Ctrl + P`** (Windows/Linux) または **`Cmd + P`** (Mac) を押します。
2. ファイル名を入力します。
3. 検索結果からファイルを選択して開きます。
***
### 注記
* 一部の機能は、ユーザー権限またはプランの制限に基づいて制限される場合があります。
* 保存する前に変更を元に戻すには、**`Ctrl + Z`** (Windows/Linux) または **`Cmd + Z`** (Mac) を使用します。
* 高度なファイル操作 (例: `mv`、`cp`、`rm` コマンド) には、統合された **ターミナル** を使用します。
* このマニュアルでは、基本的なファイル操作についてのみ説明しています。IDE には、他にも多くの機能が用意されています。実行したい特定の操作や機能が見つからない場合は、サポートにお問い合わせください。
# 拡張機能
## 拡張機能
このガイドでは、拡張機能のインストール、有効化、無効化、更新、アンインストールなど、新しい IDE で拡張機能を管理する基本的な手順について説明します。
***
### 1. 拡張機能マーケットプレイスを開く
拡張機能を管理するには、次の通りです。
1. **アクティビティ バー** (左側のサイドバー) の **拡張機能** アイコンをクリックします。
2. **拡張機能マーケットプレイス** が開き、インストールされている拡張機能のリストが表示されます。
***
### 2. 拡張機能のインストール
1. **拡張機能マーケットプレイス** を開きます。
2. 上部の**検索バー** を使用して、目的の拡張機能を見つけます。
3. 検索結果から拡張機能をクリックします。
4. **インストール** をクリックして拡張機能をインストールします。
5. インストールの進行状況が表示され、完了すると拡張機能が使用できるようになります。
***
### 3. 拡張機能の有効化と無効化
#### 拡張機能の有効化
1. **拡張機能マーケットプレイス** を開きます。
2. **インストール済み** 拡張機能の下で拡張機能を見つけます。
3. 拡張機能が無効になっている場合は、**有効にする** をクリックします。
4. これで拡張機能がアクティブになります。
#### 拡張機能を無効にする
1. **拡張機能マーケットプレイス** を開きます。
2. **インストール済み** 拡張機能の下で拡張機能を見つけます。
3. **無効にする** をクリックして拡張機能を非アクティブ化します。
4. 拡張機能は無効になりますが、削除されません。
***
### 4. 拡張機能の更新
1. **拡張機能マーケットプレイス** を開きます。
2. インストールされている拡張機能の横に **更新** ボタンがあるかどうかを確認します。
3. **更新** をクリックして最新バージョンをインストールします。
4. 拡張機能は自動的に更新されます。
***
### 5. 拡張機能のアンインストール
1. **拡張機能マーケットプレイス** を開きます。
2. **インストール済み** 拡張機能の下で拡張機能を見つけます。
3. **アンインストール** をクリックします。
4. 拡張機能が IDE から削除されます。
***
### 例: Vue ファイルの構文強調表示を有効にする
この例では、**Vue - Official** 拡張機能を有効にして、Vue ファイルの構文強調表示を有効にします。
デフォルトでは、IDE は **HTML、CSS、JavaScript** などの基本的なファイル タイプに対してのみ構文強調表示を提供します。**Vue (`.vue`) ファイル** を開いた場合、構文強調表示は適用されません。
#### Vue 拡張機能をインストールする前に
下のスクリーンショットでは、**App.vue** ファイルが開かれていますが、構文は強調表示されていません。
#### Vue 拡張機能のインストール
Vue ファイルの構文強調表示を有効にするには、次の通りです。
1. **拡張機能マーケットプレイス** を開きます。
2. 検索バーに**Vue highlight**と入力します。
3. Vue に関連する拡張機能のリストが表示されます。
4. 説明を読んで、構文強調表示を提供する拡張機能を選択します。
5. 信頼性とセキュリティを確保するために、**ダウンロード数が多く、ユーザーからのフィードバックが肯定的** な拡張機能を探します。
この場合、多くの開発者が使用する信頼できる拡張機能であるため、**Vue - Official**を選択しました。
#### 拡張機能の有効化
1. **インストール** をクリックし、インストールが完了するまで待ちます。
2. ブラウザを再読み込みして変更を適用します。
3. Vue ファイルを再度開いて、更新された構文の強調表示を確認します。
#### Vue 拡張機能をインストールした後
これで、**Vue 構文の強調表示** が適切に適用されます。
***
### 注記
* セキュリティと互換性を確保するため、インストールする前に必ず拡張機能の詳細を確認してください。
* 一部の拡張機能では、**ブラウザの再読み込み** または **IDE の再起動** が必要になる場合があります。
* 拡張機能が期待どおりに動作しない場合は、無効にしてから再度有効にしてみてください。
* 特定の拡張機能は、この IDE と完全に互換性がない場合があります。
* Freeプランのユーザーには、利用可能な拡張機能に制限がある場合があります。
# ソース管理
## ソース管理 (GitHub) - ユーザー マニュアル
このガイドでは、**GitHub** を使用して **クラウドベースの VS Code (ode-server)** でソース管理を管理するための手順を段階的に説明します。
***
### 前提条件
Monaca で GitHub を使用する前に、まず [**Monaca アカウントを GitHub にリンク**](https://monaca.mobi/vcs) する必要があります。
***
### 1. ファイルの変更をコミットする
1. **アクティビティ バー** (左側のサイドバー) の **Git** アイコンをクリックして、**ソース コントロール** パネルを開きます。
2. **リポジトリを初期化する** をクリックします。
3. コミット メッセージ (例: `"init"`) を入力し、**コミット** をクリックします。
4. 確認ダイアログで**はい**をクリックして、すべての変更をコミットします。
***
### 2. 新しい GitHub リポジトリへの公開
1. **Branch の発行** をクリックして、コミットされた変更をプッシュします。
2. IDE で GitHub を初めて使用する場合は、サインイン ダイアログが表示されます。**許可** をクリックして続行します。
3. 認証コードをコピーし、**コピーして GitHub に進む**をクリックします。
4. 新しいタブが開きます。GitHub アカウントの詳細を確認し、「**Continue**」をクリックします。
5. コピーした認証コードを貼り付けて、「**Continue**」をクリックします。
6. GitHub アカウントの詳細を確認し、「**Authorize Monaca**」をクリックしてアクセスを許可します。
7. GitHub の認証設定によっては、異なるサインイン ページが表示される場合があります。希望する認証方法を選択します。
8. **GitHub Mobile** を使用している場合は、携帯電話で GitHub アプリを開き、確認コードを入力します。
9. 認証が成功すると、確認ページが表示されます。このタブを閉じて IDE に戻ることができます。
10. デフォルトのリポジトリ名は**プロジェクト ID** に設定されます。
11. デフォルト名をそのまま使用することも、変更することもできます。**private** リポジトリを作成するか、**public** リポジトリを作成するかを選択します。
12. リポジトリが正常に作成されると、確認メッセージが表示されます。
* **GitHub 上で開く** をクリックしてリポジトリを表示します。
* **はい** をクリックして、リモート リポジトリとの定期的な同期を有効にします。
***
### 3. 既存の GitHub リポジトリへの公開
GitHub リポジトリがプロジェクトにリンクされると、再度認証する必要がなくなります。
1. プロジェクトに変更を加えます。
2. 変更内容を説明するコミット メッセージを入力し、**コミット** をクリックします。
3. 確認するには **はい** をクリックし、今後この確認ダイアログが表示されないようにするには **常時** をクリックします。
4. **変更の同期** をクリックして、最新のコミットをリモート リポジトリにプッシュします。
5. **OK** をクリックして確認するか、**OK、今後は表示しない** をクリックして今後の同期でこの確認を無効にします。
6. 変更が正常にプッシュされると、コミット リストがクリアされ、同期ボタンが無効になります。
***
### 4. 追加の Git 操作
**プッシュ、スタッシュ、ブランチ管理など** などの追加の Git 操作には、**ソース コントロール** パネルの**メニュー (ハンバーガー アイコン)** をクリックしてアクセスできます。
***
### 注記
* 変更をコミットする前に、リポジトリへの **書き込みアクセス** があることを確認してください。
* マージの競合を防ぐため、更新を行う前に必ず **最新の変更をプル** してください。
* GitHub 認証の手順は、ユーザー設定によって異なる場合があります。
* **Freeプランのユーザー** には、一部の機能が制限される場合があります。
* **プライベート リポジトリ** は、**Freeプランのユーザー** には、利用できません。
# Monaca Localkit
{% content-ref url="/pages/-MfWrbFA2sMVcRdbpoY1" %}
[概要](/products_guide/monaca_localkit/overview)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbJYsYUHIdW0nSKS" %}
[ペアリングとデバッグ](/products_guide/monaca_localkit/pairing_debugging)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbGn66Dc9hOFrGZH" %}
[リモートビルドと配布申請](/products_guide/monaca_localkit/build_publish)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbIQ-51XLZnmGK9R" %}
[トラブルシューティング](/products_guide/monaca_localkit/troubleshooting)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbEEV0v9p8G2rWjj" %}
[チュートリアル](/products_guide/monaca_localkit/tutorial)
{% endcontent-ref %}
# 概要
Monaca Localkit は、Monaca アプリ向けのローカル環境用の開発ツールです。ソースコード管理システム ( バージョン管理システム )・タスク実行ツール ( Task Runner )・エディターなど、多岐にわたる開発ツールと併用できます。Monaca Localkit を使用すれば、オフラインでの開発も行え、また、Monaca デバッガーとのスピーディーな同期も行えます。
Monaca Localkit では、次のような、開発効率の向上に役立つ、複数のサポート機能を提供しています。
* Cordova プロジェクトの作成とインポート : Monaca が提供するテンプレートを使用して、プロジェクトを新規作成できます。または、既存の Monaca プロジェクト ( Monaca クラウド IDE 上 ) と 既存の Cordova プロジェクトをインポートできます。
* プロジェクトのライブリロード : Monaca デバッガーとペアリングすれば、端末上で、プロジェクトを即実行できます。また、ソースコードに対して行った変更も、保存後、端末側に即反映されます。
* Chrome DevTools との連携 : 端末 ( Monaca デバッガー側 ) とホスト PC ( Monaca Localkit 側 ) を USB 接続し、Chrome DevTools を使用して、アプリをデバッグできます。また、DevTools では、ブレークポイントを設定して、JavaScript のデバッグ、アプリの検証などを行えます。
* リモートビルド : Monaca Localkit を使用すれば、Monaca サーバーのサポートを介して、複数のプラットフォーム向けのアプリをビルドできます。
{% hint style="info" %}
30 日間のトライアル期間 ( 初回ログイン時から起算 ) を設けておりますが、Monaca Localkit を長期でご利用になる場合には、対応するプランへの加入が必要です。詳細は、[ 各プランの解説 ](https://monaca.mobi/ja/pricing?type=2)をご確認ください。
{% endhint %}
{% hint style="danger" %}
Monaca Localkit では、[ Monaca バックエンド ](broken://pages/-MfWrbErdAKDcr4LkvfY)と [プッシュ通知機能 ](broken://pages/-MfWrbE0f_iriWAWNox-)は利用できません。
{% endhint %}
## インストールと設定
事前準備として、Monaca Localkit ( PC 上 ) と [Monaca デバッガー](/products_guide/debugger) ( 端末上 ) をインストールします。
1. Monaca Localkit の [最新版はこちら](https://ja.monaca.io/localkit.html) からダウンロードできます。変更履歴に関しては、 [GitHub のリリースページ](https://github.com/monaca/Localkit/releases) をご確認ください。
2. [インストール方法](/products_guide/debugger/installation) の記載内容に従い、Monaca デバッガーをインストールします。
{% hint style="danger" %}
Windows 環境で Localkit を利用する場合は、事前に Git をインストールする必要があります。
{% endhint %}
## 使用例
### Monaca Localkit の起動
1. Monaca Localkit を開き、Monaca アカウントを使用してサインインします。
2\. ログイン後、Monaca Localkit のダッシュボードが表示されます。
### プロジェクトの新規作成
プロジェクトを新規作成します。ここでは、Monaca が提供するテンプレートを使用します。
1. Monaca Localkit のダッシュボードの `+` アイコンをクリックして、`作成` を選択します。
2\. 必要な情報を入力します。
* プロジェクト名 : プロジェクト一覧に表示される、プロジェクトの名前
* 作業ディレクトリ : プロジェクトファイルの保存先となるディレクトリー
* カテゴリを選択 : プロジェクトに使用するテンプレートの種類を選択します。
* テンプレートを選択 : プロジェクトで使用するテンプレート。 `プレビュー` ボタンをクリックすると、選択されているテンプレートを確認できます。
3\. プロジェクトの作成後、プロジェクト一覧上に、作成したプロジェクトが表示されていることを確認します。
### プロジェクトのインポート
次のいずれかの方法で、プロジェクトをインポートできます。
1. `クラウド IDE からインポート` : Monaca クラウド IDE 上に、既存のプロジェクトがある場合に選択できます。
2. `Cordova プロジェクトをインポート` : PC 上に保存している Cordova プロジェクトをインポートする場合に選択できます。Cordova プロジェクトのインポートには、次のような制限があります。
* アプリのアイコンとスプラッシュ画像が、インポートされない場合があります。この場合、「 設定 」 画面上で、再び設定します。
* hooks ディレクトリー内のスクリプトは無視されます。
* Cordova を含め、各プラットフォーム固有のソースコードは、インポートの対象外となります。Monaca では、Monaca 側にあらかじめ実装されている、Cordova プラグインと他の関連ライブラリーが使用されます。
3. `Zip ファイルからインポート` : Zip ファイルをインポートします ( 有効な形式のプロジェクトを圧縮した Zip ファイルであること )。
Monaca Localkit へプロジェクトをインポートします。次の手順に従います。
1. Monaca Localkit ダッシュボードの左パネルの上部に表示された `+`ボタンをクリックします。表示されたメニューから `インポート`を選択します。次に、表示されたサブメニューから、お好みのインポートオプションを選択します。
2. `クラウド IDE からインポート` を選択した場合には、次の情報を入力して、\[ インポート ] ボタンをクリックします。
* `プロジェクトを選択` : Monaca クラウド IDE 上に保存されているプロジェクトから、1 つ選択します。
* `作業ディレクトリ` : プロジェクトファイルの保存先となるディレクトリー
3\. `Cordova プロジェクトをインポート` を選択した場合には、次の情報を入力して、\[ インポート ] ボタンをクリックします。
* `作業ディレクトリ` : プロジェクトファイルの保存先となるディレクトリー
* `プロジェクト名` : プロジェクト一覧に表示される、プロジェクトの名前
4\. `Zip ファイルからインポート` を選択した場合には、次の情報を入力して、\[ インポート ] ボタンをクリックします。
* `Zip ファイル` : 対象の zip ファイルを選択します。
* `プロジェクト名` : プロジェクト一覧に表示される、プロジェクトの名前
* `作業ディレクトリ` : プロジェクトファイルの保存先となるディレクトリー
5\. プロジェクト一覧上に、作成したプロジェクトが表示されていることを確認します。
### ローカルプロジェクトの編集用エディターの追加
次に、Monaca Localkit の \[ 開く... ] メニューを解説します。Monaca Localkit では、ローカルプロジェクトのファイルを以下のような方法で開くために `開く...` 機能を提供しています。
* Finder / ファイルエクスプローラ : Finder ( Mac の場合 ) 、File Browser ( Linux の場合 ) または、ファイルエクスプローラ ( Windows の場合 )を使用して、対象プロジェクトのフォルダーを開きます。
* ターミナル / コマンドプロンプト : ターミナル ( Mac / Linux の場合 ) またはコマンドプロンプト ( Windows の場合 ) を使用して、対象プロジェクトのフォルダーを開きます。
* プログラムを追加 : お好みのエディターを追加して、ローカルのプロジェクトファイルを Monaca Localkit から開くことができます。
Monaca Localkit へエディターを追加する場合、次の手順に従います。
1. Monaca Localkit 上で、プロジェクトを選択します。
2. `開く...` ボタンをクリックして、`プログラムを追加...` を選択します。
3\. \[ エディターの追加 ] ダイアログが表示されます。エディタープログラムに関する、次の情報を入力します。
* アプリケーションのパス : エディターの実行ファイルを指定します ( Mac の場合 `.app` ファイル、Windows の場合 `.exe` ファイル )。
* アプリケーション名 : エディターの表示名を指定します。この表示名は、\[ 開く... ] メニューを選択したときに、一覧上に表示されます。
* コマンドライン引数 : 追加するエディターに適用する引数を設定できます。現時点では、`%d` ( プロジェクトファイルへのパス ) を使用できます。
4\. `OK`をクリックします。\[ 開く... ] メニューを選択したときに、追加したエディターが一覧上に表示されていることを確認します。
### トランスパイル処理の管理
最新の JS フレームワークの中には、JSX などとのやり取りを行うために独自の言語を作成したものや、ネイティブ JavaScript で利用できない拡張機能 ( TypeScriptなど ) を統合したものがあります。トランスパイル処理では、これらの言語で書かれたコードを最新のブラウザ / WebView で実行可能なネイティブ JavaScript コードに変換します。トラインスパイル処理は、WebPack を利用して実行しています。
Monaca Localkit 上での変換処理は、プロジェクトの内容が変更されるたびに実行され、今まではユーザー側で制御することができませんでした。
ハードウェアのスペックによっては問題が生じるため、自動変換を行うかどうかをユーザー側で設定できるようにしました。自動で変換を行わない場合には、\[ トランスパイラー ] タブ上の `自動トランスパイルを有効にする` オプションを切り替えます。設定はプロジェクト毎に変更でき、変更後はその設定が適用され続けます。また、変換の状態は、`トランスパイラー` タブ上で確認できます。
#### *Transpiler Console*
変換処理の進捗・内容をリアルタイムで監視することができます。以前は、別ウィンドウ上のログに出力していましたが、ユーザー側で各種設定を行う必要がありました。そこで、Monaca LocalKit にコンソールを移植し、Monaca LocalKit 上でもログを確認できるようにしました。
表示される情報は次のとおりです。
* コード変換の状態
* 割り振られた PID ( プロセス ID ) とその ID に紐づけされている処理 ( 当該 ID 下で行われた一連の処理内容 )
* 処理終了の通知 ( Kill )
* 処理時に使用する設定の通知など
また、コンソールの大きさは、必要に応じて適宜調整または非表示にすることもできます。
### 設定ダイアログ
1. Monaca Localkit メニュー上で、 `設定` ( Mac の場合 ) または `ファイル → 設定` ( Windows / Linux の場合 ) を選択します。
2\. \[ 設定 ] ダイアログでは、次の項目を設定できます。
* 作業ディレクトリ : プロジェクトの保存先を指定します ( ローカル )。
* 待ち受けポート番号 : Monaca Localkit と Monaca デバッガーをペアリングするときに使用するポート番号を指定します。
* プレビュー用ポート番号：プレビュー画面で使用するポート番号を指定します。
* プロキシーサーバー : プロキシサーバーを指定します。
* ログ出力 : ログの出力先となるファイルを指定します。
* 言語 : 表示言語を指定します。
* ファイル同期 : リモート画面（ リモートビルドと設定 ）を閉じた後のダウンロード操作を指定します。
* アップロードオプション : アップロードする前にプロジェクトをトランスパイルするか指定します。
* ビーコン ブロードキャスト : Monaca Localkit と Monaca デバッガーを同期する時に使用するビーコン ブロードキャストを指定します。
* 環境パス：Monaca Localkit が Node.jsを認識しない場合は、Node.jsのパスを指定します。
3\. 設定を保存します。
### アップロードとダウンロードの制御
特定のファイルやフォルダを除外して Monaca クラウドにアップロードしたくない場合があります。 この場合は、プロジェクトのルートディレクトリにある `.monacaignore` ファイルを編集して、特定のファイルやフォルダを設定することができます。
{% hint style="info" %}
`.monacaignore` は、`.gitignore` と同じパターンを使用しています。
{% endhint %}
`.monacaignore` ファイルのデフォルト設定は次のとおりです。
```bash
/.monaca/*
!/.monaca/project_info.json
/platforms
.DS_Store
*.swp
.vscode/
typings/
node_modules
.git
```
# ペアリングとデバッグ
Monaca Localkit を使用して、Monaca アプリをデバッグする場合、ホスト PC ( Monaca Localkit が実行中であること ) と端末 ( Monaca デバッガーが実行中であること ) のペアリングを最初に行います。
Monaca デバッガーとローカル PC を接続する前に、次の点を確認します。
1. Monaca デバッガーとローカル PC が、同一ネットワーク ( LAN または Wi-Fi ) に接続されていること。公共のネットワークでは、クライアント同士の通信が許可されていないことがあり、その場合には、ペアリングはできません。
2. Monaca デバッガーとローカル PC では、同一の Monaca アカウントを使用すること。
3. ローカル PC 側のファイアーウォールを無効化すること。
## ペアリングの設定
{% hint style="info" %}
iOS 14 以降では、Monaca デバッガー初回起動時に手動でペアリングさせる必要があります。\
手動でペアリングする方法については、[ペアリング方法](/products_guide/debugger/troubleshooting)を参照していください。
{% endhint %}
1. Monaca Localkit ( ホスト PC ) にログインします。
2. Monaca デバッガー ( 携帯端末 ) にログインします。Monaca Localkit にログインしている Monaca アカウントを使用します。
3. ログイン後、次のように Monaca デバッガーがホスト PC を認識しているか確認します。次に、`ペアリング` をクリックして、ペアリングします。Monaca デバッガーがホスト PC を自動認識していない場合には、 [ペアリング方法](/products_guide/debugger/troubleshooting) をご確認ください。
4\. ペアリング後、Monaca Localkit の \[ デバッガー ] タブ上に、ペアリングされたデバッガーが表示されます。
5\. デバッガーと Monaca Localkit を接続すると、ローカルに存在するプロジェクトの一覧が、Monaca デバッガー上に、次のように表示されます。
## ペアリングの解除
1. Monaca デバッガー画面の左上端に表示された切り替えメニューをクリックして、`ローカルコンピュータ` を選択します。
2. 接続されている PC が表示されます。PC の横に表示されているインフォーメーション アイコンをクリックします ( 下のスクリーンショットを参照のこと )。
3\. 接続されている PC の情報が表示されます。`この PC を解除する` をクリックして、ペアリングを解除します。解除後は、ローカルに保存されている Monaca プロジェクトは、デバッガー上で、デバッグできません。デバッグを再度行う場合には、ペアリングをします。
## Monaca Localkit を使用した Monaca アプリのデバッグ
[Monaca 提供のローカル環境用の開発ツールと Monaca デバッガーとの連携](/products_guide/debugger/debug) をご確認ください。
# リモートビルドと配布申請
`リモートビルド`および `設定` では、次の設定を行えます。
* アプリの設定 : プラットフォーム毎 ( iOS、Android、Windows ) に、アプリの設定を行えます。
* ビルド/ビルド設定 : プラットフォーム毎 ( iOS、Android、Windows ) に、ビルドの設定を行えます。
* プロジェクト : [Cordova プラグイン](/products_guide/monaca_ide/dependencies/cordova_plugin)、 [JS/CSS コンポーネント](/products_guide/monaca_ide/dependencies/components)、外部サービス連携など、プロジェクトの依存関係に関する設定を行えます。
各プラットフォーム向けアプリのビルド方法と配布申請に関しては、次の解説をご確認ください。
* [ビルド](/products_guide/monaca_ide/build)
* [配布方法](/products_guide/monaca_ide/deploy)
# トラブルシューティング
Monaca Localkit に関する、既知の問題点と解決策を解説します。
{% content-ref url="/pages/hxllgX6cN9i9dJWj15ku" %}
[インストール ( Windows の場合 )](/products_guide/monaca_localkit/troubleshooting/installation-in-windows)
{% endcontent-ref %}
{% content-ref url="/pages/zjEry9ZVWaXhzRRQPbnJ" %}
[インストール ( Mac OS X の場合 )](/products_guide/monaca_localkit/troubleshooting/installation-in-mac-os-x)
{% endcontent-ref %}
{% content-ref url="/pages/hXKqahrNJ6APvvswvZFx" %}
[アンインストール時 ( Windows の場合 )](/products_guide/monaca_localkit/troubleshooting/removing-monaca-localkit-for-windows)
{% endcontent-ref %}
{% content-ref url="/pages/PDpfvpZ9hCwe8TSr3exu" %}
[不完全なファイル・フォルダー構成](/products_guide/monaca_localkit/troubleshooting/incomplete-files-and-folder-structure)
{% endcontent-ref %}
{% content-ref url="/pages/ziADhIomg7ihlMDcTNe6" %}
[プレビューウィンドウが更新されない](/products_guide/monaca_localkit/troubleshooting/the-preview-window-is-not-refreshing)
{% endcontent-ref %}
{% content-ref url="/pages/I9gLMU7x1b6BZmZdurMl" %}
[Error while installing](/products_guide/monaca_localkit/troubleshooting/error-while-installing)
{% endcontent-ref %}
{% content-ref url="/pages/LYnVnZUNIyVdlMmttnyb" %}
[nodeのインストールが必要です](/products_guide/monaca_localkit/troubleshooting/installation-of-node-necessary)
{% endcontent-ref %}
# インストール ( Windows の場合 )
Monaca Localkit を Windows へインストールするとき、次のダイアログが表示され、インストールできない場合があります。
この問題を解決するには、`詳細情報` ボタンをクリックして、次に、`実行` ボタンをクリックします。
# インストール ( Mac OS X の場合 )
Monaca Localkit を Mac OS X へインストールするとき、次のダイアログが表示され、インストールできない場合があります。
解決方法を、次に記します。
1. `システム環境設定...` を選択して、次に、 `セキュリティとプライバシー`を選択します。
2. `このまま開く`ボタンをクリックします。
3. アプリを、再度、インストールします。
# アンインストール時 ( Windows の場合 )
Monaca Localkit をアンインストールしても、ファイルが残っている場合があります。この場合、Program Files フォルダーから、手動で削除します。
# 不完全なファイル・フォルダー構成
Monaca / Cordovaプロジェクトは、最初は次のファイルとフォルダで構成されています。
| ファイル・フォルダ | 説明 |
| ------------ | -------------------------------- |
| ファイル・フォルダ | 説明 |
| `www/` | アプリの中核となるファイル ( 群 ) を保存しているフォルダー |
| `config.xml` | Cordovaの設定ファイル |
このセクションでは、`www` や `config.xml` ファイルがない場合にプロジェクトを修正する方法について説明します。
### www フォルダーがない場合
#### 標準プロジェクトの場合
プロジェクトルートに `www` フォルダを作成するか、フォルダのバックアップを復元する必要があります。
#### Webpackプロジェクトの場合
www フォルダは、トラインスパイル処理により自動的に作成されます。 Monaca Localkitのプロジェクト一覧からプロジェクトを選択すると、トラインスパイル処理が自動的に開始されます。
### config.xml ファイルがない場合
{% hint style="info" %}
プロジェクトがMonaca Cloud上に存在する場合にのみ、この解決方法が適用できます。
{% endhint %}
1. Monaca Localkit のプロジェクト一覧から、対象のプロジェクトを選択してください。
2. プロジェクトのダウンロードを実行すると、`config.xml`ファイルが復元されます。
# プレビューウィンドウが更新されない
この問題はLocalkit 4.1.0 以上で発生する可能性があります。このバージョン以前のプレビューウィンドウは、プロジェクトファイルから `file://` プロトコルで提供されています。しかし、この `file://` は、viteを使ったプロジェクトなどの、`JavaScript モジュール` を使ったプロジェクトではサポートされていません。そこで、Localkit 4.1.0では、新しいツールやフレームワークに対応するため、`http://` プロトコルを使用するようになりました。この変更に伴い、ブラウザのキャッシュにより、プレビューウィンドウが現在のプロジェクトではなく、以前に配信されたプロジェクトをキャッシュしてしまう可能性があります。これは、すべてのプロジェクトに対して同じURL（デフォルトでは
この問題を解決するには、プレビューウィンドウのChromeデベロッパーツールで"disable cache"を行い、必要なときに「更新」をクリックしてプレビューウィンドウを再読み込みすることができます。
# Error while installing
Windows環境で、nvmのバージョンが `1.1.7` 以下で、npmのバージョンが `8.x.x` の場合、このエラーが発生することがあります。この問題は、NPM github issue - ですでに報告され解決されています。
この問題を解決するには、以下の手順を実行してください。
* `nvm` を最新バージョンにアップグレードします。
* (2022/10/21現在)
* exeファイルを実行し、インストール手順に従います。
* 必要であればPCを再起動します。
* `PowerShell` を管理者権限で実行します。
* `node` を再インストールします。例）
* nvm uninstall 16.18.0
* nvm install 16.18.0
* nvm use 16.18.0
* Localkitを再起動します。
* 起動ログを確認し、node/npmのバージョンが正しいことを確認します。
# nodeのインストールが必要です
```
nodeのインストールが必要です。正しくインストールされていることを確認してください。
インストール後、環境設定メニューで環境パスを設定してください。
```
このメッセージは下記の場合に表示されます。
* `node` がインストールされていない。
* `node` にパスが通っていない。
* `nvm` を使用し、`.zshrc` などでにパスを通している場合
* ターミナルでは `node` にパスが通っている状態ですが、`Monaca Localkit` から見るとパスが通っていない状態です。
* `メニュー` > `設定` をクリックし、`環境パス` の項目に`node` のパスを設定してください。
* 例) `/Users/xxxxxx/.nvm/versions/node/v12.16.1/bin/node`
# チュートリアル
{% hint style="info" %}
30 日間のトライアル期間 ( 初回ログイン時から起算 ) を設けておりますが、Monaca Localkit を長期でご利用になる場合には、対応するプランへの加入が必要です。詳細は、[料金プラン](https://ja.monaca.io/pricing.html) をご確認ください。
{% endhint %}
Monaca Localkit は、Monaca アプリ向けのローカル環境用の開発ツールです。ソースコード管理システム ( バージョン管理システム )、タスク実行ツール ( Task Runner )、各種エディターなど、多岐にわたる開発ツールと併用できます。Monaca Localkit を使用すれば、オフラインでの開発も行え、また、Monaca デバッガーとのスピーディーな同期も行えます。詳細は、[こちら](/products_guide/monaca_localkit) をご確認ください。
このチュートリアルを始める前に、下記が必要になります。
* Monaca Localkitをインストールします。[こちら](https://ja.monaca.io/localkit.html) からダウンロードできます。
* \[オプション] スマートデバイス ( iOS または Android 端末 )。端末上で検証を行う場合には必要となります。
* [パート 1 : プロジェクトの作成](/tutorials/monaca_localkit/starting_project)
* [パート 2 : Monaca Localkit と Monaca デバッガーとの連携](/tutorials/monaca_localkit/testing_debugging)
* [パート 3 : Monaca アプリのビルド](/tutorials/monaca_localkit/building_app)
* [パート 4 : Monaca アプリの配布申請](/tutorials/monaca_localkit/publishing_app)
# Monaca CLI
{% content-ref url="/pages/-MfWrbPG6fTtKA7cb0t2" %}
[概要](/products_guide/monaca_cli/overview)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbI9dRXEJCfELKqa" %}
[Monaca CLI コマンド](/products_guide/monaca_cli/cli_commands)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbEKaocwgjHWIc8l" %}
[プロジェクトの構成](/products_guide/monaca_ide/dependencies)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbNKyIlZQPJQK2J3" %}
[ペアリングとデバッグ](/products_guide/monaca_cli/pairing_debugging)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbJaUa3ef8bGG4Bc" %}
[リモートビルドと配布申請](/products_guide/monaca_cli/build_publish)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbLkeXdV\_COYXOwX" %}
[トラブルシューティング ガイド](/products_guide/monaca_cli/troubleshooting)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbN8anHI\_c3oSWhE" %}
[チュートリアル](/products_guide/monaca_cli/tutorial)
{% endcontent-ref %}
# 概要
## はじめに
Monaca CLI は、ローカル環境用の開発ツールです。Monaca アプリをローカルで開発するときに使用できます。Monaca CLI では、コマンドライン形式のインターフェイスが提供されています。また、CLI 経由で、ローカル PC から Monaca クラウドのサービスを使用することもできます。Monaca CLI 上では、次の作業を行えます。
* ローカル上でのプロジェクトの新規作成、Monaca クラウド上に保存されたプロジェクトのインポート ( クラウドからローカルへ ) またはクローン。
* お好みのコードエディターを使用した、Monaca
アプリの開発。お好きなコードエディターを使用して、プロジェクトの作成からビルドまでの工程を、ローカル上で行えるようになります。
* インスペクタを使用した、アプリのデバッグ。
* プロジェクトのコード変換 ( トランスパイル )。コード変換の対象となるプロジェクトは、React.js
プロジェクト、Angular2 プロジェクトなどです。
* プロジェクトのリモートビルド ( ローカル上での各種セットアップは必要ありません ) 。
## 事前準備
### 要件
Monaca CLI のご利用には、[Node.js](https://nodejs.org/) が必要です ( 事前に、PC にインストールされていること )。
### ステップ 1 : CLI のインストール
次のコマンドを使用して、Monaca CLI をインストールします。
```javascript
$ npm install -g monaca
```
いくつかのシステムでは、インストールする権限が必要になるため、コマンドの前に sudo を追加する必要があります。
```javascript
$ sudo npm install -g monaca
```
{% hint style="info" %}
現在インストールされている Monaca CLI のバージョンを確認する場合には、 `monaca` コマンドを使用します。また、最新の Monaca CLI にアップグレードする場合には、上記のコマンドを使用して、再度、インストールを行います。
{% endhint %}
### ステップ 2 : チュートリアルの確認
Monaca CLI のインストール後は、こちらの [Monaca CLI チュートリアル](/products_guide/monaca_cli/tutorial) の内容を参考に、Monaca CLI を使用してみましょう。
## トランスパイル処理 ( コード変換 )
最新の JS フレームワークの中には、JSX などとのやり取りを行うために独自の言語を作成したものや、ネイティブ JavaScript で利用できない拡張機能 ( TypeScriptなど ) を統合したものがあります。トランスパイル処理では、これらの言語で書かれたコードを最新のブラウザ / WebView で実行可能なネイティブ JavaScript コードに変換します。トラインスパイル処理は、WebPack を利用して実行しています。
この処理は、Vue, React, Angular2 テンプレートで実行できます。実行方法は下の 2 つがあります。
1. `monaca transpile`: プロジェクトに対してトランスパイラーを実行します。
2. `monaca preview`: `--watch` オプション付きのプレビューです。このコマンドを実行すると、HTTP サーバーが起動し、アプリのコンテンツを表示してくれます。
## アップロードとダウンロードの制御
特定のファイルやフォルダを除外して Monaca クラウドにアップロードしたくない場合があります。 この場合は、プロジェクトのルートディレクトリにある `.monacaignore` ファイルを編集して、特定のファイルやフォルダを設定することができます。
{% hint style="info" %}
`monacaignore` は、`.gitignore` と同じパターンを使用しています。
{% endhint %}
`.monacaignore` ファイルのデフォルト設定は次のとおりです。
```bash
/.monaca/*
!/.monaca/project_info.json
/platforms
.DS_Store
*.swp
.vscode/
typings/
node_modules
.git
```
参考ページ
* [Monaca CLI コマンド](/products_guide/monaca_cli/cli_commands)
* [プロジェクトの構成](/products_guide/monaca_ide/dependencies)
* [ペアリングとデバッグ](/products_guide/monaca_cli/pairing_debugging)
* [リモートビルドと配布申請](/products_guide/monaca_cli/build_publish)
* [トラブルシューティング ガイド](/products_guide/monaca_cli/troubleshooting)
* [チュートリアル](/products_guide/monaca_cli/tutorial)
# Monaca CLI コマンド
| コマンド | 説明 |
| ------------------------------------------------------------------------------------ | ---------------------------------------------------- |
| [monaca login](/products_guide/monaca_cli/cli_commands#monaca-login) | Monaca へのサインインします。 |
| [monaca logout](/products_guide/monaca_cli/cli_commands#monaca-logout) | Monaca からサインアウトします。 |
| [monaca update](/products_guide/monaca_cli/cli_commands#monaca-update) | CLI 2.x で作成したプロジェクトを最新の Monaca プロジェクト構成に更新します。 |
| [monaca init](/products_guide/monaca_cli/cli_commands#monaca-init) | 他の CLI ツールを使用して作成したプロジェクトを初期化して、Monaca で実行できるようにします。 |
| [monaca signup](/products_guide/monaca_cli/cli_commands#monaca-signup) | Monaca のアカウント登録を行います。 |
| [monaca create](/products_guide/monaca_cli/cli_commands#monaca-create) | テンプレートを使用して、ローカルに Monaca プロジェクトを新規作成します。 |
| [monaca clone](/products_guide/monaca_cli/cli_commands#monaca-clone) | Monaca クラウドからプロジェクトをクローンします。 |
| [monaca import](/products_guide/monaca_cli/cli_commands#monaca-import) | Monaca クラウドからプロジェクトをインポートします。 |
| [monaca download](/products_guide/monaca_cli/cli_commands#monaca-download) | Monaca クラウドからプロジェクトをダウンロードします。 |
| [monaca upload](/products_guide/monaca_cli/cli_commands#monaca-upload) | Monaca クラウドへプロジェクトをアップロードします。 |
| [monaca signing](#monaca-signing) | iOS と Android のビルド用の署名設定を管理します。 |
| [monaca remote build](/products_guide/monaca_cli/cli_commands#monaca-remote-build) | Monaca クラウド上で、プロジェクトをリモートビルドします。 |
| [monaca remote config](/products_guide/monaca_cli/cli_commands#monaca-remote-config) | Monaca クラウド上で、プロジェクト設定を開きます。 |
| [monaca preview](/products_guide/monaca_cli/cli_commands#monaca-preview) | ローカル上で Web サーバーを起動させます。 |
| [monaca debug](/products_guide/monaca_cli/cli_commands#monaca-debug) | Monaca デバッガー上でプロジェクトを実行します。 |
| [monaca transpile](/products_guide/monaca_cli/cli_commands#monaca-transpile) | ソースコードをコード変換 ( トランスパイル ) します。 |
| [monaca config](/products_guide/monaca_cli/cli_commands#monaca-config) | Monaca CLI の設定内容を管理できます。 |
| [monaca plugin](/products_guide/monaca_cli/cli_commands#monaca-plugin) | Cordova プラグインを管理します。 |
| [monaca docs](/products_guide/monaca_cli/cli_commands#monaca-docs) | Monaca CLI、Onsen UIのドキュメントを表示します。 |
## monaca login
Monaca クラウドにサインインします。Monaca アカウント登録時のユーザー名とパスワードを入力します。
```javascript
$ monaca login [options]
```
**オプション**
* `email`: Monaca クラウドへログインするメールアドレス。
**【具体例】**
Monaca CLI を使用して、Monaca クラウドへログインします。
```javascript
$ monaca login
$ monaca login me@monaca.io
$ echo "mypass" | monaca login me@monaca.io
```
## monaca logout
Monaca クラウドからサインアウトして、保持していたログイントークンを削除します。
```javascript
$ monaca logout
```
**【具体例】**
Monaca CLI を使用して、Monaca クラウドからログアウトします。
```javascript
$ monaca logout
Signing out from Monaca Cloud...
You have been signed out.
Removed Monaca Debugger pairing information.
```
## monaca update
このコマンドは、Monaca CLI 3.x から利用できます。 Monaca CLI 2.x で作成した旧プロジェクトを更新するために使用されます。
**非トランスパイル プロジェクト**
`package.json` には、以下の設定が追加されます。
* `monaca:preview` コマンドが、`script` プロパティに追加されます。
* `dev` コマンドが存在していない場合は、以下のコマンドが `script` プロパティに追加されます。
* `"dev": "browser-sync start -s www/ --watch --port 8080 --ui-port 8081"`
* `browser-sync` と `bordova`が、`devDependencies` として追加されます。
**トランスパイル プロジェクト**
`package.json` には、以下の設定が追加されます。
* `monaca:preview`、`monaca:transpile`、`monaca:debug` コマンドが、`script` プロパティに追加されます。
* `dev`、`build`、`watch` コマンドが存在していない場合は、`script` プロパティに追加されます。
* `webpack` と `cordova` を含む必須パッケージが、`devDependencies`として追加されます。
```javascript
$ monaca update [options]
```
**Options**
* `--force`: デフォルト設定で実行します。
* `--createPackageJson`: プロジェクトに `package.json`ファイルがない場合は、名前と説明を含む基本的な package.json ファイルを作成します。
**Example**
このコマンドの使用例です。
```javascript
$ monaca update
$ monaca update --force --createPackageJson
```
## monaca init
このコマンドは、Monaca CLI 3.x から利用できます。 Monaca（ Monaca CLI、Monaca クラウド IDE、Monaca Localkit ）で実行できるように、他の CLI ツールを使用して作成したプロジェクトを初期化します。 以下のリソースがプロジェクトに追加されます。
* `www/components`: JS/CSS コンポーネント用フォルダーとリソースファイル。
* `config.xml`: Cordova アプリ用グローバル設定ファイル。
* `res`: Android、iOS、Window 用アイコンとスプラッシュ画像用フォルダーとリソースファイル。
* `cordova`: Cordova 7.1 では、プロジェクトの package.json に cordova の設定がない場合は、devDependencies としてインストールされます。
* `.monaca/project_info.json`: Cordova バージョンとフレームワークバージョンなどの情報を含む JSON ファイル。
```javascript
$ monaca init
```
**Example**
このコマンドの使用例です。
```javascript
$ monaca init
```
## monaca signup
Monaca クラウド にサインアップします。 ユーザーの資格情報を要求する画面が表示されます。
```javascript
$ monaca signup
```
## monaca create
指定したパスのテンプレートから新しいローカル Monaca プロジェクトを作成します。 Monaca クラウドが提供しているテンプレートの中から、使用するテンプレートを選択します。 指定された保存場所に、選択されたテンプレートが置かれます。
```javascript
$ monaca create [options]
```
* `path`: プロジェクトファイルの保存先
**オプション**
* `--`url: Monaca テンプレート zip ファイルの URL
* `--`template-list: 利用可能な Monaca テンプレートのリストを出力します。
* `--`template: プロジェクト作成に使用するMonaca テンプレートの名前。
**【具体例】**
Monaca CLI を使用して、Monaca プロジェクトを作成します。
```javascript
$ monaca create myproject
$ monaca create --template-list
$ monaca create myproject --template blank
$ monaca create myproject --url http://github.com/me/myproject/archive/master.zip
```
## monaca clone
Monaca クラウド上に置かれているプロジェクトを、ローカルへクローンします。Monaca クラウド上に置かれているプロジェクトの一覧が表示されます。プロジェクトを選択し、次に、保存先を指定します。
{% hint style="info" %}
Monaca クラウドからローカル PC にプロジェクトをクローンする場合には、クローンしたプロジェクトに関する「 クラウド同期情報 」 が作成 ・ 保持されます。この情報が作成 ・ 保持されている場合、プロジェクトをローカルで修正した後、Monaca クラウドにアップロード ( [monaca upload](/products_guide/monaca_cli/cli_commands#monaca-upload) を使用 ) したときには、同一プロジェクト内の古いファイルが、上書きされます。
{% endhint %}
```javascript
$ monaca clone
```
**【具体例】**
次の例では、Monaca クラウド上のプロジェクト「 `Memo Application` 」を、ローカルの「 `CloneMemoProjectn` 」フォルダーへクローンしています。
## monaca import
Monaca クラウド上に置かれているプロジェクトをインポートします。Monaca クラウド上に置かれているプロジェクトの一覧が表示されます。プロジェクトを選択し、次に、保存先を指定します。
{% hint style="info" %}
Monaca クラウドからローカル PC にプロジェクトをインポートする場合には、インポートしたプロジェクトに関する 「 クラウド同期情報 」 は作成されません。この情報が作成されない場合、プロジェクトをローカルで修正した後、Monaca クラウドにアップロード ( [monaca upload ](/products_guide/monaca_cli/cli_commands#monaca-upload)を使用 ) したときには、アップロードしたプロジェクトは、新規のプロジェクトとして、取り扱われます。
{% endhint %}
```javascript
$ monaca import
```
**【具体例】**
次の例では、Monaca クラウド上のプロジェクト「 `Memo Application` 」を、ローカルの「 `ImportedMemoApplication` 」フォルダーへインポートしています。
## monaca download
Monaca クラウド上で同期対象のプロジェクトに対して行った更新・修正箇所をダウンロードします。
{% hint style="info" %}
このコマンドを実行すると、ローカルのプロジェクトに、変更を反映できます。Monaca クラウド上に存在するプロジェクトと同一のプロジェクトが、ローカルに存在しない場合、このコマンドは使用できません。
{% endhint %}
```javascript
$ monaca download [options]
```
**オプション**
* `--delete`: Monaca クラウド上に存在しないローカルファイルを削除します。
* `--force`: 処理の実行時、ユーザー側に確認しません。
* `--dry-run`: ダウンロード処理をシュミレートします。出力として、ダウンロード対象のファイルを表示します。シュミレートのみで、実際のダウンロードは行われません。
**【具体例】**
プロジェクトフォルダーへ移動して、次に、さまざまな**オプション**を使用して `monaca download` コマンドを実行し、出力を確認してみましょう。
## monaca upload
ローカルのプロジェクトを Monaca クラウドへアップロードします ( プロジェクトが置かれたディレクトリーのルートへ移動して、コマンドを実行します )。ローカルとクラウド間 ( 既存のファイルがクラウド上にあれば ) のファイルは比較され、新規ファイルまたは更新ファイルがあれば、そのファイルのみアップロードされます。アップロード処理は、プロジェクトの種類により、下記のように異なります。
1. アップロード対象のプロジェクトが 「 新規プロジェクト」 または 「 インポートしたプロジェクト 」の場合、新規のプロジェクトとして、関連するファイルのすべてが Monaca クラウドへアップロードされます。
2. アップロード対象のプロジェクトが 「 クローンしたプロジェクト 」場合、Monaca クラウド上に置かれている、クローン元のプロジェクトが上書きされます ( 新規ファイルまたは更新ファイルのみ、アップロードされます )。
{% hint style="info" %}
トランスパイルが必要なプロジェクトに関しては、`monaca upload` コマンドの実行時、アップロード処理が始まる前に、プロジェクトがコード変換 ( トランスパイル / Transpile ) されます。
{% endhint %}
```javascript
$ monaca upload [options]
```
**オプション**
* `--delete`: ローカルに存在しないファイルが、Monaca クラウド上に存在する場合、クラウド上のこれらのファイルを削除します。
* `--force`: 処理の実行時、ユーザー側に確認しません。
* `--dry-run`: アップロード処理をシュミレートします。出力として、アップロード対象のファイルを表示します。シュミレートのみで、実際のアップロードは行われません。
**【具体例】**
プロジェクトフォルダーへ移動して、さまざまな オプション を組み合わせて、`monaca upload` コマンドを実行し、出力を確認してみましょう。
## monaca signing
iOS および Android ビルド用の署名設定を管理します。
```javascript
$ monaca signing -
```
**action**
* `generate`: `keystore` や `pkcsr` で使うことができます。
* `upload`: `keystore`、`pkcs12`、`certificate`、`provisioning` で使うことができます。
* `add`: `alias` で使うことができます。
* `remove`: `alias`、`pkcs12`、`certificate`、`provisioning` で使うことができます。
* `export`: `keystore`、`pkcsr` で使うことができます。
**item**
* `alias`: キーストアファイル内のエイリアス。
* `keystore`: Android キーストア。
* `pkcsr`: CSR ( 証明書署名要求 ) ファイル。
* `pkcs12`: 証明書付きの秘密鍵。
* `certificate`: iOS 証明書。
* `provisioning`: iOS プロビジョニングプロファイル。
{% hint style="info" %}
iOS および Android のビルド設定 ( キーストア、秘密鍵、証明書およびプロビジョニングプロファイルを含む ) の署名または作成方法の詳細については、[ iOS のビルド設定 ](/products_guide/monaca_ide/build/ios/build_ios#ios-nobirudo)と [Android キーストア ( KeyStore ) の設定 ](/products_guide/monaca_ide/build/build_android#suteppu-2-android-ksutoa-keystore-no)を参照してください。
{% endhint %}
**【具体例】**
プロジェクトフォルダーへ移動して、次のようにコマンドを使用します。
```javascript
$ monaca signing generate keystore
$ monaca signing generate pkcsr
$ monaca signing add alias
$ monaca signing upload keystore
$ monaca signing upload pkcs12
$ monaca signing upload certificate
$ monaca signing upload provisioning
$ monaca signing export keystore
$ monaca signing export pkcsr
$ monaca signing remove alias
$ monaca signing remove pkcs12
$ monaca signing remove certificate
$ monaca signing remove provisioning
```
## monaca remote build
Monaca クラウド上でプロジェクトをビルドします。Monaca クラウド上に、対象のプロジェクトが存在しない場合、ビルドを開始する前に、対象のプロジェクトが自動的にアップロードされます。一方、Monaca クラウド上に、対象のプロジェクトがすでに存在する場合には、ローカルで行った更新・修正は、ビルドを開始する前に、対象のプロジェクトに反映 ( アップロード ) されます。
次の点に関する詳細は、[Monaca アプリのビルド](/tutorials/monaca_cli/building_app) をご確認ください。
* 各プラットフォーム向けのビルドの設定方法
* ビルドの種類
* 各プラットフォーム向けアプリのビルド方法
* ビルド済みアプリの入手方法・インストール方法
```javascript
$ monaca remote build [options]
```
* `platform`: ビルド対象のプラットフォームを指定します。`ios`、`android`、`windows` のいずれかを指定します。
**オプション**
* `--build-type`: ビルドの種類を指定します。指定できるオプションを、次に記します。
* `debug` ( iOS、Android、Windows 向け) デフォルトオプション
* simulator, adhoc ( iOS 向け )
* debugger, inapp\_updater ( iOS、Android 向け )
* `release` ( iOS、Android 向け )
* `--output`: ビルド済みファイルを保存するディレクトリーを指定します ( ファイル名まで含む )。
* `--android_webview`: (Android のみ) Webview のタイプを選択します。`default`、`crosswalk` のいずれかを指定します。
* `--android_arch`: (Android のみ) `--android_webview` を `crosswalk` に指定した場合、こちらは必須オプションになります。値は、`x86`、`arm` のいずれかを指定します。
* `--skipUpload`: クラウドへローカルプロジェクトをアップロードする処理をスキップします。
* `--skipTranspile`: クラウドへローカルプロジェクトをアップロードする時にトランスパイル処理をスキップします。
* `--browser`: ブラウザー上で \[ ビルド設定 ] 画面を開きます ( 下のスクリーンショットを参照のこと )。
**【具体例】**
プロジェクトフォルダーへ移動して、さまざまなオプションを組み合わせてコマンドを実行してみましょう。
```javascript
$ monaca remote build ios
$ monaca remote build ios --build-type=debug
$ monaca remote build android --build-type=debug --android_webview=crosswalk --android_arch=arm
$ monaca remote build --browser
```
## monaca remote config
Monaca クラウド上でプロジェクト設定を開きます。\
設定が完了したら、 `monaca download` を実行して変更した設定内容をローカルに反映してください。
```javascript
$ monaca remote config
```
**オプション**
* `--skipUpload`: クラウドへローカルプロジェクトをアップロードする処理をスキップします。
* `--skipTranspile`: クラウドへローカルプロジェクトをアップロードする時にトランスパイル処理をスキップします。
**【具体例】**
対象のプロジェクトフォルダに移動し、次のコマンドを実行してください：
```javascript
$ monaca remote config
$ monaca download
```
## monaca preview
ローカル上で Web サーバーを起動後、ブラウザー上でアプリを起動させます ( `www` 下のアセットがブラウザー上で使用できる状態になります )。このコマンドを実行すると、ファイルシステム上のファイルを監視し、ファイルが変更された場合には、ブラウザー上にも即反映させます。package.json で定義された `npm run monaca:preview` を実行します。
{% hint style="info" %}
トランスパイルが必要なプロジェクトに関しては、`monaca preview` コマンドの実行時、プレビュー画面の起動前に、メモリー上でプロジェクトがコード変換されます。また、プレビュー画面を起動させた状態で、プロジェクトファイルを修正したときにも、コード変換処理が行われ、修正されたファイルの内容がプレビュー画面上に反映されます。
{% endhint %}
```javascript
$ monaca preview
```
**【具体例】**
プロジェクトフォルダーへ移動して、`monaca preview` コマンドを実行します。実行後、ブラウザーが起動してプロジェクトが実行されます。
{% hint style="info" %}
`monaca preview` の処理を停止する場合には、`Ctrl+c` を押します。
{% endhint %}
## monaca debug
端末上でアプリをデバッグするためのコマンドです。ローカルで行った、ファイルへの変更は、デバッガー上にも即反映されます。このコマンドを実行すると、Web サーバーが起動され、Monaca デバッガーからの接続を待ち受けます。また、同時に、対象のローカルネットワーク上に接続されているデバッガーに対して、接続するか確認するメッセージが送信されます。package.json で定義された `npm run monaca:debug` を実行します。
{% hint style="info" %}
トランスパイルが必要なプロジェクトに関しては、`monaca debug` コマンドの実行時、Monaca デバッガーへプロジェクトファイルが送信される前に、プロジェクトがコード変換 ( トランスパイル / Transpile ) されます。また、デバッガーを実行している状態で、プロジェクトファイルを修正したときにも、コード変換処理が行われ、修正されたファイルの内容がデバッガー上に反映されます。
{% endhint %}
```javascript
$ monaca debug [options]
```
**オプション**
* `paths`: ディレクトリー ( 現在開いているディレクトリーの場合には、省略可 )
* `--port`: HTTP の待ち受けポート番号 ( デフォルトは、8001 )
**【具体例】**
プロジェクトフォルダーへ移動して、`monaca debug` コマンドを実行します。実行後、Monaca デバッガーの *ローカルプロジェクト* 下に対象のプロジェクトが表示されていることを確認し、プロジェクトをタップして実行してみましょう。次に、プロジェクトに変更を加え、保存して、プロジェクトに変更点が即反映されることを確認してみましょう。
```javascript
$ cd MyProjectFolder/ImportRssProject
$ monaca debug
```
このコマンドの実行時、次のようなダイアログ ( 左 ) または通知 ( 右 ) が表示されます。ダイアログには、ペアリングを行うか確認するメッセージが表示されます。また、通知には、ネットワーク接続の状態が表示されます。なにか問題がある場合には、[Monaca デバッガーとのペアリングが失敗する場合](https://ja.docs.monaca.io/products_guide/monaca_cli/pages/-MfWrbFoQSpqFIibx1fY#monaca-デバッガーとのペアリングが失敗する場合) をご確認ください。
*接続確認用ダイアログ & ネットワーク接続完了の通知*
{% hint style="info" %}
`monaca debug` の処理を停止する場合には、`Ctrl+c` を押します。
{% endhint %}
## monaca transpile
ReactJS、VueJS、Angular プロジェクトなど、トランスパイルが必要なプロジェクトをトランスパイルします。package.json で定義された `npm run monaca:transpile` を実行します。
```javascript
$ monaca transpile
```
**【具体例】**
対象のプロジェクトフォルダーへ移動して、`monaca transpile` コマンドを実行します ( コード変換が可能なプロジェクトであること )。実行後、コード変換が実行されます。
```javascript
$ monaca transpile
Running Transpiler...
Build completed in 71.835s
....
```
## monaca config
プロキシおよび API エンドポイントの設定内容を管理できます。
```javascript
$ monaca config [options]
```
**オプション**
* `proxy `: が設定されていない場合は、現在のプロキシサーバーが表示されます。
* `endpoint `: が設定されていない場合は、現在の API エンドポイントが表示されます。
* `--help`: ヘルプを表示します。
* `--reset`: デフォルト値にリセットします。
**【具体例】**
プロジェクトフォルダーへ移動して、次のようにコマンドを使用します。
```javascript
$ monaca config --help
$ monaca config proxy
$ monaca config proxy http://my.proxy.com:8080
$ monaca config proxy --reset
$ monaca config endpoint
$ monaca config endpoint my.endpoint.com
$ monaca config endpoint --reset
```
## monaca plugin
プロジェクトで使用するプラグインを管理します。プラグインの追加、削除、インストール済みのプラグイン一覧を行うことができます。
```javascript
$ monaca plugin [options]
```
**オプション**
* `add `: プラグインを追加します。
* `rm `: プラグインを削除します。
**【具体例】**
プロジェクトフォルダーへ移動して、次のようにコマンドを使用します。
```javascript
$ monaca plugin add cordova-plugin-camera
$ monaca plugin rm cordova-plugin-camera
```
## monaca docs
Monaca CLI 、Onsen UI のドキュメントを表示します。
```javascript
$ monaca docs [options]
```
**オプション**
* `onsen`: ブラウザで Onsen UI ドキュメントを開きます。
* `usage`: ブラウザで Monaca CLI ドキュメントを開きます。
**【具体例】**
プロジェクトフォルダーへ移動して、次のようにコマンドを使用します。
```javascript
$ monaca docs onsen
$ monaca docs usage
```
# ペアリングとデバッグ
Monaca CLI を使用して、Monaca アプリをデバッグする場合、ホスト PC ( Monaca CLI を実行中 ) と端末 ( Monaca デバッガーを実行中 ) をペアリングさせます。
Monaca デバッガーとローカル PC を接続する前に、次の点を確認します。
1. Monaca デバッガーとローカル PC が、同一ネットワーク ( LAN または Wi-Fi ) に接続されていること。公共のネットワークでは、クライアント同士の通信が許可されていないことがあり、その場合には、ペアリングはできません。
2. Monaca デバッガーとローカル PC では、同一の Monaca アカウントを使用すること。
3. ローカル PC 側のファイアーウォールを無効化すること。
## ペアリングの設定
{% hint style="info" %}
iOS 14 以降では、Monaca デバッガー初回起動時に手動でペアリングさせる必要があります。\
手動でペアリングする方法については、[ペアリング方法](https://ja.docs.monaca.io/products_guide/monaca_cli/pages/-MfWrbFoQSpqFIibx1fY#monaca-デバッガーとのペアリングが失敗する場合)を参照していください。
{% endhint %}
1. Monaca デバッガーアプリを端末上で起動させ、Monaca アカウントを使用してサインインします。サインイン時には、Monaca CLI で使用したアカウント情報と同じものを使用します。
2. PC 側のコマンドウィンドウ上で、プロジェクトの保存先フォルダーへ移動し、\[monaca debug]\() コマンドを実行して、Monaca デバッガーに接続します。
```bash
monaca debug
```
3\. Monaca デバッガー上に、ポップアップメッセージが表示され、Monaca デバッガーとホスト PC をペアリングするか聞かれます。\[ ペアリング ] ボタンをタップします。
1. ペアリング後、Monaca デバッガーの \[ ローカルプロジェクト ] 欄に、ローカルに置かれているプロジェクト名が表示されます。ペアリングに失敗した場合には、[Monaca デバッガーとのペアリングが失敗する場合](https://ja.docs.monaca.io/products_guide/monaca_cli/pages/-MfWrbFoQSpqFIibx1fY#monaca-デバッガーとのペアリングが失敗する場合) をご確認ください。
## ペアリングの解除
ペアリングの解除方法は、2 通りあります。
### PC 上からの解除
[monaca debug](/products_guide/monaca_cli/cli_commands#monaca-debug) コマンドを実行したコマンドウィンドウと同じウィンドウ上で、次のコマンドを実行すれば、Monaca デバッガーと PC 間のペアリングとデバッグ処理を停止できます。
```bash
ctrl + c
```
### Monaca デバッガー上での解除
1. 左上端に表示された切り替えメニューをクリックして、次に、`ローカルコンピュータ`ボタンをクリックします。
2. 接続されている PC が表示されます。PC の横に表示されている`インフォーメーション` アイコンをクリックします ( 下のスクリーンショットを参照のこと )。
3\. 接続されている PC の情報が表示されます。`この PC を解除する` をクリックして、ペアリングを解除します。解除後は、ローカルに保存されている Monaca プロジェクトは、デバッガー上でデバッグできません。デバッグを再度行う場合には、ペアリングをします。
## Monaca CLI を使用した、Monaca アプリのデバッグ
[Monaca 提供のローカル環境用の開発ツールと Monaca デバッガーとの連携](/products_guide/debugger/debug) をご確認ください。
# リモートビルドと配布申請
リモートビルド の機能を解説します ( \[ ビルド設定 ] 画面の各タブの解説 )。
* ビルド : ビルド対象のプラットフォーム ( Android、iOS、Windows ) を選択します。
* ビルド設定 : アプリおよび各プラットフォーム向けのビルドに必要な設定をします。
* 依存関係の設定 : 必要なプラグイン （[Cordova プラグイン](/products_guide/monaca_ide/dependencies/cordova_plugin) 、[JS/CSS コンポーネント](/products_guide/monaca_ide/dependencies/components)、[外部サービス連携](/reference/service_integration) など ） を設定します。
ここまでの手順で、アプリの開発工程のすべてが完了しました。次の工程では、アプリのビルド、端末へのインストールなど、配布に向けた準備をします。これらの工程まで行えば、マーケットで配布できるアプリが完成します。なお、実際に、マーケット ( App Store、Google Play など ) 上で配布する前には、リリースビルド版のアプリが必要です。
各プラットフォーム向けアプリのビルド方法と配布申請に関しては、次の解説をご確認ください。
* [Monaca アプリのビルド](/tutorials/monaca_cli/building_app)
* [配布方法](/products_guide/monaca_ide/deploy)
# トラブルシューティング ガイド
### 不完全なファイル・フォルダー構成
Monaca / Cordovaプロジェクトは、最初は次のファイルとフォルダで構成されています。
| ファイル・フォルダ | 説明 |
| ------------ | --------------- |
| `www/` | アプリ本体の格納フォルダー |
| `config.xml` | Cordova の設定ファイル |
このセクションでは、`www` や `config.xml` ファイルがない場合にプロジェクトを修正する方法について説明します。
## www フォルダーがない場合
### 標準プロジェクトの場合
プロジェクトルートに `www` フォルダを作成するか、フォルダのバックアップを復元する必要があります。
### Webpackプロジェクトの場合
手順は、次のとおりです。
1. コマンドウィンドウで、プロジェクトフォルダに移動します。
2. 次に、 `monaca transpile` コマンドを実行します。 これにより `www`フォルダーが作成されます。
## config.xml ファイルがない場合
{% hint style="info" %}
プロジェクトが Monaca クラウド上に存在する場合、またはバックアップが存在する場合にのみ、この解決方法が適用できます。
{% endhint %}
1. プロジェクトルートに空の `config.xml`ファイルを作成する必要があります。
2. プロジェクトの `config.xml` ファイルの内容を Monaca クラウドまたはバックアッププロジェクトにコピーします。
3. 空の `config.xml` ファイルに内容を貼り付けます。
# チュートリアル
Monaca CLI は、Monaca アプリ向けのローカル環境用の開発ツールです。Monaca CLI は、コマンドライン形式のインターフェイスであり、Monaca CLI を使用すれば、Monaca クラウドが提供するサービスをローカル PC から使用できます。Monaca CLI の機能は多岐にわたり、ローカルプロジェクトの作成、既存のプロジェクトのインポートまたはクローン ( Monaca クラウドからローカル PC へ )、インスペクタと連携したデバッグ、リモートビルド ( ローカルでの各種設定は不要 ) などができます。また、使い慣れたエディターと Monaca CLI を併用して、開発も行えます。
このチュートリアルを始める前に、下記が必要になります。
* 次のコマンド ([詳細はこちら](/products_guide/monaca_cli/overview)) を使用して Monaca CLI をインストールします。
```
$ npm install -g monaca
```
* \[オプション] 端末でテストする場合は、対象端末 (iOS または Androi) をご用意ください。
* [パート 1 : プロジェクトの作成](/tutorials/monaca_cli/starting_project)
* [パート 2 : Monaca CLI と Monaca デバッガーとの連携](/tutorials/monaca_cli/testing_debugging)
* [パート 3 : Monaca アプリのビルド](/tutorials/monaca_cli/building_app)
* [パート 4 : Monaca アプリの配布申請](/tutorials/monaca_cli/publishing_app)
# Monaca デバッガー
Monaca デバッガーは、Monaca アプリの開発時に使用するツールです。Monaca デバッガーを使うと、アプリをビルドせずとも、端末にて、アプリの動作確認を行えます。
{% content-ref url="/pages/-MfWrbFLzyDeEW\_A2kdS" %}
[機能の概要](/products_guide/debugger/features)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbEC3jGLRS2ZyaJ6" %}
[インストール方法](/products_guide/debugger/installation)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbJ7sNu6WTkFfPlI" %}
[使用例](/products_guide/debugger/debug)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbFoQSpqFIibx1fY" %}
[トラブルシューティング ガイド](/products_guide/debugger/troubleshooting)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbHkQPI4VkD0YeQa" %}
[チュートリアル](/products_guide/debugger/tutorials)
{% endcontent-ref %}
# 機能の概要
## デバッガーの機能
Monaca デバッガーでは、アプリの検証に役立つ、多彩な機能を提供しています。Monaca デバッガー上でプロジェクトを実行すると、画面の右下に \[ デバッガーメニュー ] ボタンが表示されます。メニューボタンをクリックすると、次のようなメニュー画面が表示されます。現在使用できる機能は、次のとおりです。
* 戻るボタン
* 更新ボタン
* [スクリーンショット ボタン](/products_guide/debugger/features#screenshot)
* [アプリログの表示ボタン](/products_guide/debugger/features#app-log)
### スクリーンショット機能
Monaca デバッガーを使用することで、スクリーンショットを取得してデバイスのストレージに保存することもできます。 スクリーンショット画面では、次のことができます。
* 編集 : スクリーンショットのキャプチャー、コメントの手書き入力
* デバイスのストレージへ保存。
### アプリログ
Monaca デバッガー上で、アプリのログを確認できます。ログには、実行中のアプリのエラーと進行状況が出力されます。
## デバッガーのメニュー
デバッガーのメニューの中には、次のものがあります。
### すべてのプロジェクト
Monaca デバッガー上で実行可能な Monaca プロジェクトの一覧を表示します。一覧上のプロジェクトには、2 つのサブカテゴリーがあります。
* `Monaca.io プロジェクト` : Monaca クラウド IDE 上で作成されたプロジェクトの一覧を表示します。
* `ローカルプロジェクト` : ローカル環境用の開発ツール ( [Monaca Localkit](/products_guide/monaca_localkit) または [Monaca CLI](/products_guide/monaca_cli) ) を使用して作成し、ローカルに保存されているプロジェクトの一覧です。なお、Monaca Localkit ( または Monaca CLI ) とデバッガーがペアリングされているときのみ、ローカルプロジェクトの一覧は表示されます。
### ローカルコンピュータ
ペアリング済み、または、利用可能 ( 未接続 ) なコンピューターの一覧を表示します。ペアリング済みのコンピューターとは、Monaca Locakit または Monaca CLI がインストールされ、デバッガーに現在接続されているローカルのコンピューターです。各開発ツールとのペアリング方法は、次のリンクをご確認ください。
* [Monaca Localkit と Monaca デバッガーのペアリング方法](/products_guide/monaca_localkit/pairing_debugging)
* [Monaca CLI と Monaca デバッガーのペアリング方法](/products_guide/monaca_cli/pairing_debugging)
### デバッガーの設定
デバッガー側の各種設定を行えます。設定可能な項目は、以下になります。
* スリープを許可する
* メモリー使用量表示
* アプリの復帰時にプロジェクトを再実行
* ネットワーク再接続時にプロジェクトを再実行
* デバッガーメニューを非表示にする
* 同期データを削除する
* Local Storage を削除する
同期データとは、ローカル側と同期を行ったプロジェクトファイルを指します。また、Local Storage とは、端末のメモリー ( LocalStorage ) 上に、プロジェクト側で作成・保存したデータを指します。
### デバッガーについて
デバッガーの詳細情報を表示します。表示する情報は、デバッガーのバージョン番号、プラットフォーム情報、CLI バージョン番号、利用可能なプラグインの一覧などです。
## プロジェクトオプション
Monaca デバッガー上のプロジェクト一覧の \[ Monaca.io プロジェクト ] では、各プロジェクトの右側に \[ プロジェクトオプション ] アイコンが表示されています。 プロジェクトオプションでは、次のことができます。
* スター : スター ( 星マーク ) を付けると、「 お気に入り 」プロジェクトとして、Monaca クラウド IDE 上のプロジェクト一覧の最上位に表示されます。
* 実行する : デバッガー上で、プロジェクトを実行します。
# インストール方法
複数のプラットフォーム ( Android、Android 仮想端末、iOS、Chrome など ) 上に、Monaca デバッガーをインストールできます。
{% content-ref url="/pages/-MfWrbP0hCnD7GrLvQLW" %}
[Android 向けの Monaca デバッガー](/products_guide/debugger/installation/debugger_android)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbEBEqM2n0MmiOUC" %}
[iOS 向け Monaca デバッガー](/products_guide/debugger/installation/debugger_ios)
{% endcontent-ref %}
{% content-ref url="/pages/-MfWrbFD2mbomO86-lPd" %}
[Android エミュレーター向け Monaca デバッガー](/products_guide/debugger/installation/debugger_emulator)
{% endcontent-ref %}
# Android 向けの Monaca デバッガー
| Monaca デバッガー | ストア版 | カスタムビルド版 |
| ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| 説明 | Google Play ストアや App Store で配布されている Monaca デバッガー | Monaca クラウド IDE でビルドして作成する Monaca デバッガー |
| インストール方法 | | [カスタムビルド版 Monaca デバッガーのビルドとインストール](#kasutamubirudo-monaca-debaggnobirudotoinsutru) |
| [Cordova プラグイン](#cordova-puraguin) | 基本プラグインおよび複数のサードパーティー製プラグインがあらかじめ実装されています。 | 基本プラグインやサードパーティー製プラグインに加えて、ユーザー自作の プラグインなどを組み込むことができます。 |
| パッケージ名
(Android:PackageName)
| `mobi.monaca.debugger` | 設定画面にてユーザー側で設定 |
| アプリのリリース番号
(Android:versionName)
(表示用)
| 固定 (ユーザー設定不可) | ユーザー側で設定 |
| アプリのビルド番号
(Android:versionCode)
(内部処理用)
| 固定 (ユーザー設定不可) | ユーザー側で設定 |
| [USB デバッグ](#usb-debaggu) | 利用可 ( Chrome DevTools ) | |
{% hint style="danger" %}
プッシュ通知用 Cordova プラグインは、ストア版およびカスタムビルドデバッガーでは利用できません。利用する際は、デバッグビルドかリリースビルドにてご利用ください。
* プッシュ通知用 Cordova プラグイン例
* onesignal-cordova-plugin
* cordova-plugin-firebasex
{% endhint %}
## Cordova プラグイン
Monaca デバッガーには、「 基本プラグイン 」 が、あらかじめ実装されています。
基本プラグインとは、バッテリー情報の取得 API、カメラ API、住所録の取得 API、端末情報の取得 API などを指します。詳細は、[基本プラグイン](https://ja.docs.monaca.io/reference/core-cordova-plugins) をご確認ください。
これ以外の第三者提供 ( 「 外部の Cordova プラグイン 」 ) または自作のプラグイン ( 「[ユーザー Cordova プラグイン](https://ja.docs.monaca.io/products_guide/monaca_ide/dependencies/custom_cordova_plugin)」 ) をプロジェクトに追加することもできます。ストア版の Monaca デバッガーには、これらのプラグインはデフォルトでは実装されていないため、このデバッガー上でアプリをそのまま実行しても、正しく動作しません。そこで、ストア版のデバッガーの代わりに、カスタムビルド版の Monaca デバッガーを使用します。カスタムビルド版も、ストア版も、どちらも Monaca デバッガーですが、カスタムビルド版のデバッガーは、Monaca クラウド IDE 上で 「 ビルド 」 して、端末にインストールします ( Monaca デバッガーは、アプリです )。詳細は、[カスタムビルド版 Monaca デバッガーのビルドとインストール](#kasutamubirudo-monaca-debaggnobirudotoinsutru) をご確認ください。
## USB デバッグ
Android 向けの Monaca デバッガーでは、USB デバッグをサポートしており、Google Chrome ブラウザーを使用したリモートデバッグが行えます。リモートデバッグで行える主な処理は、次のとおりです。
* Console を使用したデバッグ : Consoleを使用して、各種メッセージを出力できます。
* DOM の解析 : DOMの構造の確認と修正を行えます。また、リアルタイムで、更新を反映できます。
* JavaScript のデバッグ : JavaScriptパフォーマンスのプロファイリング、分析ポイント ( ブレークポイント )のセット、実行処理の制御を行います。
詳細は、[Chrome のリモートデバッグ機能 ( Google Chrome ブラウザーを使用した Android アプリ開発が対象 )](https://ja.docs.monaca.io/products_guide/debugger/debug#chrome-norimtodebaggu-google-chrome-burauzwoshita-android-apuriga) をご確認ください。
## カスタムビルド版 Monaca デバッガーのビルドとインストール
1. Monaca クラウド IDE メニューから、`ビルド → Androidアプリのビルド` を選択します。
2. `カスタムビルドデバッガー` を選択し、`ビルドを開始する` をクリックします。
3\. ビルドが完了するまで、時間がかかる場合があります。ビルドが完了する と、次の画面が表示されます。ビルドしたアプリは、QR コードを使用して、端末にインストールするか、または、ファイルを PC へダウンロードすることができます。
# iOS 向け Monaca デバッガー
| | ストア版 Monaca デバッガー | カスタムビルド版 Monaca デバッガー |
| ---------------------------------------------------- | ------------------------------------------ | ----------------------------------------------------------------------------------------- |
| 説明 | ストア版 Monaca デバッガー | Monaca クラウド IDE でビルドして作成する Monaca デバッガー |
| インストール方法 | 配信停止 | [カスタムビルド版 Monaca デバッガーのビルドとインストール](#kasutamubirudo-monaca-debaggnobirudotoinsutru) を参照のこと |
| Cordova プラグイン | 基本プラグインおよび複数のサードパーティー製プラグインがあらかじめ実装されています。 | 基本プラグインやサードパーティー製プラグインに加えて、ユーザー自作の プラグインなどを組み込むことができます。 |
| App ID (`iOS:CFBundleIdentifier`) | `mobi.monaca.debugger` | 設定画面にてユーザー側で設定 |
| アプリのリリース番号 ( 外部向け /`iOS:CFBundleShortVersionString`) | 固定 | ユーザー側で設定 |
| アプリのビルド番号 ( 内部向け / `iOS:CFBundleVersion`) | 固定 | ユーザー側で設定 |
| USB デバッグ | 不可 | 可 ( Safari の Web インスペクタ ) |
{% hint style="danger" %}
プッシュ通知用プラグインは、ストア版およびカスタムビルドデバッガーではご利用できません。ご利用の際はデバッグビルドかリリースビルドにてお願いいたします。
* プッシュ通知用 Cordova プラグイン例
* onesignal-cordova-plugin
* cordova-plugin-firebasex
{% endhint %}
## Cordova プラグイン
Monaca デバッガーには、「 基本プラグイン 」 が、あらかじめ実装されています。
基本プラグインとは、バッテリー情報の取得 API、カメラ API、住所録の取得 API、端末情報の取得 API などを指します。詳細は、[基本プラグイン](https://ja.docs.monaca.io/reference/core-cordova-plugins) をご確認ください。
これ以外の第三者提供 (外部のCordovaプラグイン) や自作プラグイン ([ユーザーCordovaプラグイン](https://ja.docs.monaca.io/products_guide/monaca_ide/dependencies/custom_cordova_plugin)) をプロジェクトに追加も可能です。
ストア版 Monaca デバッガーには、これらのプラグインが組込まれていないため、ストア版デバッガー上でアプリをそのまま実行しても、正しく動作しません。そこで、ストア版デバッガーの代わりに、カスタムビルド版の Monaca デバッガーを使用します。
カスタムビルド版も、ストア版も、どちらも Monaca デバッガーですが、カスタムビルド版のデバッガーは、Monaca クラウド IDE 上で 「 ビルド 」 して、端末にインストールします。
詳細は、[カスタムビルド版 Monaca デバッガーのビルドとインストール](#kasutamubirudo-monaca-debaggnobirudotoinsutru) をご確認ください。
## USB デバッグ ( iOS と Mac 対象 )
iOS 向けの Monaca デバッガーでは、USB デバッグをサポートしており、 Safari ブラウザーを使用したリモートデバッグが行えます。リモートデバッグで行える主な処理は、次のとおりです。
* Console によるデバッグ :
* Consoleを使用して、各種メッセージを出力できます。
* DOM 解析 :
* DOMの構造の確認と修正を行えます。また、リアルタイムで更新を反映できます。
* JavaScript デバッグ :
* JavaScriptパフォーマンスのプロファイリング、分析ポイント ( ブレークポイント )のセット、実行処理の制御を行います。
詳細は、[iOS アプリのデバッグ方法 ( Monaca デバッガーと USB デバッグを使用 )](https://ja.docs.monaca.io/products_guide/debugger/debug#safari-norimtodebaggu-ios-to-mac-ga) をご確認ください。
{% hint style="info" %}
Windows ではUSBデバッグはご利用いただけません。
{% endhint %}
## カスタムビルド版 Monaca デバッガーのビルドとインストール
### 事前準備
必要なアイテムを、次に記します。
* 秘密鍵
* 開発用証明書
* 開発用 プロビジョニング プロファイル
カスタム版デバッガーのビルド前に、上記のアイテムの準備と必要な設定を行います。詳細は、[iOS アプリのビルド](https://ja.docs.monaca.io/products_guide/monaca_ide/build/ios)をご確認ください。完了後、次の手順に従い、ビルドを行います。
### アプリのビルド
1. Monaca クラウド IDE メニューから、`ビルド → iOSアプリのビルド` を選択します。
2. `カスタムビルドデバッガー` を選択し、`ビルドを開始する` をクリックします。
3\. ビルドが完了するまで、時間がかかる場合があります。ビルドが完了すると、次の画面が表示されます。ビルドしたアプリは、QR コードを使用して、端末にインストールするか、または、ファイルを PC へダウンロードすることができます。
# Android エミュレーター向け Monaca デバッガー
ここでは 「 Android SDK 」 の AVD ( Android Virtual Device / Android 仮想端末 ) と呼ばれる Android エミュレーター上で、Monaca デバッガーを動作させる方法を紹介します。これを使えば、Android アプリのシミュレートを PC 上で行えます。また、複数の Android 端末でアプリの検証を行いたい場合もこの方法が有用です。
## ステップ 1 : Android 仮想端末のセットアップ
1. [Android Studio](http://developer.android.com/sdk/index.html)をダウンロードして、インストールします。
2. Android Studio を起動します。
3. 新規のプロジェクトを作成するか、または、既存のプロジェクトを開きます。
4. `AVD Manager` をクリックして、\[ Android Virtual Device Manager ] ダイアログを表示します。
5\. `+ Create Virtual Device` をクリックします。
6\. 使用する Android 端末を選択して、`Next` をクリックします。
7\. システムイメージを選択して ( 場合によっては、最初にダウンロード )、`Next` をクリックします。
8\. 仮想端末の設定を行います。`Show Advanced Settings` をクリックして、仮想端末の詳細設定 ( メモリーとストレージのサイズ、端末のフレーム設定、キーボード入力の可否など ) を行います。
9\. 設定後、 `Finish` をクリックします。
## ステップ 2 : Android 向けのカスタムビルド版 Monaca デバッガーのビルド
1. Monaca クラウド IDE へ行き、[Android 向けのカスタムビルド版 Monacaデバッガー](/products_guide/debugger/installation/debugger_android)をビルドします。詳細は、カスタムビルド版 Monaca デバッガーのビルドとインストールをご確認ください。
2. ビルドされたデバッガーのファイルをダウンロードして、Google Drive、Dropbox などのクラウドストレージへ、ダウンロードしたファイルをアップロードします。
3. アップロードしたファイルのダウンロードリンクを確認しておきます (仮想端末上で、後ほど、このリンクを使用します )。
## ステップ 3 : Monaca デバッガーのインストール
1. `AVD Manager` を選択して、対象の仮想端末を起動します。
2\. 仮想端末上でブラウザーを起動させ、[ステップ 2](/products_guide/debugger/installation/debugger_emulator#step-2) で確認したダウンロードリンクを開き、Android 向けのカスタムビルド版 Monaca デバッガーをダウンロードします。
3\. ダウンロードしたファイルをクリックして、デバッガーをインストールします。
4\. インストール ウィザードが起動します。
5\. インストール後、アプリの一覧画面に、Monaca デバッガーが表示されていることを確認します。
## ステップ 4 : Monaca デバッガー上でのプロジェクトの起動
1. Monaca デバッガーを起動させ、Monaca アカウントを使用して、サインインします。
2\. Monaca デバッガー上で、実行するプロジェクトをクリックします。
3\. これで、プロジェクトの検証の準備が整いました。アプリの開発における Monaca デバッガーの使用方法・具体例に関しては、[機能の概要](/products_guide/debugger/features) と [使用例](/products_guide/debugger/debug) をご確認ください。
参考ページ
* [Android 向けの Monaca デバッガー](/products_guide/debugger/installation/debugger_android)
* [iOS 向け Monaca デバッガー](/products_guide/debugger/installation/debugger_ios)
# 使用例
Monaca 提供の各種開発ツール ( Monaca クラウド IDE、Monaca Localkit、Monaca CLI ) と Monaca デバッガーの連携方法に関して、ここでは解説します。
* [Monaca クラウド IDE と Monaca デバッガーとの連携 ( Web 経由 )](https://ja.docs.monaca.io/products_guide/debugger/pages/-MfWrbJ7sNu6WTkFfPlI#monaca-クラウド-ide-と-monaca-デバッガーとの連携-web-経由)
* [Monaca 提供のローカル環境用の開発ツールと Monaca デバッガーとの連携](https://ja.docs.monaca.io/products_guide/debugger/pages/-MfWrbJ7sNu6WTkFfPlI#monaca-提供のローカル環境用の開発ツールと-monaca-デバッガーとの連携)
{% hint style="info" %}
最初に、端末またはエミュレーター上に、Monaca デバッガーをインストールします。詳細は、[ Monaca デバッガーのインストール方法 ](/products_guide/debugger/installation)をご確認ください。
{% endhint %}
## Monaca クラウド IDE と Monaca デバッガーとの連携 ( Web 経由 )
Monaca クラウド IDE および各ブラウザー標準のリモートデバッグ機能を使用した、Monaca アプリのデバッグ方法を紹介します。
* [Monaca デバッグパネル](/products_guide/debugger/debug#debugger-debug-panel): DOM の解析、Console を使用したデバッグ
* [USB デバッグ](/products_guide/debugger/debug#debugger-usb-debug): DOM の解析、Consoleを使用したデバッグ、JavaScript のデバッグ
### Monaca デバッグパネル
Monaca クラウド IDE の デバッグパネルには、Web アプリ向けのデバッグツールとして人気のある [Weinre ( WEb INspector REmote )](https://people.apache.org/~pmuellr/weinre/docs/latest/) が実装されています。このツールを使用して、Cosole を使用したデバッグと DOM の解析が行えます。
Monaca クラウド IDE と Monaca デバッガーを使用してアプリのデバッグする方法は、以下になります。
1. Monaca クラウド IDE 上で、プロジェクトを開きます。
2. Monaca デバッガー上で、プロジェクトを実行します。
3. IDEと端末が接続されていることを確認します。 デバッグパネル上に、端末情報が表示されていれば、接続されています ( 下のスクリーンショットを参照のこと )。表示されない場合、IDEまたはデバッガーをいったんリフレッシュさせます。IDE と端末の接続後に、アプリのデバッグを IDE 上で行えます。
#### Console を使用したデバッグ
Console API と JavaScript を併用して、Console ( コンソール ) 上に、メッセージを出力します。
Console API を、次に記します。
* `console.log()` : Console 上にメッセージを出力します。
* `console.debug()` : デバッグ用と通常のログを明示的に分けたい場合には、こちらを使用します。メッセージは、Debug タブ 上に表示されます。
* `console.warn()` : 黄色の警告マークと共に、メッセージが表示されます。
{% hint style="info" %}
Console API の詳細に関しては、 [Console API references ( Google Developers ) ](https://developer.chrome.com/devtools/docs/console-api)をご確認ください。
{% endhint %}
Console API を使用したサンプルコードを、次に記します。
1. 次のコードをコピーして、`index.html` ファイルに貼り付けます。
```markup
Hello World!
```
2. ファイルを保存して、Monaca デバッガーと Monaca クラウド IDE を接続します。次に、Monaca クラウド IDE 上で、プロジェクトを実行します ( \[ 実機デバッグ ] メニューをクリック )。次に、下の 2 つのスクリーンショットのようなメッセージが、Monaca クラウド IDE のデバッグパネル上および Monaca デバッガーのアプリログ上に、それぞれ表示されていることを確認します。
3\. デバッグパネル上で、次のように、アプリのエラーログも確認できます。
#### DOM の解析
DOM ( Document Object Model ) の解析ツールを使用して、次の処理ができます。
* 現在開いているページの DOM 構造が表示されます。
* 現在開いているページの DOM 構造と CSS
を修正でき、ページ側にもリアルタイムで反映されます。
詳細に関しては、 [スタイルと DOM の修正 ( 英語サイト)](https://developer.chrome.com/devtools/docs/dom-and-styles) をご確認ください。
### USB デバッグ
USB デバッグを有効化すると、次の操作を行えます。
* Console を使用したデバッグ : Console 上で、メッセージの出力とデバッグセッションを行えます。
* DOM の解析 : DOM の構造の確認と修正を行えます。また、リアルタイムで、更新を反映できます。
* JavaScript のデバッグ : JavaScript パフォーマンスの分析、分析ポイント ( ブレークポイント )
のセット、実行処理の制御を行えます。
USB デバッグ使用時に利用できるデバッグ方法は、次のとおりです。
1. iOS 端末を使用している場合には、[Safari のリモートデバッグ機能](/products_guide/debugger/debug#usb-debugging-ios)を利用できます。
2. Android 端末を使用している場合には、[Chrome のリモートデバッグ機能](/products_guide/debugger/debug#usb-debugging-android) を利用できます。
#### Safari のリモートデバッグ機能 ( iOS と Mac が対象 )
{% hint style="info" %}
USB デバッグを使用してデバッグをする場合、事前に行う設定がいくつかあります。詳細は、 [USB デバッグの事前準備 ](/products_guide/debugger/debug#usb-debaggu)をご確認ください。
{% endhint %}
1. USB ケーブルを使用して、iOS 端末と Mac を接続します。
2. カスタムビルド版 Monaca デバッガー上で、Monaca プロジェクトを実行します。
3. Safari を開いて、 `開発` メニューを選択します。表示されるリスト内に、開発者の iOS 端末名が表示されますので、選択します。表示されたサブメニューから、Monaca アプリ内で使用しているページを選択します。
4\. Web インスペクタ画面が表示されます。ここでは、総合的にアプリを検証できます ( HTTP リクエストのタイムライン表示、JavaScript のプロファイリング、DOM ツリーの操作など )。Web インスペクタの使用方法に関しては、こちらの [Safari Web インスペクタの使用方法 ( 英語サイト)](https://developer.apple.com/library/ios/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007874) をご確認ください。
#### Chrome のリモートデバッグ機能 ( Google Chrome ブラウザーを使用した Android アプリ開発が対象 )
{% hint style="info" %}
USB デバッグを使用してデバッグをする場合、事前に行う設定がいくつかあります。詳細は、 [USB デバッグの事前準備 ](/products_guide/debugger/debug#usb-debagguno)をご確認ください。
{% endhint %}
1. USB ケーブルを使用して、Android 端末と PC を接続します。
2. Monaca デバッガー上で、Monoca プロジェクトを実行します。
3. Chrome のアドレスバーに、 `chrome://inspect/` と入力します。
4. 「 Devices 」 ページが表示されます。次に、接続した Android 端末が表示されていることを確認して、端末情報の下に表示されている `inspect` をクリックします。
5\. Chrome DevTools が起動します。ここまでの手順で、Monaca アプリをデバッグする準備が整いました。Chrome DevTools の使用方法は、[こちら ( 英語サイト)](https://developer.chrome.com/devtools) をご確認ください。
## USB デバッグの事前準備
| プラットフォーム | iOS | Android |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Monaca デバッガー** | [カスタムビルド版 Monaca デバッガー](/products_guide/debugger/installation/debugger_ios)のみ | ストア版またはカスタムビルド版の [Monaca デバッガー](/products_guide/debugger/installation/debugger_android) |
| **ドライバーのインストール** | Mac OS X の場合、必要なドライバーは、インストールされています。 | Windows の場合、端末製造元の Web サイトから、端末用の対象のドライバーを入手します。Mac OS X の場合、必要なドライバーを、システム側で自動で検知してくれます。 |
| **USB デバッグ の有効化** | iOS 端末上で、\[ Web インスペクタ ] を有効化します。
設定 ‣ Safari を選択します。- 下にスクロールして、
詳細 を選択します。 Web インスペクタ を ON にします。
| Android 端末上で、\[ USB デバッグ ( USB debugging ) ] を有効化します。
設定 ‣ 端末情報 / タブレット情報 を選択して、ビルド番号を数回タップします。開発者向けオプション を選択します。USB デバッグ を選択します。
|
| **コネクションの信頼** | 端末上に、コンピューターの信頼性を確認する画面が表示されます。\[ 信頼する ] を選択して、コンピューター側と接続します。 | 端末上に、コンピューターの信頼性を確認する画面が表示されます。\[ 信頼する ] を選択して、コンピューター側と接続します。 |
参考ページ
* [機能の概要](/products_guide/debugger/features)
* [インストール方法](/products_guide/debugger/installation)
* [トラブルシューティング ガイド](/products_guide/debugger/troubleshooting)
# iOS カスタムビルド版デバッガー
Monaca デバッガーは、アプリのテストを効率化するためのアプリケーションです。
Monaca デバッガーを使うと、ソースコードを保存するだけで、すぐに実機上でアプリの動作を確認できます。アプリの動作を確認するために、アプリをビルドする必要も、端末にインストールする必要もありません。
## カスタムビルド版デバッガーとは
カスタムビルド版デバッガーは、プロジェクトで利用しているプラグインを搭載したデバッグ用アプリです。テストを行いたいプロジェクトのプラグインや設定情報をもとに、そのプロジェクトに特化したデバッグ用アプリを作成できます。
たとえば、開発しているプロジェクトで、バーコードスキャナープラグインを利用している場合、バーコードスキャナープラグインを搭載したデバッグ用アプリを作成できます。一度、カスタムビルド版デバッガーを作成すれば、プロジェクトのソースコードを編集する度に、編集した内容が実機端末へ自動で同期され、編集内容をすぐに確認することができます。
## 利用方法
### 1. 事前準備
カスタムビルド版 デバッガーを作成するため、次の証明書類が必要となります。
[iOSビルドの事前準備](/build-app/build-for-ios)を参考に用意します。iOSのデバッグビルドに必要となるものと同一です。
* 秘密鍵
* 開発用 証明書
* 開発用 プロビジョニング プロファイル
### 2. アプリのビルド
次の手順でデバッガーのビルドを行い、実機端末にインストールします。
1. Monaca クラウド IDEにログインし、デバッグ を行うプロジェクトを開きます。
2. IDE メニューから `ビルド → iOSアプリのビルド` を選択します。
3. `カスタムビルドデバッガー` を選択し、`ビルドを開始する` をクリックします。
4. ビルドが完了すると、ビルドしたアプリは、QR コードを使用して端末にインストール、または、ファイルを PC へダウンロードすることができます。
カスタムビルドデバッガーを選択
# iOS シミュレータービルド
iOSアプリのビルドでは、iOSシミュレーターで動作するビルドイメージを出力することができます。 \
実機でのデバッグには証明書やプロビジョニングプロファイルが必要となりますが、シミュレータービルドではこれらが不要です。 \
従ってApple Dveloper Programのアカウントが無くても動作確認が可能です。
### 制限事項
* シミュレータービルドされたアプリを実機へインストールすることはできません。
* ハードウェアに依存するような機能はシミュレーターでは動作できません。\
例)
* カメラによる写真・動画撮影
* バーコードスキャナー
* NFCリーダー
### 必要な環境
* Mac OSを利用\
Mac OS上のシミュレーターでアプリの動作確認ができます。利用にはXcodeのインストールが必要です。
* 外部サービスの利用\
`Appetize.io` などの外部サービスを利用すればシミュレーターがインストールされていない環境でも動作確認が可能です。
### ローカルのシミュレーターでの動作確認
1. **ビルド→iOSアプリのビルド** から`シミュレータービルド`を選択してビルドを実行してください。
2\. ビルドが完了するとビルド結果に`ローカルPCにダウンロード`が表示されます。クリックしてアプリをダウンロードしてください。
3\. ダウンロードされたzipファイルを解凍してシミュレーターにドラッグ＆ドロップしてください。
4\. シミュレーター上で動作確認することができます。
### Appetize.ioでの動作確認
1. 事前準備
`Appetize.io`を利用するためには、事前に外部サービスの登録とMonacaへの設定が必要です。 [Appetize.ioへの配信](https://ja.docs.monaca.io/products_guide/monaca_ide/monaca_ci/appetizeio)を参照して`Appetize.io`を登録してください。
2\. **ビルド→iOSアプリのビルド** から`シミュレータービルド`を選択してビルドを実行してください。 \
ビルドが完了するとビルド結果画面の下部に外部サービスとの連携機能が表示されます。\
`Appetize.io`をクリックしてください。
`デプロイ`をクリックすると`Appetize.io`にアプリが送信されます。
3\. `Appetize.io` サービスにログインして[ダッシュボード](https://appetize.io/apps)を開いてください。
`Appetize.io` にアプリが送信されていることが確認できます。
4\. `view` をクリックしてアプリを起動してください。
アプリが起動して動作確認を行うことができます。\
`Appetize.io`の操作方法については[公式のドキュメント](https://docs.appetize.io/)を参照してください。
# トラブルシューティング ガイド
### Monaca デバッガーとのペアリングが失敗する場合
Monaca デバッガーと ホスト PC のペアリングが失敗する場合、いくつかの理由が考えられます。
## Monaca デバッガー側はホスト PCを認識しているが、ペアリングが失敗する場合
多くの場合、ホスト PC 側のファイアーウォールに起因します。なお、ホスト PC とデバッガー間の通信には、TCP 接続を使用します。ポート番号は、`8001` です。待ち受けポートの変更方法に関しては、 [設定ダイアログ](/products_guide/monaca_localkit/overview#daiarogu) をご確認ください。ポート番号またはファイアーウォール設定の変更後は、再度、ペアリングをする必要があります。
## Monaca デバッガーが ホスト PC を認識していない場合
ホスト PC と端末が、同じネットワークに接続されているか確認します。同じネットワークに接続されているが、Monaca デバッガー側で、ホスト PC を検知できない場合には、次のように、手動でペアリングをします。
1. Monaca デバッガー画面の左上端に表示された切り替えメニューをタップして、次に、 `ローカルコンピュータ` ボタンをタップします。
2\. コンピュータを手動で追加する ボタンをタップします。
3\. [ホスト PC の IP アドレスとポート番号](/products_guide/debugger/troubleshooting#ip-port) を入力して、`ペアリング` ボタンをタップします。
4\. ペアリング後、\[ ペアリング済み ] タブ下に、次のように、ホスト PC が表示されます。
{% hint style="info" %}
公共の Wi-Fi アクセスポイントでは、まれに、クライアント同士の接続を禁止しています。この場合、別のネットワーク環境を使用してください。
{% endhint %}
[**ホスト** **PC** **の** **IP** **アドレスとポート番号**](/products_guide/debugger/troubleshooting)
Monaca デバッガーと ホスト PC を接続する場合、IP アドレスとポート番号が必要です。IP アドレスは、ホスト PC の識別に使用するもので、ポート番号 ( デフォルトでは、8001 ) は、Monaca 提供のローカル環境用の開発ツール ( Monaca CLI、Monaca Localkit など ) 側が通信に使用するものです。また、ポートは、未使用であること ( 競合していないこと )、開放されていることが必要です。これ以外の場合、通信は確立できません。
{% hint style="info" %}
種類の異なる、Monaca 提供の開発ツールを、１台の PC 上で、複数起動させる場合、デフォルトのままでは、ポート番号が競合します。競合を避けるため、各ツールが使用するポート番号を適宜変更してください。
{% endhint %}
| OS | Mac | Windows |
| ----------- | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- |
| **IP アドレス** | IP アドレスの確認方法
- ターミナルを開きます。
ifconfig と入力して、実行します。
| IP アドレスの確認方法
- コマンドプロンプトを開きます。
ipconfig と入力して、実行します。
|
| **ポート番号** | ポート状態の確認方法
- ターミナルを開きます。
lsof -i :PORT\_NUMBER と入力して、実行します。
| ポート状態の確認方法
- コマンドプロンプトを開きます。
netstat と入力して、実行します。
|
## Android 9 以降でペアリングに失敗する場合
Android 9 以降でカスタムビルドデバッガーを使用する場合は、`config.xml` の `widget` タグに `andorid 名前空間` 設定を追加し、`usesCleartextTraffic` 設定を追加する必要があります。
`config.xml` に以下の設定を追加後、カスタムビルドデバッガーを作成してください。
{% hint style="info" %}
Android カスタムビルドデバッガー v9.0.1 以降をご利用の場合は、下記の設定は必要ありません。
{% endhint %}
```markup
```
参考ページ
* [インストール方法](/products_guide/debugger/installation)
* [使用例](/products_guide/debugger/debug)
* [機能の概要](/products_guide/debugger/features)
# チュートリアル
* [Monaca クラウド IDE と Monaca デバッガーとの連携](/tutorials/monaca_ide/testing_debugging)
* [Monaca Localkit と Monaca デバッガーとの連携](/tutorials/monaca_localkit/testing_debugging)
* [Monaca CLI と Monaca デバッガーとの連携](/tutorials/monaca_cli/testing_debugging)
# チームダッシュボード
## Monaca ダッシュボード
Monaca には 2 種類のダッシュボードがあります。
1. Monaca ダッシュボード：プロジェクトの開発や管理をするために、開発者アカウントで使用されます。
2\. チームダッシュボード：開発チームおよび各種ライセンスやチケットを管理するために、管理者アカウントで使用されます。
{% hint style="info" %}
チームダッシュボードにアクセスするには、対象のプランに加入する必要があります。詳しくは、[料金プラン](https://ja.monaca.io/pricing.html) を参照してください。
{% endhint %}
## アカウントの種類
管理者アカウントと 開発者アカウントの 2 種類があります。
1. 管理者アカウント
* チームダッシュボードにおいて、開発者をチームへ登録することや、各種ライセンス・チケットの管理が行えます。
* 管理者アカウントにてアプリ開発を行う場合は、管理者アカウントへの開発ライセンスの適用が必要となります。\
(開発者ライセンス未適用の場合は、チームダッシュボードのみ利用が可能です。)
2. 開発者アカウント
* [Monaca ダッシュボード](https://monaca.mobi/ja/dashboard)において、Monaca プロジェクトを開発するためのアカウントです。
* Enterpriseプラン ユーザーは、[エンタープライズ プラグイン](/reference/power_plugins) を無料で使用することができます。 Businessプラン ユーザーは、有料になります。エンタープライズ プラグインは、チームダッシュボードにて取得できます。 ( 詳しくは [プラグインライセンスの購入](/products_guide/team_dashboard#puraguinraisensuno) を参照してください。)
## チームダッシュボードの概要
チームダッシュボードでは、管理者は、開発チームの管理、開発者ライセンスの購入と割り当て、サポートチケットの購入、契約タイプの変更など、さまざまな処理を行うことができます。
チームダッシュボードでは、管理者は主に次の処理を行います。
* 開発者管理: 開発者をチームに割り当てまたは解除。
* ライセンス管理: 開発者およびエンタープライズ プラグインライセンスの購入と管理。
* チケット管理: サポートおよび CI（ 継続的インテグレーション ）チケットの購入と管理、チケットの使用履歴や残りのチケット数の確認。
* アクセス制限管理: IP アドレス制限を使用して、チームおよび Monaca ダッシュボードへのアクセス制限。
* 契約管理: 契約情報の表示や更新、契約タイプの変更、チームの削除。
* サポート リクエスト: Monaca サポートチームへの各種お問い合わせ。
## ご利用前の準備
チームダッシュボードにログイン後、各種機能のご利用開始前に、次の操作を行う必要があります。
1. [会社情報を登録する](/products_guide/team_dashboard#hui-she-qing-bao)
2. [開発者をチームに割り当てる](/products_guide/team_dashboard#no)
## チーム アカウント
チームの開発者と管理者を管理できます。
### 開発者の管理
チームに開発者を追加するには、`開発者アカウントを追加する` ボタンをクリックします。 次に、追加する開発者のメールアドレスを入力します。
追加する開発者には、次のようなタイプがあります。
1. Free プランの場合: 開発者として追加することができます。
2. 有料プランの場合: 開発者として追加する前に、現在契約しているプランをキャンセルし、Free プランへ移行する必要があります。
3. Monaca に登録していない場合: はじめに Monaca に登録することで、開発者として追加することができます。
開発者をチームに追加すると、追加された開発者は、自動的に管理者と同じプランになります。 管理者が Business プランの場合は、追加された開発者は Business プランになります。
{% hint style="info" %}
開発者は、割り当てられたプランの Monaca サービスを利用することができますが、トライアル期間中は、リリースビルドでビルド制限が発生します。
{% endhint %}
### 管理者の管理
チームに管理者を追加するには、`管理者アカウントを追加する` ボタンをクリックします。 次に、新しい管理者の情報を入力します。
{% hint style="info" %}
Business プランの場合は、管理者は 1 人となるため、管理者を追加することはできません。 Enterprise プランの場合は、複数の管理者を持つことができます。
{% endhint %}
## 開発者ライセンス
チームの開発者ライセンスを管理することができます。 開発者ライセンスには 3 種類あります。
1. バンドル ライセンス: プランに付随するフルライセンス
2. トライアル ライセンス: 評価目的の試用ライセンス
3. 購入したライセンス: 追加購入したライセンス
### 開発者ライセンスの更新
各ライセンスの使用を変更することができます。
* 開発者ライセンスの割り当てまたは解除
* ライセンスの自動更新オプションの変更
* 次回更新時におけるライセンス期間の変更
{% hint style="info" %}
既にチームに追加されている開発者のみ設定を変更することができます。それ以外の場合は、最初に開発者をチームに追加する必要があります。開発者の追加については、[ 開発者の管理 ](/products_guide/team_dashboard#no)を参照してください。
{% endhint %}
### 追加ライセンスの購入
開発者ライセンスを追加購入できます。
追加のライセンスを購入するには、`開発者ライセンス購入` ボタンをクリックします。 次に、以下の情報を入力します。以降、手順に従い手続きを完了します。
## エンタープライズ プラグインライセンス
Business プランの場合は、プラグインライセンスを購入することで、エンタープライズ プラグインを使用することができます。Enterprise プランの場合は、エンタープライズ プラグインを無料で使用することができます。
有効なエンタープライズ プラグインライセンスがある場合、チーム内のすべての開発者はプラグインを使用できます ( トライアル期間中 ) 。リリースビルドを行う場合は、プラグインライセンスをプロジェクトに割り当てる必要があります。
### プラグインの設定
プラグインライセンスをプロジェクトへ割り当てる手順は、以下になります。
1. 割り当てるプラグインの `設定` ボタンをクリックして、プラグインライセンス プロジェクト設定ページを開きます。
2. 開発者リストから開発者を選択します。
3. プラグインライセンスを割り当てるプロジェクトを選択します。
4. `登録する`ボタンをクリックします。
### プラグインライセンスの購入
トライアル期間中の場合は、プラグインライセンスを購入することはできません。
購入後のプラグインライセンスは、1 年間有効です。
プラグイン詳細については、[こちら](https://ja.monaca.io/pricing.html)を参照ください。
## サポート / CI チケット
利用可能なチケットの数、チケットの有効期限、各チケットの使用履歴など、サポート / CI チケットに関する情報を確認できます。
チケットにより利用できるサービスについては、[こちら](https://ja.monaca.io/dev-support.html)を参照ください。
### 追加チケットの購入
プラン登録後は、一定数のサポートチケットと CI チケットが毎月付与されます。
追加のチケットを購入して使用することもできます。
## アクセス制限
サービスへのアクセスを、IPアドレス制限により「開発者向けアクセス制限」と「管理者向けアクセス制限」として設けることができます。
初期設定では、両方のダッシュボードへのアクセス制限はありません。
### アクセス制限の変更
次のように、各ダッシュボードへのアクセス制限を変更することができます。
1. `変更`ボタンをクリックします。
2. `開発者向け IP アドレス制限の変更` オプションを選択します。
3. ダッシュボードへのアクセスを許可するIPアドレスを入力します。1 行に 1 つの IP アドレスを入力することができます。IP アドレス範囲を指定することもできます。空白文字の後のテキストは、メモとして使用することができます。 ( 下の例を参照 )
{% hint style="info" %}
チームダッシュボードのアクセス制限については、チームダッシュボードへアクセスできなくなる可能性があるため、現在のIPアドレスと他の IP アドレスを入力する必要があります。
{% endhint %}
## 会社情報
会社情報の表示や更新を行うことができます。
## 契約情報
契約情報を表示および更新を行うことができます。
トライアル期間中の場合は、ダッシュボードのトップページにトライアル期間が表示されます。
### プラン契約の登録
プラン契約を登録する場合は、次の情報を入力する必要があります。
プラン契約情報の入力後、お支払い情報を入力する必要があります。
{% hint style="info" %}
お支払い方法として `クレジットカード` を選択した場合は、契約プランは登録完了後すぐに有効になります。`請求書払い` を選択した場合は、必要手続きが完了後に契約プランが有効になります。
{% endhint %}
お支払い情報を入力後、最後に契約登録内容を確認します。契約情報ページは次のようになります。
## 決済履歴・領収書
以前の決済の履歴を表示することができます。各決済の領収書を発行してダウンロードすることができます。
{% hint style="danger" %}
領収書を発行する際に、領収書の宛名を指定するよう求められます。この領収書の宛名は、後で変更することはできません。
{% endhint %}
{% hint style="info" %}
領収書は、クレジットカード決済からのみ発行することができます。
{% endhint %}
## サポートへのお問い合わせ
チームダッシュボードの使用、契約登録、お支払い方法の変更などについて、ご不明な点がございましたら、サポートお問い合わせページからご連絡ください。
# クイックビューア
この機能を利用すると、 モバイル端末からMonacaにアクセスするだけで、端末上でのプロジェクトのデザインを確認できます。
{% hint style="info" %}
カメラやデバイスモーションなど端末機能の確認は行えません。 端末機能の確認を行う場合は、カスタムデバッガーまたはデバッグビルドをご利用ください。
{% endhint %}
## 利用方法
この機能へのアクセスは、次の2つのログイン方法で行います。
1. QRコードログイン
2. 実機端末のブラウザからのログイン
### QRコードログイン
MonacaクラウドIDEのダッシュボードを開き、ヘッダーメニューの `クイックビューア` をクリックします。表示されたQRコードをモバイル端末から読み取ることでログインできます。
### ブラウザからのログイン
モバイル端末のブラウザから [MonacaログインURL](https://monaca.mobi/ja/login)にアクセスします。
ログイン後、プロジェクトをタップするとプレビューを確認できます。
## 機能の特徴
この機能は、プロジェクトをプレビューするほか、次の機能を備えています。
### ライブリロード
MonacaクラウドIDEでプロジェクトを開き、ファイルを編集し保存すると、リアルタイムで同期されます。
### デバッグログ
デバイス、プレビュー上で、コンソールログ(console.log()) が呼び出されると、ログ情報が MonacaクラウドIDEのログパネルに表示されます。
---
[Next Page](/llms-full.txt/1)