Asial Blog

Recruit! Asialで一緒に働きませんか?

Monaca Localkitを利用してみました

カテゴリ :
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側でもデバッガーの接続情報が表示されます。




Localkitの画面

Localkitの画面



もしペアリングに失敗となった場合はMonaca Localkitドキュメントのトラブルシューティングを参考にして下さい。



なお、Monaca Localkitでも、App Store/Google Play の各ストア版の他に、カスタムビルド版デバッガーも利用出来ます。

今回は、ストア版を利用していますが、デバッガーの種類についてはMonacaデバッガーの種類と使い分けについてを参考にして下さい。



ライブリロード



やはり、Monaca Localkitの目玉はライブリロード機能でしょう。プロジェクトディレクトリ内のコード更新を行うと、即座にデバッグ側のアプリでライブリロードが行われ修正したコードが反映されます。ただし、開発状況によってはこのライブリロードを切りたい時もあるかと思います。その場合は、メニューからライブリロード機能をOFFにできます。



次のファイルを修正してみます。



  1. <プロジェクトディレクトリ>/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日間試用することができますので、興味を持たれたらぜひ体験してみてください!