Monaca Localkitでプロジェクトが登録されないときの解決方法

概要

Monaca LocalkitMonacaが提供するローカル開発支援ツールです。Localkitを使うとVSCodeやAtomなどお気に入りのエディタを使って開発することができます。

本記事ではLocalkitで新しいプロジェクトを作成しようとしてもプロジェクト一覧に登録されずLocalkitが使えない場合の解決方法について説明します。

環境

  • 開発環境:Windows10
  • Git for Windowsをインストール

症状

  • プロジェクトの作成ボタンを押すと、作成処理の終了時にメッセージのないメッセージボックスが表示される(下記画像)
  • メイン画面に戻ってみるとプロジェクト一覧に登録されていない
  • 指定した場所にフォルダやファイルは作成されている

前提条件

Monaca公式ドキュメントから引用します。

Windows 環境で Localkit を利用する場合は、事前に Git をインストールする必要があります。

https://docs.monaca.io/ja/products_guide/monaca_localkit/overview/#インストールと設定

また、最新版のLocalkit(v3.3.0)では、起動時にGitのインストールが必要であることを通知するダイアログが表示されます。

GitはGit for Windowsのサイトからダウンロードできます。ダウンロードした後、Web上の情報などを参考にインストールします。(インストーラの選択肢のなかで「 Use Git from the Windows Command Prompt 」を選択した場合は本記事のような現象は発生しないようです)

ログの確認

Git for Windowsをインストールした状態でLocalkitを起動します。問題なく立ち上がるのですが、プロジェクトを作成しようとすると、先に示したようにメッセージのないメッセージボックスが表示され、プロジェクトが登録されません。

このときログを出力してみるとエラーが発生していました。ログの内容を以下に示します。(ログはLocalkitのメニューから[ファイル] – [設定]を選択して表示される設定画面で、[ログ出力]に指定したファイルに保存されます)

2019-01-19T17:32:39	Creating Project:C:\Users\OWNER\Documents\work\study\Monaca\project\test01 https://github.com/monaca-templates/onsenui-v2-js-minimum/archive/master.zip
2019-01-19T17:32:39	
Downloading template...

2019-01-19T17:32:45	[www] Inserting components...
2019-01-19T17:32:45	Installing template dependencies...

2019-01-19T17:32:58	npm WARN
2019-01-19T17:32:58	 deprecated node-uuid@1.4.8: Use uuid module instead

2019-01-19T17:33:08	npm WARN deprecated
2019-01-19T17:33:08	 hoek@2.16.3: The major version is no longer supported. Please update to 4.x or newer

2019-01-19T17:33:13	npm ERR! code
2019-01-19T17:33:13	 ENOGIT

2019-01-19T17:33:13	npm ERR! Error while executing:
npm ERR! undefined ls-remote -h -t ssh://git@github.com/xiangpingmeng/plist.js.git
npm ERR! 
npm ERR! undefined
npm ERR! No git binary found in $PATH
npm ERR! 
npm ERR! Failed using git.
npm ERR! Please check if you have git installed and in your PATH.

2019-01-19T17:33:13	
npm ERR!
2019-01-19T17:33:13	 A complete log of this run can be found in:
npm ERR!     C:\Users\OWNER\AppData\Roaming\npm-cache\_logs\2019-01-19T08_33_13_109Z-debug.log

2019-01-19T17:33:13	[Error] Error in creating a project

24行目をみると「gitがインストールされていてPATHに入っているか確認してください。」とあります。Gitはインストール済みなので問題はPATHのほうにあるようです。

解決方法

上記のエラー内容に従いPATHを設定します。PATHは環境変数の一つで、実行ファイル(.exe)を起動したときに参照されるパスを格納しています。ここにgit.exeファイルへのパスを追加します。

以下にPATHの設定方法の一例を示します。

1.エクスプローラで[PC]を右クリックし、ポップアップメニューから[プロパティ]を選択

2.[システムの詳細設定]をクリック

3.[詳細設定]タブの[環境変数]ボタンをクリック

4.[Path]欄をダブルクリック

5.git.exeへのパス[C:\Program Files\Git\cmd]を追加し、[OK]ボタンを押す

6.各画面で[OK]ボタンを押してウィンドウを全て閉じる

PATH設定後、Localkitを再起動してプロジェクトを作ってみると無事登録されました。(パソコンの再起動は必要ないようです)

図解 Monaca×ニフクラmobile backend プッシュ通知設定

モバイルアプリ開発環境Monacaニフクラmobile backendを利用したプッシュ通知機能の設定について一枚の図にまとめました。(対象:Android)

  • プッシュ通知の基本的なことについてはこちらの記事がわかりやすいです。
    今さら聞けない!プッシュ通知サービスとは? – ニフクラ
  • プッシュ通知の実装方法についてはニフクラで詳しく解説されています。この内容をまとめたものが今回の図になります。
    プッシュ通知(Monaca)- ニフクラ
  • プッシュ通知はニフクラmobile backendからFCM(Firebase Cloud Messaging)に送信することでAndroid端末へ配信されます。
  • プッシュ通知はMonaca/Firebase/ニフクラmobile backendともに無料で利用することができます。

こちらからダウンロードできます。

Monacaで作ったAPKのサイズ削減

