フリーランスウェブエンジニアがウェブ全般について綴るブログ|いしかわろぐ
PRPR

ローカルと同期できるMonaca Localkitが便利!

ローカルと同期できるMonaca Localkitが便利!iOSアプリ制作
iOSアプリ制作アプリ
本ページはプロモーションが含まれています

最近アプリ作りに挑戦しています。

僕はobject-cやjavaは書けないので、もっぱらMonacaを利用して開発しています。
MonacaはHTMLやCSS、javascriptを使用してアプリが作成できるシステムです。
実機で常に確認できることも大きなメリットです。

とても便利なのですが、ひとつだけ面倒なのは、クラウド上でしかコードを書けないことでした。

ブラウザより管理することになるのでファイル管理が面倒なのと、通常利用しているエディターが使えないのです。
僕はMacVimを利用しているのですが、エディターが使えないのはストレスでした。

ところが最近Monacaのサイトにアクセスしたらその問題を解決するツールが掲載されていました。

これは便利!ローカルで更新すると自動で反映!

ローカルと同期できるMonaca Localkitが便利!

サイトに接続すると右側に『Monaca Localkit』の文字がありました。

Betaとはなっていますが、好きなローカル開発ツールと簡単に連動できるとありますので、僕が悩んでいたことを解消できそうです。

ローカルと同期できるMonaca Localkitが便利!

More Detailをクリックして、早速詳細情報を見てみます。

ローカルと同期できるMonaca Localkitが便利!
Powerful Hybrid App Dev Tools for Your Local Dev Environment | Monaca
Take advantage of Monaca mobile development cloud and tools without changing your local development environment like editors and version management systems.

うん、なんかできそう。
説明書を読まない人間なので、ひとまずDLしてみます。

『Monaca Localkit』をダウンロードする

僕はMacを使っているので、Chrome Web Storeから『Monaca Localkit』をインストールします。

ローカルと同期できるMonaca Localkitが便利!

『install Monaca Localkit』をクリックするとインストール画面に遷移します。

ローカルと同期できるMonaca Localkitが便利!

ダウンロードできたら『Monaca Localkit』を立ち上げます。

ローカルと同期できるMonaca Localkitが便利!

下記のような画面になります。
まずはプロジェクト選びます。

ローカルと同期できるMonaca Localkitが便利!

中央にあるDownloadをクリックしてローカルにデータをダウンロードします。

ローカルと同期できるMonaca Localkitが便利!

同期するディレクトリを選ぶように促されますので、『Select Directory』をクリックしてすすめます。

ローカルと同期できるMonaca Localkitが便利!

ディレクトリを選ぶとデータがダウンロードされます。

ローカルと同期できるMonaca Localkitが便利!

完了すると、『Working Directory』に同期するディレクトリが表示されます。

ローカルと同期できるMonaca Localkitが便利!

ローカルのディレクトリを見ると、データがしっかり入っています。

ローカルと同期できるMonaca Localkitが便利!

ローカルと同期できるMonaca Localkitが便利!

この時点でアプリを起動すると、下記のような表示がでますので、”Pair”をタップします。

ローカルと同期できるMonaca Localkitが便利!

ランダム英数字がスマートフォン上に表示されます。

ローカルと同期できるMonaca Localkitが便利!

PC画面に戻ると入力欄が表示されているので、スマートフォンに表示されている英数字を入力します。

ローカルと同期できるMonaca Localkitが便利!

これでペアリングが完了しますので、『Start debugging』をクリックします。

ローカルと同期できるMonaca Localkitが便利!

スマートフォンに戻り、ローカルの欄にあるPC情報をタップすると、

ローカルと同期できるMonaca Localkitが便利!

PCと同期されます。

ローカルと同期できるMonaca Localkitが便利!

プロジェクト内容が表示されます。

ローカルと同期できるMonaca Localkitが便利!

ローカルのデータの内容を変更して実機で確認してみよう

早速ですが、『Monaca Localkit』の便利さを体感してみたいと思います。

ここでは文字を簡単に追加してみましょう。

まず、先ほど同期したディレクトリから編集したいファイルを選びます。

ローカルと同期できるMonaca Localkitが便利!

ファイルを好きなエディターで開きます。

ローカルと同期できるMonaca Localkitが便利!

コードを追加して保存します。

ローカルと同期できるMonaca Localkitが便利!

検証機のスマートフォン側も自動的に更新され、文字が追加されて表示されます。

ローカルと同期できるMonaca Localkitが便利!

これは便利!

まとめ

ローカルでファイルを管理でき、さらにそれが同期されるので便利ですね。
こうしておけば、githubなどでも管理ができて、複数人で構築する場合も簡単ですよね。

ますますMonacaが手放せなくなりそうです。

 

オススメ
アイテム

ローカルと同期できるMonaca Localkitが便利!
Monacaで学ぶはじめてのプログラミング ~モバイルアプリ入門編~

コメント

タイトルとURLをコピーしました