Excel
office
VisualStudio
Officeアドイン

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'の部分には、罫線を引く場所を記述します。
使用可能な値は、次のとおりです。

fig6.png

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

罫線の線種

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

fig8-2.png

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

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

fig9-2.png

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では、このように表示されます。

fig11.png

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

fig13.png

参考

罫線
RangeBorder Object (JavaScript API for Excel) 「Property:sideIndex & Style」
セル幅の自動調節
RangeFormat Object (JavaScript API for Excel) 「Methods:autofitColumns()」
Excel JavaScript API 要件設定
Excel JavaScript API requirement sets

おわりに

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

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