2015年6月6日

プラグインで簡単に実装できるローカル通知機能！！

asial

こんにちは、渡辺です。

今回は、Manacaで「ローカル通知」プラグインを利用する方法を説明したと思います。
ローカル通知機能のプラグインは、GitHub上で複数ありますが、ここでは下のプラグインを利用します。

katzer/cordova-plugin-local-notifications

ー目次ー

　・ローカル通知とは
　・サンプルプロジェクトについて
　・Monacaでのプラグイン組み込み方法
　・通知許可の確認（アクセス権限の確認）(iOS8のみ)
　・通知を予約する（スケジュール）
　　ー　1分間隔で通知
　　ー　1回のみスグに通知
　・通知スケジュールを取り消す(キャンセル)
　・サンプルプロジェクトの全体コード
　・参考情報

ー確認環境ー

・iPhone6 (iOS 8.1.2)
・GALAXY Note 2 SC-02E (Android4.3 )
・デバッグビルドしたアプリで確認済
（※ビルドして確認をお願いします。）

■ローカル通知とは

ローカル通知とは、アプリケーション自身がスケジューリングしてユーザーへ通知する仕組みです。
プッシュ通知(リモート通知)とは違い、インターネット経由での外部通信なしでユーザーへの通知ができます。
カレンダーアプリやToDOアプリなど時間ベースで動くアプリが、ローカル通知に向いているアプリの代表です。

■サンプルプロジェクトについて

サンプルプロジェクトのイメージです。「Onsen UI最小限のテンプレート」をもとに作成しています。

「Granted?」ボタンで、ローカル通知の使用権限を確認します。
「Once」と「Every min」ボタンは、ローカル通知のスケジュール実行ボタンです。
「All」で、スケジュールした通知を解除します。

■Monacaでのプラグイン組み込み方法

Monacaでのプラグイン組み込み方法は、2種類あります。
　　・Zip形式のプラグインをアップロードする
　　・名前もしくはURLを指定する

Zip形式のアップロードの場合は、GitHubの「Download ZIP」ボタンをクリックしてZipを取得してください。もう一方の、「名前もしくはURLを指定」を利用する場合は、GitHubのURL「https://github.com/katzer/cordova-plugin-local-notifications」を指定してください。

※Monacaが提供しているコアプラグイン以外の外部プラグインをインポートするには、GOLDプラン以上が必要となります。GOLDプラン以上でない方は、まずは無料で試せる14日間のトライアルをご利用してください。

■通知許可の確認（アクセス権限の確認）(iOS8のみ)

iOS8では、アプリがローカル通知を使用する前に、ユーザーから許可をもらう必要があります。「Granted?」ボタンでは、許可を得ているかの確認をしています。許可を得ていない場合は、初回起動にダイアログで許可するかどうかの確認が表示されるはずです。それ以外は、設定画面から通知の許可を与える必要があります。


  //check permission
  hasPermission = function () {
    cordova.plugins.notification.local.hasPermission(function (granted) {
      alert(granted ? 'Yes' : 'No');
    });
  };

■通知を予約する（スケジュール機能）

・1分間隔で通知

ここからローカル通知の処理です。ここでは1分間隔で通知するよう設定しています。プロパティ「every」には、”second”, “minute”, “hour”, “day”,”week”,”month”,”year”と指定できます。また、プロパティ「sound」では、通知した時に流す音源を指定できます。音源は、参考情報に記載したサンプルプロジェクトが提供しているものを使用しています。
※プロパティ「every」に”second”を設定してみましたが、1秒間隔で動かなかったので、もしかしたら、”second”指定でプラグインにバグがあるかもしれません。


scheduleMinutely = function () {
    var sound = device.platform == 'Android' ? 'file://sound.mp3' : 'file://beep.caf';
    cordova.plugins.notification.local.schedule(
      {
        id: 1,
        text: 'Scheduled every min',
        every: 'minute',
        sound: sound
      });
  };

・1回のみスグに通知

一度のみの通知の場合も、schedule( )を使用して通知します。プロパティ「every」がない場合の、デフォルト状態が、１回のみの通知となっています。


