Angular を使用して Excel のアドインを作成するBuild an Excel add-in using Angular

この記事では、Angular と Excel の JavaScript API を使用して Excel アドインを構築する手順について説明します。In this article, you'll walk you through the process of building an Excel add-in using Angular and the Excel JavaScript API.

前提条件Prerequisites

Web アプリを作成するCreate the web app

  1. Yeoman ジェネレーターを使用して、Excel アドイン プロジェクトを作成します。Use the Yeoman generator to create an Excel add-in project. 次のコマンドを実行し、以下のプロンプトに応答します。Run the following command and then answer the prompts as follows:

    yo office
    
    • Choose a project type: (プロジェクトの種類を選択) Office Add-in project using Angular frameworkChoose a project type: Office Add-in project using Angular framework
    • Choose a script type: (スクリプトの種類を選択) TypescriptChoose a script type: Typescript
    • What would you want to name your add-in?: (アドインの名前を何にしますか) My Office Add-inWhat do you want to name your add-in?: My Office Add-in
    • Which Office client application would you like to support?: (どの Office クライアント アプリケーションをサポートしますか) ExcelWhich Office client application would you like to support?: Excel

      Yeoman ジェネレーター

      ウィザードを完了すると、ジェネレーターによってプロジェクトが作成されて、サポートしているノード コンポーネントがインストールされます。After you complete the wizard, the generator will create the project and install supporting Node components.

  2. プロジェクトのルート フォルダーに移動します。Navigate to the root folder of the project.

    cd "My Office Add-in"
    

コードを更新するUpdate the code

  1. コード エディターでファイル app.css を開き、次のスタイルをファイルの末尾に追加してファイルを保存します。In your code editor, open the file app.css, add the following styles to the end of the file, and save the file.

    #content-header {
        background: #2a8dd4;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px; 
        overflow: hidden;
        font-family: Arial;
        padding-top: 25px;
    }
    
    #content-main {
        background: #fff;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto; 
        font-family: Arial;
    }
    
    .padding {
        padding: 15px;
    }
    
    .padding-sm {
        padding: 4px;
    }
    
    .normal-button {
        width: 80px;
        padding: 2px;
    }
    
  2. ファイル src/app/app.component.html を開き、すべての内容を次のコードに置き換え、ファイルを保存します。Open the file src/app/app.component.html, replace the entire contents with the following code, and save the file.

    <div id="content-header">
        <div class="padding">
            <h1>{{welcomeMessage}}</h1>
        </div>
    </div>
    <div id="content-main">
        <div class="padding">
            <p>Choose the button below to set the color of the selected range to green.</p>
            <br />
            <h3>Try it out</h3>
            <br />
            <div role="button" class="ms-Button" (click)="setColor()">
                <span class="ms-Button-label">Set color</span>
                <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
            </div>
        </div>
    </div>
    
  3. ファイル src/app/app.component.ts を開き、すべての内容を次のコードに置き換え、ファイルを保存します。Open the file src/app/app.component.ts, replace the entire contents with the following code, and save the file.

    import { Component } from '@angular/core';
    import * as OfficeHelpers from '@microsoft/office-js-helpers';
    
    const template = require('./app.component.html');
    
    @Component({
        selector: 'app-home',
        template
    })
    export default class AppComponent {
        welcomeMessage = 'Welcome';
    
        async setColor() {
            try {
                await Excel.run(async context => {
                    const range = context.workbook.getSelectedRange();
                    range.load('address');
                    range.format.fill.color = 'green';
                    await context.sync();
                    console.log(`The range address was ${range.address}.`);
                });
            } catch (error) {
                OfficeHelpers.UI.notify(error);
                OfficeHelpers.Utilities.log(error);
            }
        }
    
    }
    

