スマートフォンアプリを作るというと、iOSであればXcode、AndroidであればAndroid Studioを使って作らなければならないイメージがあります。わざわざIDEを用意して、その使い方に慣れるのはとても面倒です。

そこで今回は皆さんが使い慣れているテキストエディタ(この記事では秀丸)を使ってスマートフォンアプリを作る方法を紹介します。

Monaca LocalKitを使おう

Monaca LocalKitはハイブリッドアプリ開発プラットフォームであるMonacaをローカルから使えるようにする開発用のソフトウェアです。具体的には、

  • Monacaプロジェクトの作成
  • ビルドの指示(実際のビルドはクラウド上)
  • ローカルコンピュータ上での開発と実機へのリアルタイム反映

をサポートしています。

Monaca LocalKitをダウンロード/インストールする

Monaca LocalKitはMonaca Localkit - ローカル型HTML5ハイブリッドアプリ開発ツールからダウンロードできます。WindowsとMac OSX版が用意されていますのでお使いのOSに合わせて選んでください。

なおMonaca LocalKitが使えるのはProプラン以上になります。

Monaca LocalKitを起動する

Monaca LocalKitを起動すると最初にログインが求められます。ログイン後、まずは新しいプロジェクトを作成します。既存のMonaca IDE上のプロジェクトをインポートすることもできます。すでに開発されているプロジェクトをローカル上で開発する場合にもすぐに切り替えられます。

開発する

アプリケーションのコードはすべてローカルコンピュータ上にあります。編集は好きなエディタで行えます。今回の目的でもある秀丸でも可能です。

この時、実機のiOS/AndroidデバイスでMonacaデバッガーを起動してMonaca LocalKitとペアリングしておくと、秀丸でファイル保存をした瞬間にMonacaデバッガーも再読み込みされます(スマートフォンとデスクトップが同じネットワーク上にある必要があります)。

プレビューを使うとChromeのDevToolsが立ち上がるのでブレークポイントを設定したり、コンソールでテスト実行したりするのも簡単です。

アプリをビルドする

開発がある程度終わった段階でアプリをビルドします。この時にはアプリケーションのソースコードを一式Monaca クラウド IDEへアップロードし、ビルドを行います。ビルド環境を構築する必要はありません。プラグインを使っている場合などはデバッガーとしてビルドするとさらに開発が容易になるでしょう。


Monaca LocalKitを使うとWebブラウザを使わずにハイブリッドアプリ開発が進められます。開発環境を構築する手間もなく、これまで使ってきたテキストエディタがそのまま使えます。ぜひ体験してください。

Monaca Localkit - ローカル型HTML5ハイブリッドアプリ開発ツール