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

共有ランタイムを使用して、Excel アドインのカスタム関数と作業ウィンドウ間でグローバル データを共有します。 このチュートリアルでは、同じ変数を読み取って更新する関数と作業ウィンドウ コントロールを追加します。

前提条件

Excel カスタム関数のチュートリアルを完了し、作成したアドインを使用します。 プロジェクトでは、共有ランタイム プロジェクトの種類と JavaScript スクリプトの種類を使用して Excel カスタム関数を使用する必要があります。

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

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

1. Visual Studio Code で 、src/functions/functions.jsを開きます。

2. ファイルの先頭に、次のコードを追加します。 このコードは、 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 を追加して、グローバル データを格納および取得するコントロールを作成します。

   <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> 要素の前に、次のスクリプトを追加して 、Store と Get ボタンのイベントを処理します。

   <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

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

1. プロジェクトを開始します。

npm run start

1. 作業ウィンドウで値を入力し、[ストア] を選択 します。
2. Excel セルに「 =CONTOSO.GETVALUE() 」と入力して、同じ値を取得します。
3. 別のセルに「 =CONTOSO.STOREVALUE("new value") 」と入力して、共有値を更新します。
4. 作業ウィンドウで、[ 取得 ] を選択して、更新された値を表示します。

開発サーバーを停止してアドインをアンインストールする準備ができたら、次のコマンドを実行します。

npm run stop

関連項目

• Excel カスタム関数のチュートリアル
• 共有ランタイムを使用するように Office アドインを構成する