[Officeアドイン]チュートリアルでアドインの開発方法を学ぶ

ホーム
Office アドイン, Office関連, Office 2016
[Officeアドイン]チュートリアルでアドインの開発方法を学ぶ

2018.01.8

[Officeアドイン]チュートリアルでアドインの開発方法を学ぶ

MicrosoftのOffice Dev Centerには、Office アドイン(Excel)のチュートリアルが用意されています。今回はこのチュートリアルの実行方法を紹介します。
(前回の記事とえらく方向性が違いますが、気にせず進めていきます)

要件

Excel 2016 バージョン 1711 以降
Node.js(npm)

※ Node.jsのインストール方法は下記記事をご参照ください。

2017.02.28

YO OFFICE(Yeoman)を使ってOffice アドインのひな型を作成する方法

Webアプリのひな型を一発で作ってくれる便利ツール「Yeoman」には、Office アドイン用のGenerator「YO OFFICE」が用意されています。今回はこのGeneratorを使ってOffice アドインのひな型を作成する方法を紹介します。...

環境設定

GitHubにアクセスして、リポジトリをZip形式でダウンロードします。
手順1.のファイルを適当なフォルダに解凍します。「Start」フォルダがチュートリアル前のフォルダ、「Completed」フォルダがチュートリアル後の完成版フォルダとなるため、今回は「Start」フォルダを使用します。
コマンドプロンプトで手順2.の「Start」フォルダを開き、下記コマンドを実行します。

npm install

下記コマンドを実行してファイルをビルドします。

npm run build

下記コマンドを実行すると、ローカルサーバーが立ち上がります。

npm start

下記記事を参考に、Office アドインのマニフェストファイルを配置する共有フォルダを用意します。

2015.09.29

OfficeJS Snippet Explorerを使って新しいOffice アドインを体験する。

前回の記事と打って変わって元のOffice アドインの記事に戻ります(“Office アドインってなに？”という方はコチラの記事をご参照ください)。さて、先日書いた記事「Office 2016で進化したOffice アドイン」でOffice アドイ...

手順2.の「Start」フォルダにある「my-office-add-in-manifest.xml」ファイル(マニフェストファイル)を手順6.の共有フォルダにコピーします。

以上でチュートリアルの環境設定は完了です。

コードの書き換え

環境設定が終わったら、今度はアドインファイルのコードを書き換えて、コーディング体験をします。

上記環境設定の手順2.の「Start」フォルダにある「index.html」ファイルをテキストエディタで開きます。
「TODO1」部分を下記の通り置換します。

<button class="ms-Button" id="create-table">Create Table</button>

「bundle.js」を読み込んでいる部分を「app.js」を読み込むように修正し、ファイルを上書き保存します。

上記環境設定の手順2.の「Start」フォルダにある「app.js」ファイルをテキストエディタで開きます。
「TODO1」部分を下記の通り置換します。

if (!Office.context.requirements.isSetSupported('ExcelApi', 1.7)) {
    console.log('Sorry. The tutorial add-in uses Excel.js APIs that are not available in your version of Office.');
}

「TODO2: Assign event…」部分を下記の通り置換します。

$('#create-table').click(createTable);

「TODO2: Add handlers…」部分を下記の通り置換します。

function createTable() {
   Excel.run(function (context) {

       // TODO4: Queue table creation logic here.

       // TODO5: Queue commands to populate the table with data.

       // TODO6: Queue commands to format the table.

       return context.sync();
   })
   .catch(function (error) {
       console.log("Error: " + error);
       if (error instanceof OfficeExtension.Error) {
           console.log("Debug info: " + JSON.stringify(error.debugInfo));
       }
   });
}

「TODO4」部分を下記の通り置換します。

const currentWorksheet = context.workbook.worksheets.getActiveWorksheet();
const expensesTable = currentWorksheet.tables.add("A1:D1", true /*hasHeaders*/);
expensesTable.name = "ExpensesTable";

「TODO5」部分を下記の通り置換します。

expensesTable.getHeaderRowRange().values = [["Date", "Merchant", "Category", "Amount"]];
expensesTable.rows.add(null /*add at the end*/, [
   ["1/1/2017", "The Phone Company", "Communications", "120"],
   ["1/2/2017", "Northwind Electric Cars", "Transportation", "142.33"],
   ["1/5/2017", "Best For You Organics Company", "Groceries", "27.9"],
   ["1/10/2017", "Coho Vineyard", "Restaurant", "33"],
   ["1/11/2017", "Bellows College", "Education", "350.1"],
   ["1/15/2017", "Trey Research", "Other", "135"],
   ["1/15/2017", "Best For You Organics Company", "Groceries", "97.88"]
]);

「TODO6」部分を下記の通り置換し、ファイルを上書き保存します。

expensesTable.columns.getItemAt(3).getRange().numberFormat = [['?#,##0.00']];
expensesTable.getRange().format.autofitColumns();
expensesTable.getRange().format.autofitRows();