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

新しい Angular アプリを生成するGenerate a new Angular app

Angular CLI を使用して Angular アプリを生成します。端末では、次のコマンドを実行します。Use the Angular CLI to generate your Angular app. From the terminal, run the following command:

ng new my-addin

マニフェスト ファイルを生成するGenerate the manifest file

アドインのマニフェスト ファイルは、その設定と機能を定義します。An add-in's manifest file defines its settings and capabilities.

  1. アプリ フォルダーに移動します。Navigate to your app folder.

    cd my-addin
    
  2. Yeoman ジェネレーター使用して、アドインのマニフェスト ファイルを生成します。次のコマンドを実行し、以下に示すとおりにプロンプトに応答します。Use the Yeoman generator to generate the manifest file for your add-in. Run the following command and then answer the prompts as shown below.

    yo office 
    
    • Choose a project type:​ (プロジェクト タイプを選択してください:) Office Add-in containing the manifest onlyChoose a project type: Office Add-in containing the manifest only
    • 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
    • どの Office クライアント アプリケーションをサポートしますか? ExcelWhich Office client application would you like to support?: Excel

      ウィザードを完了すると、マニフェスト ファイルとリソース ファイルを使用してプロジェクトをビルドできます。After you complete the wizard, a manifest file and resource file are available for you to build your project.

      Yeoman ジェネレーター

      注意

      package.json を上書きするメッセージが表示された場合は、No (上書きしない) と応答します。If you're prompted to overwrite package.json, answer No (do not overwrite).

アプリをセキュリティ保護するSecure the app

すべてのアドインのシナリオで厳密に求められるわけではないものの、アドインに対して HTTPS エンドポイントを使用することを強くお勧めします。While not strictly required in all add-in scenarios, using an HTTPS endpoint for your add-in is strongly recommended. SSL で保護されている (HTTPS) のではないアドインは、使用中に、保護されていないコンテンツの警告やエラーを生成します。Add-ins that are not SSL-secured (HTTPS) generate unsecure content warnings and errors during use. Office Online でアドインを実行するか、AppSource にアドインを発行する場合は、アドインを SSL でセキュリティ保護する必要があります。If you plan to run your add-in in Office Online or publish your add-in to AppSource, it must be SSL-secured. アドインが外部データやサービスにアクセスする場合、アドインを SSL で保護して送信中のデータを保護する必要があります。If your add-in accesses external data and services, it should be SSL-secured to protect data in transit. 自己署名証明書がローカル マシンで信頼されている限り、この証明書は開発とテストに使用できます。Self-signed certificates can be used for development and testing, so long as the certificate is trusted on the local machine.

このクイック スタートでは、証明書を使用できますが、 Yeoman Office アドイン用のジェネレーター が用意されています。ジェネレーターをグローバルに (このクイック スタートの 前提条件 の一部) としてインストールして、グローバルから証明書をコピーする必要がありますだけで、インストールの場所、アプリケーション フォルダーにするとします。次の手順では、このプロセスを完了する方法について説明します。For this quick start, you can use the certificates that the Yeoman generator for Office Add-ins provides. You've already installed the generator globally (as part of the Prerequisites for this quick start), so you'll just need to copy the certificates from the global install location into your app folder. The following steps describe how to complete this process.

  1. 端末から次のコマンドを実行し、グローバル npm ライブラリがインストールされているフォルダーを識別します。From the terminal, run the following command to identify the folder where global npm libraries are installed:

    npm list -g 
    

    ヒント

    このコマンドで生成された出力の最初の行は、グローバル npm ライブラリがインストールされているフォルダーを示します。The first line of output that's generated by this command specifies the folder where global npm libraries are installed.

  2. ファイル エクスプローラーを使用して{global libraries folder}/node_modules/generator-office/generators/app/templates/js/baseフォルダーに移動します。その場所からcertsフォルダーをクリップボードにコピーします。Using File Explorer, navigate to the {global libraries folder}/node_modules/generator-office/generators/app/templates/js/base folder. From that location, copy the certs folder to your clipboard.

  3. 前のセクションの手順 1 で作成した Angular アプリのルート フォルダーに移動して、クリップボードからそのフォルダーに certs フォルダーを貼り付けます。Navigate to the root folder of the Angular app that you created in step 1 of the previous section, and paste the certs folder from your clipboard into that folder.

