Office2016(Word2016、Excel2016) JavaScript APIを確認する方法

# はじめに
Officeアドインの開発において、JavaScriptAPIの簡単なサンプルを[GitHub - OfficeDev/office-js-snipet-explorer](https://github.com/OfficeDev/office-js-snippet-explorer)で確認できます。
この中にあるSnipet Explorer
[Office 2016 JavaScript API Snippet Explorer (Preview)](https://officesnippetexplorer.azurewebsites.net/#/snippets/word)
[Office 2016 JavaScript API Snippet Explorer (Preview)](https://officesnippetexplorer.azurewebsites.net/#/snippets/excel)
は、リストを選択することにより、ソースコードサンプルを確認できます。

# 例えば
[Office 2016 JavaScript API Snippet Explorer (Preview)](https://officesnippetexplorer.azurewebsites.net/#/snippets/excel)で、
「-- choose a gruop --」からRangeを選択すると
「-- choose a snipet --」候補が絞り込まれます。
「-- choose a snipet --」からSet Number Format in Rangeを選択します。
すると
Set the number format for cell A1 in the active sheet

```javascript:sample.js
Excel.run(function (ctx) {
	ctx.workbook.worksheets.getActiveWorksheet().getRange("A1").numberFormat = "d-mmm";
	return ctx.sync();
}).catch(function (error) {
	console.log(error);
});
```
と表示されました。
アクティブとなっているシートのセルA1に日付14-Mar(例えば、2017/8/23をセルに入力すると14-Marと表示される)形式のフォーマットをセットするソースコードサンプルが表示されます。

# 具体的には
Visual Studioを起動し、新しいプロジェクトの作成を実行して、Office/SharePoint＝＝＞アドイン＝＞Excelアドインを選びます。

![fig01.png](https://qiita-image-store.s3.amazonaws.com/0/192012/afa7722b-65aa-a34c-7955-0d84e2e826f7.png)

名前を決めて。OKを押します。

![fig02.png](https://qiita-image-store.s3.amazonaws.com/0/192012/8f37c623-9146-f444-c3e8-f3e15ac7d4cf.png)

今回は新機能をExcelに追加する（Taskpain）を選択して、完了を押します。
ソリューション エクスプローラーのHome.jsを左ダブルクリックして、JavaScriptを開きます。
サンプルコードが入力されています。
ボタンを押した時の動作となる、56行目から91行目を抜粋します。

```javascript:Home.js
    function hightlightHighestValue() {
        // Excel オブジェクト モデルに対してバッチ操作を実行します
        Excel.run(function (ctx) {
            // 選択された範囲に対するプロキシ オブジェクトを作成し、そのプロパティを読み込みます
            var sourceRange = ctx.workbook.getSelectedRange().load("values, rowCount, columnCount");

            // キューに入れるコマンドを実行し、タスクの完了を示すために Promise を返します
            return ctx.sync()
                .then(function () {
                    var highestRow = 0;
                    var highestCol = 0;
                    var highestValue = sourceRange.values[0][0];

                    // セルを検索して強調表示します
                    for (var i = 0; i < sourceRange.rowCount; i++) {
                        for (var j = 0; j < sourceRange.columnCount; j++) {
                            if (!isNaN(sourceRange.values[i][j]) && sourceRange.values[i][j] > highestValue) {
                                highestRow = i;
                                highestCol = j;
                                highestValue = sourceRange.values[i][j];
                            }
                        }
                    }

                    cellToHighlight = sourceRange.getCell(highestRow, highestCol);
                    sourceRange.worksheet.getUsedRange().format.fill.clear();
                    sourceRange.worksheet.getUsedRange().format.font.bold = false;

                    // セルを強調表示
                    cellToHighlight.format.fill.color = "orange";
                    cellToHighlight.format.font.bold = true;
                })
                .then(ctx.sync);
        })
        .catch(errorHandler);
    }
```

これに、先ほどのスニペットエクスプローラーに表示されたソースコード（Sample.jsの該当部分）を貼り付けます。

```javascript:Home.js
    function hightlightHighestValue() {
        Excel.run(function (ctx) {
            ctx.workbook.worksheets.getActiveWorksheet().getRange("A1").numberFormat = "d-mmm";
            return ctx.sync();
        }).catch(function (error) {
            console.log(error);
        });
    }
```

このように貼り付けて［▶開始］を押します。Taskpaneを押します。

![fig03.png](https://qiita-image-store.s3.amazonaws.com/0/192012/07248413-0c8d-a9d9-303e-d82421f11ade.png)


サンプルコードをそのまま使用しているので、他の動作は、気にせず、
［強調表示!］を押します。
セルA1の書式設定なので、見た目では何も変化がありませんが、セルA1に日付を入力すると

![fig04.png](https://qiita-image-store.s3.amazonaws.com/0/192012/58085299-f8bc-fdf7-d5d7-8055b0b56a94.png)

- 分類：ユーザー定義
- 種類：d-mmm

とプログラム通りに反映されていることが分かります。

しかし、ユーザー定義となっているので、d-mmmを[$-en-US]d-mmm;@に変更します。

```javascript:Home.js
    function hightlightHighestValue() {
        Excel.run(function (ctx) {
            ctx.workbook.worksheets.getActiveWorksheet().getRange("A1").numberFormat = "[$-en-US]d-mmm;@";
            return ctx.sync();
        }).catch(function (error) {
            console.log(error);
        });
    }
```

先ほどと同様に
［強調表示!］を押して、年月日を入力した画面が以下になります。

![fig05.png](https://qiita-image-store.s3.amazonaws.com/0/192012/026f96e8-742b-8980-eb00-09814d4ee333.png)

今度は、

- 分類：日付
- 種類：14-Mar

となりました。
日付のフォーマットでは、ロケールを調整する必要がありますが、このような感じで、Officeアドインの開発ができます。
セルの書式設定は、新しいJavaScriptAPIに実装されているので、Excel2013では動作しません。
このサンプルプログラムのデフォルト状態は、Excel2013では、別の動作（ボタンが［強調表示!］ではなく、［表示!］）となり、［表示!］ボタンで$('#highlight-button').click(displaySelectedCells);が実行されるように切り分けを行っています。
書式設定ができない場合、代替方法が無いならば、前回の記事[Excel2016またはそれ以降で動作するExcelアドイン開発](http://qiita.com/y__na_ka_ya_ma/items/e4ddb532cd24e5a8841f)のアドインマニフェスト追記も行って、Excel2013で実行できないようにする対応も必要になります。

# 参考
[GitHub - OfficeDev/office-js-snipet-explorer](https://github.com/OfficeDev/office-js-snippet-explorer)
Word版
[Office 2016 JavaScript API Snippet Explorer (Preview)](https://officesnippetexplorer.azurewebsites.net/#/snippets/word)
Excel版
[Office 2016 JavaScript API Snippet Explorer (Preview)](https://officesnippetexplorer.azurewebsites.net/#/snippets/excel)

# おわりに
Snippet Explorerは、やりたいことをリストから選択するだけで、ソースコードを確認できるので、使いやすいと感じました。
Preview版なので、いつまで使えるのかは分かりませんが。

最後までお読みいただきありがとうございました。