# Monaca での開発の概要 ## Monaca とは？ Monaca は、アシアル株式会社が提供する、スマートフォン・タブレット向けアプリの開発ツール、Web サービスなどの総称です。Monaca では、スマートフォン向けのアプリ開発が、誰でも簡単にできるように、各種開発ツール・ Web サービスに加え、サポート ( StackOverFlow での議論の場、情報提供用のブログ、ツールの取扱説明書など ) も提供しています。 Monacaは、PhoneGap/Cordova で HTML5 ハイブリッド モバイルアプリ の開発を容易にします。 Monaca は、既存のワークフローと開発環境にすぐに接続できる、最もオープンなハイブリッドアプリ開発プラットフォームです。 Monaca クラウド IDE、CLI からデバッガー、リモートビルドまで、ハイブリッドアプリ開発に必要なものはすべてここにあります。 ## Monaca を選ぶ理由 Monaca を選択する、3 つの主な理由を、次に記します。 * クラウドを活用した開発環境 : 私たちのツールは、クラウドを活用した 2 つのアプリ開発方法を提供しています。完全なクラウド開発環境では、セットアップが不要で柔軟性があります。また、クラウド同期によるローカル開発では、独自の環境を使用でき、端末のライブ同期やリモートビルドなどの機能を利用できます。 * フレームワーク非依存型 : 私たちのオープンソース [Onsen Framework](http://onsen.io/) は、Monaca と緊密に統合されていますが、Monaca は、他の JavaScript フレームワークも使用することができます。 Angular 1、2+、React、Vue.js もサポートしています。また、独自のフレームワークも導入することができます。 すぐに使用できるテンプレートが多数用意されています。 * 組み合わせ自由 : 私たちは、設計、アプリケーション開発、バックエンド開発、テスト、デバッグ、ビルド、ディストリビューションにいたるまで、すべての工程をカバーしています。Monaca は、Sublime Text や Git のようなツールを使って作業することができます。必要なものだけを選んでください。私たちはあなたのワークフローにシームレスにつながります。 ## Monaca が提供する開発ツール Monaca では、アプリ開発の各工程で利用できる、次の 4 種類の開発環境を提供しています。これらの開発環境を活用すれば、より効果的に、より柔軟に、開発を行えます。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgYvNw6GVBReLNKtQmq%2F-MgYvxOiUkbHi57khCsu%2Fimage.png?alt=media\&token=3d284f3c-7a9c-446e-994e-c531984c2bba) ### Monaca クラウド IDE Monaca クラウド IDE は、ブラウザベースの開発環境です。Web ブラウザからセットアップせずにアプリ開発を行うことができます。IDE、デバッガー、リモートビルドまで、必要なものはすべてそろっています。 Monaca クラウド IDE は、ブラウザー上で動作する開発環境です。モバイルアプリ開発工程のほとんどを、Web ブラウザー上で行え、手間のかかる設定も必要ありません。また、[Monaca デバッガー](https://ja.docs.monaca.io/products_guide/debugger) とライブプレビュー ( Monaca クラウド IDE に実装されている機能 ) を併用して、開発中でも、アプリの動作検証を行えます。なお、ライブプレビュー機能では、Cordova プラグインまたはネイティブのプラグインをサポートしていないため ( 正しくプレビューできません )、検証・デバッグ時には、Monaca デバッガーも併用することを推奨します。[詳細はこちら](https://ja.docs.monaca.io/products_guide/monaca_ide) ![Monaca クラウド IDE の画面](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgYvNw6GVBReLNKtQmq%2F-MgYwIVgF-4UNTURIINy%2Fimage.png?alt=media\&token=0b231c71-f7b7-4305-9f3f-a8205409e027) ### Monaca Localkit Monaca Localkit は、Monaca と連携して使用できる、ローカル環境用の開発ツールです。使い慣れたアプリ開発環境・ツール ( 各種エディター、バージョン管理システムなど ) と併用でき、よりセキュアで、ストレスフリーな開発を行えます。また、Monaca と連携することで、Monaca に実装されている、多様な開発サポート機能も活用できます。また、Monaca Localkit を使用すれば、ローカル PC ( Windows/Mac ) 上で、お好みの開発環境を使用して、開発を行えます。[詳細はこちら](https://ja.docs.monaca.io/products_guide/monaca_localkit) ![Monaca Localkit の画面](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgYvNw6GVBReLNKtQmq%2F-MgYwQTmcCSAGNICJNYa%2Fimage.png?alt=media\&token=3c640c17-34db-4bce-a813-691d024a6cff) ### Monaca CLI Monaca CLI は、コマンドライン形式のインターフェイスです。CLI を介して、Monaca がクラウドで提供しているサービスを利用できます。CLI を使用して、たとえば、デバッガーとの接続、インスペクタとの連携、プロジェクトの作成、プロジェクトのリモートビルドなど、多岐にわたる処理を行えます。また、クラウド上に保存されているプロジェクトをローカルにインポートできます。このインポート機能は、クラウドからローカルへ環境を切り替える場合に有用です。[詳細はこちら](https://ja.docs.monaca.io/products_guide/monaca_cli) ## Monaca デバッガー 上述のような多様な開発環境の提供に加えて、Monaca では、Monaca デバッガーを提供しています。Monaca デバッガーは、デバッグ用のアプリであり、このアプリを使用してデバッグを行えば、デバッグ効率を大幅に向上できます。このアプリでは、他の環境で開発中のプロジェクトと自動で同期が行われるので、プロジェクトの更新のたびにビルドをせずとも、コーディング中のアプリを端末上で実行できます ( よって、Monaca デバッガーでは、開発中のアプリの動作を端末上で、リアルタイムに検証できます )。他のアプリ同様、Monaca デバッガーアプリも端末にインストールして使用します。[詳細はこちら](https://ja.docs.monaca.io/products_guide/debugger) ![Monaca デバッガー アプリ](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgYvNw6GVBReLNKtQmq%2F-MgYw_AKIfARLWTcDgJi%2Fimage.png?alt=media\&token=0ee5d7b1-8c37-42ac-af96-9579cb65a29b) Monaca 使用時のデバッグ方法の概要を、表と図で記します ( デバッグパネル・USB デバッグ・Monaca デバッガーを使用 )。詳細は、[使用例](https://ja.docs.monaca.io/products_guide/debugger/debug) をご確認ください。 | Monaca 提供の開発ツール | Monaca クラウド IDE | Monaca CLI/Monaca Localkit | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- | | **必要事項** | インターネット接続 | インターネット接続とペアリング | | **Monaca デバッグパネル** | Monaca が推奨するブラウザーを使用しているのであれば、この機能を使用できます ( OS による影響は受けません )。いずれの OS ( Mac または Windows ) と端末 ( iOS または Android ) の組み合わせでも使用できます。 | 実装されていません。 | | **USB デバッグ** | このデバッグ方法の場合、iOS 端末をお持ちのときには Safari ( Safari のリモートデバッグ機能 ) が使用できる Mac 環境、一方、Android 端末をお持ちのときには Chrome ブラウザー ( Chrome DevTools のリモートデバッグ機能 ) が使用できる Mac または Windows 環境が必要となります。 | | ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgYvNw6GVBReLNKtQmq%2F-MgYwrlAtbHCywrOnPSa%2Fimage.png?alt=media\&token=70285a9e-fe30-4517-8606-77af29ac0b99) ## Monaca エンタープライズ プラグイン Encryption プラグインは、あなたのアプリを保護します。In-App Updater プラグインを使用すると、App Store にアップロードすることなく簡単にアプリをアップデートすることができます。その他、Secure Storage プラグインが利用可能です。 [続きを読む](https://ja.docs.monaca.io/reference/power_plugins) ## Monaca の登録プラン Monaca では、お客様の多様なニーズにお応えできるように、個人向けプランから企業向けプランまで、さまざまな種類のアカウントをご用意しております。登録後は、14 日間の無料トライアルをお試しいただけます。Monaca アカウントの種類とサービスに関しては、 [Monaca 料金プラン](https://ja.monaca.io/pricing.html) をご確認ください。 ### アクティベーション コードを利用する場合 * プランのアップグレードまたは使用期限を延長する場合には、ご希望のプラン名と延長期間を、お問い合わせ窓口までご連絡ください。 * 使用期限日に、自動的に Free プランに移行します。 ## ハイブリッドアプリの特徴 * Web アプリとネイティブの両方の性質を兼ね備えます (下の図を参照のこと )。 * オペレーティングシステムの違いに関わらず、ハイブリッドアプリは、ブラウザーコンポーネント ( クロスプラットフォームをサポート ) 上で動作します。つまり、WebViewコンポーネントをサポートしていれば、どのオペレーティングシステム (iOS・Android・その他 )でも、ハイブリッドアプリは、動作します。言い換えれば、ソースコードをひとつ組めば、複数のプラットフォームで実行できます。 ![Differences between Native, Hybrid, and Web Apps](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgYvNw6GVBReLNKtQmq%2F-MgYxOywCO5_xl0pdxK-%2Fimage.png?alt=media\&token=ec943d6d-b2b2-4651-9573-8f5c1f394b74) ### ハイブリッドアプリ開発に必要な知識 * HTML・CSS を使用した、ユーザー インターフェイス ( UI ) のデザイン * アプリ上の処理を行う JavaScript * 端末搭載のネイティブ機能および各種プラグインを使うためのライブラリー