Web ページから Excel スプレッドシートを作成し、データを入力して Office アドインを埋め込む

SaaS Web アプリケーションを使用する Microsoft パートナーは、多くの場合、顧客が Excel スプレッドシートの Web ページからデータを開きたいと考えています。 Excel を使用して、データやその他の種類の数値のクランチに関する分析を行います。 次に、データを Web サイトにアップロードし直します。

Web サイトから .csv ファイルにデータをエクスポートする複数の手順の代わりに、.csv ファイルを Excel にインポートし、データを操作し、Excel からエクスポートして Web サイトにアップロードし直します。このプロセスを 1 回のボタン クリックで簡略化できます。

この記事では、Excel ボタンを Web サイトに追加する方法について説明します。 顧客がボタンを選択すると、要求されたデータを含む新しいスプレッドシートが自動的に作成され、顧客の OneDrive にアップロードされ、新しいブラウザー タブで Excel で開きます。ワンクリックで、要求されたデータが Excel で開き、正しく書式設定されます。 さらに、このパターンでは、ユーザーが Excel のコンテキストからサービスに引き続きアクセスできるように、独自の Office アドインがスプレッドシート内に埋め込まれます。

このパターンを実装した Microsoft パートナーは、顧客満足度を向上させました。 また、アドインを Excel スプレッドシートに埋め込むことで、アドインとのエンゲージメントが大幅に向上しました。 顧客がデータを操作するための Web サイトがある場合は、このパターンを独自のソリューションに実装することを検討することをお勧めします。

前提条件

• Visual Studio 2022 以降。 Visual Studio を構成するときに Office/SharePoint 開発ワークロードを追加します。
• Visual Studio Code。
• Microsoft 365。 更新可能な 90 日間のMicrosoft 365 E5開発者サブスクリプションを提供する無料の開発者サンドボックスを入手できます。 開発者サンドボックスには、この記事の後の手順でアプリの登録に使用できる Microsoft Azure サブスクリプションが含まれています。 必要に応じて、アプリの登録に別の Microsoft Azure サブスクリプションを使用できます。 Microsoft Azure で試用版サブスクリプションを取得します。
• Microsoft 365 アカウントの OneDrive 上の 1 つ以上のファイルとフォルダー。

サンプル コードを実行する

この記事のサンプル コードは、「 Web サイトからスプレッドシートを作成し、データを設定し、Excel アドインを埋め込む 」という名前で、サンプルを実行するには、 readme の指示に従います。

ソリューション アーキテクチャ

この記事で説明するソリューションは、Web サイトに [Excel で開く] ボタンを追加し、Azure Functionsと Microsoft Graph APIと対話します。 次の一連のイベントは、ユーザーが新しい Excel スプレッドシートでデータを開きたい場合に発生します。

1. ユーザーが [ Microsoft Excel で開く ] ボタンを選択します。 Web ページは、Azure Functions アプリの関数にデータを渡します。
2. 関数は Open XML SDK を使用して、メモリ内に新しい Excel スプレッドシートを作成します。 スプレッドシートにデータが設定され、Office アドインが埋め込まれます。
3. 関数は、Base64 でエンコードされた文字列としてスプレッドシートを Web ページに返します。
4. Web ページから Microsoft Graph APIが呼び出され、スプレッドシートがユーザーの OneDrive にアップロードされます。
5. Microsoft Graph は、新しいスプレッドシート ファイルの Web URL の場所を返します。
6. Web ページで新しいブラウザー タブが開き、Web URL でスプレッドシートが開きます。 スプレッドシートには、データとアドインが含まれています。

ソリューションの重要な部分

このソリューションには、ビルドする 2 つのプロジェクトがあります。

• 関数を含むFunctionCreateSpreadsheetAzure Functions アプリ。
• Node.js Web アプリケーション プロジェクト。

次のセクションでは、ソリューションを構築するための重要な概念と実装の詳細について説明します。 実装の詳細については、 サンプル コード で完全な参照実装を確認できます。

Excel ボタンと Fluent UI

Excel スプレッドシートを作成する Web サイトのボタンが必要です。 ベスト プラクティスは、Fluent UI を使用して、ユーザーが Microsoft 製品間を移行できるようにすることです。 常に Office アイコンを使用して、Web ページから起動する Office アプリケーションを示す必要があります。 詳細については、Fluent UI 開発者ポータルの 「Office ブランド アイコン 」を参照してください。

ユーザーのサインイン

サンプル コードは、MSAL.js を使用してユーザーを認証して Microsoft Graph を呼び出すために、Vanilla JavaScript シングルページ アプリケーションという名前の Microsoft ID サンプルから構築されています。 すべての認証コードと UI は、このサンプルのものです。 認証と承認のためのコードの記述の詳細については、このサンプルを参照してください。 さまざまなプラットフォームの ID サンプルの完全な一覧については、「Microsoft ID プラットフォーム コード サンプル」を参照してください。

Open XML SDK を使用してスプレッドシートを作成する

