Asial Blog

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

Monaca LocalkitとGitでローカル開発をはじめてみよう

カテゴリ :
Monaca
タグ :
開発
LocalKit
git

Monaca Localkitの一番大きな特長は ローカルに作った自分の開発環境を使ってスマートフォンアプリ開発ができる ことです。今回はそんな環境の構築方法を含めて、手順を追って説明していきます。



Monaca Locakkitのダウンロード



Monaca Localkitはこちらからダウンロードできます。Windows/Mac OSX版がありますので環境に応じて選択してください。今回はWindows版を使っています。




Monaca Localkit

Monaca Localkit



インストールはウィザードに沿って進めていくだけなので特に問題ないかと思います。




Monaca Localkitインストーラー

Monaca Localkitインストーラー



インストールが終わったらそのまま起動してみましょう。デスクトップにもショートカットアイコンがあるかと思います。



Monaca Localkitの起動



起動すると下のようなウィンドウが表示されます。最初にMonacaにログインします。Monacaアカウントがない方はこちらから新規登録してください。また、Monaca LocalkitはGOLDプラン以上のみ使えるようになっています。30日間の無料試用も用意されています。




Monaca Localkitの初期画面

Monaca Localkitの初期画面



ログインすると、まず最初にプロジェクトを作成します。Monaca Cloudで作成済みのプロジェクトをインポートすることもできます。今回は新しくプロジェクトを作ってみます。この場合はプロジェクト名とプロジェクトのテンプレートを選択します。




新しいプロジェクトの作成

新しいプロジェクトの作成



新しいプロジェクトが作成されました。




プロジェクトの作成完了

プロジェクトの作成完了



見て分かるかと思いますが、Monaca Localkitは開発環境ではありません。いわばサーバになるもので、手元のスマートフォンにあるMonacaデバッガーとWindows/Mac OSXにあるMonacaプロジェクトを結びつけてくれる存在です。



Monacaデバッガーを使ってみる



次にMonacaデバッガーを使って実際の開発に備えてみたいと思います。Monacaデバッガーは全部で3種類用意されています。





Android(ハイパフォーマンス版)は独自のレンダリングエンジンを備えることで通常版に比べて多機能、高性能になっています。ただし独自のレンダリングエンジンが入る分、アプリのサイズが大きくなります。最新のAndroidであれば通常版でかまいません。Android 4.4よりも古い場合はハイパフォーマンス版の方をお勧めします。



iOS/AndroidともにApp StoreやGoogle Playといったアプリストアから手に入れることができます(無料です)。インストールしたらMonacaデバッガーを起動してみましょう。



アプリが起動するとまず最初にログイン画面が表示されます。先ほどMonaca Localkitにログインした時のID、パスワードを使ってログインします。母艦になるWindows/Mac OSXとMonacaデバッガーがインストールされたスマートフォンが同じネットワーク(同じLAN)の中にいれば、次の写真のようにペアリングを促すアラートが表示されます。これが出ない場合はPCとスマートフォンそれぞれのネットワーク設定を見直してください。




iPhoneでのペアリング確認

iPhoneでのペアリング確認



ペアリングが完了すると、Monaca Localkitの表示が次のように変わります(今回はiPhone 6s Plusを使っています)。




ペアリング完了

ペアリング完了



Monacaデバッガー側でもMonaca Localkitが作成したプロジェクトが表示されているはずなので、プロジェクト名をタップして開いてみましょう。



このようにプロジェクトのコードが実行されればOKです。




エディタとMonaca Loalkit

エディタとMonaca Loalkit



この状態でMonaca Localkit側のコードを修正して保存すると、Monacaデバッガー側で自動的にリロードが行われて最新のコードが反映されます。Web開発で言うところのオートリロード機能になります。このように開発、アプリ上で確認と言った作業がとてもスムーズに行えるようになりますので、さくさくと開発が進んでいくのではないでしょうか。



バージョン管理の導入



では最後にバージョン管理を導入したいと思います。最近の開発ではバージョン管理としてGitが一番多く使われています。バージョン管理の主な利点としては次のようになります。



  1. 間違って変更したコードを元に戻せる
  2. 履歴を使ってこれまでに行われた変更点が確認できる
  3. チームで開発している時に間違った上書きを防げる


まずGit for Windowsのサイトにいって、インストーラーをダウンロードします。




Git公式サイト

Git公式サイト



インストールはウィザードに沿って進めるだけなので特に迷うことはないでしょう。




Gitインストーラー

Gitインストーラー



途中、PATH環境変数について聞かれますが、真ん中のUse Git From the Windows Command Promptを選択しておく方が便利かと思います。




パスの設定

パスの設定



インストールする際に、デスクトップにアイコンを作っておくと便利です。




インストールオプション

インストールオプション



インストールが完了したら、デスクトップにあるGitのアイコンをダブルクリックします。




コマンドプロンプト

コマンドプロンプト



そうするとコマンドプロンプトが表示されます。最初慣れていないと使い方が分かりづらいと思いますが、そこは次回以降説明していきます。



まずMonacaプロジェクトのあるところまで移動します。cdというコマンドを使います。change directoryの略です。タブキーを押すと入力が補完されます。



  1. cd C:\Users\nakatsugawa\Documents\HelloWorld

移動したら、まず初期化(Gitリポジトリの作成)を行います。リポジトリというのはバージョン管理情報が入る場所のことです。initはinitialize(初期化)の略です。



  1. git init

次に今、存在するファイルを登録します(コマンドはadd)。最後のドットは今いるフォルダという指定です。この追加処理はまだ仮の状態で、差し戻すのも簡単にできます。



  1. git add .


git addの結果

git addの結果



最後にcommitコマンドを使って登録を実行します。-mはメッセージになります。ここで入力した文字がコミットとともにログに残りますので、何の変更であるのか分かりやすい内容を書いておくのが大事です。



  1. git commit -m "Init"

コミットした後はlogコマンドを使って履歴を取れます。



  1. git log


git logの結果

git logの結果



また、コミットする前に何を変更したのか知りたい場合はstatusコマンドを使って確認できます。



  1. git status


git statusの結果

git statusの結果



さらに変更内容の詳細を知りたい場合は diff コマンドとファイル名を指定します。



  1. git diff 


git diffの結果

git diffの結果



Gitには他にも機能がたくさんありますが、これらのコマンドを使うことが多いので覚えてください。






Monaca Localkitを使うことでバージョン管理システムやタスクランナー、JavaScript/スタイルシート代替言語など様々な開発ツールとの組み合わせが実現できるようになります。開発のしやすさ、生産性の向上を目指し、ぜひ使ってみてください!



Monaca Localkit - ローカル型HTML5ハイブリッドアプリ開発ツール