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

  • [アーティクル]

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

前提条件

  • Node.js (最新 LTS バージョン)。 Node.js サイトにアクセスして、オペレーティング システムに適したバージョンをダウンロードしてインストールします。

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

    npm install -g yo generator-office

    注:

    Yeomanのジェネレーターを過去に取付けている場合でも、npmからのパッケージを最新のバージョンにすることをお勧めします。

  • Microsoft 365 サブスクリプションに接続されている Office (Office for the web を含む)。

    注:

    まだ Office をお持ちでない場合は、Microsoft 365 開発者プログラムを通じてMicrosoft 365 E5開発者サブスクリプションを受ける資格があります。詳細については、FAQ を参照してください。 または、 1 か月間の無料試用版にサインアップ するか、 Microsoft 365 プランを購入することもできます。

  • 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コマンドを再度実行する必要があります。

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

    • プロジェクトの種類を選択します。Office Add-in project containing the manifest only
    • アドインに何の名前を付けたいですか?My Office Add-in
    • サポートする Office クライアント アプリケーションはどれですか?Excel

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

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

ヒント

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

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

すべてのアドインのシナリオで厳密に求められるわけではないものの、アドインに対して HTTPS エンドポイントを使用することを強くお勧めします。 SSL で保護されている (HTTPS) のではないアドインは、使用中に、保護されていないコンテンツの警告やエラーを生成します。 アドインをOffice on 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 を開き、[リソース]> タグ内のタグを<見つけます。<bt:Urls> ID Taskpane.Url を持つ <bt:Url> タグを検索し、その DefaultValue 属性を更新します。 新しい DefaultValue は https://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 アドインのチュートリアルに従って、より複雑なアドインをビルドします。

Excel アドインのチュートリアル

トラブルシューティング

関連項目