Teams Toolkit を使用して Office アドイン プロジェクトを作成する (プレビュー)

  • [アーティクル]

Microsoft 365 プラットフォームの拡張機能は、拡張機能が Teams アプリケーション自体の完全な外部にある場合でも、"Teams Apps" に含まれるようになりました。 Teams アプリを開発するための主要なツールは、Teams Toolkit です。 Teams Toolkit を使用して Office アドインを作成できます。次の制限があります。

  • 現時点では Outlook アドインのみを作成でき、Outlook on Windows の場合にのみ作成できます。 Microsoft では、他の Office アプリケーションとプラットフォームへのアドインに対する Teams Toolkit のサポートを有効にするよう努力しています。
  • Teams Toolkit で作成されたアドインでは、Microsoft 365 の統合マニフェスト が使用されます。これは現在プレビュー段階です。 ツールキットを使用してアドインを作成する実験をお勧めしますが、運用環境のアドインには統合マニフェストを使用しないことをお勧めします。

「Teams Toolkit のインストール」の説明に従って、最新バージョンの Teams Toolkit を Visual Studio Code にインストールします。

Outlook アドイン プロジェクトを作成する

  1. Visual Studio Code を開き、 アクティビティ バーの [Teams ツールキット] アイコンを選択します。

    Teams ツールキット アイコン。

  2. [ 新しいアプリの作成] を選択します。

  3. [ 新しいプロジェクト ] ドロップダウンで、[ Outlook アドイン] を選択します。

    [新しいプロジェクト] ドロップダウンの 4 つのオプションを示すスクリーンショット。4 番目のオプションは

  4. [ Outlook アドインを使用したアプリ機能 ] ドロップダウンで、[ タスクペイン] を選択します。

    [Outlook アドインを使用したアプリ機能] ドロップダウンの 2 つのオプションを示すスクリーンショット。最初のオプション 'Taskpane' が選択されています。

  5. 開いた [ワークスペース フォルダー ] ダイアログで、プロジェクトを作成するフォルダーを選択します。

  6. プロンプトが表示されたら、プロジェクトに名前を付けます (スペースなし)。 Teams Toolkit は、基本的なファイルとスキャフォールディングを使用してプロジェクトを作成します。 次に、 2 番目の Visual Studio Code ウィンドウでプロジェクトを開きます。 元の Visual Studio Code ウィンドウを閉じます。

  7. Visual Studio Code TERMINAL で、プロジェクトのルートに移動し、 を実行 npm installします。

  8. プロジェクトに変更を加える前に、Visual Studio Code から Outlook アドインをサイドロードできることを確認します。 次の手順を実行します。

    1. Microsoft 365 開発者テナントのアカウントが、デスクトップ Outlook のメール アカウントでもあることを確認します。 そうでない場合は、「 メール アカウントを Outlook に追加する」のガイダンスに従ってください。
    2. Outlook デスクトップを閉じます。
    3. Visual Studio Code で、Teams Toolkit を開きます。
    4. [ ACCOUNTS ] セクションで、Microsoft 365 にサインインしていることを確認します。
    5. [Visual Studio Code で実行の表示]を選択します | 。 [実行とデバッグ] ドロップダウン メニューで、[Outlook Desktop (Edge Chromium)] オプションを選択し、F5 キーを押します。 プロジェクトがビルドされ、Node dev-server ウィンドウが開きます。 このプロセスには数分かかる場合があります。 最終的に、Outlook デスクトップが開きます。
    6. Microsoft 365 アカウント ID の受信トレイを開き、任意のメッセージを開きます。 2 つのボタンを含む Contoso アドイン タブが [ホーム ] リボン (またはメッセージ リボン (独自のウィンドウで メッセージ を開いている場合) に表示されます。
    7. [ タスクウィンドウの表示 ] ボタンをクリックすると、作業ウィンドウが開きます。 [ アクションの実行 ] ボタンをクリックすると、メッセージの上部近くに小さな通知が表示されます。
    8. デバッグを停止してアドインをアンインストールするには、Visual Studio Code で [デバッグの停止の実行 | ] を選択します。

これで、プロジェクトを変更して開発できます。 Office アドインドキュメントのガイダンスが、使用されているマニフェストの種類に応じて分岐する場所では、統合マニフェストのガイダンスに従ってください。