プラグインで簡単に実装できるローカル通知機能！！
こんにちは、渡辺です。
今回は、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;
}
■参考情報
より詳しい情報は下のサンプルを参考にしてください。
・サンプルプロジェクト
https://github.com/katzer/cordova-plugin-local-notifications/wiki
https://github.com/katzer/cordova-plugin-local-notifications/tree/example
