Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
Monaca
タグ :
Monaca
HTML5
JavaScript
プラグイン
Cordova
こんにちは、渡辺です。

今回は、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?」ボタンでは、許可を得ているかの確認をしています。許可を得ていない場合は、初回起動にダイアログで許可するかどうかの確認が表示されるはずです。それ以外は、設定画面から通知の許可を与える必要があります。

  1. //check permission
  2.   hasPermission = function () {
  3.     cordova.plugins.notification.local.hasPermission(function (granted) {
  4.       alert(granted ? 'Yes' : 'No');
  5.     });
  6.   };

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



・1分間隔で通知


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

  1. scheduleMinutely = function () {
  2.     var sound = device.platform == 'Android' ? 'file://sound.mp3' : 'file://beep.caf';
  3.     cordova.plugins.notification.local.schedule(
  4.       {
  5.         id: 1,
  6.         text: 'Scheduled every min',
  7.         every: 'minute',
  8.         sound: sound
  9.       });
  10.   };

・1回のみスグに通知


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

  1. //schedule
  2.   var id = 1;
  3.   schedule = function () {
  4.     cordova.plugins.notification.local.schedule(
  5.       {
  6.         id: 1,
  7.         text: 'Test Message 1',
  8.         sound: null,
  9.         data: {
  10.           test: id
  11.         }
  12.       });
  13.   };

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


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

  1. //cancel all notifications
  2.   cancelAll = function () {
  3.     cordova.plugins.notification.local.cancelAll(function () {
  4.       alert("done");
  5.     }, this);
  6.   }
  7.  
  8.   // cancel single notification
  9.   cordova.plugins.notification.local.cancel(1, function() {
  10.       alert("cancel id 1");
  11.   });

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


・index.html
  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7.   <script src="components/loader.js"></script>
  8.   <link rel="stylesheet" href="components/loader.css">
  9.   <link rel="stylesheet" href="css/style.css">
  10.   <script>
  11.   </script>
  12. </head>
  13.  
  14. <body>
  15. <div>
  16.   <h2>Local Notification</h2>
  17.   <!-- permission -->
  18.   <h4 class="section"> Permission (iOS8) 〜</h4>
  19.  
  20.   <div class="container">
  21.     <button class="button button--outline" onclick="hasPermission()">Granted?</button>
  22.   </div>
  23.   <!-- schedule -->
  24.   <h4 class="section"> Schedule 〜</h4>
  25.  
  26.   <div class="container">
  27.     <button class="button button--outline" onclick="schedule()">Once</button>
  28.     <button class="button button--outline" onclick="scheduleMinutely()">Every min</button>
  29.   </div>
  30.   <!-- cancel -->
  31.   <h4 class="section"> Cancel 〜</h4>
  32.  
  33.   <div class="container">
  34.     <button class="button button--outline" onclick="cancelAll()">All</button>
  35.   </div>
  36. </div>
  37. <script type="text/javascript">
  38.   var id = 1;
  39.   //permission
  40.   hasPermission = function () {
  41.     cordova.plugins.notification.local.hasPermission(function (granted) {
  42.       alert(granted ? 'Yes' : 'No');
  43.     });
  44.   };
  45.   //schedule
  46.   schedule = function () {
  47.     cordova.plugins.notification.local.schedule(
  48.       {
  49.         id: 1,
  50.         text: 'Test Message 1',
  51.         sound: null,
  52.         data: {
  53.           test: id
  54.         }
  55.       });
  56.   };
  57.   scheduleMinutely = function () {
  58.     var sound = device.platform == 'Android' ? 'file://sound.mp3' : 'file://beep.caf';
  59.     cordova.plugins.notification.local.schedule(
  60.       {
  61.         id: 1,
  62.         text: 'Scheduled every minute',
  63.         every: 'minute',
  64.         sound: sound
  65.       });
  66.   };
  67.   //cancel
  68.   cancelAll = function () {
  69.     cordova.plugins.notification.local.cancelAll(function () {
  70.       alert("done");
  71.     }, this);
  72.   }
  73. </script>
  74. </body>
  75.  
  76. </html>

