チュートリアル: Word 作業ウィンドウ アドインを作成するTutorial: Create a Word task pane add-in

このチュートリアルでは、以下の Word 作業ウィンドウ アドインを作成します。In this tutorial, you'll create a Word task pane add-in that:

  • テキスト範囲の挿入Inserts a range of text
  • テキストの書式設定Formats text
  • テキストの置換とさまざまな位置へのテキストの挿入Replaces text and inserts text in various locations
  • 画像、HTML、テーブルの挿入Inserts images, HTML, and tables
  • コンテンツ コントロールの作成と更新Creates and updates content controls

ヒント

最初の Word 作業ウィンドウアドインのクイックスタートを既に完了していて、そのプロジェクトをこのチュートリアルの開始点として使用する場合は、「テキストの範囲を挿入する」セクションに直接移動して、このチュートリアルを開始してください。If you've already completed the Build your first Word task pane add-in quick start, and want to use that project as a starting point for this tutorial, go directly to the Insert a range of text section to start this tutorial.

前提条件Prerequisites

  • Node.js (バージョン 8.0.0 以降)Node.js (version 8.0.0 or later)

  • GitGit

  • 最新バージョンの YeomanOffice アドイン用の Yeoman ジェネレーター。これらのツールをグローバルにインストールするには、コマンド プロンプトから次のコマンドを実行します。The latest version of Yeoman and the Yeoman generator for Office Add-ins. To install these tools globally, run the following command via the command prompt:

    npm install -g yo generator-office
    

    注意

    以前に一度使用したバージョンのジェネレーターをインストールしていた場合でも、パッケージを npm から最新バージョンに更新することをお勧めします。Even if you've previously installed the Yeoman generator, we recommend you update your package to the latest version from npm.

アドイン プロジェクトの作成Create your add-in project

次のコマンドを実行して、[ごみ箱] ジェネレーターを使用してアドインプロジェクトを作成します。Run the following command to create an add-in project using the Yeoman generator:

yo office

注意

yo officeコマンドを実行すると、Office アドインのデータ収集ポリシーに関するダイアログボックスが表示されることがあります。When you run the yo office command, you may receive prompts about the data collection policies of Yeoman and the Office Add-in CLI tools. 提供されている情報を使用して、表示に適したプロンプトに応答します。Use the information that's provided to respond to the prompts as you see fit.

メッセージが表示されたら、アドインプロジェクトを作成するための次の情報を入力します。When prompted, provide the following information to create your add-in project:

  • Choose a project type: (プロジェクトの種類を選択) Office Add-in Task Pane projectChoose a project type: Office Add-in Task Pane project
  • Choose a script type: (スクリプトの種類を選択) JavascriptChoose a script type: Javascript
  • What would you want to name your add-in?: (アドインの名前を何にしますか)What do you want to name your add-in? My Office Add-in
  • Which Office client application would you like to support?: (どの Office クライアント アプリケーションをサポートしますか)Which Office client application would you like to support? Word

Yeoman ジェネレーターのプロンプトと応答のスクリーンショット

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

ヒント

アドインプロジェクトを作成した後で、次の手順に従って、その後に実行することができます。You can ignore the next steps guidance that the Yeoman generator provides after the add-in project's been created. この記事で説明する手順では、このチュートリアルを完了するために必要なすべてのガイダンスについて説明します。The step-by-step instructions within this article provide all of the guidance you'll need to complete this tutorial.

テキスト範囲の挿入Insert a range of text

チュートリアルのこの手順では、ユーザーが現在使用している Word のバージョンをアドインがサポートしているかどうかをプログラムによってテストし、ドキュメントに段落を挿入します。In this step of the tutorial, you'll programmatically test that your add-in supports the user's current version of Word, and then insert a paragraph into the document.

