Asial Blog

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

Monacaでのアプリ開発をローカルで可能にする「Monaca Localkit」ベータ版の紹介

カテゴリ :
Monaca
タグ :
Tech
Monaca
LocalKit

MonacaはこれまでWeb IDEを使ってWebブラウザ上で開発するスタイルが基本でした。WebDAVも提供はしているものの、修正したらオンラインのMonaca上に反映して、それを手元のスマートフォンでデバッガーを通して確認するという流れだったと思います。



つまりこのような形です。




Monaca IDEを使った開発

Monaca IDEを使った開発



Webブラウザでの修正は Monaca Cloud へ反映されて、その結果をスマートデバイスに送ります。データ通信としては2段階を経ていました。



Monaca Localkit ベータ版リリース



その開発スタイルが Monaca Localkit によって一変します。具体的には次のようになります。




Monaca Localkitを使った開発

Monaca Localkitを使った開発



大きな変更点は2つあります。



1. ローカルだけで完結する開発スタイル



これまであった Monaca Cloud へのデータ送信がなくなり、直接スマートデバイスに修正が反映されます。



2. 好きなエディタが選べる



ローカルコンピュータ上のファイルを編集しますので、これまでのWebブラウザからの編集ではなく自分の好きなエディタを使って開発が行えるようになります。



Monaca Localkit は Windows/Mac OSX に対応しています。今回はWindowsを使って紹介します(Mac OSX版でもほとんど変わりません)。なお Monaca Localkit はベータ版となっておりますので、正式リリースの際には仕様に変更が行われている可能性があります。



インストーラーをダウンロード&インストール



まずローカルコンピュータにMonaca Localkitをインストールします。こちらからインストーラーがダウンロードできます。



※Macをご利用の方は、こちらからMonaca Localkitベータ版利用マニュアルをご覧ください。


ダウンロード画面

ダウンロード画面



インストールはウィザードに沿って進めます。なお、あらかじめGoogle ChromeiTunesがインストールされている必要があります。




順番に進めます

順番に進めます



インストールが終わると、Chromeウェブストアが開いて、Monaca Localkitのページが開きます。そのまま無料ボタンを押してインストールします。インストールが終わると、Chromeアプリランチャーの中にMonaca Localkitが追加されます。




Chromeアプリランチャー

Chromeアプリランチャー



これで開発環境が整いました!



早速開発しましょう



まずChromeアプリランチャーからMonaca Localkitを起動します。




Monaca Localkit起動画面

Monaca Localkit起動画面



起動したらメールアドレス、パスワードを入力してLoginボタンを押してください。まだアカウントをお持ちでなければSign Upボタンを押してください。



ログインするとプロジェクト一覧が表示されます。今回はOnsen UI M/Dを使ってみます。プロジェクト名をクリックします。




プロジェクト一覧

プロジェクト一覧



プロジェクトの詳細が表示されます。まずDownloadボタンを押して、Monaca Cloud上にあるコンテンツをダウンロードします。




プロジェクト詳細

プロジェクト詳細



最初に保存先を聞かれます。




保存先指定

保存先指定




ディレクトリ選択

ディレクトリ選択



ディレクトリを選んでOKボタンを押すと、コンテンツのダウンロードが開始します。




ダウンロード中…

ダウンロード中…




ダウンロード完了

ダウンロード完了



ダウンロードが終わりました。後はStart debuggingボタンを押すだけです!




デバッグスタート

デバッグスタート



デバッグが開始すると、このようにボタンが赤くなります。ここまで終わったら、次にAndroid/iOS側での作業になります。今回はAndroid版で紹介します。



スマートフォン/タブレット側の準備



Google PlayにてMonacaデバッガーをダウンロードします。ハイパフォーマンス版と、通常版の2つがあります。ハイパフォーマンス版はCrosswalkエンジンを組み込んだ版で、最新のChromiumのAPIが使えるのが特徴です。今回はハイパフォーマンス版をインストールしています。




Monacaデバッガー(ハイパフォーマンス版)

Monacaデバッガー(ハイパフォーマンス版)



インストールが終わったら起動します。ID/パスワードはデスクトップ側で使ったものと合っている必要があります。




ログイン画面

ログイン画面



ログインするとプロジェクトの一覧が表示されます。今回は左上にあるメニューアイコンをタップします。




プロジェクト一覧

プロジェクト一覧



メニューが開くと、そこにローカルPCという選択肢があるのか分かるかと思います。これをタップします。




メニュー

メニュー



そうすると同じLAN内にあるMonaca Localkitを検索します。見つからない場合は手動でIPアドレスを指定することもできます。その際のポート番号は8000番になります。




PC検索中

PC検索中



無事見つかったら、そのPCと接続します。その際、スマートフォン側のMonaca Debuggerでペアリングコードが表示されますので、デスクトップのMonaca Localkitにてコードを入力してください。




ペアリング

ペアリング




デスクトップ側で入力

デスクトップ側で入力



ペアリングが正しく行われれば完了です。




接続完了

接続完了



使ってみる!



いよいよLocalkitを試せるようになりました。スマートフォンにて、配信中になっているコンピュータアイコンをタップします。初回はコンテンツのダウンロードが実行されます。




コンテンツダウンロード

コンテンツダウンロード



コンテンツがダウンロードされれば作成したアプリがそのまま表示されます。




アプリの実行

アプリの実行



さて、この状態になったらローカルのファイル(先ほど指定したディレクトリにダウンロードされています)を好きなエディタで開いて編集してみましょう。




ファイルを編集

ファイルを編集



ファイルの保存をトリガーにlive reloadが行われます。つまりローカルで編集してすぐに表示確認ができるようになります。なおリロードがかかりますので画面遷移をしていたりすると、初期表示に戻る可能性がありますのでご注意ください。




ライブリロード実行

ライブリロード実行



しかしこの開発のさくさく感はとても気持ちが良いと思います。Webシステムを開発しているのと変わらない感じではないでしょうか。



Monaca Cloudの使いどころ



ではローカルで開発できるようになったことで、Monaca Cloudの役割はどうなるでしょうか。Monaca Cloudはこれまでと変わらずiOS/Android/Windows Phone/Google App向けのビルド環境をクラウドで提供します。しかもMonaca Localkitからのアップロードに対応し、アプリケーションビルドもローカルから実行することができます。




プラグインの選択

プラグインの選択




ビルド設定

ビルド設定




ビルドターゲット指定

ビルドターゲット指定




ビルド

ビルド




ビルド完了

ビルド完了



これまでMonaca IDE上で行っていたほとんどの操作がMonaca Localkit上で行えるようになります。もはやWebブラウザいらずかも知れませんね。ビルドが終わったらQRコードからダウンロードしてインストールもできます。




デバイスへのインストール

デバイスへのインストール






Monaca Localkitを使うことで、これまでのMonacaを使った開発スタイルが一変するのがお分かりいただけたかと思います。Webブラウザ上で開発することでいつでもどこでも開発できるというのがIDEの魅力ならば、Monaca LocalkitはLAN内だけで、スクラッチ&ビルドによる開発のスピード感が売りになるでしょう。



もちろん使い慣れたプログラミングエディタやIDEを使うことで生産性の向上も狙えます。ぜひMonaca Localkitをお試しください!