ドキュメントTOP » Monaca ガイド » Monaca での開発の概要

Monaca での開発の概要

Monaca とは?

Monaca は、アシアル株式会社が提供する、スマートフォン・タブレット向けアプリの開発ツール、Web サービスなどの総称です。Monaca では、スマートフォン向けのアプリ開発が、誰でも簡単にできるように、各種開発ツール・ Web サービスに加え、サポート ( StackOverFlow での議論の場、情報提供用のブログ、ツールの取扱説明書など ) も提供しています。

Monaca では、ハイブリッド 技術を駆使して、モバイルアプリを開発できます。また、Monaca では、HTML5 を使用した、クロスプラットフォーム開発を実現するため、PhoneGap/Cordova を採用し、加えて、開発効率を向上させるため、クラウド技術を使用した、統合的な開発ツールおよび Web サービスを提供しています。これにより、「 ハイブリッド モバイル アプリ 」 の開発を、容易に開始できます。また、Monaca が提供する開発ツールは、特定のフレームワークには依存していないため、柔軟性があり、現在の開発工程・開発環境にも、スムーズに導入できます。また、Cordova プラグインの組み込みも簡単に行えます。

Monaca を選ぶ理由

Monaca を選択する、3 つの主な理由を、次に記します。

  • クラウドを活用した開発環境 : Monaca が提供するツールは、クラウド技術を活用して、さまざまな側面で、アプリの開発をサポートしてくれます。開発環境をクラウド上に構築したことで、特別なセットアップをせずとも、さまざまな柔軟性を引き出すことができます。たとえば、クラウド経由で、ローカル環境との同期ができ、現在お使いの環境をそのまま利用して、開発を行えます。また、クラウド経由で、モバイル端末とのリアルタイムの同期、リモードビルドなども行えます。よって、クラウドとローカル環境の両方を活用できます。

  • 組み合わせ自由 : Monaca は、設計から配布に至るまで、すべての工程 ( 設計・開発・バックエンド開発・検証・デバッグ・ビルド・配布 ) をカバーしています。全工程で もしくは ある工程だけで、または、全機能を もしくは ある機能だけを、お好みでチョイスして、Monaca を使用できます。また、他のツール ( Sublime Text、Git など ) との組み合わせも自由自在です。よって、どの開発工程からでも、Monaca をスムーズに導入できます。

  • 非依存型 ( フロントエンドに使用する各種フレームワークからの独立、併用可能な開発ツール群 ) : 使用するフレームワークは、開発者が自由に選択できます。お勧めの UI フレームワークとして、私たちが開発している Onsen フレームワーク ( オープンソース、バージョン 1 は Angular に依存 ) がありますが、基本的に、使用するフレームワークは、開発者が自由に選択できます。また、お勧めのツールとしては、Monaca CLI があります。このツールを使用すれば、開発環境の切り替え、別環境への移植作業などをせずに、現在お使いの開発環境で、Monaca クラウドが提供している各種 Web サービスを利用することができます ( 特に、Ionic、Cordova を使用してきた開発者の方に、Monaca CLI をお勧めします )。Monaca は、「 開発者の自由度の向上 」 を真剣に考えています !

Monaca が提供する開発ツール

Monaca では、アプリ開発の各工程で利用できる、次の 4 種類の開発環境を提供しています。これらの開発環境を活用すれば、より効果的に、より柔軟に、開発を行えます。

Monaca クラウド IDE

Monaca クラウド IDE は、ブラウザー上で動作する開発環境です。モバイルアプリ開発工程のほとんどを、Web ブラウザー上で行え、手間のかかる設定も必要ありません。また、Monaca デバッガー とライブプレビュー ( Monaca クラウド IDE に実装されている機能 ) を併用して、開発中でも、アプリの動作検証を行えます。なお、ライブプレビュー機能では、Cordova プラグインまたはネイティブのプラグインをサポートしていないため ( 正しくプレビューできません )、検証・デバッグ時には、Monaca デバッガーも併用することを推奨します。詳細はこちら。

../../_images/173.png

Monaca クラウド IDE の画面

Monaca Localkit

Monaca Localkit は、Monaca と連携して使用できる、ローカル環境用の開発ツールです。使い慣れたアプリ開発環境・ツール ( 各種エディター、バージョン管理システムなど ) と併用でき、よりセキュアで、ストレスフリーな開発を行えます。また、Monaca と連携することで、Monaca に実装されている、多様な開発サポート機能も活用できます。また、Monaca Localkit を使用すれば、ローカル PC ( Windows/Mac ) 上で、お好みの開発環境を使用して、開発を行えます。詳細はこちら。

../../_images/530.png

Monaca Localkit の画面

Monaca CLI

Monaca CLI は、コマンドライン形式のインターフェイスです。CLI を介して、Monaca がクラウドで提供しているサービスを利用できます。CLI を使用して、たとえば、デバッガーとの接続、インスペクタとの連携、プロジェクトの作成、プロジェクトのリモートビルドなど、多岐にわたる処理を行えます。また、クラウド上に保存されているプロジェクトをローカルにインポートできます。このインポート機能は、クラウドからローカルへ環境を切り替える場合に有用です。 詳細はこちら

