次の方法で共有

Script Lab コードからスタンドアロンの Office アドインを作成する

Script Labでスニペットを作成した場合は、スタンドアロン アドインにすることもできます。 Script Lab から、Office アドイン用の Yeoman ジェネレーター ("Yo Office" とも呼ばれます) によって生成されたプロジェクトにコードをコピーできます。 その後、最終的に他のユーザーに展開できるアドインとしてコードの開発を続けることができます。

この記事の手順は Visual Studio Code を参照していますが、任意のコード エディターを使用できます。

新しい Yo Office プロジェクトを作成する

スタンドアロン アドイン プロジェクトを作成します。 このプロジェクトは、スニペット コードの新しい開発場所です。 Yeoman ジェネレーターを使用した Office アドイン プロジェクトの作成に関するページのガイダンスに従います。 スニペットがカスタム関数の場合は、ジェネレーターでカスタム関数オプションのいずれかを使用し、「 カスタム関数」セクションに進みます。

Script Lab でスニペットを開く

  1. Office (Word、Excel、PowerPoint、または Outlook) を開き、Script Lab を開きます。
  2. [Script Lab]>[コード] を選択します。
  3. Script Labでスニペットを開きます。

スニペット コードを Visual Studio コードにコピーする

スニペットから Visual Studio Code の Yo Office プロジェクトにコードをコピーできるようになりました。

Visual Studio Code で、アドイン プロジェクトを開きます。 次の手順では、Script Labのいくつかのタブからコードをコピーします。

Script Labのタブ。

作業ウィンドウ コードをコピーする

  1. Visual Studio Code で、 /src/taskpane/taskpane.ts ファイルを 開きます。 JavaScript プロジェクトを使用している場合、ファイル名は taskpane.jsです。
  2. Script Lab で、[スクリプト] タブを選択します。
  3. [スクリプト] タブのすべてのコードをクリップボードにコピーします。 taskpane.ts (または JavaScript の場合はtaskpane.js) の内容全体をコピーしたコードに置き換えます。

作業ウィンドウ HTML をコピーする

  1. Visual Studio Code で、 /src/taskpane/taskpane.htmlファイルを 開きます。
  2. Script Lab で、[HTML] タブを選択します。
  3. [HTML] タブのすべての HTML をクリップボードにコピーします。 <body> タグ内のすべての HTML をコピーした HTML に置き換えます。

作業ウィンドウ CSS をコピーする

  1. Visual Studio Code で、 /src/taskpane/taskpane.css ファイルを 開きます。
  2. Script Lab で、[CSS] タブを選択します。
  3. [CSS] タブのすべての CSS をクリップボードにコピーします。 taskpane.css の内容全体をコピーした CSS に置き換えます。
  4. 前の手順で更新したファイルへのすべての変更を保存します。

ライブラリのサポートを追加する

ライブラリの依存関係が追加されたスニペットを作成した場合は、次の手順を使用して Yo Office プロジェクトに追加します。

  1. Script Lab の [ライブラリ] タブですべてのライブラリの依存関係のリストを見つけます。
  2. ライブラリごとに、/src/taskpane/taskpane.htmlファイルの<head>に<script> タグを追加します。
  3. タグの src 属性をライブラリの URL に設定します。

詳細については、「 HTML スクリプト タグ src 属性」を参照してください。

ハンドルの初期化

Script Labは、Office.onReadyの初期化を自動的に処理します。 独自の Office.onReady ハンドラーを提供するようにコードを変更する必要があります。

  1. taskpane.ts (または JavaScript の場合は taskpane.js) ファイルを開きます。

  2. Office onReady および HTML DOM コンテンツ読み込み イベントへのコールバックで、イベント ハンドラーの割り当てをラップします。 たとえば、次のように置き換えます。

    document.getElementById("run").addEventListener("click", () => tryCatch(run));

    置換後:

    Office.onReady(function () {
  // Office is ready.      
  document.addEventListener("DOMContentLoaded", () => {
    // The document is ready.
    document.getElementById("run").addEventListener("click", () => tryCatch(run));
  });
});

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

カスタム関数

カスタム関数をスタンドアロンのアドインに変換するには、次の手順に従います。

  1. Excel を開き、次に Script Lab を開きます。
  2. [Script Lab]>[コード] を選択します。
  3. Script Labでスニペットを開きます。
  4. /src/functions/functions.ts ファイルを開きます。 JavaScript プロジェクトを使用している場合、ファイル名は functions.js です。
  5. Script Lab で、[スクリプト] タブを選択します。
  6. [スクリプト] タブのすべてのコードをクリップボードにコピーします。 コピーしたコードを functions.ts の上部 (または JavaScript の 場合はfunctions.js ) にコードを貼り付けます。
  7. ファイルを保存します。

スタンドアロン アドインをテストする

すべての手順を完了したら、スタンドアロン アドインを実行してテストします。 プロジェクトのルートでコマンド プロンプト、ターミナル、または bash シェルを開き、次のコマンドを実行して開始します。

npm start

Office が起動し、リボンからアドインの作業ウィンドウを開くことができます。 おめでとうございます! これで、スタンドアロン プロジェクトとしてアドインのビルドを続行できます。

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

npm stop

アドインのサイドローディング、テスト、トラブルシューティングの詳細については、 ドキュメントの「テストとデバッグ」セクションを参照してください。

コンソール ログ

Script Lab の多くのスニペットは、作業ウィンドウの下部にあるコンソール セクションに出力を書き込みます。 Yo Office プロジェクトにはコンソール セクションがありません。 すべての console.log* ステートメントは、既定のデバッグ コンソール (ブラウザー開発者ツールなど) に書き込まれます。 出力を作業ウィンドウに移動する場合は、コードを更新する必要があります。

  • Last updated on