・style.css
  1. .button {
  2.     position: relative;
  3.     display: inline-block;
  4.     vertical-align: top;
  5.     -webkit-box-sizing: border-box;
  6.     -moz-box-sizing: border-box;
  7.     box-sizing: border-box;
  8.     -webkit-background-clip: padding-box;
  9.     background-clip: padding-box;
  10.     padding: 0;
  11.     margin: 0;
  12.     font: inherit;
  13.     color: inherit;
  14.     background: transparent;
  15.     border: none;
  16.     line-height: normal;
  17.     font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  18.     -webkit-font-smoothing: antialiased;
  19.     -moz-osx-font-smoothing: grayscale;
  20.     font-weight: 400;
  21.     font-size: 17px;
  22.     cursor: default;
  23.     -webkit-user-select: none;
  24.     -moz-user-select: none;
  25.     -ms-user-select: none;
  26.     user-select: none;
  27.     text-overflow: ellipsis;
  28.     white-space: nowrap;
  29.     overflow: hidden;
  30.     height: auto;
  31.     text-decoration: none;
  32.     padding: 4px 10px;
  33.     font-size: 17px;
  34.     line-height: 32px;
  35.     letter-spacing: 0;
  36.     color: #fff;
  37.     vertical-align: middle;
  38.     background-color: rgba(24, 103, 194, 0.81);
  39.     border: 0px solid currentColor;
  40.     -webkit-border-radius: 3px;
  41.     border-radius: 3px;
  42.     -webkit-transition: none;
  43.     -moz-transition: none;
  44.     -o-transition: none;
  45.     transition: none;
  46. }
  47.  
  48. .button:hover {
  49.     -webkit-transition: none;
  50.     -moz-transition: none;
  51.     -o-transition: none;
  52.     transition: none;
  53. }
  54.  
  55. .button:active {
  56.     background-color: rgba(24, 103, 194, 0.81);
  57.     -webkit-transition: none;
  58.     -moz-transition: none;
  59.     -o-transition: none;
  60.     transition: none;
  61.     opacity: 0.2;
  62. }
  63.  
  64. .button:focus {
  65.     outline: 0;
  66. }
  67.  
  68. .button:disabled,
  69. .button[disabled] {
  70.     opacity: 0.3;
  71.     cursor: default;
  72.     pointer-events: none;
  73. }
  74.  
  75. .button--outline {
  76.     background-color: transparent;
  77.     border: 1px solid rgba(24, 103, 194, 0.81);
  78.     color: rgba(24, 103, 194, 0.81);
  79. }
  80.  
  81. .button--outline:active {
  82.     background-color: rgba(24, 103, 194, 0.2);
  83.     border: 1px solid rgba(24, 103, 194, 0.81);
  84.     color: rgba(24, 103, 194, 0.81);
  85.     opacity: 1;
  86. }
  87.  
  88. .button--outline:hover {
  89.     border: 1px solid rgba(24, 103, 194, 0.81);
  90.     -webkit-transition: 0;
  91.     -moz-transition: 0;
  92.     -o-transition: 0;
  93.     transition: 0;
  94. }
  95.  
  96. @import url(http://fonts.googleapis.com/css?family=Oswald);
  97. div {
  98.     text-align: center;
  99.     font: bold 21px 'Oswald', sans-serif;
  100.     text-transform: uppercase;
  101. }
  102.  
  103. body {
  104.     background-image: -webkit-repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
  105.     background-image: -moz-repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
  106.     background-image: -ms-repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
  107.     background-image: repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
  108.     -webkit-background-size: 3px 3px;
  109.     -moz-background-size: 3px 3px;
  110.     background-size: 3px 3px;
  111. }

■参考情報


より詳しい情報は下のサンプルを参考にしてください。
・サンプルプロジェクト
https://github.com/katzer/cordova-plugin-local-notifications/wiki
https://github.com/katzer/cordova-plugin-local-notifications/tree/example

コメント

  • hiro

    記事とても参考にさせて頂いております。ありがとうございます。
    こちらの記事を参考にやってみたのですがAndroidでビルドができませんでした。(iOSは未実施です)
    原因がわからなかったためプラグインのみを読み込んでビルドしてみたのですがこちらでもエラーが出てエラーログが404 Not Foundがあり何かが足らないようです。
    (cordova-plugin-deviceと出ていたので別途プラグインをいれてみると次はcordova-plugin-android-support-v4と出てこちらも入れてみましたがダメでした)
    stackoverflowでもできないと言われている方もいらっしゃったので、何か記事にない設定などがありましたら補足いただけると嬉しいです。

  • hiro

    自己解決しました。
    http://qiita.com/hironaito/items/b0bb0a3de3ba82fc8895
    対応方法を上記に記載してみました。

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事