Microsoft Learn Challenge

Excelアドインチュートリアル – Officeアドイン

この記事では、Excelのタスクペインアドインを作成し、テーブルの作成、フィルタリング、ソート、チャートの作成、ヘッダーの固定、ワークシートの保護、ダイアログのオープンを学びます。Node.jsとYeoman Office アドインのセットアップが必要です。プロジェクトの作成後、テーブルをプログラムで生成し、データを追加してフォーマットします。その後、フィルタリング、ソート、チャートの作成を行い、最後にダイアログを開いてユーザーからの入力を受け取ります。アドインの動作を確認するためのテストも含まれています。

Excel タスクペインアドインの作成チュートリアル

このチュートリアルでは、Excel タスクペインアドインを作成し、次の機能を実装します。

  • テーブルを作成
  • テーブルをフィルタリングおよび並べ替え
  • チャートを作成
  • テーブルのヘッダーを固定
  • ワークシートを保護
  • ダイアログを開く

必要条件

以下のソフトウェアをインストールしておく必要があります。

  • Node.js：最新の LTS バージョンをインストールします。正しいバージョンはこちらの Node.js サイト から入手できます。

  • Yeoman および Office Add-in Generator：これらのツールをグローバルにインストールするには、次のコマンドをコマンドプロンプトで実行します。

    npm install -g yo generator-office

アドインプロジェクトの作成

次のコマンドを実行して、Yeoman ジェネレーターを使用してアドインプロジェクトを作成します。

yo office

プロジェクトの設定に関して、以下の情報を提供します。

  • プロジェクトタイプ：Office Add-in Task Pane project
  • スクリプトタイプ：JavaScript
  • アドイン名：My Office Add-in
  • 対応する Office クライアントアプリケーション：Excel

テーブルの作成

次に、アドインでテーブルを作成し、データを追加する方法を見ていきます。

  1. プロジェクトをコードエディターで開き、./src/taskpane/taskpane.html を開きます。

  2. <main/> 要素内のすべての行を削除し、以下のマークアップを追加します。

    <button class="ms-Button" id="create-table">Create Table</button><br/>

  3. ./src/taskpane/taskpane.js ファイルを開き、Office.onReady 関数内でボタンのイベントハンドラーを割り当てます。

    document.getElementById("create-table").onclick = () => tryCatch(createTable);

  4. createTable 関数を次のように追加します。

    async function createTable() {
   await Excel.run(async (context) => {
       const currentWorksheet = context.workbook.worksheets.getActiveWorksheet();
       const expensesTable = currentWorksheet.tables.add("A1:D1", true);
       expensesTable.name = "ExpensesTable";
       expensesTable.getHeaderRowRange().values =
           [["Date", "Merchant", "Category", "Amount"]];
       expensesTable.rows.add(null /*add at the end*/, [
           ["1/1/2017", "The Phone Company", "Communications", "120"],
           // 残りのデータ行...
       ]);
       await context.sync();
   });
}

テーブルのフィルタリングと並べ替え

テーブルをフィルタリングおよび並べ替える機能を追加します。

テーブルをフィルタ

  1. taskpane.html に新しいボタンを追加します。

    <button class="ms-Button" id="filter-table">Filter Table</button><br/>

  2. taskpane.js で filterTable 関数を定義します。

    async function filterTable() {
   await Excel.run(async (context) => {
       const expensesTable = context.workbook.tables.getItem("ExpensesTable");
       const categoryFilter = expensesTable.columns.getItem("Category").filter;
       categoryFilter.applyValuesFilter(["Education", "Groceries"]);
       await context.sync();
   });
}

テーブルを並べ替え

  1. 並べ替えボタンを taskpane.html に追加します。

    <button class="ms-Button" id="sort-table">Sort Table</button><br/>

  2. sortTable 関数を追加します。

    async function sortTable() {
   await Excel.run(async (context) => {
       const expensesTable = context.workbook.tables.getItem("ExpensesTable");
       const sortFields = [{ key: 1, ascending: false }];
       expensesTable.sort.apply(sortFields);
       await context.sync();
   });
}

チャートの作成

次に、フィルタリングされたテーブルを基にチャートを作成します。

  1. チャート作成ボタンを追加します。

    <button class="ms-Button" id="create-chart">Create Chart</button><br/>

  2. createChart 関数を作成し、テーブルデータを使用してチャートを追加します。

    async function createChart() {
   await Excel.run(async (context) => {
       const expensesTable = context.workbook.tables.getItem('ExpensesTable');
       const dataRange = expensesTable.getDataBodyRange();
       const chart = context.workbook.worksheets.getActiveWorksheet().charts.add('ColumnClustered', dataRange, 'Auto');
       chart.setPosition("A15", "F30");
       chart.title.text = "Expenses";
       await context.sync();
   });
}

