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の画面

 

もしペアリングに失敗となった場合は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日間試用することができますので、興味を持たれたらぜひ体験してみてください!

 

前の記事へ

次の記事へ

一覧へ戻る
PAGE TOP