アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

MonacaアプリをCoffeeScriptで作ってみよう

Monaca Localkitを使うと、これまでにないほど開発環境の自由度が上がります。そこで今回はJavaScriptの代替言語にあたるCoffeeScriptを使ってみたいと思います。



要件



  • Gulpを使ってCoffeeScriptからJavaScriptには自動変換する
  • 複数のCoffeeScriptファイルを一つにまとめて処理するようにする(HTMLで都度ファイルを読み込まなくても良いように)
  • 開発ツール用にSourceMapファイルを生成する


この作業を行うにあたって、Node.jsはインストール済みであることとします。



LocalKitでプロジェクトを作成する



まず最初にMonaca LocalKitを使ってプロジェクトを作成します。今回はHello World Appを使っています。作成するとこのようなファイル構成になっているかと思います。





Node.jsでライブラリをインストールする



まずはMonacaプロジェクトのトップディレクトリでnpm initを実行します。





npm init


ウィザードに沿って進めていってください。



次にライブラリをインストールします。





$ npm install gulp coffee-script \
              gulp-coffee gulp-concat \
              gulp-plumber gulp-sourcemaps --save-dev


インストールしたライブラリについて解説します。



  • gulp : Node.js用のタスクランナーです。設定に沿って様々な処理を自動実行してくれます。
  • coffee-script : CoffeeScriptJavaScriptに変換するの使います。
  • gulp-coffee : CoffeeScriptをGulpの中から使いやすくするライブラリです。
  • gulp-concat : 複数のファイルを連結してくれるGulpプラグインです。
  • gulp-plumber : Gulpの途中で処理がエラーを起こしても継続してくれるプラグインです。Watch(ファイル変更の監視)用です。
  • gulp-sourcemaps : CoffeeScriptのSourceMapを生成するGulpプラグインです。


Gulpの設定ファイルを作成



今回はCoffeeScriptなので、Gulpの設定ファイルもgulp.coffeeとしてCoffeeScriptで記述したいと思います。



内容は次のようになります。 www/src/以下にあるcoffeeという拡張子のファイルを監視します。これらのファイルが更新されるとタスク名jsと書かれている処理が実行されます。





gulp       = require 'gulp'
coffee     = require 'gulp-coffee'
concat     = require 'gulp-concat'
plumber    = require 'gulp-plumber'
sourcemaps = require 'gulp-sourcemaps'

coffee_path ='./www/src/*.coffee'

gulp.task 'js', ->
  gulp.src coffee_path
    .pipe plumber()
    .pipe sourcemaps.init
      loadMaps: true
    .pipe coffee
      bare: true
    .pipe concat 'js/app.js'
      .pipe sourcemaps.write '.',
        addComment: true
        sourceRoot: '/src'
      .pipe gulp.dest './www'
gulp.task 'watch', ['build'], ->
  gulp.watch coffee_path, ['js']

gulp.task 'build', ['js']
gulp.task 'default', ['build']


SourceMapファイルの初期化やCoffeeScriptからJavaScriptへの変換を行った後、www/js/app.jsというファイルで書き出しています。



試してみる



では実際に試してみます。 www/src/hello.coffee というファイルを作成します。Monacaデバッガーの場合はdeviceready、Monaca Localkitのプレビューで確認する場合はDOMContentLoadedをイベント登録しておきます。





onDeviceReady = ->
  console.log "Hello"

event = if typeof cordova == 'undefined' then 'DOMContentLoaded' else 'deviceready'
document.addEventListener event, onDeviceReady, false


www/index.html も修正して www/js/app.js を読み込むようにしておきます。





<script src="js/app.js"></script>


これで準備は完了です。Gulpを実行します。





$ node node_modules/gulp/bin/gulp.js watch


起動したら、Monaca Localkitのプレビューを押して、ブラウザで結果を確認します。DevToolsも立ち上がって、コンソールにHelloと出ればOKです。





Sourcesタブでsrc/hello.coffeeを開いて、ブレークポイントをチェックするとちゃんと止まるのが確認できるはずです。








CoffeeScriptを使うとJavaScriptの括弧の多さから解放されたり、ループ処理が楽に書けるようになります。特にRubyPythonに慣れた人にとっては書きやすくなるでしょう。



