ユーザー設定を格納する方法
この記事では、Immersive Reader SDK オプションの -preferences および -onPreferencesChanged を使用して、ユーザーの UI 設定や "ユーザー設定" を保存する方法を説明します。
CookiePolicy SDK オプションが "有効" に設定されていると、Immersive Reader アプリケーションは、Cookie を使用してテキスト サイズ、テーマの色、フォントなどのユーザー設定を保存します。 これらの Cookie は、特定のブラウザーとデバイスにおけるローカルなものです。 ユーザーが同じブラウザーとデバイスで Immersive Reader を起動するたびに、そのデバイスでの最後のセッションのユーザー設定で Immersive Reader が開きます。 しかし、ユーザーが別のブラウザーまたはデバイスで Immersive Reader を開くと、設定は最初に Immersive Reader の既定の設定で構成されるので、ユーザーは使用する各デバイスで自分の設定を設定し直す必要があります。 -preferences および -onPreferencesChanged イマーシブ リーダー SDK オプションを使用することにより、アプリケーションによってさまざまなブラウザーおよびデバイスでユーザーの設定をローミングできるようになり、ユーザーがどこでアプリケーションを使用しても一貫性のあるエクスペリエンスが得られます。
まず、Immersive Reader アプリケーションの起動時に -onPreferencesChanged コールバック SDK オプションを指定すると、Immersive Reader セッション中にユーザーが設定を変更するたびに、Immersive Reader は -preferences 文字列をホスト アプリケーションに送り返します。 すると、ユーザー設定が、ホスト アプリケーションの独自のシステムに格納されます。 その後、同じユーザーがイマーシブ リーダーを再び起動すると、ホスト アプリケーションによってそのユーザーの設定がストレージから取得され、イマーシブ リーダー アプリケーションの起動時に -preferences 文字列 SDK オプションとして指定されます。こうして、ユーザーの設定が復元されます。
この機能は、Cookie の使用が望ましくない場合や実現できない場合のユーザー設定の保存の代替手段として使用できます。
注意
Immersive Reader アプリケーションとの間で送受信される -preferences 文字列の値を、プログラムで変更しようとしないでください。それによって予期しない動作が発生し、ユーザー エクスペリエンスが低下する可能性があります。 ホスト アプリケーションによってカスタム値を割り当てたり、-preferences 文字列を操作したりしないでください。 -preferences 文字列オプションを使用する場合は、-onPreferencesChanged コールバック オプションから返された正確な値のみを使用してください。
ユーザー設定の保存を有効にする
Immersive Reader SDK launchAsyncoptions パラメーターには -onPreferencesChanged コールバックが含まれます。 ユーザーが設定を変更すると、この関数が必ず呼び出されます。 value パラメーターには、ユーザーの現在の設定を表す文字列が含まれています。 その後、この文字列はそのユーザー用としてホスト アプリケーションによって格納されます。
const options = {
onPreferencesChanged: (value: string) => {
// Store user preferences here
}
};
ImmersiveReader.launchAsync(YOUR_TOKEN, YOUR_SUBDOMAIN, YOUR_DATA, options);
ユーザー設定を読み込む
-preferences オプションを使用して、ユーザーの設定を Immersive Reader アプリに渡します。 ユーザーの設定を格納して読み込む単純な例を次に示します。
const storedUserPreferences = localStorage.getItem("USER_PREFERENCES");
let userPreferences = storedUserPreferences === null ? null : storedUserPreferences;
const options = {
preferences: userPreferences,
onPreferencesChanged: (value: string) => {
userPreferences = value;
localStorage.setItem("USER_PREFERENCES", userPreferences);
}
};