Excelアドインで罫線を引く方法とセル幅を自動調節する方法

はじめに

Excelアドインで罫線を引くには、RangeBorder Object (JavaScript API for Excel) 「Property:sideIndex & Style」を用います。
Requirement setがExcelApi1.1なので、Excel2013(以降)、Excel Onlineで実現します。
Excelアドインでセル幅自動調節するには、RangeFormat Object (JavaScript API for Excel) 「Methods:autofitColumns()」を用います。
Requirement setがExcelApi1.2なので、Excel2016(以降)、Excel Onlineで実現します。

罫線を引くには

罫線は、
range.format.borders.getItem('EdgeTop').style = 'Continuous';
のように記述します。

罫線を引く場所

'EdgeTop'の部分には、罫線を引く場所を記述します。
使用可能な値は、次のとおりです。

• EdgeTop　：範囲指定した最上部の罫線
• EdgeBottom　：範囲指定した最下部の罫線
• EdgeLeft　：範囲指定した左端の罫線
• EdgeRight　：範囲指定した右端の罫線
• InsideHorizontal　：範囲指定した内側水平部分の罫線
• InsideVertical　：範囲指定した内側垂直部分の罫線
• DiagonalDown　：範囲指定したセル全ての下り対角線
• DiagonalUp　：範囲指定したセル全ての上り対角線

罫線の線種

'Continuous'の部分には、罫線の線の種類をいずれか一つ記述します。
使用可能な値は、次のとおりです。Excel2016 for Windowsでは、このように表示されます。

• None　：罫線なし
• Continuous　：実線
• Dash　：破線
• DashDot　：一点鎖線
• DashDotDot　：二点鎖線
• Dot　：点線
• Double　：二重線
• SlantDashDot　：斜め一点鎖線

Excel Onlineでは、このように表示されます。

DashとDashDot、DashDotDotとDotが同一に見えます。
一見、罫線の種類が違うように見えますが、Excel2016 for Windowsで開きなおすと、先ほどの罫線情報となっているので、線種の設定は同一で多少見え方が違うようです。

セル幅の自動調節は

セル幅の自動調節は、以下のように記述します。
range.format.autofitColumns();
範囲指定したセル内の文字にセル幅を合わせます（コマンド実行時に動作しますので、コマンド実行後に文字数を減らしても、セル幅は変化しません）。

具体的には

前回の、Office2016(Word2016、Excel2016) JavaScript APIを確認する方法と同様にVisual Studioのサンプルコード（デフォルト状態）のHome.jsに以下のように追記します。
今回は、作業アドイン起動時に実行される、LoadSampleData内に記述してみます。
//罫線の設定
//セル幅の自動調節
が追記部分です。
申し訳ございません。Excel2013では、LoadSampleDataを実行しないので、確認できません。

Home.js

    function loadSampleData() {
        var values = [
            [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000)],
            [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000)],
            [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000)]
        ];

        // Excel オブジェクト モデルに対してバッチ操作を実行します
        Excel.run(function (ctx) {
            // 作業中のシートに対するプロキシ オブジェクトを作成します
            var sheet = ctx.workbook.worksheets.getActiveWorksheet();
            // ワークシートにサンプル データを書き込むコマンドをキューに入れます
            sheet.getRange("B3:D5").values = values;

            //罫線の設定　↓ここから
            sheet.getRange("B3:D5").format.borders.getItem('EdgeBottom').style = 'Dash';
            sheet.getRange("B3:D5").format.borders.getItem('InsideHorizontal').style = 'DashDot';
            sheet.getRange("B3:D5").format.borders.getItem('InsideVertical').style = 'DashDotDot';
            sheet.getRange("B3:D5").format.borders.getItem('EdgeLeft').style = 'Dot';
            sheet.getRange("B3:D5").format.borders.getItem('EdgeRight').style = 'Double';
            sheet.getRange("B3:D5").format.borders.getItem('EdgeTop').style = 'SlantDashDot';
            //罫線の設定　↑ここまで

            //セル幅の自動調節　↓ここから
            //指定した範囲（B3:C5）のセル幅の自動調節を行います
            sheet.getRange("B3:C5").format.autofitColumns();
            //セル幅の自動調節　↑ここまで　

            // キューに入れるコマンドを実行し、タスクの完了を示すために Promise を返します
            return ctx.sync();
        })
        .catch(errorHandler);
    }

Visual Studioの［▶開始］を押します。Taskpaneを押します。
loadSampleDataが実行されると、
Excel2016 for Windowsでは、このように表示されます。

Excel Onlineでは、このように表示されます。

参考

罫線
[RangeBorder Object (JavaScript API for Excel) 「Property:sideIndex & Style」] (https://github.com/OfficeDev/office-js-docs/blob/master/reference/excel/rangeborder.md#properties)
セル幅の自動調節
RangeFormat Object (JavaScript API for Excel) 「Methods:autofitColumns()」
Excel JavaScript API 要件設定
Excel JavaScript API requirement sets

おわりに

セル幅の自動調節など、当初のJavaScript API for Excelではできなかったことが、できるようになってきているので、更なるJavaScript APIの進化に期待しています。

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