TypeScriptはMonaca IDEでサポートしていますが、CoffeeScriptを使って生産性を上げたいという方はMonaca Localkitをぜひご利用ください!



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

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

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



Monaca Locakkitのダウンロード



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





Monaca Localkit



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





Monaca Localkitインストーラ



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



Monaca Localkitの起動



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





Monaca Localkitの初期画面



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





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



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





プロジェクトの作成完了



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



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



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





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



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



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





iPhoneでのペアリング確認



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





ペアリング完了



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



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





エディタとMonaca Loalkit



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



バージョン管理の導入



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



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


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





Git公式サイト



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





Gitインストーラ



途中、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 .




git addの結果



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





git commit -m "Init"


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





git log




git logの結果



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





git status




git statusの結果



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





git diff 




git diffの結果



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






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



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

Monaca Localkitを利用してみました

はじめに



先日、「Monaca Localkit」および「Monaca CLI」が、満を持して正式版が提供開始されました。 今回はそのツールの利用レポートです。



尚、Monacaサイト側の操作方法やCordovaの説明は省きますので、予めご了承下さい。



インストール



まずはMonaca Localkit ダウンロード からLocalkitをダウンロードします。 Windows用とMac OSX用が用意されていますので、環境に応じてダウンロードして下さい。



プロジェクト セットアップ



プロジェクト作成の方法は3通りあります。



  • 作成(新規プロジェクト作成を、テンプレートから選択)
  • インポート
    • クラウドIDEからインポート(Monacaクラウドプロジェクトからインポート)
    • Cordovaプロジェクトをインポート(ローカルのCordovaプロジェクトをインポート)




作成とインポート



今回は作成メニューからアプリのテンプレートを選択してみます。テンプレートは「Onsen UI Tabbar」を選択してみました。





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



すぐにプロジェクトが作成されます。





プロジェクト作成完了



とりあえず、プロジェクトのメニューからプレビューしてみます。仮想のView環境が起動し、ChromeのDeveloper Toolsも同時に起動します。





開発時の画面



ここまでは、Monacaクラウド同様、非常に簡単に初期プロジェクトが作成できます。 最初の設定がなにかと大変なスマートフォンアプリ開発ですが、ここまで簡単にスタートできるというアドバンテージは大きいです。



Monacaデバッガーとの連携



次に実機でのデバッグのため、Monacaデバッガーとペアリングします。 まずは、ダウンロードサイトからMonacaデバッガーアプリをインストールします。





Android版は、OS標準のWebViewを使った通常版と、Crosswalkを利用したハイパフォーマンス版とがあります。



デバッガーアプリをインストールした後、Monacaへのログイン画面が表示されますので、ログインを行ってください。

その後、自動的にペアリングが行われ、ローカルプロジェクトに先ほど作成したプロジェクトが表示されます。





ペアリング完了



ペアリングが正しく行われると、Localkit側でもデバッガーの接続情報が表示されます。





Localkitの画面



もしペアリングに失敗となった場合はMonaca Localkitドキュメントのトラブルシューティングを参考にして下さい。



なお、Monaca Localkitでも、App Store/Google Play の各ストア版の他に、カスタムビルド版デバッガーも利用出来ます。

今回は、ストア版を利用していますが、デバッガーの種類についてはMonacaデバッガーの種類と使い分けについてを参考にして下さい。



ライブリロード



やはり、Monaca Localkitの目玉はライブリロード機能でしょう。プロジェクトディレクトリ内のコード更新を行うと、即座にデバッグ側のアプリでライブリロードが行われ修正したコードが反映されます。ただし、開発状況によってはこのライブリロードを切りたい時もあるかと思います。その場合は、メニューからライブリロード機能をOFFにできます。



次のファイルを修正してみます。





<プロジェクトディレクトリ>/www/page1.html


「Push New Page」ボタンの前に、<h2>Hello Monaca Localkit!</h2> を追記しました。





ライブリロード コード



コードの更新を行うと即座にリロードされ、修正箇所が反映されます。





ライブリロード



Monaca Localkit その他のメニュー



続いて、改めて各メニューの概要をみていきます。