マニフェストを更新するUpdate the manifest

  1. manifest.xml ファイルを開いて、アドインの設定と機能を定義します。Open the file manifest.xml to define the add-in's settings and capabilities.

  2. ProviderName 要素にはプレースホルダー値が含まれています。The ProviderName element has a placeholder value. それを自分の名前に置き換えます。Replace it with your name.

  3. Description 要素の DefaultValue 属性にはプレースホルダー値が含まれています。The DefaultValue attribute of the Description element has a placeholder. これは、A task pane add-in for Excel に置き換えてください。Replace it with A task pane add-in for Excel.

  4. ファイルを保存します。Save the file.

    ...
    <ProviderName>John Doe</ProviderName>
    <DefaultLocale>en-US</DefaultLocale>
    <!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
    <DisplayName DefaultValue="My Office Add-in" />
    <Description DefaultValue="A task pane add-in for Excel"/>
    ...
    

開発用サーバーの起動Start the dev server

  1. プロジェクトのルート ([...]/My Office Add-in) で bash ターミナルを開いて、次に示すコマンドを実行して開発用サーバーを起動します。Open a bash terminal in the root of the project and run the following command to start the dev server.

    npm start
    
  2. Internet Explorer または Microsoft Edge のいずれかを開き、https://localhost:3000 にアクセスします。Open either Internet Explorer or Microsoft Edge and navigate to https://localhost:3000. 証明書エラーなしでページが読み込まれた場合は、この記事の次のセクションに進みます (お試しください)。If the page loads without any certificate errors, proceed to the next section in this article (Try it out). サイトの証明書が信頼できないとブラウザーに表示された場合は、次の手順に進みます。If your browser indicates that the site's certificate is not trusted, you will need to add the certificate as a trusted certificate.

  3. Office Web アドインは、開発中であっても HTTP ではなく HTTPS を使用する必要があります。Office Web Add-ins should use HTTPS, not HTTP, even when you are developing. ブラウザーにサイトの証明書が信頼されていないことが示された場合は、その証明書を信頼された証明書として追加する必要があります。If your browser indicates that the site's certificate is not trusted, you will need to add the certificate as a trusted certificate. 詳細については、「自己署名証明書を信頼されたルート証明書として追加する」を参照してください。See Adding Self-Signed Certificates as Trusted Root Certificate for details.

    注意

    自己署名証明書を信頼されたルート証明書として追加する」で説明されているプロセスを完了した後でも、Chrome (Web ブラウザー) は、サイトの証明書が信頼されていないことを引き続き示すことがあります。Chrome (web browser) may continue to indicate the the site's certificate is not trusted, even after you have completed the process described in Adding Self-Signed Certificates as Trusted Root Certificate. そのため、Internet Explorer または Microsoft Edge のいずれかを使用して、証明書が信頼できることを確認する必要があります。Therefore, you should use either Internet Explorer or Microsoft Edge to verify that the certificate is trusted.

  4. ブラウザーに証明書エラーなしでアドイン ページが読み込まれたら、アドインをテストする準備ができています。After your browser loads the add-in page without any certificate errors, you're ready test your add-in.

お試しください。Try it out

  1. アドインを実行して、Excel 内のアドインをサイドロードするのに使用するプラットフォームの手順に従います。Follow the instructions for the platform you'll be using to run your add-in and sideload the add-in within Excel.

  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.

    Excel アドイン ボタン

  3. ワークシート内で任意のセルの範囲を選択します。Select any range of cells in the worksheet.

  4. 作業ウィンドウで、[色の設定] ボタンをクリックして、選択範囲の色を緑に設定します。In the task pane, choose the Set color button to set the color of the selected range to green.

    Excel アドイン

次の手順Next steps

これで完了です。Angular を使用して Excel アドインが正常に作成されました。次に、Excel アドインの機能の詳細について説明します。Excel アドインのチュートリアルに従って、より複雑なアドインをビルドします。Congratulations, you've successfully created an Excel add-in using Angular! Next, learn more about the capabilities of an Excel add-in and build a more complex add-in by following along with the Excel add-in tutorial.

関連項目See also