アプリを更新するUpdate the app

  1. コード エディターでプロジェクトのルートに package.json を開きます。変更、 start サーバーが SSL およびポート 3000 を使用して実行し、ファイルを保存するを指定するためのスクリプトです。In your code editor, open package.json in the root of the project. Modify the start script to specify that the server should run using SSL and port 3000, and save the file.

    "start": "ng serve --ssl true --port 3000"
    
  2. プロジェクトのルートに .angular cli.json を開きます。証明書ファイルの場所を指定する 既定の設定 オブジェクトを変更し、ファイルを保存します。Open .angular-cli.json in the root of the project. Modify the defaults object to specify the location of the certificate files, and save the file.

    "defaults": {
      "styleExt": "css",
      "component": {},
      "serve": {
        "sslKey": "certs/server.key",
        "sslCert": "certs/server.crt"
      }
    }
    
  3. src/index.html を開き、</head> タグの直前に次の <script> タグを追加して、ファイルを保存します。Open src/index.html, add the following <script> tag immediately before the </head> tag, and save the file.

    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
    
  4. src/main.ts を開き、platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err)); を次のコードで置き換えて、ファイルを保存します。Open src/main.ts, replace platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err)); with the following code, and save the file.

    declare const Office: any;
    
    Office.initialize = () => {
    platformBrowserDynamic().bootstrapModule(AppModule)
        .catch(err => console.log(err));
    };
    
  5. src/polyfills.ts を開き、存在する他のすべての import ステートメントの上に次のコード行を追加して、ファイルを保存します。Open src/polyfills.ts, add the following line of code above all other existing import statements, and save the file.

    import 'core-js/client/shim';
    
  6. src/polyfills.ts で、次の行のコメントを解除してファイルを保存します。In src/polyfills.ts, uncomment the following lines, and save the file.

    import 'core-js/es6/symbol';
    import 'core-js/es6/object';
    import 'core-js/es6/function';
    import 'core-js/es6/parse-int';
    import 'core-js/es6/parse-float';
    import 'core-js/es6/number';
    import 'core-js/es6/math';
    import 'core-js/es6/string';
    import 'core-js/es6/date';
    import 'core-js/es6/array';
    import 'core-js/es6/regexp';
    import 'core-js/es6/map';
    import 'core-js/es6/weak-map';
    import 'core-js/es6/set';
    
  7. src/app/app.component.html を開き、ファイルのコンテンツを次の HTML で置き換えて、ファイルを保存します。Open src/app/app.component.html, replace file contents with the following HTML, and save the file.

    <div id="content-header">
        <div class="padding">
            <h1>Welcome</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>
            <button (click)="onSetColor()">Set color</button>
        </div>
    </div>
    
  8. src/app/app.component.css を開き、ファイルのコンテンツを次の CSS コードで置き換えて、ファイルを保存します。Open src/app/app.component.css, replace file contents with the following CSS code, and save the file.

    #content-header {
        background: #2a8dd4;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px; 
        overflow: hidden;
    }
    
    #content-main {
        background: #fff;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto; 
    }
    
    .padding {
        padding: 15px;
    }
    
  9. src/app/app.component.ts を開き、ファイルのコンテンツを次のコードで置き換えて、ファイルを保存します。Open src/app/app.component.ts, replace file contents with the following code, and save the file.

    import { Component } from '@angular/core';
    
    declare const Excel: any;
    
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    onSetColor() {
        Excel.run(async (context) => {
        const range = context.workbook.getSelectedRange();
        range.format.fill.color = 'green';
        await context.sync();
        });
    }
    }
    

開発用サーバーを起動するStart the dev server

  1. ターミナルから、次のコマンドを実行してデベロッパー サーバーを起動します。From the terminal, run the following command to start the dev server.

    npm run start
    
  2. Web ブラウザーで https://localhost:3000 に移動します。ブラウザーにサイトの証明書が信頼されていないことが示された場合は、その証明書を信頼された証明書として追加する必要があります。詳細については、「自己署名証明書を信頼されたルート証明書として追加する」を参照してください。In a web browser, navigate to https://localhost:3000. 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 でこの警告を無視して、Internet Explorer または Microsoft Edge のいずれかでhttps://localhost:3000 に移動して証明書が信頼できるかを確認することができます。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. You can disregard this warning in Chrome and can verify that the certificate is trusted by navigating to https://localhost:3000 in either Internet Explorer or Microsoft Edge.

  3. 証明書エラーなしにブラウザにアドイン ページが読み込まれたら、アドインをテストする準備ができています。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