OutSystemsでPush通知を実装してみた

Pocket

１．はじめに
２．実装準備
３．実装
- ３．１．メッセージ送信アプリの実装
- ３．２．メッセージ受信アプリの実装
４．ネイティブアプリを生成する
５．実行してみる
６．実装してみて

１．はじめに

　スマホやタブレットなどのモバイル端末でニュースやSNSのメッセージを受信した際に自動的に表示されるメッセージがあります。これはPush通知と呼ばれ、特定の利用者や端末に向けてメッセージを届ける仕組みです。

　Push通知のSaaSサービスをOutSystemsのパーツとして取込み、利用することができます。実際にOutSystemsを使ってどのように実装し、実現するかその方法を解説します。

２．実装準備

　利用するサービスおよび準備・用意しておくものを確認します。

・OneSignalのインストール

　OutSystemsのForgeにはメッセージ配信サービスに対応したものがいくつかありますが、今回はOneSignalを利用するので、Forgeからダウンロードします。

　*Forgeとは：OutSystemsおよびOutSystemsのコミュニティメンバーが開発したOutSystems用のコンポーネントを他のコミュニティメンバーに簡単に共有できるオンラインリポジトリのことです。

図1 OneSignalPluginのアイコン

・OneSignalのAppIDとRestAPIKey

　OutSystemsで作成するアプリケーションからOneSignalのメッセージ配信サービスを利用するためには、OneSignalとメッセージをやり取りするためのAppIDとRestAPIKeyが必要です。これを取得するには、OneSignalへ開発者としてのユーザ登録し、必要な設定を行います。

【OneSignalのサイト】

　https://onesignal.com/

図2 OneSignalで発行されるAppIDとRestAPIKey

　OneSignalでAppIDとRestAPIKeyを発行するためには必要なものがありますので、以下に記載します。

・アプリケーションのリバースドメイン

　アプリのリバースドメインは、OutSystemsでアプリを作成したときに取得できます。取得方法は、「４．ネイティブアプリを生成する」の図14に記載がありますのでそちらを参考にしてください。なお、OneSignalのAppID、RestAPIKeyの発行以外でも、Android、iOSのネイティブアプリ生成のためにも必要になります。

・ネイティブアプリ生成のための各種ID類

　ネイティブアプリのOSごとに必要なID類が異なりますのでOS別に記載します。

　Androidの場合：

　・ServerKey

　・SenderID

　これらは、Google社が提供するサービスの1つであるFirebaseのCloud Messagingサービスで発行します。

【FirebaseのURL】

　https://firebase.google.com/

図3 FirebaseサイトでのServerKeyとSenderID

　iOSの場合：

　・TeamID

　・KeyID

　・Keyファイル

　いずれもApple Developer Program（以下ADP）のサイトで取得します。

【ADPのURL】

　https://developer.apple.com/jp/programs/

図4 ADPサイトでの各種Key、ID情報

・ネイティブアプリ生成のための証明書

　OutSystemsでネイティブアプリを生成するときに必要な証明書は、AndroidではKeystoreファイル、iOSでは.p12ファイルとProvisioningファイルになります。KeystoreファイルはJavaのkeytoolコマンドを使用して発行します。発行方法はOutSystemsのサイトに記載がありますので、以下のサイトを参考にしてください。

【Keystoreを発行する参考URL】

　https://success.outsystems.com/ja-jp/documentation/11/delivering_mobile_apps/generate_and_distribute_your_mobile_app/more_information_on_generating_and_distributing_mobile_apps/

　iOSの証明書は、ADPにて発行します。作成方法は以下のサイトを参考にしてください。

【AppStore用証明書の作成の参考URL】

　https://zenn.dev/iwatos/articles/b131cf60d20131513bcb

３．実装

３．１．メッセージ送信アプリの実装

　メッセージを送受信するアプリを作成します。メッセージ送信においては、ブロードキャストで送信したいメッセージを入力する欄と実際に処理を実行する（メッセージを送信する）ロジックを用意しておけばOKです。メッセージ送信を限定したい場合は、送信先のユーザや、端末を選択する機能が必要になりますが、ここではブロードキャスト配信としますので、ユーザや端末の選択機能については省略します。

　Management Dependenciesで、あらかじめダウンロードしたForge：OneSignalPluginのモジュールOneSignalAPIからSendPushNotificationToAllを選択し、アプリケーションで利用できるようにします。

　Management Dependenciesでの設定は、図5のようになります。

図5 Management Dependencies

　図6は作成した画面イメージになります。

図6 メッセージ送信画面イメージ

