パズドラ練習アプリ機能追加

パズドラ練習アプリは2017/11月に作成した後ほったらかしにしていたのですが、パズドラで実施した大量の魔法石配布のおかげで奇跡的にゼラが当たり、２色陣の練習がしたいということで今回機能追加を行いました。

パズドラ練習アプリ

Onsen UIや勉強中のVue.jsを使って作り直してみたかったのですが、すでにjQueryを使いまくっていたこととWordPress上なので構成をシンプルにしたいということ、そしてできるだけ時間をかけたくなかったこととソースコードをみて眩暈がしたということで、今回はそのままjQueryとjQuery UIを使って作成しました。

jQueryはひさしぶりだったのですが、クラスセレクタや子孫セレクタ、FadeTo()などのアニメーション関連メソッドの便利さを実感しました。例えば、$( ‘#panel th’ ).removeClass( ‘selected’ ); や $(‘#panel th’).on(‘click’, function() {…}); といった短い記述で複数の要素を扱うことができます。JavaScriptだけで書くとdocument.querySelectorAll()の戻り値をforEach()のコールバックで処理する感じでしょうか。jQueryのシンプルな記述方法はいまだ魅力的に思います。

今回作成したパズドラ練習アプリは本記事の上部にあるリンク先、または倉庫 – パスドラ練習アプリにあります。

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

概要

Monaca LocalkitはMonacaが提供するローカル開発支援ツールです。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

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

解決方法

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

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

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

２．[システムの詳細設定]をクリック

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

４．[Path]欄をダブルクリック

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

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

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

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

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

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

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