FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

RPGツクールMVにプッシュ通知を組み込んでみよう!

RPGツクールというソフトウェアを知っていますか。その名の通り、RPGが作れるソフトウェアで、プログラミングの知識は一切不要です。キャラクターや背景、会話などを設定するだけで皆さんがよく知る2D型のRPGが作成できます。

RPGツクールは長い歴史を持ったソフトウェアですが、その最新版であるRPGツクールMVではプロジェクトをHTML5で出力できます。つまりWebブラウザさえあればどの環境でも動かせるようになっています。もちろんスマートフォンでも利用可能です。

今回はRPGツクールMVで作ったゲームをCordovaを使ってアプリ化し、さらにプッシュ通知を組み込む方法まで紹介します。

利用する技術、ソフトウェア

今回は以下の技術、ソフトウェアを使います。

  • RPGツクールMV
  • Node.js
  • Cordova

Node.jsのインストールについては説明を省きます。こちらよりダウンロード、インストールしてください。

Cordovaのインストール

Node.jsがインストールされるとパッケージ管理用のnpmコマンドが使えるようになります。そして下記のコマンドでCordovaがインストールできます。

$ npm i corodva -g

Cordovaプロジェクトの作成

新しいCordovaプロジェクトを作成します。

$ cordova create PRGPush com.nifty.cloud.mb.corodva.rpg

今回はiOS向けにプッシュ通知を作ってみますので、プロジェクトにiOS用のプラットフォームをインストールします。

$ cd PRGPush
$ cordova platform add ios

RPGツクールMVでゲームをエクスポートする

RPGツクールMVでゲームを作ったら、ファイルメニューのデプロイメントを選択します。そしてプラットフォームをAndroid/iOSとして出力します。

index.htmlを編集する

ゲームが出力されたら、その中にある www/index.html を編集します。具体的には次の通りです。

まずheadタグの中です。

<meta charset="UTF-8">
<!-- ↓を追加 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

もう一つはbodyタグの中です。

<script type="text/javascript" src="js/main.js"></script>
<!-- ↓を追加 -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>

これで編集完了です。

PRGツクールで作ったwww以下の内容をすべて、Cordovaプロジェクトのファイルと置き換えます。

www/js/index.jsの編集

最後に元々のCordovaプロジェクトにあった www/js/index.js を編集します。YOUR_APPLICATION_KEYとYOUR_CLIENT_KEYはmBaaSのアプリ設定に記載されているものと置き換えてください。

var application_key = 'YOUR_APPLICATION_KEY';
var client_key = 'YOUR_CLIENT_KEY';
var sender_id = "YOUR_SENDER_ID";

var app = {
    initialize: function() {
      document.addEventListener(
        'deviceready',
        this.onDeviceReady.bind(this),
        false
      );
    },

    onDeviceReady: function() {
      window.NCMB.monaca.setDeviceToken(
        application_key,
        client_key,
        sender_id,
        function() {
          alert('登録しました');
        },
        function() {
          
        });
    },
};

app.initialize();

これで準備完了です。プッシュ通知をセットアップするには他にもiOS Member Centerで証明書を発行したり、管理画面で証明書のアップロードが必要です。ここでは説明を省きますのでプッシュ通知 (iOS) : 基本的な使い方 | ニフティクラウド mobile backendプッシュ通知 (Android) : 基本的な使い方 | ニフティクラウド mobile backendをご覧ください。

アプリをビルドする

後はアプリをビルドし、実機にインストールします。

$ cordova build ios

アプリを起動する

アプリを起動するとプッシュ通知を送って良いか許諾を取るダイアログが表示されます。

ここで許可するとデータストアのInstallationの中にデバイストークンが入ります。

プッシュ通知

プッシュ通知を作成し、送信するとアラートが表示されます。それを開くとアプリが起動します。開いた際のコールバックは window.NCMB.monaca.setHandler で受け取れます。

window.NCMB.monaca.setHandler(function(jsonData){
  alert("callback :::" + JSON.stringify(jsonData));
});

ゲームのバージョンアップを通知したり、お知らせを送るのにプッシュ通知は最適なツールです。mBaaSを使えば殆どコーディングせずに実装できます。ぜひお試しください。

プッシュ通知 (Monaca) : 基本的な使い方 | ニフクラ mobile backend

f:id:mbaasblog:20180927171608p:plain