　図7はScreen Actionのロジックになります。

図7 Screen Action

　メッセージを送信する際に必要なものは、OneSignalを利用する際に必要な、AppIDとRestAPIKeyの2つです。本稿での実装方法において、AppIDとRestAPIKeyはサイトプロパティに保持しています。サイトプロパティは頻繁に変更されない値を持つグローバル変数として利用されており、AppIDとRestAPIKeyの値をサイトプロパティに保持しておくことで、その値が何かしらの理由で変更された場合でもService Centerで修正することができますので、アプリをPublishする必要がなくなります。

　次にServer Actionを作成します。ロジックは図8のようになります。

図8 Server Action

　図8ではDeepLink（受信メッセージをタップしたときに画面遷移させる機能）を設定しています。この設定を行うことでメッセージ受信者がメッセージをタップしたとき、”DummyScreen”を開いてもらうことができますが、 DeepLinkは、設定しなくても動作的に問題はありません。

３．２．メッセージ受信アプリの実装

　メッセージを受信するアプリは、この後の工程でネイティブアプリとする対象となります。したがってアプリを作成するときに、TabletまたはPhoneを選択する必要がありますのでご注意ください。

　アプリ作成にあたっては、アプリを利用する端末からOneSignalのサービスへ端末情報の登録を行う必要があります。では実装内容を見ていきます。

　まず、Forge：OneSignalPluginのUI FlowからOneSignal、Clienet ActionからRegisterを選択しアプリで利用できるようにします。次にアプリケーションを起動したときに、OneSignalがロードされるよう設定を行います。InterfaceタブのUI Flows ＞ Common ＞ Layoutを開きます。そこに先ほど設定したOneSignalPlugin ＞ UI Flow ＞ OneSignalを配置します。このとき、コンテナを作成してOneSignal Wrapper等と名前を付けて配置をすると構造がわかりやすくなります。配置のイメージは図9のようになります。

図9 OneSignal配置例

　Widget Treeでは図10のようになります。

図10 Widget Treeでの配置例

　次にClient Actionを作成します。Push通知を受信するためにはOneSignalが管理するデータベースへ端末情報を登録する必要があります。端末情報をOneSignalへ送る処理はForgeのRegisterで実行されますので、これをClient ActionのOnApplicationReadyで実行するように設定します。OnApplicationReadyは通常デフォルトでは定義されないので、LogicタブのClient Actionで右クリック→Add System Event を選択することで定義することができます。RegisterにはAppIDをセットします。ロジックは図11のようになります。

図11 OnApplicationReady

　これでメッセージを送受信するアプリケーションができました。あとはネイティブアプリを生成して実行するだけです。

４．ネイティブアプリを生成する

　あらかじめ発行しておいた証明書やファイルを登録してネイティブアプリを生成していきます。OutSystemsのService Studioで、アプリのトップページにある、Distributeタブを選択するとネイティブアプリを生成する画面が表示されます（図12、図13）。

図12 Service Studioのアプリのトップページ

図13 Distributeタブを選択したところ

　Android、iOSそれぞれで設定する項目を見ていきます。

　Androidは、図14の通り、Keystoreのファイルと、パスワード、Aliasの情報とそのパスワードを入力し、Generate Android appを押下して、Android用のネイティブアプリを生成します。

図14 ネイティブアプリ生成：Android

　iOSは図15の通り、.p12ファイルとそのパスワードとプロビジョニングファイルを入力し、Generate iOS appを押下して、iOS用のネイティブアプリを生成します。

図15 ネイティブアプリ生成：iOS

５．実行してみる

　ネイティブアプリを生成しましたので、受信アプリを端末にインストールし、実際にPush通知を行ってみます。まず、送信アプリをWebブラウザで開き、メッセージを入力し送信します（図16）。

図16 メッセージを入力したところ

　図17がメッセージを受信した画面になります。画面はiOSの画面コピーです。

図17 メッセージを受信したところ

６．実装してみて

　いかがでしょうか？アプリケーションの構築はそれほど難しいものではないと感じていただけたと思いますが、外部のサービスを利用するためにユーザ登録が必要だったり、証明書をいくつか発行しなければならないなど、アプリケーション構築以外の手間がちょっと多かったように感じます。ただ、これらの作業のうち、他に同様のアプリを構築する際には行う必要がないものもいくつかありますので、最初だけ手間がかかる、と考えればよいかと思います。

　※Howtoでも紹介している→URLを貼る予定

　本稿が何かのお役に立てれば幸いです。

OutSystems® とロゴはOutSystems-Software Em Rede S.A.の登録商標です。