ニフクラmBaaSお役立ちブログ

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

バイトの時間を忘れない!プッシュ通知でスプラトゥーン2のスケジュールを管理しよう

www.youtube.com

塗って塗って塗りまくる、そんなスプラトゥーンでは2になって新要素、サーモンランが登場しました。仲間と一緒にイクラを集めるミニゲームですが、修錬度もあり、やり込み要素の高いゲームです。決まった時間に仲間で集まって遊んだりするので、それをバイトと呼称している人たちもたくさんいます。

そんなバイトの開始時間を忘れないためにスケジュール管理している人もいるようです。カレンダーなどに入れても良いですが、普段の仕事などの内容と重なってしまうのは興ざめです。ここは独自のアプリで管理してみてはいかがでしょう。オマケ要素として、独自のプッシュ通知音を設定することで、他のプッシュ通知と区別して管理できるようにします。

完成図

まずは完成図です。メイン画面で新しいプッシュ通知の登録(時間だけ)と、あらかじめ登録済みのプッシュ通知を一覧で確認できます。選んでお休み(削除)もできます。

f:id:mbaasdevrel:20171212144025p:plain

そして、その時間になるとプッシュ通知が届きます。開いても特に何もありませんが、個人の好みに合わせて設定しても良いでしょう。

f:id:mbaasdevrel:20171212144038p:plain

プッシュ通知登録画面を作る

今回はiOS/Android両方で使えるMonacaで作っています。UIはBootstrapを使っています。

プッシュ通知の内容は固定なので、あくまでも配信日時だけ設定できるようにします。ボタンを押すと、次のようなコードでプッシュ通知を登録できます。

const push = new ncmb.Push();
const date = new Date($('#workTime').val());
push
  .set('message', 'さぁ、今日もバイトを頼まれてくれるかな🐻')
  .set('sound', 'www/s2.caf')
  .set('target', ['ios', 'android'])
  .set('deliveryTime', date)
  .send()
  .then((e) => {
    pushRefresh();
  })
  .catch((err) => {
    alert(`エラーです ${JSON.stringify(err)}`);
  });

既存のプッシュ通知を取得する

未配信のプッシュ通知は次のようなコードで取得できます。取得したら、一覧表示します。

ncmb.Push
  .notEqualTo('status', 2) // 2は配信済みなので、notEqualToで除外しています
  .fetchAll()
  .then((pushes) => {
    let html = [];
    for (let i = 0; i < pushes.length; i += 1) {
      let push = pushes[i];
      let date = new Date(push.deliveryTime.iso);
      html.push(`
      <div class="col-xs-3 action">
        <span class="remove" data-objectId="${push.objectId}">休む
      </div>
      <div class="col-xs-9 time">
        ${strftime('%Y年%m月%d日 %H:%M', date)}
      </div>
      `);
    }
    $('.works').html(html.join(''));
  });

プッシュ通知を削除する

一覧から選んでプッシュ通知を削除できるようにします。コードとしては次のようになります。

$(document).on('click', '.remove', (e) => {
  const objectId = $(e.target).data('objectid');
  const push = new ncmb.Push();
  push.objectId = objectId;
  push
    .delete()
    .then((e) => {
      pushRefresh();
    });
});

プッシュ通知の音を変える

そして折角なのでプッシュ通知が届いた時の音を変更してみたいと思います。これはスプラトゥーン2のサントラに入っている音楽がなど使えるでしょう。著作権がありますので、あくまでも個人用途の範囲での利用としてください。取り出した音楽データをアプリに配置します。ファイルの拡張子は caf になります。アップロードするディレクトリは www 以下とします。

f:id:mbaasdevrel:20171212144240p:plain

そしてアプリをインストールした端末に対してプッシュ通知を作成するのですが、作成時に音声ファイル名を指定します。

push
    : 
  .set('sound', 'www/s2.caf') // ここで指定
    :
  .send()
  .then((e) => {
    pushRefresh();
  })
  .catch((err) => {
    alert(`エラーです ${JSON.stringify(err)}`);
  });

これでプッシュ通知が届いた時にバイトの時間と分かる、サーモンランの音が鳴ります。これでバイト時間の見逃しもありませんね!

www.youtube.com

最後に

ニフクラ mobile backendを使った時のプッシュ通知を受信するまでの設定は本当に簡単です。ちょっとしたカスタマイズで個人でも楽しめるプッシュ通知アプリができあがります。ぜひ試してみてください。

完成版のコードはNCMBMania/SalmonRunTimer: ニフクラ mobile backendを使ってスプラトゥーン2のバイト時間にプッシュ通知を送りますにアップロードしてあります。実装時の参考にしてください。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。