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

16088 ワード
VisualStudio Word Excel office Officeアドイン Excel テキストリンク

はじめに

Officeアドインの開発において、JavaScriptAPIの簡単なサンプルをGitHub - OfficeDev/office-js-snipet-explorerで確認できます。
この中にあるSnipet Explorer
Office 2016 JavaScript API Snippet Explorer (Preview)
Office 2016 JavaScript API Snippet Explorer (Preview)
は、リストを選択することにより、ソースコードサンプルを確認できます。

例えば

Office 2016 JavaScript API Snippet Explorer (Preview)で、
「-- 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

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アドインを選びます。

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

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

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の該当部分）を貼り付けます。

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を押します。

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

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

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

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

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);
        });
    }

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

今度は、

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

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

参考

GitHub - OfficeDev/office-js-snipet-explorer
Word版
Office 2016 JavaScript API Snippet Explorer (Preview)
Excel版
Office 2016 JavaScript API Snippet Explorer (Preview)

おわりに

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

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