Posted at

Push7とIFTTTで作る、自分だけのWebプッシュ通知

More than 3 years have passed since last update.


はじめに

Push7というプッシュ通知配信サービスがAPIを公開しているので、それを利用して今回は「明日の天気予報」をスマフォやPCに通知する、アプリケーションを作ります。

また、IFTTTとの組み合わせは無数にあり、自分だけの通知を作ることもできます。


準備

Push7アカウント 公式サイト

IFTTTアカウント 公式サイト(英語) を取得します


Webプッシュ通知とは?

上の画像の通り、通知をブラウザを通して受信することができます。

ネイティブアプリを開発する必要がなく手軽に通知を配信することができると注目を集めています。


Push7とは?

Webプッシュ通知を手軽に配信できるサービスです。

対応プラットフォームはGoogleChrome(PC/Android)、Firefox(PC)、iOSに対応しています。

logo


なぜ今回はPush7を使うのか?

・無料で利用できる

・APIが公開されている

・iOSでもプッシュ通知を受信できる

・独自ドメインを持っていればSSL証明書はサービス側で無料で取得してくれる

国内ではすでにプッシュ通知サービスが幾つかありますがPush7はAPIを公開しており、IFTTTアプリケーションを簡単に作成することができます。

また、Webプッシュ通知に対応していないiOS端末へはPush7公式アプリがリリースされており、通知をiOS端末に配信することも可能。

Push7

Push7ブログ-公開API


IFTTTとは?

簡単に言うと「もし○○だったら、××する」といったことをWebサービス間で行えるというサービスです。

例で言うと

・Twitterに新しい投稿がされたら、Gmailにメールを送る

・iOSのスクリーンショットが撮影されたらOneDriveに保存

など、様々なアプリケーションをつくることができます。

logo

IFTTT


天気予報をプッシュ通知アプリを作る

それではAPIの仕様の理解を深めるために、

「明日の天気をプッシュ通知するアプリ」を作ります。


1.Make a web requestアプリを作る

sc

IFTTTを登録した状態でここからMake a web requestのアプリケーションを作りましょう


2.Weatherチャンネルを選択

sc


3.配信したい内容を選択

今回は「Tomorrow's weather report(明日の天気予報)」を選択します。

その他にも

「温度が設定した値を下回るときにプッシュ通知」

「日の出時刻にプッシュ通知」

「花粉の飛散量が多くなった時にプッシュ通知(米国のみ)」

など様々なタイミングを設定できます。

sc


4.天気予報通知時刻の設定

好きな時刻にプッシュ通知を配信できます。

sc


5.APIを叩く為にアクションチャンネルにMakerを選択

sc


6.Make a web requestを選択

sc


7.APIを叩く為に詳細な情報を入力します。

sc

Push7 APIドキュメントの通り設定します。

Push7-APIドキュメント


前提条件

存在するappno(アプリケーションナンバー)である必要があります。

アプリケーションの購読者が1人以上いる必要があります。


URL

appno が 123456789 ならば, endpoint は https://api.push7.jp/api/v1/123456789/send

と設定します。

appnoやapikeyはpush7ダッシュボードから確認できます

sc


Method

POSTを選択します。


Content Type

application/jsonを選択します。


Body

記述例


json

{ "title": "{{TomorrowsCondition}}", 

"body": "最高温度{{HighTempCelsius}}度、最低温度{{LowTempCelsius}}度",
"icon": "{{ConditionImageURL}}",
"url": "{{ForecastUrl}}",
"apikey": "000000000000000000000000"
}

apikeyはダッシュボードを参照してください。

内容はIFTTT側で確認することができます。

sc

最高温度:{{HighTempCelsius}}

最低温度:{{LowTempCelsius}}

天気アイコンをURL:{{ConditionImageURL}}

など、フォームのフラスコボタンから確認できます。


8.完成

sc

IFTTTの仕様上、[check now]を押しても設定時間にならないとプッシュ通知が来ないようなので、最初だけは動作確認のために通知時間を変更しました。

また、アプリケーションを作成したからといって、通知が来るわけではありません、アプリケーションを購読する必要があります。

成功すればこのように通知が届きます。

Chrome(PC)

sc

Chrome(Android)

sc

Push7公式アプリ(iOS)

sc

きちんと通知履歴にも表示されています。

sc


公開します

東京の明日の天気予報を午後8時にプッシュ通知するアプリケーションです。

https://weather.app.push7.jp/

どんなものかと試してみたい人はどうぞ!


さいごに

IFTTTとPush7の組み合わせは無数にあると思います。

Push7の購読URLを知人に教えたり、自分だけの通知を共有することもできるのでいろいろ楽しめそうです。

ここでは書いていませんが有名人の呟いたらPush通知を送るアプリや、TrackIfを使ったWebページを定期的に監視し更新されたらPush通知を送るアプリ、アニメの放送時間になったら通知を送るアプリなどを簡単に作ることができます。ブログなどの更新情報などに使っている方も多いみたいですが、少し異なった使い方をしても面白いかもしれません。

Push7 公式サイト

IFTTT 公式サイト(英語)