アドインのコードを作成するCode the add-in

  1. コード エディターでプロジェクトを開きます。Open the project in your code editor.

  2. ファイル ./src/taskpane/taskpane.htmlを開きます。Open the file ./src/taskpane/taskpane.html. このファイルには、作業ウィンドウの HTML マークアップが含まれています。This file contains the HTML markup for the task pane.

  3. <main>要素を検索し、開始<main>タグと終了</main>タグの後に表示されるすべての行を削除します。Locate the <main> element and delete all lines that appear after the opening <main> tag and before the closing </main> tag.

  4. 開始<main>タグの直後に、次のマークアップを追加します。Add the following markup immediately after the opening <main> tag:

    <button class="ms-Button" id="insert-paragraph">Insert Paragraph</button><br/><br/>
    
  5. /Src/taskpane/taskpane.js を開きます Open the file ./src/taskpane/taskpane.js. このファイルには、作業ウィンドウと Office ホストアプリケーション間の対話を容易にする Office JavaScript API コードが含まれています。This file contains the Office JavaScript API code that facilitates interaction between the task pane and the Office host application.

  6. 次の手順を実行runして、 run()ボタンと関数へのすべての参照を削除します。Remove all references to the run button and the run() function by doing the following:

    • document.getElementById("run").onclick = run;を見つけて、削除します。Locate and delete the line document.getElementById("run").onclick = run;.

    • 関数全体run()を見つけて、削除します。Locate and delete the entire run() function.

  7. Office.onReadyメソッド呼び出し内で、行if (info.host === Office.HostType.Word) {を見つけて、その行の直後に次のコードを追加します。Within the Office.onReady method call, locate the line if (info.host === Office.HostType.Word) { and add the following code immediately after that line. 注意:Note:

    • このコードの最初の部分では、ユーザーの Word のバージョンが、このチュートリアルのすべてのステージで使用されるすべての Api を含むバージョンの Word .js をサポートしているかどうかを判断します。The first part of this code determines whether the user's version of Word supports a version of Word.js that includes all the APIs that are used in all stages of this tutorial. 運用アドインでは、未サポートの API を呼び出す UI を非表示または無効化する条件ブロックの本体を使用してください。In a production add-in, use the body of the conditional block to hide or disable the UI that would call unsupported APIs. これにより、ユーザーは、自分が使用している Word のバージョンでサポートされているアドインの部分を使用できるようになります。This will enable the user to still use the parts of the add-in that are supported by their version of Word.
    • このコードの2番目の部分では、 insert-paragraphボタンのイベントハンドラーを追加します。The second part of this code adds an event handler for the insert-paragraph button.
    // Determine if the user's version of Office supports all the Office.js APIs that are used in the tutorial.
    if (!Office.context.requirements.isSetSupported('WordApi', '1.3')) {
        console.log('Sorry. The tutorial add-in uses Word.js APIs that are not available in your version of Office.');
    }
    
    // Assign event handlers and other initialization logic.
    document.getElementById("insert-paragraph").onclick = insertParagraph;
    
  8. ファイルの末尾に次の関数を追加します。Add the following function to the end of the file. 注意:Note:

    • Word.js のビジネス ロジックは、Word.run に渡される関数に追加されます。 このロジックは、すぐには実行されません。 その代わりに、保留中のコマンドのキューに追加されます。Your Word.js business logic will be added to the function that is passed to Word.run. This logic does not execute immediately. Instead, it is added to a queue of pending commands.

    • context.sync メソッドは、キューに登録されたすべてのコマンドを、実行するために Word に送信します。The context.sync method sends all queued commands to Word for execution.

    • Word.run の後に catch ブロックを続けます。 これは、どのような場合にも当てはまるベスト プラクティスです。The Word.run is followed by a catch block. This is a best practice that you should always follow.

    function insertParagraph() {
        Word.run(function (context) {
    
            // TODO1: Queue commands to insert a paragraph into the document.
    
            return context.sync();
        })
        .catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }
    
  9. insertParagraph()関数内で、をTODO1次のコードに置き換えます。Within the insertParagraph() function, replace TODO1 with the following code. 注意:Note:

    • insertParagraph メソッドの最初のパラメーターは、新しい段落のテキストです。The first parameter to the insertParagraph method is the text for the new paragraph.

    • 2 番目のパラメーターは、段落を挿入する本文内の場所です。 親オブジェクトが本文の場合、段落の挿入に使用できるその他のオプションには、End と Replace があります。The second parameter is the location within the body where the paragraph will be inserted. Other options for insert paragraph, when the parent object is the body, are "End" and "Replace".

    var docBody = context.document.body;
    docBody.insertParagraph("Office has several versions, including Office 2016, Office 365 Click-to-Run, and Office on the web.",
                            "Start");
    
  10. プロジェクトに加えたすべての変更を保存したことを確認します。Verify that you've saved all of the changes you've made to the project.

アドインをテストするTest the add-in

  1. 以下の手順を実行し、ローカル Web サーバーを起動してアドインのサイドロードを行います。Complete the following steps to start the local web server and sideload your add-in.

    注意

    開発の最中でも、OfficeアドインはHTTPではなくHTTPSを使用する必要があります。Office Add-ins should use HTTPS, not HTTP, even when you are developing. 次のいずれかのコマンドを実行した後に証明書をインストールするように求められた場合は、Yeoman ジェネレーターによって提供される証明書をインストールするプロンプトを受け入れます。If you are prompted to install a certificate after you run one of the following commands, accept the prompt to install the certificate that the Yeoman generator provides.

    ヒント

    Mac でアドインをテストしている場合は、先に進む前に、プロジェクトのルートディレクトリで次のコマンドを実行します。If you're testing your add-in on Mac, run the following command in the root directory of your project before proceeding. このコマンドを実行すると、ローカル Web サーバーが起動します。When you run this command, the local web server starts.

    npm run dev-server
    
    • Word でアドインをテストするには、プロジェクトのルート ディレクトリから次のコマンドを実行します。To test your add-in in Word, run the following command in the root directory of your project. ローカル Web サーバーが (まだ実行されていない場合) 起動し、アドインが読み込まれた Word が開きます。This starts the local web server (if it's not already running) and opens Word with your add-in loaded.

      npm start
      
    • Web 上の Word でアドインをテストするには、プロジェクトのルートディレクトリで次のコマンドを実行します。To test your add-in in Word on the web, run the following command in the root directory of your project. このコマンドを実行すると、ローカル Web サーバーが起動します (まだ実行されていない場合)。When you run this command, the local web server will start (if it's not already running).

      npm run start:web
      

      アドインを使用するには、Word on the web で新しいドキュメントを開き、「Office on the web で Office アドインをサイドロードする」の手順に従ってアドインをサイドロードします。To use your add-in, open a new document in Word on the web and then sideload your add-in by following the instructions in Sideload Office Add-ins in Office on the web.

  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 the Insert Paragraph button.

  4. 段落に変更を加えます。Make a change in the paragraph.

  5. [段落の挿入] ボタンをもう一度選択します。Choose the Insert Paragraph button again. insertParagraphメソッドが文書の本文の先頭に挿入されているため、新しい段落は前の段落の上に表示されることに注意してください。Note that the new paragraph appears above the previous one because the insertParagraph method is inserting at the start of the document's body.

    Word のチュートリアル - 段落の挿入

テキストの書式設定Format text

チュートリアルのこの手順では、組み込みのスタイルをテキストに適用したり、カスタム スタイルをテキストに適用したり、テキストのフォントを変更したりします。In this step of the tutorial, you'll apply a built-in style to text, apply a custom style to text, and change the font of text.

組み込みのスタイルをテキストに適用するApply a built-in style to text

  1. ファイル ./src/taskpane/taskpane.htmlを開きます。Open the file ./src/taskpane/taskpane.html.

  2. insert-paragraphボタンの<button>要素を見つけ、その行の後に次のマークアップを追加します。Locate the <button> element for the insert-paragraph button, and add the following markup after that line:

    <button class="ms-Button" id="apply-style">Apply Style</button><br/><br/>
    
  3. /Src/taskpane/taskpane.js を開きます Open the file ./src/taskpane/taskpane.js.

  4. Office.onReadyメソッド呼び出し内で、 insert-paragraphボタンにクリックハンドラーを割り当てる行を見つけ、その行の後に次のコードを追加します。Within the Office.onReady method call, locate the line that assigns a click handler to the insert-paragraph button, and add the following code after that line:

    document.getElementById("apply-style").onclick = applyStyle;
    
  5. ファイルの末尾に次の関数を追加します。Add the following function to the end of the file:

    function applyStyle() {
        Word.run(function (context) {
    
            // TODO1: Queue commands to style text.
    
            return context.sync();
        })
        .catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }
    
  6. applyStyle()関数内で、をTODO1次のコードに置き換えます。Within the applyStyle() function, replace TODO1 with the following code. このコードではスタイルを段落に適用していますが、スタイルはテキストの範囲にも適用できます。Note that the code applies a style to a paragraph, but styles can also be applied to ranges of text.

    var firstParagraph = context.document.body.paragraphs.getFirst();
    firstParagraph.styleBuiltIn = Word.Style.intenseReference;
    

カスタム スタイルをテキストに適用するApply a custom style to text

  1. ファイル ./src/taskpane/taskpane.htmlを開きます。Open the file ./src/taskpane/taskpane.html.

  2. apply-styleボタンの<button>要素を見つけ、その行の後に次のマークアップを追加します。Locate the <button> element for the apply-style button, and add the following markup after that line:

    <button class="ms-Button" id="apply-custom-style">Apply Custom Style</button><br/><br/>
    
  3. /Src/taskpane/taskpane.js を開きます Open the file ./src/taskpane/taskpane.js.

  4. Office.onReadyメソッド呼び出し内で、 apply-styleボタンにクリックハンドラーを割り当てる行を見つけ、その行の後に次のコードを追加します。Within the Office.onReady method call, locate the line that assigns a click handler to the apply-style button, and add the following code after that line:

    document.getElementById("apply-custom-style").onclick = applyCustomStyle;
    
  5. ファイルの末尾に次の関数を追加します。Add the following function to the end of the file:

    function applyCustomStyle() {
        Word.run(function (context) {
    
            // TODO1: Queue commands to apply the custom style.
    
            return context.sync();
        })
        .catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }
    
  6. applyCustomStyle()関数内で、をTODO1次のコードに置き換えます。Within the applyCustomStyle() function, replace TODO1 with the following code. このコードでは、まだ存在していないカスタム スタイルを適用しています。Note that the code applies a custom style that does not exist yet. アドインをテストする」の手順で MyCustomStyle という名前のスタイルを作成します。You'll create a style with the name MyCustomStyle in the Test the add-in step.

    var lastParagraph = context.document.body.paragraphs.getLast();
    lastParagraph.style = "MyCustomStyle";
    
  7. プロジェクトに加えたすべての変更を保存したことを確認します。Verify that you've saved all of the changes you've made to the project.

テキストのフォントを変更するChange the font of text

  1. ファイル ./src/taskpane/taskpane.htmlを開きます。Open the file ./src/taskpane/taskpane.html.

  2. apply-custom-styleボタンの<button>要素を見つけ、その行の後に次のマークアップを追加します。Locate the <button> element for the apply-custom-style button, and add the following markup after that line:

    <button class="ms-Button" id="change-font">Change Font</button><br/><br/>
    
  3. /Src/taskpane/taskpane.js を開きます Open the file ./src/taskpane/taskpane.js.

  4. Office.onReadyメソッド呼び出し内で、 apply-custom-styleボタンにクリックハンドラーを割り当てる行を見つけ、その行の後に次のコードを追加します。Within the Office.onReady method call, locate the line that assigns a click handler to the apply-custom-style button, and add the following code after that line:

    document.getElementById("change-font").onclick = changeFont;
    
  5. ファイルの末尾に次の関数を追加します。Add the following function to the end of the file:

    function changeFont() {
        Word.run(function (context) {
    
            // TODO1: Queue commands to apply a different font.
    
            return context.sync();
        })
        .catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }
    
  6. changeFont()関数内で、をTODO1次のコードに置き換えます。Within the changeFont() function, replace TODO1 with the following code. このコードでは、Paragraph.getNext メソッドにチェーンされた ParagraphCollection.getFirst メソッドを使用して 2 番目の段落への参照を取得することに注意してください。Note that the code gets a reference to the second paragraph by using the ParagraphCollection.getFirst method chained to the Paragraph.getNext method.

    var secondParagraph = context.document.body.paragraphs.getFirst().getNext();
    secondParagraph.font.set({
            name: "Courier New",
            bold: true,
            size: 18
        });
    
  7. プロジェクトに加えたすべての変更を保存したことを確認します。Verify that you've saved all of the changes you've made to the project.

アドインをテストするTest the add-in

  1. ローカル web サーバーが既に実行されていて、アドインが Word に既に読み込まれている場合は、手順2に進みます。If the local web server is already running and your add-in is already loaded in Word, proceed to step 2. それ以外の場合は、ローカル web サーバーを起動して、アドインをサイドロードします。Otherwise, start the local web server and sideload your add-in:

    • Word でアドインをテストするには、プロジェクトのルートディレクトリで次のコマンドを実行します。To test your add-in in Word, run the following command in the root directory of your project. これにより、ローカル web サーバーが起動 (まだ実行されていない場合) し、アドインが読み込まれた状態で Word が開きます。This starts the local web server (if it's not already running) and opens Word with your add-in loaded.

      npm start
      
    • Web 上の Word でアドインをテストするには、プロジェクトのルートディレクトリで次のコマンドを実行します。To test your add-in in Word on the web, run the following command in the root directory of your project. このコマンドを実行すると、ローカル web サーバーが起動します (まだ実行していない場合)。When you run this command, the local web server will start (if it's not already running).

      npm run start:web
      

      アドインを使用するには、web 上の Word で新しいドキュメントを開き、 web 上の「Office アドインのサイドロード Office アドイン」の手順に従ってアドインをサイドロードします。To use your add-in, open a new document in Word on the web and then sideload your add-in by following the instructions in Sideload Office Add-ins in Office on the web.

  2. アドイン作業ウィンドウが Word でまだ開かれていない場合は、[ホーム] タブに移動し、リボンの [作業ウィンドウの表示] ボタンをクリックして開きます。If the add-in task pane isn't already open in Word, go to the Home tab and choose the Show Taskpane button in the ribbon to open it.

  3. ドキュメントに 3 つ以上の段落があることを確認してください。Be sure there are at least three paragraphs in the document. [段落の挿入] ボタンを3回選択できます。You can choose the Insert Paragraph button three times. ドキュメントの最後に空白の段落がないことを慎重にチェックしてください。空白の段落がある場合は、それを削除します。Check carefully that there's no blank paragraph at the end of the document. If there is, delete it.

  4. Word で、"MyCustomStyle" という名前のユーザー設定のスタイルを作成します。In Word, create a custom style named "MyCustomStyle". このスタイルには、必要に応じて任意の書式を設定できます。It can have any formatting that you want.

  5. [スタイルの適用] ボタンを選択します。 最初の段落は、組み込みのスタイルである Intense Reference でスタイル設定されます。Choose the Apply Style button. The first paragraph will be styled with the built-in style Intense Reference.

  6. [カスタム スタイルの適用] ボタンを選択します。 最後の段落は、選択したカスタム スタイルでスタイル設定されます。 (何も起こらないように思える場合、最後の段落が空白である可能性があります。 その場合は、最後の段落にテキストを追加します)。Choose the Apply Custom Style button. The last paragraph will be styled with your custom style. (If nothing seems to happen, the last paragraph might be blank. If so, add some text to it.)

  7. [フォントの変更] ボタンを選択します。 2 番目の段落のフォントを、18 ポイントで太字の Courier New に変更します。Choose the Change Font button. The font of the second paragraph changes to 18 pt., bold, Courier New.

    Word のチュートリアル - スタイルとフォントの適用

テキストの置換と挿入Replace text and insert text

このチュートリアルの手順では、選択したテキスト範囲の内側や外側にテキストを追加したり、選択した範囲のテキストを置き換えたりします。In this step of the tutorial, you'll add text inside and outside of selected ranges of text, and replace the text of a selected range.

範囲内にテキストを追加するAdd text inside a range

  1. ファイル ./src/taskpane/taskpane.htmlを開きます。Open the file ./src/taskpane/taskpane.html.

  2. change-fontボタンの<button>要素を見つけ、その行の後に次のマークアップを追加します。Locate the <button> element for the change-font button, and add the following markup after that line:

    <button class="ms-Button" id="insert-text-into-range">Insert Abbreviation</button><br/><br/>
    
  3. /Src/taskpane/taskpane.js を開きます Open the file ./src/taskpane/taskpane.js.

  4. Office.onReadyメソッド呼び出し内で、 change-fontボタンにクリックハンドラーを割り当てる行を見つけ、その行の後に次のコードを追加します。Within the Office.onReady method call, locate the line that assigns a click handler to the change-font button, and add the following code after that line:

    document.getElementById("insert-text-into-range").onclick = insertTextIntoRange;
    
  5. ファイルの末尾に次の関数を追加します。Add the following function to the end of the file:

    function insertTextIntoRange() {
        Word.run(function (context) {
    
            // TODO1: Queue commands to insert text into a selected range.
    
            // TODO2: Load the text of the range and sync so that the
            //        current range text can be read.
    
            // TODO3: Queue commands to repeat the text of the original
            //        range at the end of the document.
    
            return context.sync();
        })
        .catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }
    
  6. insertTextIntoRange()関数内で、をTODO1次のコードに置き換えます。Within the insertTextIntoRange() function, replace TODO1 with the following code. 次の点に注意してください。Note:

    • このメソッドの目的は、テキストが Click-to-Run という範囲の末尾に (C2R) という省略形を挿入することです。 これは前提を単純化し、文字列は存在しており、ユーザーがその文字列を選択したものとしています。The method is intended to insert the abbreviation ["(C2R)"] into the end of the Range whose text is "Click-to-Run". It makes a simplifying assumption that the string is present and the user has selected it.

    • Range.insertText メソッドの最初のパラメーターは、Range オブジェクトに挿入する文字列です。The first parameter of the Range.insertText method is the string to insert into the Range object.

    • 2 番目のパラメーターは、範囲内のどの位置にテキストを挿入するかを指定します。 End の他に、Start、Before、After、Replace が選択できます。The second parameter specifies where in the range the additional text should be inserted. Besides "End", the other possible options are "Start", "Before", "After", and "Replace".

    • End と After の違いは、End が既存の範囲の内部の末尾に新しいテキストを挿入するのに対し、After の場合は文字列の入った新しい範囲を作成し、既存の範囲の後にその新しい範囲が挿入されることです。 同様に、Start はテキストを既存の範囲の内部の先頭に挿入しますが、Before の場合は新しい範囲を挿入します。 Replace は、既存の範囲のテキストを最初のパラメーターで指定した文字列に置き換えます。The difference between "End" and "After" is that "End" inserts the new text inside the end of the existing range, but "After" creates a new range with the string and inserts the new range after the existing range. Similarly, "Start" inserts text inside the beginning of the existing range and "Before" inserts a new range. "Replace" replaces the text of the existing range with the string in the first parameter.

    • チュートリアルの前の段階で示したとおり、ボディ オブジェクトの insert* メソッドに Before オプションや After オプションはありません。 これは、文書の本文の外部にはコンテンツを挿入できないからです。You saw in an earlier stage of the tutorial that the insert* methods of the body object do not have the "Before" and "After" options. This is because you can't put content outside of the document's body.

    var doc = context.document;
    var originalRange = doc.getSelection();
    originalRange.insertText(" (C2R)", "End");
    
  7. TODO2 はスキップし、次のセクションに移ります。We'll skip over TODO2 until the next section. insertTextIntoRange()関数内で、をTODO3次のコードに置き換えます。Within the insertTextIntoRange() function, replace TODO3 with the following code. このコードは、このチュートリアルの最初の段階で作成したコードに似ていますが、文書の先頭ではなく末尾に新しい段落を挿入する点が異なります。This code is similar to the code you created in the first stage of the tutorial, except that now you are inserting a new paragraph at the end of the document instead of at the start. この新しい段落で、新しいテキストが元の範囲の一部になっていることが示されます。This new paragraph will demonstrate that the new text is now part of the original range.

    doc.body.insertParagraph("Original range: " + originalRange.text, "End");
    

ドキュメントのプロパティを作業ウィンドウのスクリプト オブジェクトにフェッチするコードを追加するAdd code to fetch document properties into the task pane's script objects

この一連のチュートリアルの以前のすべての関数では、Office ドキュメントに書き込むコマンドをキューに登録しました。In all previous functions in this series of tutorials, you queued commands to write to the Office document. 各関数は、キューに登録されたコマンドを実行対象のドキュメントに送信する context.sync() メソッドを呼び出すことで終了しています。Each function ended with a call to the context.sync() method which sends the queued commands to the document to be executed. ただし、最後の手順で追加したコードでは、originalRange.text プロパティを呼び出しています。このことが、これまでに作成した関数とは大きく異なります。originalRange オブジェクトは、この作業ウィンドウのスクリプトに存在する単なるプロキシ オブジェクトなので、But the code you added in the last step calls the originalRange.text property, and this is a significant difference from the earlier functions you wrote, because the originalRange object is only a proxy object that exists in your task pane's script. ドキュメントの指定された範囲にある実際のテキストを認識できません。そのため、その text プロパティでは実際の値が保持できません。It doesn't know what the actual text of the range in the document is, so its text property can't have a real value. まず、ドキュメントからその範囲のテキスト値をフェッチする必要があり、その値を使用して originalRange.text の値を設定します。It is necessary to first fetch the text value of the range from the document and use it to set the value of originalRange.text. そのようにした場合にのみ、例外がスローされることなく originalRange.text を呼び出せるようになります。Only then can originalRange.text be called without causing an exception to be thrown. このフェッチ処理には、3 つの手順があります。This fetching process has three steps:

  1. コードで読み取る必要があるプロパティをロードする (つまりフェッチする) コマンドをキューに登録します。Queue a command to load (that is; fetch) the properties that your code needs to read.

  2. コンテキスト オブジェクトの sync メソッドを呼び出します。このメソッドは、キューに登録されたコマンドを実行対象のドキュメントに送信して、要求された情報を返します。Call the context object's sync method to send the queued command to the document for execution and return the requested information.

  3. sync メソッドは非同期であるため、フェッチされたプロパティをコードで呼び出す前に、そのメソッドが完了していることを確認します。Because the sync method is asynchronous, ensure that it has completed before your code calls the properties that were fetched.

こうした手順は、コードで Office ドキュメントから情報を読み取る必要がある場合には必ず完了する必要があります。These steps must be completed whenever your code needs to read information from the Office document.

  1. insertTextIntoRange()関数内で、をTODO2次のコードに置き換えます。Within the insertTextIntoRange() function, replace TODO2 with the following code.

    originalRange.load("text");
    return context.sync()
        .then(function() {
            // TODO4: Move the doc.body.insertParagraph line here.
        })
        // TODO5: Move the final call of context.sync here and ensure
        //        that it does not run until the insertParagraph has
        //        been queued.
    
  2. 分岐していない同一のコード パスに 2 つの return ステートメントを含めることはできないため、Word.run の最後にある最終行の return context.sync(); を削除します。新しい最後の context.sync は、このチュートリアルの後の方で追加します。You can't have two return statements in the same unbranching code path, so delete the final line return context.sync(); at the end of the Word.run. You'll add a new final context.sync later in this tutorial.

  3. doc.body.insertParagraph 行を切り取り、TODO4 の代わりに貼り付けます。Cut the doc.body.insertParagraph line and paste in place of TODO4.

  4. TODO5 を次のコードに置き換えます。次の点に注意してください。Replace TODO5 with the following code. Note:

    • sync メソッドを then 関数に渡すことで、insertParagraph ロジックがキューに登録されるまで、そのメソッドが実行されないようにします。Passing the sync method to a then function ensures that it does not run until the insertParagraph logic has been queued.

    • thenメソッドは、渡された関数を呼び出しますが、2回sync呼び出さないようにするため、"()" をコンテキストの終わりから省略します。The then method invokes whatever function is passed to it, and you don't want sync to be invoked twice, so omit the "()" from the end of context.sync.

    .then(context.sync);
    

作業が完了すると、関数の全体は次のようになります。When you're done, the entire function should look like the following:

function insertTextIntoRange() {
    Word.run(function (context) {

        var doc = context.document;
        var originalRange = doc.getSelection();
        originalRange.insertText(" (C2R)", "End");

        originalRange.load("text");
        return context.sync()
            .then(function() {
                doc.body.insertParagraph("Current text of original range: " + originalRange.text, "End");
            })
            .then(context.sync);
    })
    .catch(function (error) {
        console.log("Error: " + error);
        if (error instanceof OfficeExtension.Error) {
            console.log("Debug info: " + JSON.stringify(error.debugInfo));
        }
    });
}

範囲間にテキストを追加するAdd text between ranges

  1. ファイル ./src/taskpane/taskpane.htmlを開きます。Open the file ./src/taskpane/taskpane.html.

  2. insert-text-into-rangeボタンの<button>要素を見つけ、その行の後に次のマークアップを追加します。Locate the <button> element for the insert-text-into-range button, and add the following markup after that line:

    <button class="ms-Button" id="insert-text-outside-range">Add Version Info</button><br/><br/>
    
  3. /Src/taskpane/taskpane.js を開きます Open the file ./src/taskpane/taskpane.js.

  4. Office.onReadyメソッド呼び出し内で、 insert-text-into-rangeボタンにクリックハンドラーを割り当てる行を見つけ、その行の後に次のコードを追加します。Within the Office.onReady method call, locate the line that assigns a click handler to the insert-text-into-range button, and add the following code after that line:

    document.getElementById("insert-text-outside-range").onclick = insertTextBeforeRange;
    
  5. ファイルの末尾に次の関数を追加します。Add the following function to the end of the file:

    function insertTextBeforeRange() {
        Word.run(function (context) {
    
            // TODO1: Queue commands to insert a new range before the
            //        selected range.
    
            // TODO2: Load the text of the original range and sync so that the
            //        range text can be read and inserted.
    
        })
        .catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }
    
  6. insertTextBeforeRange()関数内で、をTODO1次のコードに置き換えます。Within the insertTextBeforeRange() function, replace TODO1 with the following code. 次の点に注意してください。Note:

    • このメソッドの目的は、Office 365 というテキストから成る範囲の前に Office 2019 というテキストの範囲を追加することです。 これは前提を単純化し、文字列は存在しており、ユーザーがその文字列を選択したものとしています。The method is intended to add a range whose text is "Office 2019, " before the range with text "Office 365". It makes a simplifying assumption that the string is present and the user has selected it.

    • Range.insertText メソッドの最初のパラメーターは、追加する文字列です。The first parameter of the Range.insertText method is the string to add.

    • 2 番目のパラメーターは、範囲内のどの位置にテキストを挿入するかを指定します。 位置オプションの詳細については、insertTextIntoRange 関数に関する上記の説明を参照してください。The second parameter specifies where in the range the additional text should be inserted. For more details about the location options, see the previous discussion of the insertTextIntoRange function.

    var doc = context.document;
    var originalRange = doc.getSelection();
    originalRange.insertText("Office 2019, ", "Before");
    
  7. insertTextBeforeRange()関数内で、をTODO2次のコードに置き換えます。Within the insertTextBeforeRange() function, replace TODO2 with the following code.

    originalRange.load("text");
    return context.sync()
       .then(function() {
           // TODO3: Queue commands to insert the original range as a
           //        paragraph at the end of the document.
       })
       // TODO4: Make a final call of context.sync here and ensure
       //        that it does not run until the insertParagraph has
       //        been queued.
    
  8. TODO3 を次のコードに置き換えます。 この新しい段落で、新しいテキストが元の選択範囲の一部になっていないことが示されます。 元の範囲には、依然として選択時のテキストのみが含まれています。Replace TODO3 with the following code. This new paragraph will demonstrate the fact that the new text is not part of the original selected range. The original range still has only the text it had when it was selected.

    doc.body.insertParagraph("Current text of original range: " + originalRange.text, "End");
    
  9. TODO4 を次のコードに置き換えます。Replace TODO4 with the following code:

    .then(context.sync);
    

範囲のテキストを置き換えるReplace the text of a range

  1. ファイル ./src/taskpane/taskpane.htmlを開きます。Open the file ./src/taskpane/taskpane.html.

  2. insert-text-outside-rangeボタンの<button>要素を見つけ、その行の後に次のマークアップを追加します。Locate the <button> element for the insert-text-outside-range button, and add the following markup after that line:

    <button class="ms-Button" id="replace-text">Change Quantity Term</button><br/><br/>
    
  3. /Src/taskpane/taskpane.js を開きます Open the file ./src/taskpane/taskpane.js.

  4. Office.onReadyメソッド呼び出し内で、 insert-text-outside-rangeボタンにクリックハンドラーを割り当てる行を見つけ、その行の後に次のコードを追加します。Within the Office.onReady method call, locate the line that assigns a click handler to the insert-text-outside-range button, and add the following code after that line:

    document.getElementById("replace-text").onclick = replaceText;
    
  5. ファイルの末尾に次の関数を追加します。Add the following function to the end of the file:

    function replaceText() {
        Word.run(function (context) {
    
            // TODO1: Queue commands to replace the text.
    
            return context.sync();
        })
        .catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }
    
  6. replaceText()関数内で、をTODO1次のコードに置き換えます。Within the replaceText() function, replace TODO1 with the following code. このメソッドの目的は、several という文字列を many という文字列で置き換えることです。Note that the method is intended to replace the string "several" with the string "many". これは前提を単純化し、文字列は存在しており、ユーザーがその文字列を選択したものとしています。It makes a simplifying assumption that the string is present and the user has selected it.

    var doc = context.document;
    var originalRange = doc.getSelection();
    originalRange.insertText("many", "Replace");
    
  7. プロジェクトに加えたすべての変更を保存したことを確認します。Verify that you've saved all of the changes you've made to the project.

アドインをテストするTest the add-in

  1. ローカル web サーバーが既に実行されていて、アドインが Word に既に読み込まれている場合は、手順2に進みます。If the local web server is already running and your add-in is already loaded in Word, proceed to step 2. それ以外の場合は、ローカル web サーバーを起動して、アドインをサイドロードします。Otherwise, start the local web server and sideload your add-in:

    • Word でアドインをテストするには、プロジェクトのルートディレクトリで次のコマンドを実行します。To test your add-in in Word, run the following command in the root directory of your project. これにより、ローカル web サーバーが起動 (まだ実行されていない場合) し、アドインが読み込まれた状態で Word が開きます。This starts the local web server (if it's not already running) and opens Word with your add-in loaded.

      npm start
      
    • Web 上の Word でアドインをテストするには、プロジェクトのルートディレクトリで次のコマンドを実行します。To test your add-in in Word on the web, run the following command in the root directory of your project. このコマンドを実行すると、ローカル web サーバーが起動します (まだ実行していない場合)。When you run this command, the local web server will start (if it's not already running).

      npm run start:web
      

      アドインを使用するには、web 上の Word で新しいドキュメントを開き、 web 上の「Office アドインのサイドロード Office アドイン」の手順に従ってアドインをサイドロードします。To use your add-in, open a new document in Word on the web and then sideload your add-in by following the instructions in Sideload Office Add-ins in Office on the web.

  2. アドイン作業ウィンドウが Word でまだ開かれていない場合は、[ホーム] タブに移動し、リボンの [作業ウィンドウの表示] ボタンをクリックして開きます。If the add-in task pane isn't already open in Word, go to the Home tab and choose the Show Taskpane button in the ribbon to open it.

  3. 作業ウィンドウで、[段落の挿入] ボタンをクリックして、文書の先頭に段落があることを確認します。In the task pane, choose the Insert Paragraph button to ensure that there is a paragraph at the start of the document.

  4. ドキュメント内で、[クイック実行] という語句を選択します。Within the document, select the phrase "Click-to-Run". 選択範囲には、前のスペースまたはコンマの後ろを含めないように注意してください。Be careful not to include the preceding space or following comma in the selection.

  5. [ラベル (短縮形) の挿入] ボタンを選択します。 (C2R) が追加されることに注意してください。 また、この新しい文字列は既存の範囲に追加されるため、文書の下部に新しい段落が追加され、拡張されたテキスト全体が含まれていることに注意してください。Choose the Insert Abbreviation button. Note that " (C2R)" is added. Note also that at the bottom of the document a new paragraph is added with the entire expanded text because the new string was added to the existing range.

  6. ドキュメント内で、"Office 365" という語句を選択します。Within the document, select the phrase "Office 365". 選択範囲の前後にあるスペースは含めないように注意してください。Be careful not to include the preceding or following space in the selection.

  7. [バージョン情報の追加] ボタンを選択します。 Office 2019 が、Office 2016 と Office 365 の間に挿入されることに注意してください。 また、この新しい文字列は元の範囲に追加されるのではなく新しい範囲になるため、文書の下部に新しい段落が追加されるものの、その段落には最初に選択したテキストのみが含まれることに注意してください。Choose the Add Version Info button. Note that "Office 2019, " is inserted between "Office 2016" and "Office 365". Note also that at the bottom of the document a new paragraph is added but it contains only the originally selected text because the new string became a new range rather than being added to the original range.

  8. ドキュメント内で、単語 "複数" を選択します。Within the document, select the word "several". 選択範囲の前後にあるスペースは含めないように注意してください。Be careful not to include the preceding or following space in the selection.

  9. [数量の用語の変更] ボタンを選択します。 選択したテキストが many に置き換えられることに注意してください。Choose the Change Quantity Term button. Note that "many" replaces the selected text.

    Word のチュートリアル - テキストの追加と置換

画像、HTML、テーブルの挿入Insert images, HTML, and tables

チュートリアルのこの手順では、ドキュメントに画像、HTML、テーブルを挿入する方法について説明します。In this step of the tutorial, you'll learn how to insert images, HTML, and tables into the document.

イメージを定義するDefine an image

このチュートリアルの次の部分でドキュメントに挿入する画像を定義するには、次の手順を実行します。Complete the following steps to define the image that you'll insert into the document in the next part of this tutorial.

  1. プロジェクトのルートで、 base64Imageという名前の新しいファイルを作成します。In the root of the project, create a new file named base64Image.js.

  2. Base64Imageファイルを開き、次のコードを追加して、画像を表す base64 でエンコードされた文字列を指定します。Open the file base64Image.js and add the following code to specify the base64-encoded string that represents an image.

    export const base64Image =
        "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";
    

画像の挿入Insert an image

  1. ファイル ./src/taskpane/taskpane.htmlを開きます。Open the file ./src/taskpane/taskpane.html.

  2. replace-textボタンの<button>要素を見つけ、その行の後に次のマークアップを追加します。Locate the <button> element for the replace-text button, and add the following markup after that line:

    <button class="ms-Button" id="insert-image">Insert Image</button><br/><br/>
    
  3. /Src/taskpane/taskpane.js を開きます Open the file ./src/taskpane/taskpane.js.

  4. ファイルのOffice.onReady上部付近にあるメソッド呼び出しを見つけ、その行の直前に次のコードを追加します。Locate the Office.onReady method call near the top of the file and add the following code immediately before that line. このコードでは、/Base64Image.js で以前に定義した変数をインポートします This code imports the variable that you defined previously in the file ./base64Image.js.

    import { base64Image } from "../../base64Image";
    
  5. Office.onReadyメソッド呼び出し内で、 replace-textボタンにクリックハンドラーを割り当てる行を見つけ、その行の後に次のコードを追加します。Within the Office.onReady method call, locate the line that assigns a click handler to the replace-text button, and add the following code after that line:

    document.getElementById("insert-image").onclick = insertImage;
    
  6. ファイルの末尾に次の関数を追加します。Add the following function to the end of the file:

    function insertImage() {
        Word.run(function (context) {
    
            // TODO1: Queue commands to insert an image.
    
            return context.sync();
        })
        .catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }
    
  7. insertImage()関数内で、をTODO1次のコードに置き換えます。Within the insertImage() function, replace TODO1 with the following code. この行により、Base 64 でエンコードされた画像がドキュメントの末尾に挿入されることに注意してください。Note that this line inserts the base 64 encoded image at the end of the document. (Paragraph オブジェクトにも insertInlinePictureFromBase64 メソッドやその他の insert* メソッドがあります。(The Paragraph object also has an insertInlinePictureFromBase64 method and other insert* methods. 例については、次の insertHTML セクションを参照してください)。See the following insertHTML section for an example.)

    context.document.body.insertInlinePictureFromBase64(base64Image, "End");
    

HTML の挿入Insert HTML

  1. ファイル ./src/taskpane/taskpane.htmlを開きます。Open the file ./src/taskpane/taskpane.html.

  2. insert-imageボタンの<button>要素を見つけ、その行の後に次のマークアップを追加します。Locate the <button> element for the insert-image button, and add the following markup after that line:

    <button class="ms-Button" id="insert-html">Insert HTML</button><br/><br/>
    
  3. /Src/taskpane/taskpane.js を開きます Open the file ./src/taskpane/taskpane.js.

  4. Office.onReadyメソッド呼び出し内で、 insert-imageボタンにクリックハンドラーを割り当てる行を見つけ、その行の後に次のコードを追加します。Within the Office.onReady method call, locate the line that assigns a click handler to the insert-image button, and add the following code after that line:

    document.getElementById("insert-html").onclick = insertHTML;
    
  5. ファイルの末尾に次の関数を追加します。Add the following function to the end of the file:

    function insertHTML() {
        Word.run(function (context) {
    
            // TODO1: Queue commands to insert a string of HTML.
    
            return context.sync();
        })
        .catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }
    
  6. insertHTML()関数内で、をTODO1次のコードに置き換えます。Within the insertHTML() function, replace TODO1 with the following code. 注意:Note:

    • 最初の行は、ドキュメントの末尾に空白の段落を追加します。The first line adds a blank paragraph to the end of the document.

    • 2 行目は、その段落の末尾に HTML の文字列を挿入します。具体的には、Verdana フォントで書式設定された段落と、Word 文書の既定のスタイルが設定された段落の 2 つの段落が挿入されます。 (insertImage メソッドで説明したように、context.document.body オブジェクトにも insert* メソッドがあります)。The second line inserts a string of HTML at the end of the paragraph; specifically two paragraphs, one formatted with Verdana font, the other with the default styling of the Word document. (As you saw in the insertImage method earlier, the context.document.body object also has the insert* methods.)

    var blankParagraph = context.document.body.paragraphs.getLast().insertParagraph("", "After");
    blankParagraph.insertHtml('<p style="font-family: verdana;">Inserted HTML.</p><p>Another paragraph</p>', "End");
    

テーブルの挿入Insert a table

  1. ファイル ./src/taskpane/taskpane.htmlを開きます。Open the file ./src/taskpane/taskpane.html.

  2. insert-htmlボタンの<button>要素を見つけ、その行の後に次のマークアップを追加します。Locate the <button> element for the insert-html button, and add the following markup after that line:

    <button class="ms-Button" id="insert-table">Insert Table</button><br/><br/>
    
  3. /Src/taskpane/taskpane.js を開きます Open the file ./src/taskpane/taskpane.js.

  4. Office.onReadyメソッド呼び出し内で、 insert-htmlボタンにクリックハンドラーを割り当てる行を見つけ、その行の後に次のコードを追加します。Within the Office.onReady method call, locate the line that assigns a click handler to the insert-html button, and add the following code after that line:

    document.getElementById("insert-table").onclick = insertTable;
    
  5. ファイルの末尾に次の関数を追加します。Add the following function to the end of the file:

    function insertTable() {
        Word.run(function (context) {
    
            // TODO1: Queue commands to get a reference to the paragraph
            //        that will proceed the table.
    
            // TODO2: Queue commands to create a table and populate it with data.
    
            return context.sync();
        })
        .catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }
    
  6. insertTable()関数内で、をTODO1次のコードに置き換えます。Within the insertTable() function, replace TODO1 with the following code. この行は ParagraphCollection.getFirst メソッドを使用して最初の段落への参照を取得し、次に Paragraph.getNext メソッドを使用して 2 番目の段落への参照を取得することに注意してください。Note that this line uses the ParagraphCollection.getFirst method to get a reference ot the first paragraph and then uses the Paragraph.getNext method to get a reference to the second paragraph.

    var secondParagraph = context.document.body.paragraphs.getFirst().getNext();
    
  7. insertTable()関数内で、をTODO2次のコードに置き換えます。Within the insertTable() function, replace TODO2 with the following code. 注意:Note:

    • insertTable メソッドの最初の 2 つのパラメーターは、行と列の数を指定します。The first two parameters of the insertTable method specify the number of rows and columns.

    • 3 番目のパラメーターは、テーブルを挿入する場所を指定します (この例では段落の後)。The third parameter specifies where to insert the table, in this case after the paragraph.

    • 4 番目のパラメーターは、テーブルのセルの値を設定する 2 次元配列です。The fourth parameter is a two-dimensional array that sets the values of the table cells.

    • このテーブルには既定のスタイルがそのまま設定されますが、insertTable メソッドがさまざまなメンバーを持つ Table オブジェクトを返し、その一部がテーブルのスタイル設定に使用されます。The table will have plain default styling, but the insertTable method returns a Table object with many members, some of which are used to style the table.

    var tableData = [
            ["Name", "ID", "Birth City"],
            ["Bob", "434", "Chicago"],
            ["Sue", "719", "Havana"],
        ];
    secondParagraph.insertTable(3, 3, "After", tableData);
    
  8. プロジェクトに加えたすべての変更を保存したことを確認します。Verify that you've saved all of the changes you've made to the project.

アドインをテストするTest the add-in

  1. ローカル web サーバーが既に実行されていて、アドインが Word に既に読み込まれている場合は、手順2に進みます。If the local web server is already running and your add-in is already loaded in Word, proceed to step 2. それ以外の場合は、ローカル web サーバーを起動して、アドインをサイドロードします。Otherwise, start the local web server and sideload your add-in:

    • Word でアドインをテストするには、プロジェクトのルートディレクトリで次のコマンドを実行します。To test your add-in in Word, run the following command in the root directory of your project. これにより、ローカル web サーバーが起動 (まだ実行されていない場合) し、アドインが読み込まれた状態で Word が開きます。This starts the local web server (if it's not already running) and opens Word with your add-in loaded.

      npm start
      
    • Web 上の Word でアドインをテストするには、プロジェクトのルートディレクトリで次のコマンドを実行します。To test your add-in in Word on the web, run the following command in the root directory of your project. このコマンドを実行すると、ローカル web サーバーが起動します (まだ実行していない場合)。When you run this command, the local web server will start (if it's not already running).

      npm run start:web
      

      アドインを使用するには、web 上の Word で新しいドキュメントを開き、 web 上の「Office アドインのサイドロード Office アドイン」の手順に従ってアドインをサイドロードします。To use your add-in, open a new document in Word on the web and then sideload your add-in by following the instructions in Sideload Office Add-ins in Office on the web.

  2. アドイン作業ウィンドウが Word でまだ開かれていない場合は、[ホーム] タブに移動し、リボンの [作業ウィンドウの表示] ボタンをクリックして開きます。If the add-in task pane isn't already open in Word, go to the Home tab and choose the Show Taskpane button in the ribbon to open it.

  3. 作業ウィンドウで、[段落の挿入] ボタンを少なくとも3回クリックして、文書に段落がいくつかあることを確認します。In the task pane, choose the Insert Paragraph button at least three times to ensure that there are a few paragraphs in the document.

  4. [画像の挿入] ボタンをクリックし、ドキュメントの末尾に画像が挿入されることに注意してください。Choose the Insert Image button and note that an image is inserted at the end of the document.

  5. [HTML の挿入] ボタンをクリックし、ドキュメントの末尾に 2 つの段落が挿入され、最初の段落に Verdana フォントが設定されていることに注意してください。Choose the Insert HTML button and note that two paragraphs are inserted at the end of the document, and that the first one has Verdana font.

  6. [テーブルの挿入] ボタンをクリックし、2 番目の段落の後にテーブルが挿入されることに注意してください。Choose the Insert Table button and note that a table is inserted after the second paragraph.

    Word のチュートリアル - 画像、HTML、テーブルの挿入

コンテンツ コントロールの作成と更新Create and update content controls

このチュートリアルの手順では、ドキュメント内にリッチ テキスト コンテンツ コントロールを作成する方法、およびそのコントロールにコンテンツを挿入したり置き換えたりする方法について説明します。In this step of the tutorial, you'll learn how to create Rich Text content controls in the document, and then how to insert and replace content in the controls.

注意

UI を介して Word 文書に追加できるコンテンツコントロールにはいくつかの種類がありますが、現時点では、リッチテキストコンテンツコントロールのみが Word .js でサポートされています。There are several types of content controls that can be added to a Word document through the UI, but currently only Rich Text content controls are supported by Word.js.

チュートリアルのこの手順を開始する前に、Word UI からリッチ テキスト コンテンツ コントロールを作成して操作し、コントロールとそのプロパティを理解しておくことをお勧めします。 詳細については、「ユーザーが Word 上で記入または印刷するフォームを作成する」を参照してください。Before you start this step of the tutorial, we recommend that you create and manipulate Rich Text content controls through the Word UI, so you can be familiar with the controls and their properties. For details, see Create forms that users complete or print in Word.

コンテンツ コントロールを作成するCreate a content control

  1. ファイル ./src/taskpane/taskpane.htmlを開きます。Open the file ./src/taskpane/taskpane.html.

  2. insert-tableボタンの<button>要素を見つけ、その行の後に次のマークアップを追加します。Locate the <button> element for the insert-table button, and add the following markup after that line:

    <button class="ms-Button" id="create-content-control">Create Content Control</button><br/><br/>
    
  3. /Src/taskpane/taskpane.js を開きます Open the file ./src/taskpane/taskpane.js.

  4. Office.onReadyメソッド呼び出し内で、 insert-tableボタンにクリックハンドラーを割り当てる行を見つけ、その行の後に次のコードを追加します。Within the Office.onReady method call, locate the line that assigns a click handler to the insert-table button, and add the following code after that line:

    document.getElementById("create-content-control").onclick = createContentControl;
    
  5. ファイルの末尾に次の関数を追加します。Add the following function to the end of the file:

    function createContentControl() {
        Word.run(function (context) {
    
            // TODO1: Queue commands to create a content control.
    
            return context.sync();
        })
        .catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }
    
  6. createContentControl()関数内で、をTODO1次のコードに置き換えます。Within the createContentControl() function, replace TODO1 with the following code. 次の点に注意してください。Note:

    • このコードの目的は、コンテンツ コントロール内の Office 365 という語句をラップすることです。 これは前提を単純化し、文字列は存在しており、ユーザーがその文字列を選択したものとしています。This code is intended to wrap the phrase "Office 365" in a content control. It makes a simplifying assumption that the string is present and the user has selected it.

    • ContentControl.title プロパティは、コンテンツ コントロールの表示タイトルを指定します。The ContentControl.title property specifies the visible title of the content control.

    • ContentControl.tag プロパティは、ContentControlCollection.getByTag メソッドを使用してコンテンツ コントロールへの参照を取得するために使用できるタグを指定します。これを後述する関数で使用します。The ContentControl.tag property specifies an tag that can be used to get a reference to a content control using the ContentControlCollection.getByTag method, which you'll use in a later function.

    • ContentControl.appearance プロパティは、コントロールの外観を指定します。 Tags という値を使用すると、コントロールは開始タグと終了タグにラップされます。開始タグには、コンテンツ コントロールのタイトルが設定されます。 その他の値として、BoundingBox と None が使用できます。The ContentControl.appearance property specifies the visual look of the control. Using the value "Tags" means that the control will be wrapped in opening and closing tags, and the opening tag will have the content control's title. Other possible values are "BoundingBox" and "None".

    • ContentControl.color プロパティは、タグまたは境界ボックスの境界線の色を指定します。The ContentControl.color property specifies the color of the tags or the border of the bounding box.

    var serviceNameRange = context.document.getSelection();
    var serviceNameContentControl = serviceNameRange.insertContentControl();
    serviceNameContentControl.title = "Service Name";
    serviceNameContentControl.tag = "serviceName";
    serviceNameContentControl.appearance = "Tags";
    serviceNameContentControl.color = "blue";
    

コンテンツ コントロールのコンテンツを置き換えるReplace the content of the content control

  1. ファイル ./src/taskpane/taskpane.htmlを開きます。Open the file ./src/taskpane/taskpane.html.

  2. create-content-controlボタンの<button>要素を見つけ、その行の後に次のマークアップを追加します。Locate the <button> element for the create-content-control button, and add the following markup after that line:

    <button class="ms-Button" id="replace-content-in-control">Rename Service</button><br/><br/>
    
  3. /Src/taskpane/taskpane.js を開きます Open the file ./src/taskpane/taskpane.js.

  4. Office.onReadyメソッド呼び出し内で、 create-content-controlボタンにクリックハンドラーを割り当てる行を見つけ、その行の後に次のコードを追加します。Within the Office.onReady method call, locate the line that assigns a click handler to the create-content-control button, and add the following code after that line:

    document.getElementById("replace-content-in-control").onclick = replaceContentInControl;
    
  5. ファイルの末尾に次の関数を追加します。Add the following function to the end of the file:

    function replaceContentInControl() {
        Word.run(function (context) {
    
            // TODO1: Queue commands to replace the text in the Service Name
            //        content control.
    
            return context.sync();
        })
        .catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }
    
  6. replaceContentInControl()関数内で、をTODO1次のコードに置き換えます。Within the replaceContentInControl() function, replace TODO1 with the following code. 注意:Note:

    • ContentControlCollection.getByTag メソッドによって、指定されたタグのすべてのコンテンツ コントロールの ContentControlCollection が返されます。The ContentControlCollection.getByTag method returns a ContentControlCollection of all content controls of the specified tag. getFirst を使用して、目的のコントロールの参照を取得します。We use getFirst to get a reference to the desired control.
    var serviceNameContentControl = context.document.contentControls.getByTag("serviceName").getFirst();
    serviceNameContentControl.insertText("Fabrikam Online Productivity Suite", "Replace");
    
  7. プロジェクトに加えたすべての変更を保存したことを確認します。Verify that you've saved all of the changes you've made to the project.

アドインをテストするTest the add-in

  1. ローカル web サーバーが既に実行されていて、アドインが Word に既に読み込まれている場合は、手順2に進みます。If the local web server is already running and your add-in is already loaded in Word, proceed to step 2. それ以外の場合は、ローカル web サーバーを起動して、アドインをサイドロードします。Otherwise, start the local web server and sideload your add-in:

    • Word でアドインをテストするには、プロジェクトのルートディレクトリで次のコマンドを実行します。To test your add-in in Word, run the following command in the root directory of your project. これにより、ローカル web サーバーが起動 (まだ実行されていない場合) し、アドインが読み込まれた状態で Word が開きます。This starts the local web server (if it's not already running) and opens Word with your add-in loaded.

      npm start
      
    • Web 上の Word でアドインをテストするには、プロジェクトのルートディレクトリで次のコマンドを実行します。To test your add-in in Word on the web, run the following command in the root directory of your project. このコマンドを実行すると、ローカル web サーバーが起動します (まだ実行していない場合)。When you run this command, the local web server will start (if it's not already running).

      npm run start:web
      

      アドインを使用するには、web 上の Word で新しいドキュメントを開き、 web 上の「Office アドインのサイドロード Office アドイン」の手順に従ってアドインをサイドロードします。To use your add-in, open a new document in Word on the web and then sideload your add-in by following the instructions in Sideload Office Add-ins in Office on the web.

  2. アドイン作業ウィンドウが Word でまだ開かれていない場合は、[ホーム] タブに移動し、リボンの [作業ウィンドウの表示] ボタンをクリックして開きます。If the add-in task pane isn't already open in Word, go to the Home tab and choose the Show Taskpane button in the ribbon to open it.

  3. 作業ウィンドウで、[段落の挿入] ボタンをクリックして、文書の先頭に "Office 365" の段落があることを確認します。In the task pane, choose the Insert Paragraph button to ensure that there is a paragraph with "Office 365" at the top of the document.

  4. ドキュメントで、"Office 365" というテキストを選択し、[コンテンツコントロールの作成] ボタンをクリックします。In the document, select the text "Office 365" and then choose the Create Content Control button. Service Name というラベルが付いたタグで語句がラップされていることに注意してください。Note that the phrase is wrapped in tags labelled "Service Name".

  5. [サービス名の変更] ボタンを選択し、コンテンツ コントロールのテキストが Fabrikam Online Productivity Suite に変わることに注意してください。Choose the Rename Service button and note that the text of the content control changes to "Fabrikam Online Productivity Suite".

    Word のチュートリアル - コンテンツ コントロールの作成とテキストの変更

次の手順Next steps

このチュートリアルでは、テキスト、画像、Word 文書の他のコンテンツを挿入および置換する Word 作業ウィンドウ アドインを作成しました。In this tutorial, you've created a Word task pane add-in that inserts and replaces text, images, and other content in a Word document. Word アドインの構築に関する詳細については、次の記事にお進みください。To learn more about building Word add-ins, continue to the following article:

関連項目See also