サンプル コードでは、 Open XML SDK を使用してスプレッドシートを作成します。 Open XML SDK は .NET を使用するため、 という名前FunctionCreateSpreadsheetのAzure Functions アプリにカプセル化されます。 この関数は、Node.js Web アプリケーションから呼び出すことができます。 FunctionCreateSpreadsheet では、ヘルパー クラスを SpreadsheetBuilder 使用してメモリ内に新しいスプレッドシートを作成します。 このコードは、 ファイル名 (Open XML SDK) を指定してスプレッドシート ドキュメントを作成することに基づいています。

スプレッドシートにデータを設定する

関数は FunctionCreateSpreadsheet 、行と列のデータを含む JSON 本文を受け入れます。 これは、すべての行と列を SpreadsheetBuilder.InsertData 反復処理し、ワークシートに追加するメソッドに渡されます。

クラスの多くには、 SpreadsheetBuilder Open XML 2.5 SDK Productivity Tools によって生成されたコードが含まれています。 これらは、 Open XML 2.5 SDK のリンクにあります。

スプレッドシート内に Office アドインを埋め込む

また、クラスはSpreadsheetBuilderスプレッドシート内にScript Lab アドインを埋め込み、ドキュメントを開いたときに表示するように構成します。

SpreadsheetBuilder.cs ファイルの SpreadsheetBuilder.GenerateWebExtensionPart1Content メソッドは、Microsoft AppSource のScript Labの ID への参照を設定します。

We.WebExtensionStoreReference webExtensionStoreReference1 = new We.WebExtensionStoreReference() { Id = "wa104380862", Version = "1.1.0.0", Store = "en-US", StoreType = "OMEX" };

• StoreType 値は、Microsoft AppSource のエイリアスである "OMEX" です。
• ストアの値は、Script Labの Microsoft AppSource カルチャ セクションにある "en-US" です。
• Id 値は、Script Labの Microsoft AppSource 資産 ID です。

これらの値を変更して、独自の Office アドインを埋め込むことができます。 これにより、ユーザーが検出できるようになり、アドインや Web サービスとのエンゲージメントが向上します。 アドインが中央展開を通じてデプロイされている場合は、代わりに次の値を使用します。

We.WebExtensionStoreReference webExtensionStoreReference1 = new We.WebExtensionStoreReference() { Id = "<Your add-in GUID>", Version = "<Your version>", Store = "excatalog", StoreType = "excatalog" };
We.WebExtensionStoreReference webExtensionStoreReference2 = new We.WebExtensionStoreReference() { Id = "<Your add-in GUID>", Version = "<Your version>", Store = "omex", StoreType = "omex" };            
webExtensionReferenceList1.Append(webExtensionStoreReference2);

これらの属性の代替値の詳細については、「 ドキュメントを使用して作業ウィンドウを自動的に開く 」および 「MS-OWEXML]: CT_OsfWebExtensionReference

スプレッドシートを OneDrive にアップロードする

スプレッドシートが完全に構築されると、 FunctionCreateSpreadsheet 関数は Base64 でエンコードされた文字列バージョンのスプレッドシートを Web アプリケーションに返します。 次に、Web アプリケーションは Microsoft Graph APIを使用して、ユーザーの OneDrive にスプレッドシートをアップロードします。 Web アプリケーションは で \openinexcel\spreadsheet.xlsxファイルを作成しますが、任意のフォルダーとファイル名を使用するようにコードを変更できます。

ソリューションに関するその他の考慮事項

テクノロジとアプローチの点では、すべてのユーザーのソリューションが異なります。 次の考慮事項は、ソリューションを変更してドキュメントを開き、Office アドインを埋め込む方法を計画するのに役立ちます。

アドインの起動時にカスタム プロパティを読み取る

スプレッドシート内にアドインを埋め込む場合は、カスタム プロパティを含めることができます。 SpreadsheetBuilder.csファイルには、変数がある場合にユーザー名を挿入する方法を示すコメント付きコードがuserName含まれています。

    // CUSTOM MODIFICATION BEGIN
    // Uncomment the following code to add your own custom name/value pair properties for the add-in.
    // We.WebExtensionProperty webExtensionProperty2 = new We.WebExtensionProperty() { Name = "userName", Value = userName };
    // webExtensionPropertyBag1.Append(webExtensionProperty2);
    // CUSTOM MODIFICATION END

コードのコメントを解除し、必要な顧客プロパティを追加するように変更します。 アドインで、 Office Settings get メソッド を使用してカスタム プロパティを取得します。 次の例は、スプレッドシートからユーザー名プロパティを取得する方法を示しています。

let userName = Office.context.document.settings.get('userName'));

注意

認証トークンや接続文字列などのカスタム プロパティに機密情報を格納しないでください。 スプレッドシート内のプロパティは暗号化も保護もされません。

アドインの起動時にカスタム プロパティを読み取る方法の詳細については、「アドインの 状態と設定を保持 する」を参照してください。

シングル サインオンを使用する

認証を簡略化するために、アドインでシングル サインオンを実装することをお勧めします。 これにより、ユーザーがアドインにアクセスするためにもう一度サインインする必要はありません。 詳細については、「Office アドインのシングル サインオンを有効にする」を参照してください。

関連項目

• Open XML SDK 2.5 for Office へようこそ
• ドキュメントで作業ウィンドウを自動的に開く
• アドインの状態および設定を保持する
• ファイル名を指定してスプレッドシート ドキュメントを作成する