Microsoft Teams 上で PDF を表示、編集、および注釈を付ける方法

Microsoft Teamsは、企業向けのコラボレーション アプリとして人気があり、1 億 4500 万人以上の月間アクティブ ユーザーと 50 万以上の組織が Teams に依存しています。しかし、これまでは Teams で PDF のインタラクションを有効にすることは容易ではなく、別のソフトウェアサービスとの統合が必要でした。

このガイドでは、SaaS ライセンスを追加することなく、Microsoft Teams で本格的なドキュメント体験を可能にすることで、生産性を向上させ、ユーザーの関心を維持する簡単な方法を紹介します。このガイドでは、PDFTron の WebViewer サンプルを Microsoft Teams の Teams アプリとして直接統合する方法を数ステップで説明します。

WebViewer を使えば、PDF を開く、注釈をつける、塗りつぶす、署名する、編集するなど、さまざまなことを Teams 上で行うことができます。WebViewer は、Word、Excel、PowerPoint といった Office フォーマットも開くことができます。また、画像、HTML、CAD、動画、その他のファイル形式も読み込むことができます。

注意: PDFTron は SDK を提供しているので、後から UI を完全にカスタマイズして、希望の機能セット、外観にすることができます。

デモ プロジェクトの全容は、GitHub でご確認頂けます。

Teams でアプリはどのように動作しますか?

Microsoft Teams 用のアプリが作成されると、JSON マニフェスト ファイルが生成されます。マニフェスト ファイルには、ユーザーが Teams アプリを使用するために必要な情報、たとえば Teams タブ用に移動する Web ページが含まれています。Teams のタブは <iframe> であるため、新しい Web アプリと既存の Web アプリの両方を追加することができます。

前提条件

このガイドでは、以下のものがインストールされている必要があります。

PDFTron サンプル

まず、WebViewer を設定する必要があります。このサンプルでは、PDFTronのコード サンプルを参照し、そのガイドに従って WebViewer を構築します。

JavaScript PDF Viewer ライブラリの統合

ngrok を使用して、ローカルで実行中のインスタンスを外部からアクセスできるようにする

WebViewer のサンプルは、Microsoft Teams の HTTPS エンドポイントを使用して一般に公開する必要があります。これは、アプリのテストと開発用のツール ngrok を使って素早く行うことができます。

Microsoft では、セットアップに ngrok を使用する理由をより詳しく説明しています。

ローカルでホストされた Web アプリをセットアップするための Microsoft の手順

ngrokのインストールは、ngrok.comにある以下の手順で行ってください。

  1. Chocolatey 経由で ngrok をインストール
  2. 認証トークンを追加 (トークンを生成してここに入力)

ngrok authtoken <token>

  1. トンネルの開始 (注: 必要に応じてポート “4200” を変更してください)

ngrok http 4200 –host-header=localhost:4200

Microsoft Teams の新規プロジェクトを立ち上げ、統合する

次に、Microsoft Teams の新規プロジェクトを立ち上げ、トンネルを接続します。

  1. VS Code で、拡張機能 Teams Toolkit を選択
  2. 新しい Teams アプリを作成
  3. 開発ヘッダーの下にあるマニフェスト ファイルの編集を選択するか、または local.template.json に移動。
  4. ngrok からの新しい外部アクセス URL に一致させるため、すべての URL を編集
  5. F5 でビルドして実行
  6. アプリを追加

Steps to start new MS Teams project in VS Code.

このような結果になるはずです!

MS Teams viewer project final resut.

Sideloading の問題

注意: Sideloading が有効になっていない問題がある場合、管理者として管理センターにサインインし、有効にする必要があります。

  1. 管理センターで、「Teams」を選択
  2. Teams アプリを展開
  3. その下にある Setup policies に移動
  4. カスタム アプリのアップロードを有効化

Navigating the MS Teams Admin Center.

管理センターの操作方法 (上記1~4の手順)

まとめ

ガイドは以上となります!このガイドにより、Microsoft Teams で PDF とドキュメントの完全な統合をより簡単に行うことができるようになれば幸いです。

PDFTron 製品の詳細は、弊社 Web サイトをご確認ください。

記事参照:
© 2022 PDFTron
How to View, Edit, and Annotate PDFs in Microsoft Teams