Monaca Localkitを利用してみました
はじめに
先日、「Monaca Localkit」および「Monaca CLI」が、満を持して正式版が提供開始されました。 今回はその ツールの利用レポートです。
尚、Monacaサイト側の操作方法やCordovaの説明は省きますので、予めご了承下さい。
インストール
まずはMonaca Localkit ダウンロード からLocalkitをダウンロードします。 Windows用とMac OSX用が用意されていますので、環境に応じてダウンロードして下さい。
プロジェクト セットアップ
プロジェクト作成の方法は3通りあります。
- 作成（新規プロジェクト作成を、テンプレートから選択）
- インポート
- クラウドIDEからインポート（Monacaクラウドプロジェクトからインポート）
- Cordovaプロジェクトをインポート（ローカルのCordovaプロジェクトをインポート）
今回は作成メニューからアプリのテンプレートを選択してみます。テンプレートは「Onsen UI Tabbar」を選択してみました。
すぐにプロジェクトが作成されます。
とりあえず、プロジェクトのメニューからプレビューしてみます。仮想のView環境が起動し、ChromeのDeveloper Toolsも同時に起動します。
ここまでは、Monacaクラウド同様、非常に簡単に初期プロジェクトが作成できます。 最初の設定がなにかと大変なスマートフォンアプリ開発ですが、ここまで簡単にスタートできるというアドバンテージは大きいです。
Monacaデバッガーとの連携
次に実機でのデバッグのため、Monacaデバッガーとペアリングします。 まずは、ダウンロードサイトからMonacaデバッガーアプリをインストールします。
Android版は、OS標準のWebViewを使った通常版と、Crosswalkを利用したハイパフォーマンス版とがあります。
デバッガーアプリをインストールした後、Monacaへのログイン画面が表示されますので、ログインを行ってください。
その後、自動的にペアリングが行われ、ローカルプロジェクトに先ほど作成したプロジェクトが表示され ます。
ペアリングが正しく行われると、Localkit側でもデバッガーの接続情報が表示されます。
もしペアリングに失敗となった場合はMonaca Localkitドキュメントのトラブルシューティングを参考にして下さい。
なお、Monaca Localkitでも、App Store/Google Play の各ストア版の他に、カスタムビルド版デバッガーも利用出来ます。
今回は、ストア版を利用していますが、デバッガーの種類についてはMonacaデバッガーの種類と使い分けについてを参考にして下さい。
ライブリロード
やはり、Monaca Localkitの目玉はライブリロード機能でしょう。プロジェクトディレクトリ内のコード更新を行うと、即座にデバッグ側のアプリでライブリロードが行われ修正したコードが反映されます。ただし、開発状況によってはこのライブリロードを切りたい時もあるかと思います。その場合は、メニューからライブリロード機能をOFFにできます。
次のファイルを修正してみます。
<プロジェクトディレクトリ>/www/page1.html
「Push New Page」ボタンの前に、<h2>Hello Monaca Localkit!</h2> を追記しました。
コードの更新を行うと即座にリロードされ、修正箇所が反映されます。
Monaca Localkit その他のメニュー
続いて、改めて各メニューの概要をみていきます。
- 開く
- ローカルディレクトリのプロジェクトを開きます。
- 実行
- ペアリングされている実機端末で、プロジェクトを実行します。
- ライブリロード
- ライブリロードをON・OFFします。トグルスイッチになっています。
- プレビュー
- 実機端末が接続されていない場合、ローカル側でWeb表示とデバッグツールが立ち上がります。
- リモートビルド
- ファイルをMonacaクラウドにアップロードしてビルドを行います。
- ビルド設定
- ファイルをMonacaクラウドにアップロードしてビルドを行う際の各種設定です。
IDEはどれがいい？
IDEについては、ローカルのコードで開発するため環境を選びません。 お好きなIDEやエディタで開発が出来るのは、開発者としては最大のメリットではないでしょうか。
まとめ
Localkitは非常にシンプルな操作で利用出来ますし、好みのIDEで開発出来るという点で、ハイブリッド開発ツールとしては大変優れたツールであると言えます。
LocalkitはMonaca IDEの利用しやすさを継承したツールです。Basicプラン（無料）、Personalプランの契約者の方でもLocalkitを30日間試用することができますので、興味を持たれたらぜひ体験してみてください！
