React を使用して Excel のアドインを作成する

この記事では、React と Excel の JavaScript API を使用して Excel アドインを構築する手順について説明します。

前提条件

新しい React アプリを生成する

Create React App を使用して、React アプリを生成します。 ターミナルから、次のコマンドを実行します。

create-react-app my-addin

マニフェスト ファイルを生成し、アドインをサイドロードする

各アドインには、設定と機能を定義するマニフェスト ファイルが必要です。

  1. アプリ フォルダーに移動します。

    cd my-addin
    
  2. Yeoman ジェネレーター使用して、アドインのマニフェスト ファイルを生成します。 次のコマンドを実行し、以下のスクリーンショットに示すとおり、プロンプトに応答します。

    yo office
    
    • Would you like to create a new subfolder for your project?: (プロジェクト用の新しいサブフォルダーを作成しますか) No
    • What would you want to name your add-in?: (アドインの名前を何にしますか) My Office Add-in
    • Which Office client application would you like to support?: (どの Office クライアント アプリケーションをサポートしますか) Excel
    • Would you like to create a new add-in?: (新しいアドインを作成しますか) No

      次に、resource.html を開くかどうかを確認するメッセージがジェネレーターによって表示されます。このチュートリアルでは開く必要はありませんが、関心がある場合は自由に開くことができます。[はい] または [いいえ] を選択してウィザードを完了し、ジェネレーターが作業を実行することを許可します。

      Yeoman ジェネレーター

      注意

      package.json を上書きするメッセージが表示された場合は、No (上書きしない) と応答します。

  3. アドインを実行して、Excel 内のアドインをサイドロードするのに使用するプラットフォームの手順に従います。

アプリを更新する

  1. public/index.html を開き、</head> タグの直前に次の <script> タグを追加し、ファイルを保存します。

    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
    
  2. src/index.js を開き、ReactDOM.render(<App />, document.getElementById('root')); を次のコードで置き換えて、ファイルを保存します。

    const Office = window.Office;
    
    Office.initialize = () => {
      ReactDOM.render(<App />, document.getElementById('root'));
    };
    
  3. src/App.js を開き、ファイルのコンテンツを次のコードで置き換えて、ファイルを保存します。

    import React, { Component } from 'react';
    import './App.css';
    
    class App extends Component {
      constructor(props) {
        super(props);
    
        this.onSetColor = this.onSetColor.bind(this);
      }
    
      onSetColor() {
        window.Excel.run(async (context) => {
          const range = context.workbook.getSelectedRange();
          range.format.fill.color = 'green';
          await context.sync();
        });
      }
    
      render() {
        return (
          <div id="content">
            <div id="content-header">
              <div className="padding">
                  <h1>Welcome</h1>
              </div>
            </div>
            <div id="content-main">
              <div className="padding">
                  <p>Choose the button below to set the color of the selected range to green.</p>
                  <br />
                  <h3>Try it out</h3>
                  <button onClick={this.onSetColor}>Set color</button>
              </div>
            </div>
          </div>
        );
      }
    }
    
    export default App;
    
  4. src/App.css を開き、ファイルのコンテンツを次の CSS コードで置き換えて、ファイルを保存します。

    #content-header {
        background: #2a8dd4;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px; 
        overflow: hidden;
    }
    
    #content-main {
        background: #fff;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto; 
    }
    
    .padding {
        padding: 15px;
    }
    

お試しください

  1. ターミナルから、次のコマンドを実行してデベロッパー サーバーを起動します。

    Windows:

    set HTTPS=true&&npm start
    

    macOS:

    HTTPS=true npm start
    

    注意

    アドインが含まれているブラウザー ウィンドウが開きます。このウィンドウを閉じます。

  2. Excel で、[ホーム] タブを選択し、リボンの [作業ウィンドウの表示] ボタンをクリックして、アドインの作業ウィンドウを開きます。

    Excel アドイン ボタン

  3. ワークシート内で任意のセルの範囲を選択します。

  4. 作業ウィンドウで、[色の設定] ボタンをクリックして、選択範囲の色を緑に設定します。

    Excel アドイン

次の手順

これで完了です。React を使用して Excel アドインが正常に作成されました。次に、Excel アドインの機能の詳細について説明します。Excel アドインのチュートリアルに従って、より複雑なアドインをビルドします。

関連項目