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

%e3%83%ad%e3%83%bc%e3%82%ab%e3%83%ab%e3%81%a8%e5%90%8c%e6%9c%9f%e3%81%a6%e3%82%99%e3%81%8d%e3%82%8bmonaca-localkit%e3%81%8b%e3%82%99%e4%be%bf%e5%88%a9

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

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

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

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

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

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

%e3%81%93%e3%82%8c%e3%81%af%e4%be%bf%e5%88%a9%e3%83%ad%e3%83%bc%e3%82%ab%e3%83%ab%e3%81%a6%e3%82%99%e6%9b%b4%e6%96%b0%e3%81%99%e3%82%8b%e3%81%a8%e8%87%aa%e5%8b%95%e3%81%a6%e3%82%99%e5%8f%8d%e6%98%a0

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

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

more-detail%e3%82%92%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e3%81%97%e3%81%a6%e3%80%81%e6%97%a9%e9%80%9f%e8%a9%b3%e7%b4%b0%e6%83%85%e5%a0%b1%e3%82%92%e8%a6%8b%e3%81%a6%e3%81%bf%e3%81%be%e3%81%99

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

https://monaca.io/localkit.html

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

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

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

install-monaca-localkit%e3%82%92%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e3%81%99%e3%82%8b%e3%81%a8%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab%e7%94%bb%e9%9d%a2%e3%81%ab%e9%81%b7%e7%a7%bb

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

%e8%aa%ac%e6%98%8e%e6%9b%b8%e3%82%92%e8%aa%ad%e3%81%be%e3%81%aa%e3%81%84%e4%ba%ba%e9%96%93%e3%81%aa%e3%81%ae%e3%81%a6%e3%82%99%e3%80%81%e3%81%b2%e3%81%a8%e3%81%be%e3%81%99%e3%82%99dl%e3%81%97%e3%81%a6

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

%e3%82%bf%e3%82%99%e3%82%a6%e3%83%b3%e3%83%ad%e3%83%bc%e3%83%88%e3%82%99%e3%81%a6%e3%82%99%e3%81%8d%e3%81%9f%e3%82%89monaca-localkit%e3%82%92%e7%ab%8b%e3%81%a1%e4%b8%8a%e3%81%91%e3%82%99%e3%81%be

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

%e4%b8%8b%e8%a8%98%e3%81%ae%e3%82%88%e3%81%86%e3%81%aa%e7%94%bb%e9%9d%a2%e3%81%ab%e3%81%aa%e3%82%8a%e3%81%be%e3%81%99

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

%e3%81%be%e3%81%99%e3%82%99%e4%b8%ad%e5%a4%ae%e3%81%ab%e3%81%82%e3%82%8bdownload%e3%82%92%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e3%81%97%e3%81%a6%e3%83%ad%e3%83%bc%e3%82%ab%e3%83%ab%e3%81%ab%e3%83%86

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

%e3%83%86%e3%82%99%e3%82%a3%e3%83%ac%e3%82%af%e3%83%88%e3%83%aa%e3%82%92%e9%81%b8%e3%81%b5%e3%82%99%e3%82%88%e3%81%86%e3%81%ab%e4%bf%83%e3%81%95%e3%82%8c%e3%81%be%e3%81%99%e3%81%ae%e3%81%a6%e3%82%99

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

%e3%83%86%e3%82%99%e3%82%a3%e3%83%ac%e3%82%af%e3%83%88%e3%83%aa%e3%82%92%e9%81%b8%e3%81%b5%e3%82%99%e3%81%a8%e3%83%86%e3%82%99%e3%83%bc%e3%82%bf%e3%81%8b%e3%82%99%e3%82%bf%e3%82%99%e3%82%a6%e3%83%b3

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

%e5%ae%8c%e4%ba%86%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%80%8eworking-directory%e3%80%8f%e3%81%ab%e5%90%8c%e6%9c%9f%e3%81%99%e3%82%8b%e3%83%86%e3%82%99%e3%82%a3%e3%83%ac%e3%82%af%e3%83%88%e3%83%aa

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

