LoginSignup
1
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-08-29

はじめに

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の進化に期待しています。

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

1
1
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
1
1