開く
ローカルディレクトリのプロジェクトを開きます。
実行
ペアリングされている実機端末で、プロジェクトを実行します。
ライブリロード
ライブリロードをON・OFFします。トグルスイッチになっています。
プレビュー
実機端末が接続されていない場合、ローカル側でWeb表示とデバッグツールが立ち上がります。
リモートビルド
ファイルをMonacaクラウドにアップロードしてビルドを行います。
ビルド設定
ファイルをMonacaクラウドにアップロードしてビルドを行う際の各種設定です。


IDEはどれがいい?



IDEについては、ローカルのコードで開発するため環境を選びません。 お好きなIDEやエディタで開発が出来るのは、開発者としては最大のメリットではないでしょうか。



まとめ



Localkitは非常にシンプルな操作で利用出来ますし、好みのIDEで開発出来るという点で、ハイブリッド開発ツールとしては大変優れたツールであると言えます。



LocalkitはMonaca IDEの利用しやすさを継承したツールです。Basicプラン(無料)、Personalプランの契約者の方でもLocalkitを30日間試用することができますので、興味を持たれたらぜひ体験してみてください!



Monaca Localkitを使ってできる6つのこと

Monacaアプリの開発がローカル環境で可能になるMonaca Localkit、お使いでしょうか。今回の記事ではMonaca Cloudとどう違うのか、どういった方々にMonaca Localkitが向いているのかについて紹介したいと思います。



1. バージョン管理が使いやすい



Monaca Localkitは必要なファイルがローカルに配置されています。そのためGitであったり、SubversionMercurialといったバージョン管理システムとの接続がとても容易です。もちろんGitHubにデータを保存することもできます。



2. 各種ビルダーとの組み合わせ



Monaca Cloudの場合、予めWebブラウザでプレビューできる機能がありましたが、Monaca Localkitを使った場合は自分で用意するのが一般的です。そんな時、GulpであったりGruntなどと組み合わせることでビルド作業であったり、HTTPサーバを立てたりするのが簡単になります。



Gulpを使うことでJavaScript/スタイルシートファイルを編集したらミニファイしたり、連結するようなことも簡単にできるようになります。他にもBowerを使って外部ライブラリを容易にインストールすることもできるでしょう。



3. 代替言語が使いやすい



Gulp、Gruntなどを使うもう一つの利点として、JavaScriptCSS、HTMLの代替言語が使いやすいというのが挙げられます。JavaScriptであったらCoffeeScriptやTypeScriptであったり、スタイルシートであればLessやSassがよく知られています。HTMLにおいてもHamlのような軽量なマークアップ言語があります。



そうした代替言語を使ってMonacaアプリを作成しつつ、編集したタイミングでHTML/JavaScript/CSSファイルを生成するようにすれば開発はとてもスムーズになるのではないでしょうか。



4. 好きなエディタが使える



そして大きな利点の一つがWebブラウザ上のIDEではなく、自分の好きなエディタが使えるということでしょう。秀丸エディタTextmateEmacsVim、Sublimetext、Atomなど多くのエディタが存在します。Visual StudioやWebstorm、EclipseのようなIDEを使うこともできます。



普段使い慣れたエディタを使って開発できればそれだけで開発効率は向上するでしょう。



5. Chrome Dev Toolsでデバッグできる



Monaca Localkitを使いつつUSBケーブルで母艦とつなぐことでChrome Dev Toolsを使ったデバッグ環境が使えるようになります。JavaScriptで動的に変更したDOMの確認はもちろん、ブレークポイントやステップ実行に使うこともできます。



指定したDOMがスマートフォン上でもハイライト表示されるなど、デバッグ効率が大幅に向上するはずです。



6. ユニットテストができる



アプリに限った話ではありませんが、開発を行う上でテストはとても大事です。これまでのMonacaアプリの場合、Web上のIDEであるために自動テストがしづらいという問題がありました。その点、ローカルであればいつでも自由にユニットテストが行えます。



GitHubなどにプッシュしたタイミングでテストを行ったり、それが通ったらMonaca Cloudでビルドすると言ったような操作も考えられるでしょう。より自動化された開発環境を作る上でMonaca Localkitは欠かせないツールと言えるでしょう。






