Visual Studio の Office アドイン プロジェクトを TypeScript に変換するConvert an Office Add-in project in Visual Studio to TypeScript

Visual Studio の Office アドイン テンプレートを使用して JavaScript を使用するアドインを作成すると、そのアドイン プロジェクトは TypeScript に変換できます。You can use the Office Add-in template in Visual Studio to create an add-in that uses JavaScript, and then convert that add-in project to TypeScript. アドイン プロジェクトの作成に Visual Studio を使用することで、Office アドイン TypeScript プロジェクトをゼロから作成する必要がなくなります。By using Visual Studio to create the add-in project, you avoid having to create your Office Add-in TypeScript project from scratch.

この記事では、Visual Studio を使用して Excel アドインを作成して、そのアドイン プロジェクトを JavaScript から TypeScript に変換する方法について説明します。This article shows you how to create an Excel add-in using Visual Studio and then convert the add-in project from JavaScript to TypeScript. 同じ手順を使用して、その他の種類の Office アドイン JavaScript プロジェクトを Visual Studio の TypeScript に変換できます。You can use the same process to convert other types of Office Add-in JavaScript projects to TypeScript in Visual Studio.

注意

Visual Studio を使用せずに Office アドイン TypeScript プロジェクトを作成するには、「5 分間クイック スタート」の「任意のエディタ」セクションに示された手順を実行して、Office アドイン用 Yeoman ジェネレーターのプロンプトが表示されたら TypeScript を選択します。To create an Office Add-in TypeScript project without using Visual Studio, follow the instructions in the "Any editor" section of any 5-minute quickstart and choose TypeScript when prompted by the Yeoman generator for Office Add-ins.

前提条件Prerequisites

  • Office/SharePoint 開発ワークロードがインストールされている Visual Studio 2017Visual Studio 2017 with the Office/SharePoint development workload installed

    注意

    既に Visual Studio 2017 がインストールされている場合は、Visual Studio インストーラーを使用して、Office/SharePoint 開発ワークロードがインストールされていることを確認してください。If you've previously installed Visual Studio 2017, use the Visual Studio Installer to ensure that the Office/SharePoint development workload is installed.

  • Visual Studio 2017 用 TypeScript 2.3TypeScript 2.3 for Visual Studio 2017

    注意

    TypeScript は、既定で Visual Studio 2017 と共にインストールされますが、TypeScript がインストールされているかどうかは、Visual Studio インストーラーを使用して確認できます。TypeScript should be installed by default with Visual Studio 2017, but you can use the Visual Studio Installer to confirm that it is installed. Visual Studio インストーラーで、[個別のコンポーネント] タブを選択して、[SDK、ライブラリ、およびフレームワーク] の下で [TypeScript 2.3 SDK] が選択されていることを確認します。In the Visual Studio Installer, select the Individual components tab and then verify that TypeScript 2.3 SDK is selected under SDKs, libraries, and frameworks.

  • Excel 2016 以降Excel 2016, version 6769.2011 or later

