タブ アプリ内を移動する

  • [アーティクル]

Microsoft Teams JavaScript クライアント ライブラリ (TeamsJS) では、タブ内のナビゲーションがサポートされています。この記事では、利用可能なオプションについて説明します。これには、アプリ内のタブ間や Teams UI コンポーネントと戻るボタンを使用したナビゲーションの種類が含まれます。

注:

このトピックでは、Microsoft Teams JavaScript クライアント ライブラリ (TeamsJS) のバージョン 2.0.x を反映しています。 以前のバージョンを使用している場合は、 最新の TeamsJS と以前のバージョンの違いに関するガイダンスについては、TeamsJS ライブラリの概要を参照してください。

タブは、Microsoft Teams エクスペリエンスを強化するための優れた方法を提供します。 ユーザーは、もう一度サインインしなくても、タブを使用して Teams 内で Web アプリケーションへのアクセス権を付与できます。 タブの詳細と、Microsoft 365 製品全体で個人用タブを拡張する方法については、「 Teams のタブを構築 する」および「 Microsoft 365 全体で Teams の個人用タブを拡張する」を参照してください。

TeamsJS ライブラリの ページ 機能は、アプリ内のタブ間のナビゲーションをサポートします。 具体的には、名前空間には、現在の pages.currentApp アプリ内の特定のタブへのナビゲーションを許可する関数 navigateTo(NavigateWithinAppParams) と、アプリのマニフェストで定義されている最初のタブに移動する関数 navigateToDefaultPage() が用意されています。

次のコードは、特定のページに移動する方法を示しています。

if (pages.currentApp.isSupported()) {
    const navPromise = pages.currentApp.navigateTo({pageId: <pageId>, subPageId:<subPageId>});
    navPromise.
        then((result) => {/*Successful navigation*/}).
        catch((error) => {/*Failed navigation*/});
}
else {/*Handle situation where capability isn't supported*/
    const navPromise = pages.navigateToApp({appId: <appId>, pageId: <pageId>});
    navPromise.
        then((result) => {/*Successful navigation*/}).
        catch((error) => {/*Failed navigation*/});
}

次のコードは、アプリの既定のタブに移動する方法を示しています。

if (pages.currentApp.isSupported()) {
    const navPromise = pages.currentApp.navigateToDefaultPage();
    navPromise.
        then((result) => {/*Successful navigation*/}).
        catch((error) => {/*Failed navigation*/});
}
else {/*Handle situation where capability isn't supported*/}

注:

タブ アプリのナビゲーションは、 新しい Teams クライアントでのみサポートされます。

pages.navigateToApp() 関数またはディープ リンクを使用して、タブ アプリのナビゲーションを行います。

戻るボタンのナビゲーションを構成する

アプリに複数のタブがある場合、ユーザーは Microsoft 365 ホスト アプリの [戻る] ボタンを使用して、ナビゲーション履歴を後方に移動できます。 ただし、履歴には、ユーザーがタブ内で実行するアクションは含まれません。戻るボタンのエクスペリエンスを強化する場合は、独自の内部ナビゲーション スタックを維持し、戻るボタンの選択用にカスタム ハンドラーを構成できます。 これは、名前空間の pages.backStack 関数をregisterBackButtonHandler()使用して実現できます。

ハンドラーを登録すると、システムがアクションを実行する前にナビゲーション要求に対処するのに役立ちます。 ハンドラーが要求を管理できる場合は、それ以上のアクションが必要ないことをシステムが認識できるように、 を返す true 必要があります。 内部スタックが空の場合は、代わりに関数を呼び出して適切なアクションを実行できるように、 をnavigateBack()返すfalse必要があります。

ホスト アプリにフォーカスを戻す

ユーザーがタブ内の要素の使用を開始した後、既定では、ユーザーが外部から選択するまで、フォーカスは iFrame の要素に残ります。 iFrame がキーボード ショートカット (Tab キーまたは F6 キー) を使用して移動するユーザーの一部である場合は、ホスト アプリに集中できます。 関数を使用して、ホスト アプリに pages.returnFocus() 集中できます。 関数は returnFocus() 、ホスト アプリ true 内でフォーカスを進める方向を示すブール型 (Boolean) を受け取ります。前方と false 後方の場合は 。 一般に、前方には検索バーが強調表示され、後方にはアプリ バーが強調表示されます。

コード サンプル

サンプルの名前 説明 Node.js
タブ アプリのナビゲーション サンプル コードは、アプリ内のタブ間を移動する方法を示しています。 表示

関連項目