Monacaでのアプリ開発をローカルで可能にする「Monaca Localkit」ベータ版の紹介
MonacaはこれまでWeb IDEを使ってWebブラウザ上で開発するスタイルが基本でした。WebDAVも提供はしているものの、修正したらオンラインのMonaca上に反映して、それを手元のスマートフォンでデバッガーを通して確認するという流れだったと思います。
つまりこのような形です。
Webブラウザでの修正は Monaca Cloud へ反映されて、その結果をスマートデバイスに送ります。データ通信としては2段階を経ていました。
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 ChromeとiTunesがインストールされている必要があります。
インストールが終わると、Chromeウェブストアが開いて、Monaca Localkitのページ が開きます。そのまま無料ボタンを押してインストールします。インストールが終わると、Chromeアプリランチャーの中にMonaca Localkitが追加されます。
これで開発環境が整いました！
早速開発しましょう
まずChromeアプリランチャーから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が使えるのが特徴です。今回はハイパフォーマンス版をインストールしています。
インストールが終わったら起動します。ID/パスワードはデスクトップ側で使ったものと合っている必要があります。
ログインするとプロジェクトの一覧が表示されます。今回は左上にあるメニューアイコンをタップします。
メニューが開くと、そこにローカルPCという選択肢があるのか分かるかと思います。これをタップします。
そうすると同じLAN内にあるMonaca Localkitを検索します。見つからない場合は手動でIPアドレスを指定することもできます。その際のポート番号は8000番になります。
無事見つかったら、その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をお試しください！