アドイン プロジェクトの作成Create the add-in project

  1. Visual Studio を開いて、Visual Studio のメニュー バーから、[ファイル] > [新規作成] > [プロジェクト] の順に選択します。Open Visual Studio and on the Visual Studio menu bar, choose File > New > Project.

  2. [Visual C#] または [Visual Basic] の下にあるプロジェクトの種類の一覧で、[Office/SharePoint] を展開して、[アドイン] を選択し、プロジェクトの種類として [Excel Web アドイン] を選択します。In the list of project types under Visual C# or Visual Basic, expand Office/SharePoint, choose Add-ins, and then choose Excel Web Add-in as the project type.

  3. プロジェクトに名前を付けて、[OK] を選択します。Name the project, and then choose OK.

  4. [Office アドインの作成] ダイアログ ウィンドウで、[新機能を Excel に追加する] を選択してから、[完了] を選択してプロジェクトを作成します。In the Create Office Add-in dialog window, choose Add new functionalities to Excel, and then choose Finish to create the project.

  5. Visual Studio によってソリューションとその 2 つのプロジェクトが作成され、ソリューション エクスプローラーに表示されます。Home.html ファイルが Visual Studio で開かれます。Visual Studio creates a solution and its two projects appear in Solution Explorer. The Home.html file opens in Visual Studio.

アドイン プロジェクトを TypeScript に変換するConvert the add-in project to TypeScript

  1. ソリューション エクスプローラーで、Home.js ファイルの名前を Home.ts に変更します。In Solution Explorer, rename the Home.js file to Home.ts.

    注意

    TypeScript プロジェクトには、TypeScript ファイルと JavaScript ファイルをどちらも一緒に含めることができ、プロジェクトはコンパイルされます。TypeScript は、JavaScript にコンパイルされる JavaScript の型付けスーパーセットであるためです。In your TypeScript project, you can have a mix of TypeScript and JavaScript files and your project will compile. This is because TypeScript is a typed superset of JavaScript that compiles JavaScript.

  2. ファイル名拡張子の変更を確認するダイアログが表示されたら、[はい] を選択します。Select Yes when prompted to confirm that you want to change file name extension.

  3. Web アプリケーション プロジェクトのルートに Office.d.ts という名前の新しいファイルを作成します。Create a new file named Office.d.ts in the root of the web application project.

  4. Web ブラウザーで、Office.js の型定義ファイルを開きます。In a web browser, open the type definitions file for Office.js. このファイルの内容をクリップボードにコピーします。Copy the contents of this file to your clipboard.

  5. Visual Studio で、Office.d.ts ファイルを開きます。このファイルにクリップボードの内容を貼り付けてから、ファイルを保存します。In Visual Studio, open the Office.d.ts file, paste the contents of your clipboard into this file, and save the file.

  6. Web アプリケーション プロジェクトのルートに、jQuery.d.ts という名前の新しいファイルを作成します。Create a new file named jQuery.d.ts in the root of the web application project.

  7. Web ブラウザーで、jQuery の型定義ファイルを開きます。In a web browser, open the type definitions file for jQuery. このファイルの内容をクリップボードにコピーします。Copy the contents of this file to your clipboard.

  8. Visual Studio で、jQuery.d.ts ファイルを開きます。このファイルにクリップボードの内容を貼り付けてから、ファイルを保存します。In Visual Studio, open the jQuery.d.ts file, paste the contents of your clipboard into this file, and save the file.

  9. Visual Studio で、Web アプリケーション プロジェクトのルートに tsconfig.json という名前の新しいファイルを作成します。In Visual Studio, create a new file named tsconfig.json in the root of the web application project.

  10. tsconfig.json ファイルを開いて、次の内容をファイルに追加してから、ファイルを保存します。Open the tsconfig.json file, add the following content to the file, and save the file:

    {
        "compilerOptions": {
            "skipLibCheck": true,
            "lib": [ "es5", "dom", "es2015.promise" ]
        }
    }
    
  11. Home.ts ファイルを開いて、次の宣言をファイルの先頭に追加します。Open the Home.ts file and add the following declaration at the top of the file:

    declare var fabric: any;
    
  12. Home.ts ファイルで、次に示す行の '1.1'1.1 に変更して (つまり、引用符を削除して)、ファイルを保存します。In the Home.ts file, change '1.1' to 1.1 (that is, remove the quotation marks) in the following line, and save the file:

    if (!Office.context.requirements.isSetSupported('ExcelApi', '1.1')) {
    

変換後のアドイン プロジェクトを実行するRun the converted add-in project

  1. Visual Studio で、F5 キーを押すか [開始] ボタンをクリックして、リボンに [作業ウィンドウの表示] アドイン ボタンが表示された Excel を起動します。アドインは IIS 上でローカルにホストされます。In Visual Studio, press F5 or choose the Start button to launch Excel with the Show Taskpane add-in button displayed in the ribbon. The add-in will be hosted locally on IIS.

  2. Excel で、[ホーム] タブを選択し、リボンの [作業ウィンドウの表示] ボタンをクリックして、アドインの作業ウィンドウを開きます。In Excel, choose the Home tab, and then choose the Show Taskpane button in the ribbon to open the add-in task pane.

  3. ワークシートで、数値を格納している 9 つのセルを選択します。In the worksheet, select the nine cells that contain numbers.

  4. 作業ウィンドウの [強調表示] ボタンをクリックして、選択した範囲内で最大の値を格納しているセルを強調表示にします。Press the Highlight button on the task pane to highlight the cell in the selected range that contains the highest value.

Home.ts コード ファイルHome.ts code file

参考のために、次のコード スニペットで、これまでに説明した変更点を適用した後の Home.ts ファイルの内容を示します。For your reference, the following code snippet shows the contents of the Home.ts file after the previously described changes have been applied. このコードには、アドインを実行するために必要な最小限の変更点が含まれています。This code includes the minimum number of changes needed in order for your add-in to run.

declare var fabric: any;

(function () {
    "use strict";

    var cellToHighlight;
    var messageBanner;

    // The initialize function must be run each time a new page is loaded.
    Office.initialize = function (reason) {
        $(document).ready(function () {
            // Initialize the FabricUI notification mechanism and hide it
            var element = document.querySelector('.ms-MessageBanner');
            messageBanner = new fabric.MessageBanner(element);
            messageBanner.hideBanner();

            // If not using Excel 2016 or later, use fallback logic.
            if (!Office.context.requirements.isSetSupported('ExcelApi', 1.1)) {
                $("#template-description").text("This sample will display the value of the cells that you have selected in the spreadsheet.");
                $('#button-text').text("Display!");
                $('#button-desc').text("Display the selection");

                $('#highlight-button').click(displaySelectedCells);
                return;
            }

            $("#template-description").text("This sample highlights the highest value from the cells you have selected in the spreadsheet.");
            $('#button-text').text("Highlight!");
            $('#button-desc').text("Highlights the largest number.");

            loadSampleData();

            // Add a click event handler for the highlight button.
            $('#highlight-button').click(hightlightHighestValue);
        });
    };

    function loadSampleData() {
        var values = [
            [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000)],
            [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000)],
            [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000)]
        ];

        // Run a batch operation against the Excel object model
        Excel.run(function (ctx) {
            // Create a proxy object for the active sheet
            var sheet = ctx.workbook.worksheets.getActiveWorksheet();
            // Queue a command to write the sample data to the worksheet
            sheet.getRange("B3:D5").values = values;

            // Run the queued-up commands, and return a promise to indicate task completion
            return ctx.sync();
        })
        .catch(errorHandler);
    }

    function hightlightHighestValue() {
        // Run a batch operation against the Excel object model
        Excel.run(function (ctx) {
            // Create a proxy object for the selected range and load its properties
            var sourceRange = ctx.workbook.getSelectedRange().load("values, rowCount, columnCount");

            // Run the queued-up command, and return a promise to indicate task completion
            return ctx.sync()
                .then(function () {
                    var highestRow = 0;
                    var highestCol = 0;
                    var highestValue = sourceRange.values[0][0];

                    // Find the cell to highlight
                    for (var i = 0; i < sourceRange.rowCount; i++) {
                        for (var j = 0; j < sourceRange.columnCount; j++) {
                            if (!isNaN(sourceRange.values[i][j]) && sourceRange.values[i][j] > highestValue) {
                                highestRow = i;
                                highestCol = j;
                                highestValue = sourceRange.values[i][j];
                            }
                        }
                    }

                    cellToHighlight = sourceRange.getCell(highestRow, highestCol);
                    sourceRange.worksheet.getUsedRange().format.fill.clear();
                    sourceRange.worksheet.getUsedRange().format.font.bold = false;

                    // Highlight the cell
                    cellToHighlight.format.fill.color = "orange";
                    cellToHighlight.format.font.bold = true;
                })
                .then(ctx.sync);
        })
        .catch(errorHandler);
    }

    function displaySelectedCells() {
        Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,
            function (result) {
                if (result.status === Office.AsyncResultStatus.Succeeded) {
                    showNotification('The selected text is:', '"' + result.value + '"');
                } else {
                    showNotification('Error', result.error.message);
                }
            });
    }

    // Helper function for treating errors
    function errorHandler(error) {
        // Always be sure to catch any accumulated errors that bubble up from the Excel.run execution
        showNotification("Error", error);
        console.log("Error: " + error);
        if (error instanceof OfficeExtension.Error) {
            console.log("Debug info: " + JSON.stringify(error.debugInfo));
        }
    }

    // Helper function for displaying notifications
    function showNotification(header, content) {
        $("#notification-header").text(header);
        $("#notification-body").text(content);
        messageBanner.showBanner();
        messageBanner.toggleExpansion();
    }
})();

関連項目See also