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

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

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

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

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

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

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

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

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

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

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

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

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

https://monaca.io/localkit.html

うん、なんかできそう。
説明書を読まない人間なので、ひとまず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が手放せなくなりそうです。

筆者について

筆者について


1982年、東京下町生まれ。
高校卒業後、アメリカへ留学。その後、「アートが根付いた国では絵だけで食えるのか」を確認するため、ドイツベルリンにてアート活動をおこなう。

日本に戻ってからは、コーディング・オーサリング・プログラミングなんかを経て、ウェブディレクターを肩書きにしておりました。現在は独立し、ブログやサイトの運用を軸に、ウェブサイトの企画提案からデザイン・構築まで手広く活動しております。何でも屋です。
制作のご依頼はお問い合わせフォームよりお願いします。

isLog〜イズログ〜では『日々生きること自体が旅』をモットーに、日々の旅を中心に綴っています。

詳しいプロフィールはこちら


feedly

コメントを残す

*