Monaca for Visual Studio

Monaca for Visual Studio は、Monaca が提供する、もう一つのローカル環境用の開発ツールです。こちらのツールを使用すれば、開発環境として、Visual Studio を利用して、アプリを開発できます。また、Visual Studio Community のユーザーであれば、無料で使用できます。詳細はこちら。

../../_images/vs.png

Monaca for Visual Studio の画面

Monaca デバッガー

上述のような多様な開発環境の提供に加えて、Monaca では、Monaca デバッガーを提供しています。Monaca デバッガーは、デバッグ用のアプリであり、このアプリを使用してデバッグを行えば、デバッグ効率を大幅に向上できます。このアプリでは、他の環境で開発中のプロジェクトと自動で同期が行われるので、プロジェクトの更新のたびにビルドをせずとも、コーディング中のアプリを端末上で実行できます ( よって、Monaca デバッガーでは、開発中のアプリの動作を端末上で、リアルタイムに検証できます )。他のアプリ同様、Monaca デバッガーアプリも端末にインストールして使用します。詳細はこちら。

../../_images/253.png

Monaca デバッガー アプリ

Monaca 使用時のデバッグ方法の概要を、表と図で記します ( デバッグパネル・USB デバッグ・Monaca デバッガーを使用 )。詳細は、Monaca アプリのデバッグ方法と具体例 をご確認ください。

Monaca 提供の開発ツール

Monaca クラウド IDE

Monaca CLI/Monaca Localkit/Monaca for Visual Studio

必要事項

インターネット接続

インターネット接続とペアリング

Monaca デバッグパネル

Monaca が推奨するブラウザーを使用しているのであれば、この機能を使用できます ( OS による影響は受けません )。いずれの OS ( Mac または Windows ) と端末 ( iOS または Android ) の組み合わせでも使用できます。

実装されていません。

USB デバッグ

このデバッグ方法の場合、iOS 端末をお持ちのときには Safari ( Safari のリモートデバッグ機能 ) が使用できる Mac 環境、一方、Android 端末をお持ちのときには Chrome ブラウザー ( Chrome DevTools のリモートデバッグ機能 ) が使用できる Mac または Windows 環境が必要となります。

../../_images/628.png

Monaca デバッガーと各開発ツールとの関係

Monaca の登録プラン

Monaca では、お客様の多様なニーズにお応えできるように、個人向けプランから企業向けプランまで、さまざまな種類のアカウントをご用意しております。登録後のデフォルトのアカウントは、「 Free プラン ( 無料 ) 」 となります。追加機能をご希望される場合には、ご登録後にアップグレードできます。Monaca アカウントの種類とサービスに関しては、 Monaca 料金プラン をご確認ください。

月額料金プランの場合

  • 14 日間の無料トライアルがあります。

  • 無料トライアル期間中であれば、どの月額プランにでも変更できますが、トライアル期間は、変更の都度、延長しません。

  • トライアル期間の終了後に、課金が開始されます。トライアル後は、ご利用日数に応じて、月末まで、日割で課金されます。ただし、Free プランに変更した場合は、この限りではありません。

  • それ以降は、毎月 1 日が当月の請求日となります。

年額料金プランの場合

  • 年額料金プランには、無料トライアル期間はございません。

  • ご登録後、直ちに年額をご請求します。

  • ご契約の更新日は、登録月から起算して、13 ヶ月目の 1 日となります ( ただし、契約途中で Free プランに変更した場合は、この限りではありません )。たとえば、2016年7月20日に、年額プランにご登録された場合、更新日は、2017年8月1日になります。

アクティベーション コードを利用する場合

  • プランのアップグレードまたは使用期限を延長する場合には、ご希望のプラン名と延長期間を、お問い合わせ窓口までご連絡ください。

  • 使用期限日に、自動的に、Free プランに移行します。

ハイブリッドアプリの特徴と構造

ハイブリッドアプリの特徴

  • Web アプリとネイティブの両方の性質を兼ね備えます ( 下の図を参照のこと )。

  • オペレーティングシステムの違いに関わらず、ハイブリッドアプリは、ブラウザーコンポーネント ( クロスプラットフォームをサポート ) 上で動作します。つまり、WebView コンポーネントをサポートしていれば、どのオペレーティングシステム ( iOS・Android・その他 ) でも、ハイブリッドアプリは、動作します。言い換えれば、ソースコードをひとつ組めば、複数のプラットフォームで実行できます。

../../_images/438.png

ネイティブ、ハイブリッド、Web アプリの構造の違い

ハイブリッドアプリ開発に必要な知識

  • HTML・CSS を使用した、ユーザー インターフェイス ( UI ) のデザイン

  • アプリ上の処理を行う JavaScript

  • 端末搭載のネイティブ機能および各種プラグインを使うためのライブラリー

注釈

iOS・Android アプリは、Cordova 上で実行され、端末側のネイティブ機能にアクセスするときは、 PhoneGap ( JavaScript ライブラリー ) を使用します。また、Windows アプリは、Windows ランタイム上で実行され、Chrome アプリは、Chrome ランタイム上で実行されます。