Monaca Localkitを使うメリットは他にも考えられますが(インターネット接続がなくても開発できるなど)、何よりもまず使ってみてもらうのが早いと思います。ビルドだけクラウド上で行い、普段の開発はMonaca LocalkitとMonacaデバッガーを使ってさくさくと進められる楽しさが感じられるはずです。



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

Monaca Localkit がリリースされました!

こんにちは。Monacaチームの細井です。

本日、Monacaをローカル環境で使える「Monaca Localkit」が正式リリースされました。
本記事では、Monaca Localkitの紹介と簡単な使い方を説明させていただきます!




Monaca Localkit とは?



Monaca Debuggerを使ったデバッグやビルドの機能はそのままに、ローカルでの開発を支援するツールです。
Monaca クラウドIDEの開発とは異なり、ソースコードはお使いのPCで編集・管理できるため、
使い慣れたエディタ/IDEで実装したり、Gitなどでのバージョン管理を行うことも可能です。

Monaca Localkit 製品ページ
Monaca Localkit ドキュメント


Monaca Localkit でできること



Localkitでは、以下の機能により、開発を加速させます。

■ Cordovaプロジェクトの作成・インポート

Cordovaプロジェクトの雛形を作成するだけでなく、MonacaクラウドIDEで作成したプロジェクトをローカルにインポートしたり、既存のCordovaプロジェクトをインポートして開発を行うことができます。

■ プロジェクトの配信・ライブリロード

Monacaデバッガーと連携することで、プロジェクトをモバイル端末に配信したり、ソースコードの変更を一瞬でアプリに反映するライブリロードを行うことができます。
デバッガーとの通信は、ローカルネットワークを通して行います。

Chrome DevTools との連動

USBでPCとモバイル端末を接続することで、Chrome DevToolsを使用したデバッグを行うことができます。
Chrome DevToolsを使うことで、インスペクタ機能やブレークポイントを貼ってJavaScriptデバッグを行えます。

■ リモートビルド

アプリのビルドをMonacaのビルドシステムを使用して行えます。
WindowsでもiOSアプリのビルドを行うことができます。
※リモートビルドは、ソースコードMonacaクラウドサーバ上にアップロードします。
 アップロードしたソースコードは、削除することも可能です。



Monaca Localkit を使ってみよう!



Locakitは、30日間であれば、Basic(無料)プランユーザでもご利用いただけます。
下記にLocalkitでビルドするまでの簡単な手順を記載しますので、是非お試しください。
詳細なドキュメントはこちら

1. インストール

以下のURLから、各OS毎のインストーラをダウンロードしてください。

Windows 版ダウンロード
Mac OS X 版ダウンロード

Windowsの場合、ダウンロードしたexeファイルを実行し、ウィザードに従ってインストールしてください。インストール後、デスクトップにショートカットアイコンが作成されます。
Macの場合、ダウンロードしたzipファイルを解凍し、Localkitのアプリケーションを開いてください。

2. ログイン

Localkitを起動すると、ログイン画面が表示されるので、サインインしてください。
既にMonacaアカウントをお持ちの方は、そのままご利用いただけます。

3. プロジェクト作成

ログイン後、ダッシュボードが表示されるので、「+」ボタンから作成を行います。



プロジェクトの雛形になるテンプレートを選択できるので、お好きなものを選択してください。
既存プロジェクトのインポートはコチラをご参照ください。

4. プロジェクト配信

MonacaデバッガーをインストールしたiOS/Android端末に作成したプロジェクトを配信してみます。
Monacaデバッガーが未インストールの方は、コチラをご参照ください。

Monacaデバッガーで、Localkitにログインしているユーザでログインします。
モバイル端末のWi-Fiを有効にし、Localkitを起動しているPCと同じローカルネットワークになっていることを確認してください。
そうすると、以下のようなダイアログが表示されるので、ペアリングを行い、デバッガーとLocalkitを接続します。
ダイアログを閉じてしまった場合は、デバッガーのサイドメニューのローカルコンピュータからペアリングを行えます。



ご利用のネットワーク環境によっては、ペアリングのダイアログが表示されなかったり、ペアリングに失敗する可能性があります。
その際は、トラブルシューティングをご確認ください。