テーブルヘッダーの固定

テーブルが長くなると、ヘッダーが見えなくなることがあります。これを防ぐために、ヘッダーを固定します。

  1. ヘッダー固定ボタンを追加します。

    <button class="ms-Button" id="freeze-header">Freeze Header</button><br/>

  2. freezeHeader 関数を作成します。

    async function freezeHeader() {
   await Excel.run(async (context) => {
       const currentWorksheet = context.workbook.worksheets.getActiveWorksheet();
       currentWorksheet.freezePanes.freezeRows(1);
       await context.sync();
   });
}

ワークシートの保護

最後に、ワークシートの保護機能を実装します。

  1. 保護切替ボタンを追加します。

    <button class="ms-Button" id="toggle-protection">Toggle Protection</button><br/>

  2. toggleProtection 関数を作成します。

    async function toggleProtection() {
   await Excel.run(async (context) => {
       const sheet = context.workbook.worksheets.getActiveWorksheet();
       sheet.load('protection/protected');
       await context.sync();

       if (sheet.protection.protected) {
           sheet.protection.unprotect();
       } else {
           sheet.protection.protect();
       }

       await context.sync();
   });
}

ダイアログを開ける

ダイアログを開く機能を最後のステップとして確認しましょう。

  1. ダイアログ用のボタンを追加します。

    <button class="ms-Button" id="open-dialog">Open Dialog</button><br/>

  2. openDialog 関数を作成します。

    function openDialog() {
   Office.context.ui.displayDialogAsync('https://localhost:3000/popup.html', {height: 45, width: 55}, function (result) {
       const dialog = result.value;
       dialog.addEventHandler(Office.EventType.DialogMessageReceived, processMessage);
   });
}

  3. メッセージ処理関数を追加します。

    function processMessage(arg) {
   document.getElementById("user-name").innerHTML = arg.message;
   dialog.close();
}

まとめ

このチュートリアルを通じて、Excelタスクペインアドインを作成し、基本的な機能を実装しました。必要に応じて、更なる機能の追加や改良を行ってください。次のステップとして、Microsoftの公式ドキュメントを参照し、Excelアドインの詳細な開発方法を学んでください。

————-

Excel add-in tutorial – Office Add-ins

Source link

The article provides a comprehensive tutorial on creating an Excel task pane add-in using Node.js and the Yeoman generator. The add-in will enable users to perform several tasks within Excel, including creating and formatting a table, filtering and sorting data, creating charts, freezing table headers, protecting worksheets, and opening a dialog for user interaction.

Key Steps Covered in the Tutorial:

  1. Prerequisites:

    • Install the latest LTS version of Node.js, along with Yeoman and the Office Add-ins generator using npm.
    • Ensure Office is connected to a Microsoft 365 subscription.

  2. Creating the Add-In Project:

    • Use the Yeoman generator to scaffold an Office Add-in project specifically for Excel.
    • Configure project settings and install Node components.

  3. Implementing Core Features:

    • Create a Table: Write code to programmatically create a table in Excel, populate it with data, and format it.
    • Filter and Sort the Table: Add functionalities to filter out specific expense categories and sort the table based on merchant names.
    • Create a Chart: Generate a chart based on table data and format it accordingly.
    • Freeze Table Header: Implement a feature to keep the header row visible when scrolling through the table.
    • Protect a Worksheet: Enable worksheet protection which can be toggled on and off with a button.
    • Open a Dialog: Set up a dialog that allows user input and passes that input back to the task pane to be displayed.

  4. Testing:

    • Instructions on how to start a local server and sideload the add-in for testing within Excel.
    • Guidance on verifying each feature after implementation.

  5. Code Organization:

    • Various JavaScript files and HTML structures are utilized to organize the add-in’s logic, ensuring separation of concerns for easier maintenance and scalability.
  6. Final Steps:
    • Once the features are implemented and tested, the user is encouraged to engage with additional learning resources for further development of Excel add-ins.

This tutorial encapsulates practical application, code examples, and testing procedures to facilitate the development of useful Excel add-ins, making it an excellent resource for developers looking to extend Office functionalities using JavaScript and the Office JavaScript API.

プレスリリース：役員の退任および就任に関するお知らせ 前の記事 Teams内のPower BI – 「Teams活動分析」レポートの廃止 | Microsoft Power BI ブログ 次の記事

関連記事

コメント

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