最初の Word アドインをビルドするBuild your first Word add-in

適用対象: Word 2016、Word for iPad、Word for MacApplies to: Word 2016, Word for iPad, Word for Mac

この記事では、jQuery と Word JavaScript API を使用して Word アドインを構築する手順について説明します。In this article, you'll walk through the process of building a Word add-in by using jQuery and the Word 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] を展開して、[アドイン] を選択し、プロジェクトの種類として [Word Web アドイン] を選択します。In the list of project types under Visual C# or Visual Basic, expand Office/SharePoint, choose Add-ins, and then choose Word Web Add-in as the project type.

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

  4. 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 specifies the HTML that will be rendered in the add-in's task pane. Home.html で、<body> 要素を次のマークアップに置き換えて、ファイルを保存します。In Home.html, replace the <body> element with the following markup and save the file.

    <body>
        <div id="content-header">
            <div class="padding">
                <h1>Welcome</h1>
            </div>
        </div>    
        <div id="content-main">
            <div class="padding">
                <p>Choose the buttons below to add boilerplate text to the document by using the Word JavaScript API.</p>
                <br />
                <h3>Try it out</h3>
                <button id="emerson">Add quote from Ralph Waldo Emerson</button>
                <br /><br />
                <button id="checkhov">Add quote from Anton Chekhov</button>
                <br /><br />
                <button id="proverb">Add Chinese proverb</button>
            </div>
        </div>
        <br />
        <div id="supportedVersion"/>
    </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 () {
    
        // The initialize function is run each time the page is loaded.
        Office.initialize = function (reason) {
            $(document).ready(function () {
    
                // Use this to check whether the API is supported in the Word client.
                if (Office.context.requirements.isSetSupported('WordApi', 1.1)) {
                    // Do something that is only available via the new APIs
                    $('#emerson').click(insertEmersonQuoteAtSelection);
                    $('#checkhov').click(insertChekhovQuoteAtTheBeginning);
                    $('#proverb').click(insertChineseProverbAtTheEnd);
                    $('#supportedVersion').html('This code is using Word 2016 or later.');
                }
                else {
                    // Just letting you know that this code will not work with your version of Word.
                    $('#supportedVersion').html('This code requires Word 2016 or later.');
                }
            });
        };
    
        function insertEmersonQuoteAtSelection() {
            Word.run(function (context) {
    
                // Create a proxy object for the document.
                var thisDocument = context.document;
    
                // Queue a command to get the current selection.
                // Create a proxy range object for the selection.
                var range = thisDocument.getSelection();
    
                // Queue a command to replace the selected text.
                range.insertText('"Hitch your wagon to a star."\n', Word.InsertLocation.replace);
    
                // Synchronize the document state by executing the queued commands,
                // and return a promise to indicate task completion.
                return context.sync().then(function () {
                    console.log('Added a quote from Ralph Waldo Emerson.');
                });
            })
            .catch(function (error) {
                console.log('Error: ' + JSON.stringify(error));
                if (error instanceof OfficeExtension.Error) {
                    console.log('Debug info: ' + JSON.stringify(error.debugInfo));
                }
            });
        }
    
        function insertChekhovQuoteAtTheBeginning() {
            Word.run(function (context) {
    
                // Create a proxy object for the document body.
                var body = context.document.body;
    
                // Queue a command to insert text at the start of the document body.
                body.insertText('"Knowledge is of no value unless you put it into practice."\n', Word.InsertLocation.start);
    
                // Synchronize the document state by executing the queued commands,
                // and return a promise to indicate task completion.
                return context.sync().then(function () {
                    console.log('Added a quote from Anton Chekhov.');
                });
            })
            .catch(function (error) {
                console.log('Error: ' + JSON.stringify(error));
                if (error instanceof OfficeExtension.Error) {
                    console.log('Debug info: ' + JSON.stringify(error.debugInfo));
                }
            });
        }
    
        function insertChineseProverbAtTheEnd() {
            Word.run(function (context) {
    
                // Create a proxy object for the document body.
                var body = context.document.body;
    
                // Queue a command to insert text at the end of the document body.
                body.insertText('"To know the road ahead, ask those coming back."\n', Word.InsertLocation.end);
    
                // Synchronize the document state by executing the queued commands,
                // and return a promise to indicate task completion.
                return context.sync().then(function () {
                    console.log('Added a quote from a Chinese proverb.');
                });
            })
            .catch(function (error) {
                console.log('Error: ' + JSON.stringify(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. 要素にはプレースホルダー値が含まれています。ProviderNameThe ProviderName element has a placeholder value. それを自分の名前に置き換えます。Replace it with your name.

  3. 要素の DefaultValue 属性にはプレースホルダー値が含まれています。DisplayNameThe DefaultValue attribute of the DisplayName element has a placeholder. これは、My Office Add-in に置き換えてください。Replace it with My Office Add-in.

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

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

お試しくださいTry it out

  1. Visual Studio を使用して、新しく作成した Word アドインをテストします。そのために、F5 キーを押すか [開始] ボタンをクリックして、リボンに [作業ウィンドウの表示] アドイン ボタンが表示された Word を起動します。アドインは IIS 上でローカルにホストされます。Using Visual Studio, test the newly created Word add-in by pressing F5 or choosing the Start button to launch Word with the Show Taskpane add-in button displayed in the ribbon. The add-in will be hosted locally on IIS.

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

    [作業ウィンドウの表示] ボタンが強調表示されている Word アプリケーションのスクリーンショット

  3. 作業ウィンドウで、いずれかのボタンを選択して文書に定型句を追加します。In the task pane, choose any of the buttons to add boilerplate text to the document.

    定型句アドインが読み込まれている Word アプリケーションのスクリーンショット。

次の手順Next steps

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