Capacitor SDKでオンボーディングを表示する

オンボーディングは SDK v4 で非推奨となり、今後のリリースで削除される予定です。 バグ修正や改善は行われません。代わりにフローを使用してください。オンボーディングは WebView 内で動作しますが、フローはデバイス上でネイティブにレンダリングされるため、よりスムーズなアニメーション、一貫したネイティブな外観、高速な読み込み、WebView ランタイムへの依存がなくなります。始めるには、フローとペイウォールの取得およびフローとペイウォールの表示を参照してください。

ビルダーを使ってオンボーディングをカスタマイズした場合、それをモバイルアプリのコードでレンダリングしてユーザーに表示する必要はありません。このようなオンボーディングには、表示する内容と表示方法の両方が含まれています。

始める前に、以下を確認してください：

オンボーディングを作成していること。
オンボーディングをプレースメントに追加していること。

オンボーディングを表示する

オンボーディングを表示するには、createOnboardingView メソッドで作成した view に対して view.present() メソッドを呼び出します。各 view は一度しか使用できません。オンボーディングを再度表示する必要がある場合は、createOnboardingView をもう一度呼び出して新しい view インスタンスを作成してください。

view を再作成せずに再利用すると、エラーが発生する場合があります。


try {
  const view = await createOnboardingView(onboarding);
  
  view.setEventHandlers({
    onClose: (actionId, meta) => {
      console.log('Onboarding closed:', actionId);
      return true; // Allow the onboarding to close
    },
    onCustom: (actionId, meta) => {
      console.log('Custom action:', actionId);
      return false; // Don't close the onboarding
    }
  });
  
  await view.present();
  console.log('Onboarding presented successfully');
} catch (error) {
  console.error('Failed to present onboarding:', error);
}

iOSの表示スタイルを設定する

present() メソッドに iosPresentationStyle パラメーターを渡すことで、iOSでのオンボーディングの表示方法を設定できます。このパラメーターには 'full_screen'（デフォルト）または 'page_sheet' を指定できます。

await view.present({ iosPresentationStyle: 'page_sheet' });

オンボーディングでのリンクの開き方をカスタマイズする

オンボーディングでのリンクの開き方のカスタマイズは、Adapty SDK v3.15 以降でサポートされています。

デフォルトでは、オンボーディング内のリンクはアプリ内ブラウザで開きます。これにより、アプリを切り替えることなくウェブページを表示できるため、シームレスなユーザー体験を提供できます。

外部ブラウザでリンクを開きたい場合は、openIn パラメーターを browser_out_app に設定することでこの動作をカスタマイズできます。

await view.present({ openIn: 'browser_out_app' }); // default — browser_in_app

次のステップ

オンボーディングを表示したら、ユーザーのインタラクションとイベントを処理しましょう。オンボーディングイベントの処理方法を学んで、ユーザーのアクションに応答し、アナリティクスを追跡してください。