【ionic】面倒臭がりでもできる、アラーム機能

時計やスケジュール張のアプリはもちろんですが、漫画アプリやコミュニケーションツールなどなど。通知機能はいろんなスマホアプリで活用されています。

今回はその中のアラーム通知をスマホアプリで実装する方法を「ionic」というフレームワークを用いて紹介させていただきたいと思います。

アラーム設定方法

基本的にはアラームの方法は２種類あります。

• プッシュ通知（リモート通知）
  オンラインでの通知をすることができます。例えば、アプリ提供側から新着情報をユーザに提供したい場合はこれを使って通知を送ることができます。

• ローカル通知
  プッシュ通知とは逆にオフラインの機能になります。ユーザが自分で時間を設定して、その時間に通知を受け取りたい場合に使えます。

一般的にアラームとなるとローカル通知をイメージされる方が多いと思います。今回はそのローカルでの通知を使ったアラーム機能を紹介します。

ionic公式より

ionicの公式ページにLocal Notificationという機能があります。これを使えば簡単に実装できます。

import { LocalNotifications } from '@ionic-native/local-notifications/ngx';


constructor(private localNotifications: LocalNotifications) { }

...

// Schedule delayed notification
this.localNotifications.schedule({
   text: 'Delayed ILocalNotification',
   //現在時刻の10秒後にアラーム。1秒=1000。
   trigger: {at: new Date(new Date().getTime() + 10000)},
   led: 'FF0000',
   sound: null
});

工夫を加えて実装

やりたいこと：複数のアラームを同時にかけたい。

タスクリストなどを作成し、それぞれに時間を設定。その時間になったらそれぞれのアラームが起動し、通知がくるようなアプリを想定してコードを書いていきます。

//以下のように配列にユーザが入力した時間とタイトル（通知が来たときのメッセージ）をもつような状態にする
todoList = [
  {
    time: [15,30],
    schedule:'おやつ'
  },
  {
    time: [18,50],
    schedule:'夜ご飯'
  },
]

todoAlerm() {
    const dateHour = new Date().getHours();
    const dateMinutes = new Date().getMinutes();
    //現在時間を「分」に置き換える
    const dateTime = dateHour * 60 + dateMinutes;

    for (let i = 0; i < this.todoList.length; i++) {
      let timeHour = this.todoList[i].time[0];
      let timeMinute = this.todoList[i].time[1];
　　　 //設定した時間を「分」に置き換える
      const setAlerm = parseInt(timeHour, 10) * 60 + parseInt(timeMinute, 10);

      //設定した時間から現在時刻の差をとり、「秒」にする
      const disTime = (setAlerm - dateTime) * 60;

      ///ionic notification のtriggerに合う形に直していく
      const datedistime = new Date().getTime() + disTime * 1000;
      const alermsettime = new Date(datedistime);

      //音声の設定（AndroidとiOSで指定する音が異なるためどちらの端末か特定している）
      //ちなみにionicのplatform機能を利用
      if (this.platform.is('android')) {
        this.isAndroid = true;
      }

      //表示するメッセージを設定
      const alermtext = this.todoList[i].schedule + 'の時間になりました！';
      
      //現在時刻と設定時刻との差（disTime）が0以上だったら発動、そうでなかったらアラートを出す
      if (disTime >= 0) {
        this.localNotifications.schedule([
          {
　　　　　　　//ここがミソ！！アラームをいくつか設定する時はidを連番にする必要がある。
            id: i + 1,
            text: alermtext,
            trigger: {at: alermsettime},
            led: 'FF0000',
　　　　　　　//Androidなら'file://sound.mp3'、そうでない（iOS）なら'file://beep.caf'
            sound: this.isAndroid ? 'file://sound.mp3': 'file://beep.caf'
          }
        ]);
        this.alertSetting = true;
      } else  {
        this.alertSetting = false;
        alert(this.todoList[i].imageName.kanji + 'の時間を現在時刻より後に設定してください！。');
      }
    }
  }
}

以上です！！
ポイントは主に2つです。

1. triggerに設定する時間
   時間の形式はどんな形でも良いわけではなく、フォーマットがあります。最初は少しここでつまづきました。1秒を1000とする決まりもあるので初心者の方は注意してください。

2. いくつか同時に仕掛けたいならidを連番にする
   for文等を利用してidを連番にしないと上手く通知が表示されないので注意しましょう。

以上に注意すれば簡単にアラームを機能をつけることができます。
ionicフレームワークは他にも機能をたくさん揃えています。ほとんどが公式サイトにコードごと載っています。それを自分なりにカスタムしてより良いアプリやサービスを作っていけるといいですね！
機会があれば是非試してみてください！

ちなみに、以下のQRコードは実際に初学者である開発者が上記のアラーム機能を使って作ったスマホアプリです。「やることリスト」という機能に使われています。