jQuery を使用して Excel のアドインを作成する

この記事では、jQuery と Excel の JavaScript API を使用して Excel アドインを構築する手順について説明します。

アドインを作成する

Visual Studio または他の任意のエディターを使用して、Office アドインを作成することができます。 次のタブのいずれかを選択して、使用するエディターを決めます。

前提条件

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

    注意

    既に Visual Studio 2017 がインストールされている場合は、Visual Studio インストーラーを使用して、Office/SharePoint 開発ワークロードがインストールされていることを確認してください。

  • Office 2016

    注意

    まだ Office 2016 を所持していない場合は、1 か月間無料試用版の登録が可能です。

アドイン プロジェクトの作成

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

  2. [Visual C#] または [Visual Basic] の下にあるプロジェクトの種類の一覧で、[Office/SharePoint] を展開して、[アドイン] を選択し、プロジェクトの種類として [Excel Web アドイン] を選択します。

  3. プロジェクトに名前を付けて、[OK] を選択します。

  4. [Office アドインの作成] ダイアログ ウィンドウで、[新機能を Excel に追加する] を選択してから、[完了] を選択してプロジェクトを作成します。

  5. Visual Studio によってソリューションとその 2 つのプロジェクトが作成され、ソリューション エクスプローラーに表示されます。Home.html ファイルが Visual Studio で開かれます。

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

ウィザードの完了後、Visual Studio によって 2 つのプロジェクトを含むソリューションが作成されます。

プロジェクト 説明
アドイン プロジェクト アドインを記述するすべての設定を含む XML マニフェスト ファイルのみが含まれます。これらの設定は、Office ホストがアドインをアクティブ化するタイミングと、アドインの表示場所を決定するのに役立ちます。すぐにプロジェクトを実行し、アドインを使用できるように、Visual Studio によってこのファイルのコンテンツが生成されます。これらの設定は、XML ファイルを変更することによっていつでも変更できます。
Web アプリケーション プロジェクト Office 対応の HTML および JavaScript ページを開発するために必要なすべてのファイルとファイル参照を含むアドインのコンテンツ ページが含まれます。アドインを開発している間、Visual Studio は Web アプリケーションをローカル IIS サーバー上でホストします。アドインを発行する準備が整ったら、この Web アプリケーション プロジェクトを Web サーバーに展開する必要があります。

コードを更新する

  1. Home.html では、アドインの作業ウィンドウにレンダリングされる HTML を指定します。 Home.html で、<body> 要素を次のマークアップに置き換えて、ファイルを保存します。

    <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 を開きます。 このファイルは、アドイン用のスクリプトを指定します。 すべての内容を次のコードに置き換え、ファイルを保存します。

    '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 を開きます。 このファイルは、アドイン用のユーザー設定のスタイルを指定します。 すべての内容を次のコードに置き換え、ファイルを保存します。

    #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;
    }
    

マニフェストを更新する

  1. アドイン プロジェクト内の XML マニフェスト ファイルを開きます。 このファイルは、アドインの設定と機能を定義します。

  2. 要素にはプレースホルダー値が含まれています。ProviderName それを自分の名前に置き換えます。

  3. 要素の DefaultValue 属性にはプレースホルダー値が含まれています。DisplayName これは、My Office Add-in に置き換えてください。

  4. 要素の DefaultValue 属性にはプレースホルダー値が含まれています。Description これは、A task pane add-in for Excel に置き換えてください。

  5. ファイルを保存します。

    ...
    <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"/>
    ...
    

お試しください

  1. Visual Studio を使用して、新しく作成した Excel アドインをテストします。そのために、F5 キーを押すか [開始] ボタンをクリックして、リボンに [作業ウィンドウの表示] アドイン ボタンが表示された Excel を起動します。アドインは IIS 上でローカルにホストされます。

  2. Excel で、[ホーム] タブを選択し、リボンの [作業ウィンドウの表示] ボタンをクリックして、アドインの作業ウィンドウを開きます。

    Excel アドイン ボタン

  3. ワークシート内で任意のセルの範囲を選択します。

  4. 作業ウィンドウで、[色の設定] ボタンをクリックして、選択範囲の色を緑に設定します。

    Excel アドイン

次の手順

これで完了です。jQuery を使用して Excel アドインが正常に作成されました。次に、Excel アドインの機能の詳細について説明します。Excel アドインのチュートリアルに従って、より複雑なアドインをビルドします。

関連項目