ペアリングに成功すると、ローカルプロジェクトの一覧にLocalkitから配信されたプロジェクトが表示されます。
一覧に表示されない場合、一覧を下にスワイプし、一覧の更新を行ってください。

では、プロジェクトを配信してみまでしょう。
Localkitで「実行ボタン」をクリックすると、自動的にデバッガー上でプロジェクトを受信し、アプリを起動します。



5. ソースコード編集

コード編集は、普段からご利用のエディタ/IDEで行っていただけます。
Localkitの「開く」ボタンをクリックするとプロジェクトのディレクトリを開きますので、ご自由に編集してみてください。

デバッガーでプロジェクトを起動中にソースコードの編集を行うと、デバッガーが自動的にプロジェクトを再読み込みします。
編集した内容が反映されているはずです!

6. Chrome DevToolsを使う

LocalkitでChrome DevToolsを起動し、デバッガーで起動しているアプリのデバッグを行うことができます。
※この機能を使うためには、各環境によって条件がありますので、コチラをご参照ください。

条件が満たされていることを確認し、デバッガーでプロジェクトを起動し、以下のボタンをクリックすると、LocalkitでChrome DevToolsが起動されます。



7. ビルドする

Localkitの「リモートビルド」ボタンをクリックすると、リモートビルド画面が表示されます。



「ビルド設定」のタブに切り替えると、各OSの設定やビルドに使用するプラグインの設定を行えます。
設定が完了したら、「ビルド」のタブに切り替えて、ビルドするOSを選択し、ビルドを行ってください。

リリース版のアプリのビルド等は、コチラをご参照ください。





Monaca Localkitもリリースされたばかりなので、これからユーザ様の声をどんどん取り込んでいきたいと考えております。
アシアルブログでも、Localkitの情報をどんどん配信されると思うので、これからもよろしくお願いいたします!!

Monacaでのアプリ開発をローカルで可能にする「Monaca Localkit」ベータ版の紹介

MonacaはこれまでWeb IDEを使ってWebブラウザ上で開発するスタイルが基本でした。WebDAVも提供はしているものの、修正したらオンラインのMonaca上に反映して、それを手元のスマートフォンでデバッガーを通して確認するという流れだったと思います。



つまりこのような形です。





Monaca IDEを使った開発



Webブラウザでの修正は Monaca Cloud へ反映されて、その結果をスマートデバイスに送ります。データ通信としては2段階を経ていました。



Monaca Localkit ベータ版リリース



その開発スタイルが Monaca Localkit によって一変します。具体的には次のようになります。





Monaca Localkitを使った開発



大きな変更点は2つあります。



1. ローカルだけで完結する開発スタイル



これまであった Monaca Cloud へのデータ送信がなくなり、直接スマートデバイスに修正が反映されます。



2. 好きなエディタが選べる



ローカルコンピュータ上のファイルを編集しますので、これまでのWebブラウザからの編集ではなく自分の好きなエディタを使って開発が行えるようになります。



Monaca Localkit は Windows/Mac OSX に対応しています。今回はWindowsを使って紹介します(Mac OSX版でもほとんど変わりません)。なお Monaca Localkit はベータ版となっておりますので、正式リリースの際には仕様に変更が行われている可能性があります。



インストーラーをダウンロード&インストール



まずローカルコンピュータにMonaca Localkitをインストールします。こちらからインストーラーがダウンロードできます。



Macをご利用の方は、こちらからMonaca Localkitベータ版利用マニュアルをご覧ください。



ダウンロード画面



インストールはウィザードに沿って進めます。なお、あらかじめGoogle ChromeiTunesがインストールされている必要があります。





順番に進めます



インストールが終わると、Chromeウェブストアが開いて、Monaca Localkitのページが開きます。そのまま無料ボタンを押してインストールします。インストールが終わると、Chromeアプリランチャーの中にMonaca Localkitが追加されます。





Chromeアプリランチャー



これで開発環境が整いました!



早速開発しましょう



まずChromeアプリランチャーからMonaca Localkitを起動します。





Monaca Localkit起動画面



起動したらメールアドレス、パスワードを入力してLoginボタンを押してください。まだアカウントをお持ちでなければSign Upボタンを押してください。