先日メモ帳アプリ「Tiny Note」のアップデート版を作っていたときに実験的に必要なさそうなファイルを手当たり次第に消しまくってからビルドしてみたところ、APKファイルのサイズを削減することができました。
正直やっていいことなのかもよくわかっていないのですが、とりあえず書き留めておきます。

  • 開発環境:MonacaクラウドIDE
  • ビルドの種類:Android リリースビルド

サイズ削減効果

まず結果をご覧ください。

  • 一番上のファイルはCrosswalkプラグインを導入した現行版のAPKファイルです。Android4.xに対応するためとはいえシンプルなメモ帳が28MB…。
    Crosswalkプラグイン – Monaca Docs
  • 二番目のファイルは上述のAPKファイルからCrosswalkプラグインを外して作成したアップデート版のAPKファイルです。
    実際は機能追加やライブラリのバージョンアップなどが含まれています。
    「外した」というかアプリのプロジェクトを開いたら自動的に外れちゃったんですけどね。Monacaでは今年1月からCrosswalkプラグインのサポートを終了したそうです。私としてはもともと今回のアップデートで外したかったのでちょうどよかったです。
    MonacaがCordova 7.1に対応しました! – モナカプレス
    ちなみにCrosswalkプラグインを新たにインポートしてみたのですが、ビルド画面に移動するとエラーメッセージが表示されました。結局このエラーを解消できずビルドすることができませんでした。サポート終了というか使用禁止?
  • そして、三番目のファイルが今回サイズ削減を行ったAPKファイルです。二番目のファイルから約2.7MB減りました。50~100MBクラスのAPKファイルですとほとんど効果を感じられないと思いますが、このアプリくらいのサイズではなかなか効果的な改善に見えます。

APKファイルの中身を見てみる

前述の二番目のAPKファイルはMonacaクラウドIDEで普通にビルドして作成したもので、これまでと同様にこれを最終版にしようと考えていました。28MBを5MBにできたので十分です。ところがリリース前にGoogle Playでいろいろなメモ帳アプリを眺めていたところ、1MB程度のメモ帳アプリが何個もあることに気づきました。
何が違うんだろうという思いからAPKファイルの中身を調べてみることにしました。

以下はウィキペディアのAPK (ファイル形式)からの引用です。

APK (Android application package、アンドロイドアプリケーションパッケージ、エーピーケー )とは、Googleによって開発されたAndroid専用ソフトウェアパッケージのファイルフォーマットである。

JARファイルをベースとしたZIP形式で、アーカイブファイルの一種である。

なんでAAPじゃないのか一瞬気になりましたが、APPと間違えやすいからとか拡張子としてすでに使われているからとか拡張子って人の名前っぽいとか気にしてもきりがないので気にしないことにしました。

まずAPKはZIP形式のファイルということで、拡張子をzipに書き換え解凍してみます。

解凍してできたフォルダの中はこんな感じです。見慣れないファイルがたくさんあります。

assets/www/components/onsenui/cssフォルダまで移動してみます。ここでさすがに気づきました。あきらかに使われていないファイルがいると。

assets/www/components/onsenui/esmフォルダ内にもファイルがぎっしり。何のためのファイルかわからなかったのですが、調べてみると同じコードがonsenui.jsに記述されていました。ということはこれもいらなさそう。

このように実際にAPKファイルの中身を見たことで、これらの必要なさそうなファイルを消してみたくなりました。たくさんあるので消し甲斐がありそうです。

不要なファイルを削除

MonacaクラウドIDEでプロジェクトを開き、ファイル名を検索して使用されていないことを確認しながら一つ一つ削除していきます。

ファイル削除前

ファイル削除後

比べてみるとだいぶすっきりした感じがします。onsenui-core.cssなど名前的に消しにくい雰囲気のファイルも消しましたし、上述の画像で見えていないフォルダ内のファイルも消しています。

また、ファイル削除に伴い一か所だけファイルを修正しました。assets/www/components/onsenui/css/onsenui.min.cssの一行目、というかminifyされているので一行しかありませんが、そのほぼ先頭に書かれているionicons.min.cssとmaterial-design-iconic-font.min.cssのimport文を削除しました。

このファイル構成でビルドすることで約2.7MB削減することができました。

ちなみに私の場合、なにやらファイルを消しすぎたみたいでMonacaクラウドIDEのプロジェクトのアイコンまで消えてしまいました。

不穏な空気をまとっていますがIDE上のコンソールエラーなどもなく、とりあえず使用上問題なさそうです。

まとめ

このAPKファイル(Tiny Noteアップデート版)は無事にリリースすることができました。ちょっと手間がかかりますし余計なリスクも発生しますが、アプリのサイズを気にされている方は試してみてはいかがでしょうか。ただしファイルの削除は慎重に、そして自己責任でお願いします。

おまけ

この記事を書くためにネットでいろいろ調べていたら、APKサイズを削減するためのちゃんとした情報を2つ見つけました。

どちらも私にはちょっとハードルが高そうなので、もし今回リリースする前にこれらの情報を見つけたとしても手は出さなかったと思います。わかる方は試してみてはいかがでしょうか。私はこどもでもわかるやさしい解説記事を見つけたらやってみようと思います。