MonacaでFirebase Cloud Messaging(FCM)を使ってプッシュ通知(するのはやめた)

結論的には、CordovaでFCMのプッシュ通知をする方法と同じ方法でやればできるはずですが、そのためには、結局Monacaの便利なデバッグアプリとか使えないし、ほぼ純粋にCordovaをいじってるのと変わらなくなるので、あまり意味がないと思いまいた。Monacaの便利な機能を使わないのであれば、余計なコードが入っているのも無駄だと思います。当たり前かもしれませんが、自由度高く開発するのであれば、cordovaにしておいた方がいいなと思いました。

Monaca + Onsen UI + Reactの開発環境

Monacaは、cordovaを使った、ハイブリッドアプリ開発ツール。クラウドIDEもあるし、デバッグ・ビルドも簡単にできる。

Onsen UIは、ハイブリッドアプリ向けの、スタイルとかアニメーションとかが簡単にかっこよくできる、bootstrapみたいなやつ。monacaと同じ会社が作成しているので、monacaとの相性は抜群なはず。また、monaca + onsen ui は、reactにも標準対応しているので、reactを使って作成することも簡単にできる。

開発環境のセットアップ

以下は、monaca CLIを使っているので、monacaのGOLDプラン以上で契約する必要があります。

node.jsとnpmをインストールして最新版にしたら、下記でmonacaをインストールできる。

createコマンドでプロジェクト作成できて、previewコマンドでブラウザでのプレビュー確認。debugで実機デバッグが可能になります。

実機デバッグをするためには、開発PCと実機を同じネットワークにつなげる必要があり、ファイヤーウォールが有効な場合接続できない可能性があります。また、実機にはmonacaデバッグアプリをインストールして、開発PCと同じmonacaアカウントでログインしておく必要があります。実機でアプリを開いていれば、monaca debugを実行したら、勝手にペアリング先のPCを検知して通知してきます。もし通知されない場合は、手動ペアリングが必要になります。

Onsen UI + Reactの使い方

簡単なのは、monaca createでプロジェクトを作成する際に、Onsen UI + Reactを使うことが前提のプロジェクトを作成することです。これによって、自動的にonsen ui + reactを組み込んだ状態でプロジェクトを作成してくれます。あるいは、onsen uiのドキュメントに説明があります。

monaca – ChildBrowser

参考:
https://github.com/phonegap-build/ChildBrowser
ChildBrowserプラグイン

こんな風に使う。

オプションはこれら。

Available options:
・showLocationBar (Android and iOS): show/hide a location bar in the generated browser
・showAddress (Android and iOS): show/hide the address bar in the generated browser
・showNavigationBar (Android and IOS): show/hide the entire navigation bar. Important: since there is no “Done”-Button anymore, the ChildBrowser can only be closed with the api call close() (see below).