ログインするとプロジェクト一覧が表示されます。今回はOnsen UI M/Dを使ってみます。プロジェクト名をクリックします。





プロジェクト一覧



プロジェクトの詳細が表示されます。まずDownloadボタンを押して、Monaca Cloud上にあるコンテンツをダウンロードします。





プロジェクト詳細



最初に保存先を聞かれます。





保存先指定





ディレクトリ選択



ディレクトリを選んでOKボタンを押すと、コンテンツのダウンロードが開始します。





ダウンロード中…





ダウンロード完了



ダウンロードが終わりました。後はStart debuggingボタンを押すだけです!





デバッグスタート



デバッグが開始すると、このようにボタンが赤くなります。ここまで終わったら、次にAndroid/iOS側での作業になります。今回はAndroid版で紹介します。



スマートフォン/タブレット側の準備



Google PlayにてMonacaデバッガーをダウンロードします。ハイパフォーマンス版と、通常版の2つがあります。ハイパフォーマンス版はCrosswalkエンジンを組み込んだ版で、最新のChromiumAPIが使えるのが特徴です。今回はハイパフォーマンス版をインストールしています。





Monacaデバッガー(ハイパフォーマンス版)



インストールが終わったら起動します。ID/パスワードはデスクトップ側で使ったものと合っている必要があります。





ログイン画面



ログインするとプロジェクトの一覧が表示されます。今回は左上にあるメニューアイコンをタップします。





プロジェクト一覧



メニューが開くと、そこにローカルPCという選択肢があるのか分かるかと思います。これをタップします。





メニュー



そうすると同じLAN内にあるMonaca Localkitを検索します。見つからない場合は手動でIPアドレスを指定することもできます。その際のポート番号は8000番になります。





PC検索中



無事見つかったら、そのPCと接続します。その際、スマートフォン側のMonaca Debuggerでペアリングコードが表示されますので、デスクトップのMonaca Localkitにてコードを入力してください。





ペアリング





デスクトップ側で入力



ペアリングが正しく行われれば完了です。





接続完了



使ってみる!



いよいよLocalkitを試せるようになりました。スマートフォンにて、配信中になっているコンピュータアイコンをタップします。初回はコンテンツのダウンロードが実行されます。





コンテンツダウンロード



コンテンツがダウンロードされれば作成したアプリがそのまま表示されます。





アプリの実行



さて、この状態になったらローカルのファイル(先ほど指定したディレクトリにダウンロードされています)を好きなエディタで開いて編集してみましょう。





ファイルを編集



ファイルの保存をトリガーにlive reloadが行われます。つまりローカルで編集してすぐに表示確認ができるようになります。なおリロードがかかりますので画面遷移をしていたりすると、初期表示に戻る可能性がありますのでご注意ください。





ライブリロード実行



しかしこの開発のさくさく感はとても気持ちが良いと思います。Webシステムを開発しているのと変わらない感じではないでしょうか。



Monaca Cloudの使いどころ



ではローカルで開発できるようになったことで、Monaca Cloudの役割はどうなるでしょうか。Monaca Cloudはこれまでと変わらずiOS/Android/Windows Phone/Google App向けのビルド環境をクラウドで提供します。しかもMonaca Localkitからのアップロードに対応し、アプリケーションビルドもローカルから実行することができます。





プラグインの選択





ビルド設定





ビルドターゲット指定





ビルド





ビルド完了



これまでMonaca IDE上で行っていたほとんどの操作がMonaca Localkit上で行えるようになります。もはやWebブラウザいらずかも知れませんね。ビルドが終わったらQRコードからダウンロードしてインストールもできます。





バイスへのインストール






Monaca Localkitを使うことで、これまでのMonacaを使った開発スタイルが一変するのがお分かりいただけたかと思います。Webブラウザ上で開発することでいつでもどこでも開発できるというのがIDEの魅力ならば、Monaca LocalkitはLAN内だけで、スクラッチ&ビルドによる開発のスピード感が売りになるでしょう。



もちろん使い慣れたプログラミングエディタやIDEを使うことで生産性の向上も狙えます。ぜひMonaca Localkitをお試しください!