スマートフォンアプリを作るというと、iOSであればXcode、AndroidであればAndroid Studioを使って作らなければならないイメージがあります。わざわざIDEを用意して、その使い方に慣れるのはとても面倒です。
そこで今回は皆さんが使い慣れているテキストエディタ(この記事では秀丸)を使ってスマートフォンアプリを作る方法を紹介します。
Monaca LocalKitを使おう
Monaca LocalKitはハイブリッドアプリ開発プラットフォームであるMonacaをローカルから使えるようにする開発用のソフトウェアです。具体的には、
- Monacaプロジェクトの作成
- ビルドの指示(実際のビルドはクラウド上)
- ローカルコンピュータ上での開発と実機へのリアルタイム反映
をサポートしています。
Monaca LocalKitをダウンロード/インストールする
Monaca LocalKitはMonaca Localkit - ローカル型HTML5ハイブリッドアプリ開発ツールからダウンロードできます。WindowsとMac OSX版が用意されていますのでお使いのOSに合わせて選んでください。
![](/wp-content/uploads/onsen.io/2016/Sep/start-monaca-with-hidemaru-9.png)
なおMonaca LocalKitが使えるのはProプラン以上になります。
Monaca LocalKitを起動する
Monaca LocalKitを起動すると最初にログインが求められます。ログイン後、まずは新しいプロジェクトを作成します。既存のMonaca IDE上のプロジェクトをインポートすることもできます。すでに開発されているプロジェクトをローカル上で開発する場合にもすぐに切り替えられます。
![](/wp-content/uploads/onsen.io/2016/Sep/start-monaca-with-hidemaru-8.png)
開発する
アプリケーションのコードはすべてローカルコンピュータ上にあります。編集は好きなエディタで行えます。今回の目的でもある秀丸でも可能です。
![](/wp-content/uploads/onsen.io/2016/Sep/start-monaca-with-hidemaru-10.png)
この時、実機のiOS/AndroidデバイスでMonacaデバッガーを起動してMonaca LocalKitとペアリングしておくと、秀丸でファイル保存をした瞬間にMonacaデバッガーも再読み込みされます(スマートフォンとデスクトップが同じネットワーク上にある必要があります)。
![](/wp-content/uploads/onsen.io/2016/Sep/start-monaca-with-hidemaru-4.png)
プレビューを使うとChromeのDevToolsが立ち上がるのでブレークポイントを設定したり、コンソールでテスト実行したりするのも簡単です。
![](/wp-content/uploads/onsen.io/2016/Sep/start-monaca-with-hidemaru-11.png)
アプリをビルドする
開発がある程度終わった段階でアプリをビルドします。この時にはアプリケーションのソースコードを一式Monaca クラウド IDEへアップロードし、ビルドを行います。ビルド環境を構築する必要はありません。プラグインを使っている場合などはデバッガーとしてビルドするとさらに開発が容易になるでしょう。
![](/wp-content/uploads/onsen.io/2016/Sep/start-monaca-with-hidemaru-1.png)
Monaca LocalKitを使うとWebブラウザを使わずにハイブリッドアプリ開発が進められます。開発環境を構築する手間もなく、これまで使ってきたテキストエディタがそのまま使えます。ぜひ体験してください。