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

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

アドインを作成するCreate the add-in

Visual Studio または他の任意のエディターを使用して、Office アドインを作成することができます。You can create an Office Add-in by using Visual Studio or any other editor. 次のタブのいずれかを選択して、使用するエディターを決めます。Tell us what editor you'd like to use by choosing one of the following tabs:

前提条件Prerequisites

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

  1. [Visual Studio] メニュー バーで、[ファイル] > [新規作成] > [プロジェクト] の順に選択します。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.

Visual Studio ソリューションについて理解するExplore the Visual Studio solution

ウィザードの完了後、Visual Studio によって 2 つのプロジェクトを含むソリューションが作成されます。When you've completed the wizard, Visual Studio creates a solution that contains two projects.

プロジェクトProject 説明Description
アドイン プロジェクトAdd-in project アドインを記述するすべての設定を含む XML マニフェスト ファイルのみが含まれます。これらの設定は、Office ホストがアドインをアクティブ化するタイミングと、アドインの表示場所を決定するのに役立ちます。すぐにプロジェクトを実行し、アドインを使用できるように、Visual Studio によってこのファイルのコンテンツが生成されます。これらの設定は、XML ファイルを変更することによっていつでも変更できます。Contains only an XML manifest file, which contains all the settings that describe your add-in. These settings help the Office host determine when your add-in should be activated and where the add-in should appear. Visual Studio generates the contents of this file for you so that you can run the project and use your add-in immediately. You change these settings any time by modifying the XML file.
Web アプリケーション プロジェクトWeb application project Office 対応の HTML および JavaScript ページを開発するために必要なすべてのファイルとファイル参照を含むアドインのコンテンツ ページが含まれます。アドインを開発している間、Visual Studio は Web アプリケーションをローカル IIS サーバー上でホストします。アドインを発行する準備が整ったら、この Web アプリケーション プロジェクトを Web サーバーに展開する必要があります。Contains the content pages of your add-in, including all the files and file references that you need to develop Office-aware HTML and JavaScript pages. While you develop your add-in, Visual Studio hosts the web application on your local IIS server. When you're ready to publish the add-in, you'll need to deploy this web application project to a web server.

コードを更新するUpdate the code

  1. Home.html は、アドインの作業ウィンドウにレンダリングされる HTML を指定します。Home.html<body> 要素を以下のマークアップと置き換え、ファイルを保存します。Home.html specifies the HTML that will be rendered in the add-in's task pane. In Home.html, replace the <body> element with the following markup and save the file.

    <body class="ms-font-m ms-welcome">
        <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 class="ms-Button" id="set-color">Set color</button>
            </div>
        </div>
    </body>
    
  2. Web アプリケーション プロジェクトのルートで Home.js ファイルを開きます。このファイルは、アドインのスクリプトを指定します。内容全体を以下のコードで置き換え、ファイルを保存します。Open the file Home.js in the root of the web application project. This file specifies the script for the add-in. Replace the entire contents with the following code and save the file.

    'use strict';
    
    (function () {
        Office.initialize = function (reason) {
            $(document).ready(function () {
                $('#set-color').click(setColor);
            });
        };
    
        function setColor() {
            Excel.run(function (context) {
                var range = context.workbook.getSelectedRange();
                range.format.fill.color = 'green';
    
                return context.sync();
            }).catch(function (error) {
                console.log("Error: " + error);
                if (error instanceof OfficeExtension.Error) {
                    console.log("Debug info: " + JSON.stringify(error.debugInfo));
                }
            });
        }
    })();
    
  3. Web アプリケーション プロジェクトのルートで Home.css ファイルを開きます。このファイルは、アドインのカスタム スタイルを指定します。内容全体を以下のコードで置き換え、ファイルを保存します。Open the file Home.css in the root of the web application project. This file specifies the custom styles for the add-in. Replace the entire contents with the following 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;
    }
    

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

  1. アドイン プロジェクトで XML マニフェスト ファイルを開きます。このファイルはアドインの設定と機能を定義します。Open the XML manifest file in the add-in project. This file defines the add-in's settings and capabilities.

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

  3. DisplayName 要素の DefaultValue 属性にはプレースホルダーがあります。これを My Office アドイン で置き換えます。The DefaultValue attribute of the DisplayName element has a placeholder. Replace it with My Office Add-in.

  4. Description 要素の DefaultValue 属性にはプレースホルダーがあります。これを Excel の作業ウィンドウ アドイン で置き換えます。The DefaultValue attribute of the Description element has a placeholder. Replace it with A task pane add-in for Excel.

  5. ファイルを保存します。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"/>
    ...
    

試してみるTry it out

  1. Visual Studio を使用して、新しく作成した Excel アドインをテストします。F5 キーを押すか [開始] ボタンをクリックして、リボンに [作業ウィンドウの表示] アドイン ボタンが表示された Excel を起動します。アドインは IIS 上でローカルにホストされます。Using Visual Studio, test the newly created Excel add-in by pressing F5 or choosing 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.

    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

これで完了です。jQuery を使用して Excel アドインが正常に作成されました。次に、Excel アドインの機能の詳細について説明します。Excel アドインのチュートリアルに従って、より複雑なアドインを作成します。Congratulations, you've successfully created an Excel add-in using jQuery! 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