「Monaca Localkit」で高速・簡単・快適なハイブリッドモバイルアプリ開発
「Localkit」でMonacaが最強ビルド環境として再浮上
昨日は 「Chrome Apps for Mobile」を試していた。
琴線探査: 「Chrome Apps for Mobile」で高速・簡単・快適なハイブリッドモバイルアプリ開発
しばらく使っていくうちに、ライブデプロイが少々不安定であることが分かった。（PC側のサーバープロセスが切れる）この程度なら問題無いと思っていたが、YouTubeの埋め込み再生でjsapiが有効にならないことが分かった。
Crosswalkに問題があるのだと思うが、「Chrome Apps for Mobile」そのものがディベロッパープレビュー状態であることもあって他の開発環境を試してみることにした。つい先日、MonacaのLocalkitという機能がリリースされたことを知っていたからだ。
Home | Monaca
Monaca Localkit | Monaca
実はMonacaは素のCordovaの次に試した開発環境だった。
など基本的には素晴らしい環境だったのだが、
などの理由で本格的開発は難しいと判断していた。しかし、ここへ来てLocalkitがリリースされ、これらの問題が解消された！
少なくとも今は無料プランユーザーでも使えるので、ハイブリッドアプリの開発をしようとしている人には是非試してみて頂きたい。
使い方のドキュメントがまだ無いようなので、デバッグするまでの方法を書き残しておこうと思う。
追記14.11.17：見られなかったPDFマニュアが見られるようになった
Monaca Localkit β版 利用マニュアル（PDF）
Crosswalkエンジンを組み込んでMonacaで作るAndroidアプリを一気に高速化させる。 : アシアルブログ
----
Localkitのインストール
Monaca LocalkitはChrome AppなのでChromeが必要だ。Chromeからこちらにアクセスしてインストールする。
Monaca Localkit - Chrome ウェブストア
Localkitの起動とログイン
Chromeのアプリランチャーから
Localkitを起動する。
ここでログインを求められる。アカウントが無ければ作る。
プロジェクトの作成
「New Project」でプロジェクトを作成する。
適当にプロジェクトを作成する。「Working Directory」はプロジェクトが作成されるディレクトリそのものなので注意。あらかじめ新しいディレクトリを自分で作っておいた方が方がいい。
「Create」するとこのようにプロジェクトが作成される。
Monaca Debuggerのインストール
ここで実機の方にMnaca Debuggerをインストールしておく。ここにリンクを書いておくよりもAppStoreやGooglePlayで「monaca」と検索した方が早いだろう。
iOSでは「monaca」と言えば一つしかないが、Android版は２つ存在する。通常版がシステムのWebViewを使うデバッガーで、ハイパフォーマンス版はCrosswalkのWebViewを使うデバッガーだと思われ。
特に理由がなければハイパフォーマンス版をインストールしておいた方がいいだろう。
デバッグの開始
プロジェクトを開いて
デバッグを開始する
実機の方でデバッガーを起動する。初回起動時にはログインが要求される。
ペアリングを要求される。
ペアリングの認識は実機とPCが同一WiFi内にいることが条件だ。したがって、実行するだけならUSBケーブルで接続する必要は無い！すごい！ただ、ChromeやSafariなどの開発者ツールを使うにはUSBケーブル接続が必須なので、あらかじめ接続しておく方がいいだろう。
「ペアリング」のタップでペアリングコードが表示される。
これをLocalkit側で入力して「Pair」。
Localkitではこのように見える。
実機ではこのように見える。
デバッグしたいプロジェクト名＊ではなく＊ペアリング済みPC（ここではMacBookAir）をタップすると、このように実行される。
デバッグについては一般的なUSBデバッギングを使う。iOSの場合はSafari、Androidの場合はChromeの開発者ツールを使う。
Monaca Debugger with USB Debugging
iOSの場合はSafariで検証可能なタブとして表示されなかった。原因は不明。Debuggerの問題かもしれないので、その場合はそのうち解決されるだろう。
追記14.11.17：AppStoreで配布しているMonaca DebuggerではUSBデバッグできないことが判明。カスタムビルドしたDebuggerが必要らしい。
Monaca Debugger with Safari Remote Debugging (for iOS and Mac only)
----
Androidの場合はChromeで接続できた。
「crosswalk」の文字があるので、Monaca Debuggerのハイパフォーマンス版はやはりCrosswalkエンジンを使っているということが分かる。
なお、GapDebugが使えればChromeだけで済むから楽なので使えないかと試してみたが、iOSはダメだった。Androidは通常版はOKでハイパフォーマンス版はNGだった。
コンソールの安定性は抜群だ。ライブリロードも非常に安定している。それはやはりローカル接続だからだろう。
で、YouTubeのiframeのAPIでjsapiを有効にできるのか？
できた！
おそらく現状でMonaca Localkit以上に良いハイブリッドアプリ開発環境は無いだろう。
追記14.11.26：実はそういう事も無いかも…
琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「ionic」編
昨日は 「Chrome Apps for Mobile」を試していた。
琴線探査: 「Chrome Apps for Mobile」で高速・簡単・快適なハイブリッドモバイルアプリ開発
しばらく使っていくうちに、ライブデプロイが少々不安定であることが分かった。（PC側のサーバープロセスが切れる）この程度なら問題無いと思っていたが、YouTubeの埋め込み再生でjsapiが有効にならないことが分かった。
Crosswalkに問題があるのだと思うが、「Chrome Apps for Mobile」そのものがディベロッパープレビュー状態であることもあって他の開発環境を試してみることにした。つい先日、MonacaのLocalkitという機能がリリースされたことを知っていたからだ。
Home | Monaca
Monaca Localkit | Monaca
実はMonacaは素のCordovaの次に試した開発環境だった。
- 専用アプリによりiOS/Androidでライブリロード開発が可能（iOSの開発ライセンスすら必要無い）
- リモートデバッグ
- ローカルにビルド環境を作る必要が無い
など基本的には素晴らしい環境だったのだが、
- ライブリロードが不安定
- デバッグコンソールが不安定
- Gitが使えない
などの理由で本格的開発は難しいと判断していた。しかし、ここへ来てLocalkitがリリースされ、これらの問題が解消された！
少なくとも今は無料プランユーザーでも使えるので、ハイブリッドアプリの開発をしようとしている人には是非試してみて頂きたい。
使い方のドキュメントがまだ無いようなので、デバッグするまでの方法を書き残しておこうと思う。
追記14.11.17：見られなかったPDFマニュアが見られるようになった
Monaca Localkit β版 利用マニュアル（PDF）
Crosswalkエンジンを組み込んでMonacaで作るAndroidアプリを一気に高速化させる。 : アシアルブログ
----
Localkitのインストール
Monaca LocalkitはChrome AppなのでChromeが必要だ。Chromeからこちらにアクセスしてインストールする。
Monaca Localkit - Chrome ウェブストア
Localkitの起動とログイン
Chromeのアプリランチャーから
Localkitを起動する。
ここでログインを求められる。アカウントが無ければ作る。
プロジェクトの作成
「New Project」でプロジェクトを作成する。
適当にプロジェクトを作成する。「Working Directory」はプロジェクトが作成されるディレクトリそのものなので注意。あらかじめ新しいディレクトリを自分で作っておいた方が方がいい。
「Create」するとこのようにプロジェクトが作成される。
Monaca Debuggerのインストール
ここで実機の方にMnaca Debuggerをインストールしておく。ここにリンクを書いておくよりもAppStoreやGooglePlayで「monaca」と検索した方が早いだろう。
iOSでは「monaca」と言えば一つしかないが、Android版は２つ存在する。通常版がシステムのWebViewを使うデバッガーで、ハイパフォーマンス版はCrosswalkのWebViewを使うデバッガーだと思われ。
特に理由がなければハイパフォーマンス版をインストールしておいた方がいいだろう。
デバッグの開始
プロジェクトを開いて
デバッグを開始する
実機の方でデバッガーを起動する。初回起動時にはログインが要求される。
ペアリングを要求される。
ペアリングの認識は実機とPCが同一WiFi内にいることが条件だ。したがって、実行するだけならUSBケーブルで接続する必要は無い！すごい！ただ、ChromeやSafariなどの開発者ツールを使うにはUSBケーブル接続が必須なので、あらかじめ接続しておく方がいいだろう。
「ペアリング」のタップでペアリングコードが表示される。
これをLocalkit側で入力して「Pair」。
Localkitではこのように見える。
実機ではこのように見える。
デバッグしたいプロジェクト名＊ではなく＊ペアリング済みPC（ここではMacBookAir）をタップすると、このように実行される。
デバッグについては一般的なUSBデバッギングを使う。iOSの場合はSafari、Androidの場合はChromeの開発者ツールを使う。
Monaca Debugger with USB Debugging
iOSの場合はSafariで検証可能なタブとして表示されなかった。原因は不明。Debuggerの問題かもしれないので、その場合はそのうち解決されるだろう。
追記14.11.17：AppStoreで配布しているMonaca DebuggerではUSBデバッグできないことが判明。カスタムビルドしたDebuggerが必要らしい。
Monaca Debugger with Safari Remote Debugging (for iOS and Mac only)
This debugging option can only be used with Monaca custom built debugger. In order to get the custom built debugger, please refer to iOS 向け Monaca デバッガー.
----
Androidの場合はChromeで接続できた。
「crosswalk」の文字があるので、Monaca Debuggerのハイパフォーマンス版はやはりCrosswalkエンジンを使っているということが分かる。
なお、GapDebugが使えればChromeだけで済むから楽なので使えないかと試してみたが、iOSはダメだった。Androidは通常版はOKでハイパフォーマンス版はNGだった。
コンソールの安定性は抜群だ。ライブリロードも非常に安定している。それはやはりローカル接続だからだろう。
で、YouTubeのiframeのAPIでjsapiを有効にできるのか？
できた！
おそらく現状でMonaca Localkit以上に良いハイブリッドアプリ開発環境は無いだろう。
追記14.11.26：実はそういう事も無いかも…
琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「ionic」編
コメント
コメントを投稿