既に Visual Studio がインストールされている場合は、Visual Studio インストーラーを使用して、Office/SharePoint 開発ワークロードがインストールされていることを確認してください。
Microsoft 365 サブスクリプションに接続されている Office (Office for the web を含む)。
注:
Office をまだお持ちでない場合は、Microsoft 365 開発者プログラムに参加して、開発中に使用できる 90 日間更新可能な無料の Microsoft 365 サブスクリプションを取得できます。
アドイン プロジェクトの作成
Visual Studio で、[新しいプロジェクトの作成] を選択します。
検索ボックスを使用して、アドインと入力します。 [Word Web アドイン] を選択し、[次へ] を選択します。
プロジェクトに名前を付けて、[作成] を選択します。
ソリューションが 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 サーバーに展開する必要があります。
コードを更新する
Home.html では、アドインの作業ウィンドウにレンダリングされる HTML を指定します。 Home.html で、<body> 要素を次のマークアップに置き換えて、ファイルを保存します。
<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>
Web アプリケーション プロジェクトのルートにあるファイル Home.js を開きます。 このファイルは、アドイン用のスクリプトを指定します。 すべての内容を次のコードに置き換え、ファイルを保存します。
'use strict';
(function () {
Office.onReady(function() {
// Office is ready.
$(document).ready(function () {
// The document is ready.
// 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.');
}
});
});
async function insertEmersonQuoteAtSelection() {
await Word.run(async (context) => {
// Create a proxy object for the document.
const thisDocument = context.document;
// Queue a command to get the current selection.
// Create a proxy range object for the selection.
const 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.
await context.sync();
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));
}
});
}
async function insertChekhovQuoteAtTheBeginning() {
await Word.run(async (context) => {
// Create a proxy object for the document body.
const 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.
await context.sync();
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));
}
});
}
async function insertChineseProverbAtTheEnd() {
await Word.run(async (context) => {
// Create a proxy object for the document body.
const 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.
await context.sync();
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));
}
});
}
})();
Web アプリケーション プロジェクトのルートにあるファイル Home.css を開きます。 このファイルは、アドイン用のユーザー設定のスタイルを指定します。 すべての内容を次のコードに置き換え、ファイルを保存します。
Description 要素の DefaultValue 属性にはプレースホルダー値が含まれています。 これは、A task pane add-in for Word に置き換えてください。
ファイルを保存します。
...
<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"/>
...
試してみる
Visual Studio を使用して、新しく作成された Word アドインをテストするには、 F5 キーを押すか、[ デバッグ>の開始] [デバッグ] を選択して、リボンに [タスクウィンドウ アドインの表示] ボタンが表示された状態で Word を起動します。 アドインは IIS 上でローカルにホストされます。
![[作業ウィンドウの表示] ボタンが強調表示されている Word アプリケーションを示すスクリーンショット。](../images/word-quickstart-addin-2b.png)
![[作業ウィンドウの表示] ボタンが強調表示されている Word アプリケーションのスクリーンショット。](../images/word-quickstart-addin-0.png)
