Monaca LocalkitとGitでローカル開発をはじめてみよう
Monaca Localkitの一番大きな特長は ローカルに作った自分の開発環境を使ってスマートフォンアプリ開発ができる ことです。今回はそんな環境の構築方法を含めて、手順を追って説明していきます。
Monaca Locakkitのダウンロード
Monaca Localkitはこちらからダウンロードできます。Windows/Mac OSX版がありますので環境に応じて選択してください。今回はWindows版を使っています。
インストールはウィザードに沿って進めていくだけなので特に問題ないかと思います。
インストールが終わったらそのまま起動してみましょう。デスクトップにもショートカットアイコンがあるかと思います。
Monaca Localkitの起動
起動すると下のようなウィンドウが表示されます。最初にMonacaにログインします。Monacaアカウントがない方はこちらから新規登録してください。また、Monaca LocalkitはGOLDプラン以上のみ使えるようになっています。30日間の無料試用も用意されています。
ログインすると、まず最初にプロジェクトを作成します。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とスマートフォンそれぞれのネットワーク設定を見直してください。
ペアリングが完了すると、Monaca Localkitの表示が次のように変わります（今回はiPhone 6s Plusを使っています）。
Monacaデバッガー側でもMonaca Localkitが作成したプロジェクトが表示されているはずなので、プロジェクト名をタップして開いてみましょう。
このようにプロジェクトのコードが実行されればOKです。
この状態でMonaca Localkit側のコードを修正して保存すると、Monacaデバッガー側で自動的にリロードが行われて最新のコードが反映されます。Web開発で言うところのオートリロード機能になります。このように開発、アプリ上で確認と言った作業がとてもスムーズに行えるようになりますので、さくさくと開発が進んでいくのではないでしょうか。
バージョン管理の導入
では最後にバージョン管理を導入したいと思います。最近の開発ではバージョン管理としてGitが一番多く使われています。バージョン管理の主な利点としては次のようになります。
- 間違って変更したコードを元に戻せる
- 履歴を使ってこれまでに行われた変更点が確認できる
- チームで開発している時に間違った上書きを防げる
まずGit for Windowsのサイトにいって、インストーラーをダウンロードします。
インストールはウィザードに沿って進めるだけなので特に迷うことはないでしょう。
途 中、PATH環境変数について聞かれますが、真ん中のUse Git From the Windows Command Promptを選択しておく方が便利かと思います。
インストールする際に、デスクトップにアイコンを作っておくと便利です。
インストールが完了したら、デスクトップにあるGitのアイコンをダブルクリックします。
そうするとコマンドプロンプトが表示されます。最初慣れていないと使い方が分かりづらいと思いますが、そこは次回以降説明していきます。
まずMonacaプロジェクトのあるところまで移動します。cdというコマンドを使います。change directoryの略です。タブキーを押すと入力が補完されます。
cd C:\Users\nakatsugawa\Documents\HelloWorld
移動したら、まず初期化（Gitリポジトリの作成）を行います。リポジトリというのはバージョン管理情報が入る場所のことです。initはinitialize（初期化）の略です。
git init
次に今、存在するファイルを登録します（コマンドはadd）。最後のドットは今いるフォルダという指定です。この追加処理はまだ仮の状態で、差し戻すのも簡単にできます。
git add .
最後にcommitコマンドを使って登録を実行します。-mはメッセージになります。ここで入力した文字がコミットとともにログに残りますので、何の変更であるのか分かりやすい内容を書いておくのが大事です。
git commit -m "Init"
コミットした後はlogコマンドを使って履歴を取れます。
git log
また、コミットする前に何を変更したのか知りたい場合はstatusコマンドを使って確認できます。
git status
さらに変更内容の詳細を知りたい場合は diff コマンドとファイル名を指定します。
git diff
Gitには他にも機能がたくさんありますが、これらのコマンドを使うことが多いので覚えてください。
Monaca Localkitを使うことでバージョン管理システムやタスクランナー、JavaScript/スタイルシート代替言語など様々な開発ツールとの組み合わせが実現できるようになります。開発のしやすさ、生産性の向上を目指し、ぜひ使ってみてください！
