次の方法で共有

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

  • [アーティクル]

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

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

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

スニペット コードの新しい開発場所となるスタンドアロンのアドイン プロジェクトを作成する必要があります。

コマンド yo office --projectType taskpane --ts true --host <host> --name "my-add-in" を実行します。ここで、<host> は次のいずれかの値です。

  • Excel
  • outlook
  • PowerPoint
  • Word

重要

--name の引数値は、スペースがない場合でも二重引用符で囲む必要があります。

前のコマンドでは、 my-add-in という名前の新しいプロジェクト フォルダーを作成します。 指定したホストで実行するように構成されており、TypeScript を使用します。 Script Lab は既定で TypeScript を使用しますが、ほとんどのスニペットは JavaScript です。 必要に応じて Yo Office JavaScript プロジェクトをビルドできますが、コピーするコードが JavaScript であることを確認してください。

Script Lab でスニペットを開く

Script Lab の既存のスニペットを使用して、Yo Office で生成されたプロジェクトにスニペットをコピーする方法について説明します。

  1. Office (Word、Excel、PowerPoint、または Outlook) を開き、Script Lab を開きます。
  2. [Script Lab]>[コード] を選択します。 Outlook で作業している場合は、メール メッセージを開いて、リボンに Script Lab を表示します。
  3. Script Labでスニペットを開きます。 既存のサンプルから始める場合は、[Script Lab] 作業ウィンドウに移動し、[サンプル] を選択します。

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

これで、VS Code のスニペットから Yo Office プロジェクトにコードをコピーできます。

  • VS Code で、my-add-in プロジェクトを 開きます。

次の手順では、Script Labのいくつかのタブからコードをコピーします。

Script Labのタブ。

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

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

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

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

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

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

jQuery サポートを追加する

Script Lab は、スニペットで jQuery を使用します。 コードを正常に実行するには、この依存関係を Yo Office プロジェクトに追加する必要があります。

  1. taskpane.html ファイルを開き、次のスクリプト タグを <head> セクションに追加します。

    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.js"></script>

    注:

    jQuery の特定のバージョンは異なる場合があります。 [ライブラリ] タブを選択すると、Script Lab が使用しているバージョンを確認できます。

  2. VS Code でターミナルを開き、次のコマンドを入力します。

    npm install --save-dev jquery@3.1.1
npm install --save-dev @types/jquery@3.3.1

追加のライブラリ依存関係を持つスニペットを作成した場合は、必ずそれらを Yo Office プロジェクトに追加してください。 Script Lab の [ライブラリ] タブですべてのライブラリの依存関係のリストを見つけます。

ハンドルの初期化

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

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

  2. Excel、PowerPoint、またはWordの場合は、次の値を置き換えます。

    $("#run").on("click", () => tryCatch(run));

    置換後:

    Office.onReady(function () {
  // Office is ready.
  $(document).ready(function () {
    // The document is ready.
    $("#run").on("click", () => tryCatch(run));
  });
});

  3. Outlook の場合は、次を置き換えます。

    $("#get").on("click", get);
$("#set").on("click", set);
$("#save").on("click", save);

    置換後:

    Office.onReady(function () {
  // Office is ready
  $(document).ready(function () {
    // The document is ready
    $("#get").on("click", get);
    $("#set").on("click", set);
    $("#save").on("click", save);
  });
});

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

カスタム関数

スニペットでカスタム関数を使用する場合は、Yo Office カスタム関数テンプレートを使用する必要があります。 カスタム関数をスタンドアロンのアドインに変換するには、次の手順に従います。

  1. コマンドyo office --projectType excel-functions --ts true --name "my-functions"を実行します。

    重要

    --name の引数値は、スペースがない場合でも二重引用符で囲む必要があります。

  2. Excel を開き、次に Script Lab を開きます。

  3. [Script Lab]>[コード] を選択します。

  4. Script Labでスニペットを開きます。 既存のサンプルから始める場合は、[Script Lab] 作業ウィンドウに移動し、[サンプル] を選択し、[カスタム関数] セクションで検索します。

  5. /src/functions/functions.ts ファイルを開きます。 JavaScript プロジェクトを使用している場合、ファイル名は functions.js です。

  6. Script Lab で、[スクリプト] タブを選択します。

  7. [スクリプト] タブのすべてのコードをクリップボードにコピーします。 コピーしたコードを functions.ts の上部 (または JavaScript の 場合はfunctions.js ) にコードを貼り付けます。

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

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

すべての手順が完了したら、スタンドアロン アドインを実行してテストします。 次のコマンドを実行して開始します。

npm start

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

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

npm stop

コンソール ログ

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