Vue を使用して Excel 作業ウィンドウ アドインを構築する

この記事では、Vue と Excel JavaScript API を使用して Excel 作業ウィンドウ アドインを構築するプロセスについて説明します。

前提条件

注意

Node.js または npm に慣れていない場合は、まず開発環境をセットアップする必要があります。

  • Node.js (最新 LTS バージョン)。

  • 最新バージョンの YeomanOffice アドイン用の Yeoman ジェネレーター。これらのツールをグローバルにインストールするには、コマンド プロンプトから次のコマンドを実行します。

    npm install -g yo generator-office
    

    注意

    以前に Yeoman ジェネレーターをインストールしている場合でも、npm からパッケージを最新バージョンに更新することをお勧めします。

  • Vue CLI をグローバルにインストールします。 ターミナルから、次のコマンドを実行します。

    npm install -g @vue/cli
    

新しい Vue アプリの生成

新しい Vue アプリを生成するには、Vue CLI を使用します。

vue create my-add-in

次に、「Vue 3」の Default プリセットを選択します (お好みで「Vue 2」を選択します)。

マニフェスト ファイルを生成する

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

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

    cd my-add-in
    
  2. Yeoman ジェネレーター使用して、アドインのマニフェスト ファイルを生成します。

    yo office
    

    注意

    yo officeコマンドを実行すると、Yeoman のデータ収集ポリシーと Office アドイン CLI ツールに関するプロンプトが表示される場合があります。 提供された情報を使用して、必要に応じてプロンプトに応答します。 2 番目のプロンプトに対して [終了] を選択した場合、アドイン プロジェクトを作成する準備ができたらyo officeコマンドを再度実行する必要があります。

    プロンプトが表示されたら、以下の情報を入力してアドイン プロジェクトを作成します。

    • Choose a project type: (プロジェクトの種類を選択) Office Add-in project containing the manifest only
    • What would you want to name your add-in?: (アドインの名前を何にしますか) My Office Add-in
    • Which Office client application would you like to support?: (どの Office クライアント アプリケーションをサポートしますか) Excel

    プロジェクトの種類がマニフェスト専用に設定されている Office アドイン用の Yeoman ジェネレーター コマンド ライン インターフェイス。

完了後、ウィザードは manifest.xml ファイルを含む 個人用 Office アドイン フォルダーを作成します。 マニフェストを使用して、アドインをサイドロードしてテストします。

ヒント

アドイン プロジェクトの作成後に Yeoman ジェネレーターが提供する 次の手順 ガイダンスは無視できます。 この記事中の詳しい手順は、このチュートリアルを完了するために必要なすべてのガイダンスを提供します。

アプリをセキュリティ保護する

すべてのアドインのシナリオで厳密に求められるわけではないものの、アドインに対して HTTPS エンドポイントを使用することを強くお勧めします。SSL で保護されている (HTTPS) のではないアドインは、使用中に、保護されていないコンテンツの警告やエラーを生成します。Office for the web でアドインを実行するか、AppSource にアドインを発行する場合は、アドインを SSL でセキュリティ保護する必要があります。アドインが外部データやサービスにアクセスする場合、アドインを SSL で保護して送信中のデータを保護する必要があります。自己署名証明書がローカル マシンで信頼されている限り、この証明書は開発とテストに使用できます。

  1. アプリの HTTPS を有効にします。 Vue プロジェクトのルート フォルダーに次の内容で vue.config.js ファイルを作成します。

    const fs = require("fs");
    const path = require("path");
    const homedir = require('os').homedir()
    
    module.exports = {
      devServer: {
        port: 3000,
        https: {
          key: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/localhost.key`)),
          cert: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/localhost.crt`)),
          ca: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/ca.crt`)),
         }
       }
    }
    
  2. アドインの証明書をインストールします。

    npx office-addin-dev-certs install
    

プロジェクトを探究する

Yeoman ジェネレーターで作成したアドイン プロジェクトには、基本的なアドインの作業ウィンドウのサンプル コードが含まれています。 アドイン プロジェクトの主要な構成要素を確認したい場合は、コード エディターでプロジェクトを開き、以下に一覧表示されているファイルを確認します。 アドインを試す準備ができたら、次のセクションに進みます。

  • プロジェクトのルート ディレクトリにある manifest.xml ファイルで、アドインの機能と設定を定義します。 manifest.xml ファイルの詳細については、「Office アドインの XML マニフェスト」を参照してください。
  • ./src/App.vue ファイルには、作業ウィンドウの HTML マークアップ、作業ウィンドウのコンテンツに適用される CSS、作業ウィンドウと Excel の間の対話操作を容易にする Office JavaScript API コードが含まれます。

アプリを更新する

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

    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
    
  2. manifest.xml を開き、<Resources> タグの中で <bt:Urls> タグを検索します。 ID Taskpane.Url を持つ <bt:Url> タグを検索し、その DefaultValue 属性を更新します。 新しい DefaultValuehttps://localhost:3000/index.html です。 更新されたタグ全体が次の行と一致する必要があります。

    <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/index.html" />
    
  3. ./src/main.js を開き、内容を次のコードで置き換えます。

    import { createApp } from 'vue'
    import App from './App.vue'
    
    window.Office.onReady(() => {
        createApp(App).mount('#app');
    });
    
  4. ./src/App.vue を開き、ファイル内容を次のコードで置き換えます。

    <template>
      <div id="app">
        <div class="content">
          <div class="content-header">
            <div class="padding">
              <h1>Welcome</h1>
            </div>
          </div>
          <div class="content-main">
            <div class="padding">
              <p>
                Choose the button below to set the color of the selected range to
                green.
              </p>
              <br />
              <h3>Try it out</h3>
              <button @click="onSetColor">Set color</button>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'App',
        methods: {
          onSetColor() {
            window.Excel.run(async context => {
              const range = context.workbook.getSelectedRange();
              range.format.fill.color = 'green';
              await context.sync();
            });
          }
        }
      };
    </script>
    
    <style>
      .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;
      }
    </style>
    

開発用サーバーの起動

  1. 開発用サーバーを起動します。

    npm run serve
    
  2. Web ブラウザーで https://localhost:3000 (https に注意) に移動します。 https://localhost:3000 のページが空白で、証明書エラーがない場合、それは機能していることを意味します。 Vue アプリは、Office の初期化後にマウントされるため、Excel 環境内のもののみを表示します。

試してみる

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

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

    [作業ウィンドウの表示] ボタンが強調表示されている Excel ホーム メニュー。

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

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

    アドイン作業ウィンドウが Excel で開きます。

次の手順

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

関連項目