ユーザー通知

Open Web Apps 開発者にとって、ユーザーにフィードバックを与えることは鍵となるタスクのひとつです。UIのふるまいにはいろいろありますが、ユーザーに対して通知を行うことで、ユーザーはアプリ関係のイベントがいつ起こったのか知ることができます。

本記事では、通知管理、最も一般的なユースケース、この機能を実装するためのツールについて、おすすめをご紹介します。イベントハンドラ(英語)やアラームAPI(英語)、通知API(英語)、バイブレーションAPIといったAPI群の使い方について詳細が必要な方のために、FAQと実世界での例についてもご紹介します。

ユーザー通知フロー

通知管理の一般的なフローはこのようになります。

Detect when to notify users → Notify users

アプリがユーザーに通知しなければいけないとき、まずアプリはイベントを検知しなければなりません。通常はイベントハンドラもしくはポーリング関数でこれを実装します。トリガーとなるイベント(やその他)に応じて、そのイベントに対し最適なユーザーエクスペリエンスを与えられるよう、ユーザーにそれぞれ異なるやり方で通知できます。

おすすめ

通知が提供する有益な情報というのは、アプリによってさまざまです。例えば、インスタントメッセージングアプリで新着を通知したいかもしれませんし、to-doアプリで締め切りを通知したいかもしれませんし、ゲームアプリでスペシャルイベントを通知したいかもしれません。ここでは通知管理のベストプラクティスをお伝えします。

いつユーザーに通知するか見極める

まず、いつユーザーに通知するか見極めねばなりません。これはイベントハンドラかポーリング関数で実装します。

イベントハンドラ

Open Web Apps はイベントを通じて入力やその他の出来事に反応するのがルールです。ウェブプラットフォームは、イベントドリブン型のプログラミング言語であるJavaScriptに依っているからです。イベントハンドラはJavaScriptのオブジェクトとして割り当ててもいいですし、あるいはDOMツリー内の要素ノードとして割り当ててもかまいません。どちらにせよそれによりアプリがイベント発生を検知して、ユーザーに通知できます。イベント全部を網羅したリストについては MDN Event reference をご覧ください。ここではいくつか例をご紹介します。

通常は、onclick, onfocus, onkeydown といったイベントを div や button などのDOM要素に割り当てます。これらのイベントはユーザーの入力と共に使われるもので、どのようなデバイスでアプリを実行しているかによって変わってきます。
以下のイベントは一般的には window JavaScript オブジェクトに割り当てられます。
- onload と onresize
- Window.ondeviceorientation と Window.ondevicelight (デバイスの向きと周辺光の明るさをそれぞれ検知します)
- BatteryManager.onlevelchange (バッテリー状態情報)
多くのAPIはコールバック関数上のイベントハンドラにアクセスできます (通常は onerror と onsuccess).

注意: ウェブプラットフォームで提供されるイベントは、それが利用可能かつ十分にサポートされている時のみお使いになることをおすすめします。そうでない限りは、将来にわたって使えるアプリを作るなら Modernizr や PhoneGap といった有名なツールをお使いください。

アプリのその他の状態に反応する

残念ながらウェブプラットフォームは必ずしもテストしたいイベントそのものを提供してくれるとは限りません。そのような場合には、Alarm APIを使ってアラームをセットするか、周期的に window.setInterval や window.requestAnimationFrame 経由で所与の条件がtrueであるかをチェックするか、その組み合わせをお使いになれます。

ユーザーに通知する

イベントが発生したら、適切なユーザーエクスペリエンスをユーザーに届けたいはずです。検知されたイベント(やその他)に応じて、Open Web App はユーザーにテキストだったり、バイブレーションだったり、音だったり(あるいはその組み合わせ)を使ってユーザーに通知できます。

DOM操作を使う場合

これがユーザー通知では一番簡単です。DOM要素上で setAttribute, append や innerHTML といったJavaScriptのメソッドを呼んでDOMを操作してアプリ内で情報を伝えてください。

システム通知を使う場合

ユーザーエクスペリエンスは極めて重要です。必要であれば、アプリが起動していないときやバックグラウンド実行されている時でもユーザーに通知しなければいけません。

システム通知はNotification APIで提供されるJavaScriptオブジェクトで設定・表示できます。

new Notification('This is a notification message');

上記のコードは例セクションにあるto-doリストのデモアプリに関係するものです。OSによって表示される通知は異なります。

バイブレーションを使う場合

その他の可能性としては、最近のハードウェアには振動装置が内蔵されています。Vibration APIを使うことで、ウェブアプリからもJavaScriptで振動装置にアクセスできます。

window.navigator.vibrate(200);

ウェブアプリがこのコードを実行すると、そのデバイスで200ミリ秒(0.2秒)振動します。振動パターンやその他の高度な機能については Vibration API documentation をご覧ください。

振動でのフィードバックについては、ユーザーが有効/無効にできるようにすべきです。これが気に障る人もいるからです。あなたのアプリの「設定」セクションでできるようにしましょう。

音を使う場合

HTMLの <audio> 要素でユーザーに音で通知できます。Tutorials 内にMDNの <audio> についてのガイドがあります。

例

ユーザーにいつ通知するか見極める: ほとんどの人はイベントハンドラそのものや、イベント応答をどう記述して提供するかといったイベントハンドラの使い方を知っているでしょう。しかしその他にも、ユーザーの環境に応じて所与の条件の組み合わせがいつ true になるかをいつ判断すべきかなど、考えることはたくさんあります。この記事ではそのテーマについての論考をシェアします。
to-doリスト (1/3) - 締め切りがいつかチェックする: データベース内に保存された締め切りに対して、現在の日付と時刻をチェックする、という複雑な例です。
to-doリスト (2/3) - 通知とバイブレーションAPIでユーザーに知らせる: イベント発生を一旦検知したら、それに反応して、ユーザーに通知しなければなりません。通知APIとバイブレーションAPIではこれを直ちに、シンプルに、システム全体でのフィードバックができます。この記事では文脈のなかでこの2つの使い方について説明します。
to-doリスト (3/3) - ユーザーへの通知にアラームを使う: この前の記事では、通知についてふつうのタイマーと複雑なチェック関数を使う例を提案しました。もっとシンプルな方法もあります。アラームAPIを使えば、自動的に通知期限をセットしてそれがいつ来るかをチェックできます。この記事ではそれをご紹介します。