%e3%83%ad%e3%83%bc%e3%82%ab%e3%83%ab%e3%81%ae%e3%83%86%e3%82%99%e3%82%a3%e3%83%ac%e3%82%af%e3%83%88%e3%83%aa%e3%82%92%e8%a6%8b%e3%82%8b%e3%81%a8%e3%80%81%e3%83%86%e3%82%99%e3%83%bc%e3%82%bf%e3%81%8b

monaca%e3%82%92%e5%88%a9%e7%94%a8%e3%81%97%e3%81%a6%e3%81%84%e3%82%8b%e6%96%b9%e3%81%af%e3%82%a2%e3%83%95%e3%82%9a%e3%83%aa%e3%82%92%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab%e3%81%97

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

%e3%81%93%e3%81%ae%e6%99%82%e7%82%b9%e3%81%a6%e3%82%99%e3%82%a2%e3%83%95%e3%82%9a%e3%83%aa%e3%82%92%e8%b5%b7%e5%8b%95%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e4%b8%8b%e8%a8%98%e3%81%ae%e3%82%88%e3%81%86

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

%e3%83%a9%e3%83%b3%e3%82%bf%e3%82%99%e3%83%a0%e8%8b%b1%e6%95%b0%e5%ad%97%e3%81%8b%e3%82%99%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e4%b8%8a%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%95

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

pc%e7%94%bb%e9%9d%a2%e3%81%ab%e6%88%bb%e3%82%8b%e3%81%a8%e5%85%a5%e5%8a%9b%e6%ac%84%e3%81%8b%e3%82%99%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%81%a6%e3%81%84%e3%82%8b%e3%81%ae%e3%81%a6%e3%82%99%e3%80%81

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

%e3%81%93%e3%82%8c%e3%81%a6%e3%82%99%e3%83%98%e3%82%9a%e3%82%a2%e3%83%aa%e3%83%b3%e3%82%af%e3%82%99%e3%81%8b%e3%82%99%e5%ae%8c%e4%ba%86%e3%81%97%e3%81%be%e3%81%99%e3%81%ae%e3%81%a6%e3%82%99%e3%80%81

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

%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e3%81%ab%e6%88%bb%e3%82%8a%e3%80%81%e3%83%ad%e3%83%bc%e3%82%ab%e3%83%ab%e3%81%ae%e6%ac%84%e3%81%ab%e3%81%82%e3%82%8bpc%e6%83%85%e5%a0%b1

PCと同期されます。

pc%e3%81%a8%e5%90%8c%e6%9c%9f%e3%81%95%e3%82%8c%e3%81%be%e3%81%99%e3%80%82

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

%e3%83%95%e3%82%9a%e3%83%ad%e3%82%b7%e3%82%99%e3%82%a7%e3%82%af%e3%83%88%e5%86%85%e5%ae%b9%e3%81%8b%e3%82%99%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%81%be%e3%81%99%e3%80%82

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

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

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

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

%e3%81%be%e3%81%99%e3%82%99%e3%80%81%e5%85%88%e3%81%bb%e3%81%a8%e3%82%99%e5%90%8c%e6%9c%9f%e3%81%97%e3%81%9f%e3%83%86%e3%82%99%e3%82%a3%e3%83%ac%e3%82%af%e3%83%88%e3%83%aa%e3%81%aeindex-html%e3%81%ab

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

%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%92%e5%a5%bd%e3%81%8d%e3%81%aa%e3%82%a8%e3%83%86%e3%82%99%e3%82%a3%e3%82%bf%e3%83%bc%e3%81%a6%e3%82%99%e9%96%8b%e3%81%8d%e3%81%be%e3%81%99%e3%80%82

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

%e3%82%b3%e3%83%bc%e3%83%88%e3%82%99%e3%82%92%e8%bf%bd%e5%8a%a0%e3%81%97%e3%81%a6%e4%bf%9d%e5%ad%98%e3%81%97%e3%81%be%e3%81%99%e3%80%82

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

%e6%a4%9c%e8%a8%bc%e6%a9%9f%e3%81%ae%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e5%81%b4%e3%82%82%e8%87%aa%e5%8b%95%e7%9a%84%e3%81%ab%e6%9b%b4%e6%96%b0%e3%81%95%e3%82%8c%e3%80%81

これは便利!

まとめ

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

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

筆者について

筆者について


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

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

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

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


feedly

コメントを残す

*