チュートリアル: Excel カスタム関数と作業ウィンドウの間でデータとイベントを共有する

  • [アーティクル]

グローバル データを共有し、共有ランタイムを使用して、Excel アドインの作業ウィンドウとカスタム関数の間でイベントを送信します。

カスタム関数と作業ウィンドウ コードの間で状態を共有する

次の手順は、カスタム関数と作業ウィンドウのコードの間でグローバル変数を共有する方法を示します。 このチュートリアルでは、スクリプトの種類 JavaScript を使用して、共有ランタイム プロジェクトを使用する Excel カスタム関数を使用して、Excel カスタム関数のチュートリアルを完了していることを前提としています。 このチュートリアルで作成したアドインを使用して、次の手順を完了します。

共有状態を取得または保存するカスタム関数を作成する

  1. Visual Studio Code でファイル src/functions/functions.js を開きます。

  2. 1 行目で、次のコードを一番上に挿入します。 これにより、sharedState という名前のグローバル変数が初期化されます。

    window.sharedState = "empty";

  3. 次のコードを追加して、値を sharedState 変数に保存するカスタム関数を作成します。

    /**
 * Saves a string value to shared state with the task pane
 * @customfunction STOREVALUE
 * @param {string} value String to write to shared state with task pane.
 * @return {string} A success value
 */
function storeValue(sharedValue) {
  window.sharedState = sharedValue;
  return "value stored";
}

  4. 次のコードを追加して、sharedState 変数の現在の値を取得するカスタム関数を作成します。

    /**
 * Gets a string value from shared state with the task pane
 * @customfunction GETVALUE
 * @returns {string} String value of the shared state with task pane.
 */
function getValue() {
  return window.sharedState;
}

  5. ファイルを保存します。

グローバル データを操作する作業ウィンドウのコントロールを作成する

  1. ファイル src/taskpane/taskpane.html を開きます。

  2. 終了 </main> 要素の後に、次の HTML を追加します。 HTML は、グローバル データの取得または保存に使用される 2 つのテキスト ボックスとボタンを作成します。

    <ol>
  <li>
    Enter a value to send to the custom function and select
    <strong>Store</strong>.
  </li>
  <li>
    Enter <strong>=CONTOSO.GETVALUE()</strong> into a cell to retrieve it.
  </li>
  <li>
    To send data to the task pane, in a cell, enter
    <strong>=CONTOSO.STOREVALUE("new value")</strong>
  </li>
  <li>Select <strong>Get</strong> to display the value in the task pane.</li>
</ol>

<p>Store new value to shared state</p>
<div>
  <input type="text" id="storeBox" />
  <button onclick="storeSharedValue()">Store</button>
</div>

<p>Get shared state value</p>
<div>
  <input type="text" id="getBox" />
  <button onclick="getSharedValue()">Get</button>
</div>

  3. </body> 要素を閉じる前に、次のスクリプトを追加します。 このコードは、ユーザーがグローバル データを保存または取得するときにボタンのクリック イベントを処理します。

    <script>
  function storeSharedValue() {
    let sharedValue = document.getElementById('storeBox').value;
    window.sharedState = sharedValue;
  }

  function getSharedValue() {
    document.getElementById('getBox').value = window.sharedState;
  }
</script>

  4. ファイルを保存します。

  5. プロジェクトをビルドします。

    npm run build

カスタム関数と作業ウィンドウの間でデータの共有を試す

  • 次のコマンドを使用してプロジェクトを開始します。

    npm run start

Excel が起動したら、作業ウィンドウのボタンを使用して共有データを保存または取得できます。 カスタム関数のセルに =CONTOSO.GETVALUE() を入力して、同じ共有データを取得します。 または =CONTOSO.STOREVALUE("new value") を使用して、共有データを新しい値に変更します。

注:

共有ランタイムを使用してカスタム関数から一部の Office API を呼び出すこともできます。 詳細については、「カスタム関数からの Microsoft Excel API の呼び出しについて」を参照してください。

関連項目