//schedule
  var id = 1;
  schedule = function () {
    cordova.plugins.notification.local.schedule(
      {
        id: 1,
        text: 'Test Message 1',
        sound: null,
        data: {
          test: id
        }
      });
  };

■通知スケジュールを取り消す(キャンセル)

さっき設定した1分間隔での通知をキャンセルしましょう。一気に全部キャンセルする場合は、「cancelAll( )」を呼ぶだけです。キャンセルする対象を指定する場合は、「cancel( )」の第一引数にIDを指定します。


  //cancel all notifications
  cancelAll = function () {
    cordova.plugins.notification.local.cancelAll(function () {
      alert("done");
    }, this);
  }
  // cancel single notification
  cordova.plugins.notification.local.cancel(1, function() {
      alert("cancel id 1");
  });

■サンプルプロジェクトの全体コード

・index.html


<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <script src="components/loader.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
  <script>
  </script>
</head>
<body>
<div>
  <h2>Local Notification</h2>
  <!-- permission -->
  <h4 class="section">〜 Permission (iOS8) 〜</h4>
  <div class="container">
    <button class="button button--outline" onclick="hasPermission()">Granted?</button>
  </div>
  <!-- schedule -->
  <h4 class="section">〜 Schedule 〜</h4>
  <div class="container">
    <button class="button button--outline" onclick="schedule()">Once</button>
    <button class="button button--outline" onclick="scheduleMinutely()">Every min</button>
  </div>
  <!-- cancel -->
  <h4 class="section">〜 Cancel 〜</h4>
  <div class="container">
    <button class="button button--outline" onclick="cancelAll()">All</button>
  </div>
</div>
<script type="text/javascript">
  var id = 1;
  //permission
  hasPermission = function () {
    cordova.plugins.notification.local.hasPermission(function (granted) {
      alert(granted ? 'Yes' : 'No');
    });
  };
  //schedule
  schedule = function () {
    cordova.plugins.notification.local.schedule(
      {
        id: 1,
        text: 'Test Message 1',
        sound: null,
        data: {
          test: id
        }
      });
  };
  scheduleMinutely = function () {
    var sound = device.platform == 'Android' ? 'file://sound.mp3' : 'file://beep.caf';
    cordova.plugins.notification.local.schedule(
      {
        id: 1,
        text: 'Scheduled every minute',
        every: 'minute',
        sound: sound
      });
  };
  //cancel
  cancelAll = function () {
    cordova.plugins.notification.local.cancelAll(function () {
      alert("done");
    }, this);
  }
</script>
</body>
</html>

・style.css


.button {
    position: relative;
    display: inline-block;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
    line-height: normal;
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    font-size: 17px;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: auto;
    text-decoration: none;
    padding: 4px 10px;
    font-size: 17px;
    line-height: 32px;
    letter-spacing: 0;
    color: #fff;
    vertical-align: middle;
    background-color: rgba(24, 103, 194, 0.81);
    border: 0px solid currentColor;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}
.button:hover {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}
.button:active {
    background-color: rgba(24, 103, 194, 0.81);
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    opacity: 0.2;
}
.button:focus {
    outline: 0;
}
.button:disabled,
.button[disabled] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}
.button--outline {
    background-color: transparent;
    border: 1px solid rgba(24, 103, 194, 0.81);
    color: rgba(24, 103, 194, 0.81);
}
.button--outline:active {
    background-color: rgba(24, 103, 194, 0.2);
    border: 1px solid rgba(24, 103, 194, 0.81);
    color: rgba(24, 103, 194, 0.81);
    opacity: 1;
}
.button--outline:hover {
    border: 1px solid rgba(24, 103, 194, 0.81);
    -webkit-transition: 0;
    -moz-transition: 0;
    -o-transition: 0;
    transition: 0;
}
@import url(http://fonts.googleapis.com/css?family=Oswald);
div {
    text-align: center;
    font: bold 21px 'Oswald', sans-serif;
    text-transform: uppercase;
}
body {
    background-image: -webkit-repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
    background-image: -moz-repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
    background-image: -ms-repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
    background-image: repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
    -webkit-background-size: 3px 3px;
    -moz-background-size: 3px 3px;
    background-size: 3px 3px;
}