LoginSignup
6
8

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-08-23

はじめに

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

fig01.png

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

fig02.png

今回は新機能を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を押します。

fig03.png

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

fig04.png

  • 分類:ユーザー定義
  • 種類: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);
        });
    }

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

fig05.png

今度は、

  • 分類:日付
  • 種類: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版なので、いつまで使えるのかは分かりませんが。

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

6
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
8