モバイルアプリにツールチップガイドを追加する

最終更新日: 2024年09月18日 02:21

モバイルツールチップとは、アプリ内の特定の要素の横に表示される注釈や補足情報のことです。新機能のリリース時に特定の機能（feature）を強調表示、または見つけやすくする目的で使用されます。ツールチップは、ガイド付きウォークスルーやオンボーディングフローの一部として導入することもできます。詳細については、「モバイルアプリにマルチステップガイドを追加する」をご参照ください。

権限

Visual Design Studioを使用するには、Pendoユーザーは以下の2つの権限のいずれかが必要です。

Pendo管理者権限
最低でも以下のうち1つを実施できるPendoユーザー権限
- レイアウトからガイドを作成する
- 公開されたガイドを管理する

ガイドの作成

新しいガイドを作成します。
ツールチップのレイアウトを選択します。Pendoが提供する事前構築済みのレイアウトを使用することも、独自のレイアウトを作成することもできます。ガイドの詳細ページが開き、新しいツールチップガイドが表示されます。

ツールチップの位置

［コンテナの編集（Edit container）］ダイアログの［場所（Location）］タブで、要素とツールチップのデフォルトの場所を変更できます。選択された要素でツールチップのための十分なスペースが画面上にない場合、Pendoは自動的にツールチップを再配置します。

視覚的背景

デフォルトでは、ユーザーが選択できるように、ターゲット要素が背景の上に表示されます。ユーザーがターゲット要素をクリックすると、ツールチップを閉じたり、進めることができます。視覚的背景の設定をカスタマイズするには、コンテナ内の［スタイリング（Styling）］タブにアクセスします。

背景を削除する（Remove the backdrop）。ユーザーはアプリをクリックして進むことができます。一度クリックすると、ツールチップが閉じてツアーに進みます。
背景の上にターゲット要素を表示（Show Target Element Above Backdrop）。背景の下にある画面上の要素やその他の領域はクリックできません。これは、特定の機能（feature）を強調表示したい場合、またはユーザーがツアーを続行する必要のあるガイド付きウォークスルーを提供する場合に使用できます。このオプションはツールチップボタンと一緒に使用されます。

注：作成したツールチップは、Visual Design Studio上では正しい位置に表示されません。アプリ内でのツールチップの実際の位置を確認するには、お使いのデバイスでツールチップをテストしてください。

小さなガイダンスツールチップを作成する

ツールチップを使用して特定の機能（feature）を強調表示するには、このツールチップでアプリをブロックするかどうかを検討してください。ユーザーが画面をクリックすると消えるツールチップの場合：

［ツールチップスモールヘルパー（Tooltip small Helper）］など、ボタンのないレイアウトを選択します。
ツールチップの設置場所となるページと要素を選択します。
［スタイリング（Styling）］タブで、視覚的背景を削除します。この操作で、ユーザーが画面をクリックすると、ツールチップを閉じすことができます。

ボタン付きのツールチップを作成する

ツールチップで機能（feature）を強調表示しつつ、ユーザーには同じページで次のステップに進んでもらいたい場合があります。この場合、［OK］／［了解（Got it）］ボタンのツールチップを追加し、ユーザーがその機能、つまりフィーチャー（Feature）をクリックできないようにします。

ボタン付きのレイアウトを選択するか、既存のツールチップにボタンを追加します。
［スタイル（Styling）］タブで、［背景の上にターゲット要素を表示する（Expose target element above backdrop）］の選択を解除します。これにより、ツールチップのボタンを選択するだけで、ツアーを進行または終了できます。

複数のアプリページにまたがるツアーの作成

アプリ内の特定のフローをユーザーに案内するツアーでは、フローを進めるためにユーザーがターゲット要素を選択する必要がある場合があります。これを実装するために推奨される方法は次のとおりです。

「ツールチップスモールヘルパー（Tooltip small Helper）」など、ボタンのないレイアウトを選択します。
ツールチップの設置場所となるページと要素を選択します。
デフォルト設定のままにして背景を含め、背景の上にターゲット要素を表示します。

Jetpack ComposeでAndroidネイティブアプリ用のツールチップを追加する

注：このサービスはオープンベータ版です。

ツールチップガイドは場所に基づいており、特定のフィーチャー（Feature）に紐付けられています。SDKバージョン3.3.0から、コードベースの環境でPendoタグを使用して、ツールチップガイドを添付したいフィーチャー（Features）を特定できます。

注：Pendoタグを使用してツールチップの場所を設定する前に、開発者がSDKを正しく統合していることを確認してください。詳細については、Githubサイトをご参照ください。SDKバージョン3.3.0でPendoタグが追加されたすべてのページは、SDKバージョン3.4.0にアップグレードするときに、再キャプチャする必要があります。

ツールチップガイドを配置したいアプリ内のフィーチャー（Feature）を特定します。
アプリケーションコードに以下のコードを貼り付け、フィーチャー（Feature）に一意の識別子を持つpendoTagを追加します。
```
someComposableObject(
     modifier = Modifier
          .pendoTag("UNIQUE_IDENTIFIER")
)
```
注：Pendoタグは大文字と小文字を区別します。
ビジュアルデザインスタジオ（Visual Design Studio）で該当するページにタグを付け、特定した機能のツールチップガイドの場所を設定します。

権限