サーバーレスRedisとReact Nativeで実現するアプリ内アナウンス機能の作り方

モバイルアプリでは、重要なお知らせや警告、利用ガイドなどをエンドユーザーに届けたい場面がよくあります。その手段のひとつが「アプリ内アナウンス」です。

本記事では、サーバーレスRedisを活用してユーザーへアナウンスを配信するモバイルアプリを実際に構築します。アプリ開発にはReact Nativeを使用し、サーバーレスRedisにはUpstashを採用して、アプリから直接接続する構成を実装します。

アプリ内アナウンスとは？

アプリ内アナウンスとは、重要な情報を伝えたり、ユーザーの操作について通知したり、特定の場所へ誘導したりするために、エンドユーザーへ送信されるメッセージのことです。

この仕組みを使えば、コードの更新や新バージョンのリリースを行わずに、開発者はユーザーとコミュニケーションを取ることができます。

ここでは、「一度だけ読めばよいメッセージ」を配信するソリューションを実装します。この実装は、以下のような用途に活用できます。

• アップデートや新リリースのお知らせ
• アプリの新機能の案内
• ユーザー数100万人突破など、記念すべき出来事の共有

サーバーレスアナウンスの設計

今回の要件は、最新のアナウンスを各ユーザーに「1回だけ」表示することです。そのため、各アナウンスにバージョン番号を割り当てて順序を管理し、ユーザーがまだ見ていない場合のみ最新のアナウンスを送信します。満たすべき条件は次の2つです。

• 最新のアナウンスのみを表示する
• 各ユーザーに対してアナウンスを1回だけ表示する

この目的に最適なのが、Redisの「ソート済みセット（Sorted Set）」です。アナウンスをバージョン順に保存・並べ替えることで、効率的に管理できます。

ソート済みセットは、キーに文字列メッセージ、値にそのメッセージへ割り当てたスコアを持つマップのようなデータ型で、スコア順にソートされます。本記事では、このスコアがアナウンスのバージョンに相当します。

Upstashデータベースの作成とアナウンスの登録

最初のステップとして、Upstashコンソールでデータベースを作成します。

続いて、サーバーレスRedisにアナウンスを登録していきます。筆者は何でもコードで自動化したいタイプなので、新しいアナウンスの追加はPythonスクリプトで行います。

まず、PythonスクリプトでUpstash Redisへの接続設定を行います。

import json
import redis

r = redis.Redis(
    host='YOUR_REDIS_ENDPOINT',
    port='YOUR_REDIS_PORT',
    password='YOUR_REDIS_PASSWORD',
    charset="utf-8",
    decode_responses=True)

次に、データベースから最新バージョンを取得し、以下の形式で新しいメッセージを追加します。

{"new_message": latest_version + 1}

message = "ご利用前にアプリをアップデートしてください。"

last_message = r.zrange("Announcements", 0, 0, withscores=True, desc=True)
new_version = 0
if len(last_message) > 0:
    new_version = last_message[0][1] + 1
r.zadd("Announcements", {message: new_version})

また、Upstashコンソールの新機能により、「Data Browser」セクションでデータを表示・可視化できます。

以上が、ソート済みセットに新しいアナウンスを追加する方法です。

もちろん、これは一例にすぎません。Upstashコンソールを直接操作することに慣れている方は、そちらから追加しても問題ありません。

アプリをサーバーレスRedisに接続する

このデモの主な目的は、ユーザーとデータベース内のアナウンスをつなぐバックエンドサービスを用意せずに、エンドユーザーを直接Redisへ接続してアナウンス制御を実現することです。

モバイルアプリからRedisのアナウンスを読み取るために、Upstashコンソールから読み取り専用トークンを発行できます。

それでは、モバイルアプリ側のReact Nativeの実装に進みましょう。React Nativeについて詳しく知りたい方は公式サイトをご覧ください。初めて使う場合は、環境構築ガイドの手順に従ってセットアップを行ってください。

今回はアプリ内アナウンスの実装方法のひとつを紹介することが目的なので、新しいメッセージが存在する場合にアラートとして表示する画面を1つだけデザインします。

この画面では、読み取り専用トークンを使ってRedisへHTTPリクエストを送信し、新しいメッセージが存在するかどうかを確認する必要があります。そのためには、過去にRedisから取得した最新バージョンを端末内に保存しておく必要があります。

ローカルストレージには、React Native向けのreact-native-encrypted-storageを使用します。

ユーザーがこの画面を開くたびに、端末のローカルストレージに保存されているバージョンよりも大きいバージョンを持つ最新メッセージを取得します。

ZRANGEBYSCOREコマンドで+infから保存済みバージョンまでの範囲を指定し、結果を1件に限定すれば、この課題を解決できます。Redisコマンドの詳細については、公式ドキュメントをご参照ください。

次のコードは、React Nativeで以下の処理を実装したものです。

• 直近に表示したメッセージのバージョンをローカルストレージから取得する
• 前段階で取得したバージョンより高いバージョンの最新アナウンスを求めて、UpstashへHTTPリクエストを送信する
• 新しいメッセージが返ってきたらそれを表示し、ローカルストレージのバージョンを更新する

var version = await EncryptedStorage.getItem("announcement_version");
if (version == null) {
  version = "-1";
}
version = parseInt(version);
console.log(version);
await fetch(
  "REPLACE_UPSTASH_REDIS_REST_URL/zrangebyscore/Announcements/+inf/" +
    version +
    "/WITHSCORES/LIMIT/0/1",
  {
    method: "GET",
    headers: {
      Authorization: "Bearer REPLACE_UPSTASH_REDIS_REST_READONLY_TOKEN",
      Accept: "application/json",
      "Content-Type": "application/json",
    },
  }
)
  .then((response) => response.json())
  .then((data) => {
    var announcement = data["result"];
    if (announcement && announcement.length > 0) {
      version = parseInt(announcement[1]) + 1;
      var message = announcement[0];
      EncryptedStorage.setItem("announcement_version", version.toString());
      Alert.alert("新しいメッセージがあります！", message);
    }
  })
  .catch((err) => {
    console.error(err);
  });

最後に、最新のアナウンスをアラートとして表示し、ローカルのバージョンをRedis上の最新バージョンと同期させます。

このシンプルなアプリの完全なソースコードはGitHubで公開されています。

まとめ

本記事では、新しいメッセージが存在する場合に、それをユーザーへ「1回だけ」送信するアプリ内アナウンスシステムを構築しました。

ユーザーはまだ見ていない最新のアナウンスを受け取り、受信したメッセージのバージョンはローカルストレージに保存されます。ユーザーが画面を開くたびに、アプリはRedisに新しいメッセージがあるかどうかを確認します。

読み取り専用トークン経由でモバイルアプリからUpstash Redisへ直接接続できるため、このソリューションはバックエンドサービスなしで実装可能です。

本記事が、皆さんとユーザーとのコミュニケーションを手軽にする一助となれば幸いです。