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 でアプリはどのように動作しますか？
前提条件
PDFTron サンプル
ngrok を使用して、ローカルで実行中のインスタンスを外部からアクセスできるようにする
Microsoft Teams の新規プロジェクトを立ち上げ、統合する
Sideloading の問題
まとめ

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

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

前提条件

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

VS Code – ダウンロード
VS Code Teams Toolkit Extension – セットアップガイド
Microsoft 365 アカウントと有効なサブスクリプション、または Microsoft 365 Developer Program に参加してください。参加はこちらから
js のダウンロード

PDFTron サンプル

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

JavaScript PDF Viewer ライブラリの統合

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

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

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

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

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

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

ngrok authtoken <token>

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

ngrok http 4200 –host-header=localhost:4200

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

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

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

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

Sideloading の問題

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

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

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

まとめ

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

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