Office アドイン

[Officeアドイン]テーブルやグラフを作成する方法(Excel)

お久しぶりのOffice アドインの記事です。
注目している人はほとんどいませんが、Excel JavaScript APIのリリース予定を見れば分かる通り、Office アドインは常に進化し続けており、できることも少しずつ増えています。

今回は、「Office アドインでこんなことできるよ」という一例の紹介として、テーブルやグラフを作成してみます。
(本当はonActivatedイベントとかを試したかったのですが、2017年8月時点だとまだAPIがリリースされておらず、試すことができませんでした)

マニフェスト

※ Id要素やSourceLocation要素のDefaultValue属性の値等は適当に変更してください。

<?xml version="1.0" encoding="UTF-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp">
  <Id>3648a44b-1eef-42fc-a713-eb78549613b8</Id>
  <Version>1.0</Version>
  <ProviderName>@kinuasa</ProviderName>
  <DefaultLocale>ja-jp</DefaultLocale>
  <DisplayName DefaultValue="Sample Add-in" />
  <Description DefaultValue="Sample Add-in"/>
  <Hosts>
    <Host Name="Workbook" />
  </Hosts>
  <AppDomains>
    <AppDomain>https://login.microsoftonline.com</AppDomain>
  </AppDomains>
  <DefaultSettings>
    <SourceLocation DefaultValue="https://localhost/sample/index.html" />
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>
</OfficeApp>

コード(index.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Sample</title>
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css">
    <style>
      #content-main {
        background: #ffffff;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
      }
    </style>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.min.js"></script>
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
    <script src="https://unpkg.com/core-js/client/core.min.js"></script>
    <script src="https://unpkg.com/@microsoft/office-js-helpers@0.7.4/dist/office.helpers.min.js"></script>
    <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
    <script>
      Office.initialize = function(reason){
        $(document).ready(function(){
          $("#run").click(run);
        });
      };
      
      function run(){
        try{
          Excel.run(function(context){
            //const sheet = OfficeHelpers.ExcelUtilities.forceCreateSheet(context.workbook, "Sample");
            const sheet = context.workbook.worksheets.add("Sample"); //シート追加
            
            //テーブル作成
            const tbl = sheet.tables.add("A1:C1", true);
            tbl.getHeaderRowRange().values = [["A", "B", "C"]];
            tbl.rows.add(null, [
              [10, 20, 30],
              [11, 21, 31],
              [12, 22, 32],
              [13, 23, 33],
              [14, 24, 34],
            ]);
            
            //グラフ作成
            const chart = sheet.charts.add("ColumnClustered", tbl.getRange(), "Auto");
            chart.title.text = "テスト用グラフ";
            chart.setPosition("A8");
            chart.legend.position = "right"
            chart.legend.format.fill.setSolidColor("white");
            chart.dataLabels.format.font.size = 15;
            chart.dataLabels.format.font.color = "black";
            sheet.activate();
            return context.sync();
          }).then(function(){
            OfficeHelpers.UI.notify("", "Success", "success");
          });
        }catch(error){
          OfficeHelpers.UI.notify(error);
        }
      }
    </script>
  </head>
  <body>
    <div id="content-main">
      <button id="run" class="ms-Button">
        <span class="ms-Button-label">Run Code</span>
      </button>
    </div>
  </body>
</html>

実行画面

アドインを読み込んで「Run Code」ボタンをクリックすると、「Sample」シートが追加され、シート上にテーブルとグラフが作成されます。

Web連携を得意とするOffice アドインでWeb上のデータを取り込み、Excelシートにグラフとして出力して視覚化する等、グラフが作成できるだけでも、Office アドインを活用し得る場面は多々あると思います。

関連Webページ

関連記事

  1. Office アドイン

    [Office用アプリ]第一回 Apps for Office 勉強会で登壇しました。

    19日(金)に第一回 Apps for Office 勉強会が東京で開…

  2. Office アドイン

    PowerPoint用のOffice用アプリ

    当ブログでも散々紹介しているOffice用アプリ(apps for O…

  3. Office関連

    Office 2013 アイコン一覧(R)

    ・Office 2013 アイコン一覧 NUM…

  4. Office関連

    Office クリップボードをマクロで操作する(UI Automation)

    以前MSAAを利用してOffice クリップボードを操作するマクロを書…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP