最初の Outlook アドインをビルドする

この記事では、選択したメッセージのプロパティを、少なくとも 1 つ表示する Outlook 作業ウィンドウ アドインを作成するプロセスについて説明します。

アドインを作成する

Office アドイン用の Yeoman ジェネレーター または Visual Studio を使用して Office アドインを作成することができます。 Yeoman ジェネレーターでは Visual Studio Code またはその他のエディターで管理できる Node.js プロジェクトを作成します。一方、Visual Studio では Visual Studio のソリューションを作成します。 使用する方のタブを選択し、手順に従ってアドインを作成してローカルでテストします。

前提条件

注:

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

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

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

    npm install -g yo generator-office
    

    注:

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

  • Visual Studio Code (VS Code) またはお好みのコード エディター

  • Windows 上の Outlook 2016 以降 (Microsoft 365 アカウントに接続されたもの) または Outlook on the web

アドイン プロジェクトの作成

  1. 次のコマンドを実行し、Yeoman ジェネレーターを使用してアドイン プロジェクトを作成します。

    yo office
    

    注:

    yo officeコマンドを実行すると、Yeoman のデータ収集ポリシーと Office アドイン CLI ツールに関するプロンプトが表示される場合があります。 提供された情報を使用して、必要に応じてプロンプトに応答します。

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

    • Choose a project type: (プロジェクトの種類を選択) - Office Add-in Task Pane project

    • Choose a script type: (スクリプトの種類を選択) - JavaScript

    • What would you want to name your add-in? (アドインの名前を何にしますか) - My Office Add-in

    • Which Office client application would you like to support?: (どの Office クライアント アプリケーションをサポートしますか) - Outlook

    コマンド ライン インターフェイスでの Yeoman ジェネレーターのプロンプトと回答を示すスクリーンショット。

    ウィザードを完了すると、ジェネレーターによってプロジェクトが作成されて、サポートしているノード コンポーネントがインストールされます。

    ヒント

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

  2. Web アプリケーション プロジェクトのルート フォルダーに移動します。

    cd "My Office Add-in"
    

プロジェクトを探究する

Yeomanジェネレーターで作成したアドインプロジェクトには、原型となる作業ペインアドインのサンプルコードが含まれています。

  • プロジェクトのルート ディレクトリにある./manifest.xmlファイルで、アドインの機能と設定を定義します。
  • ./src/taskpane/taskpane.htmlファイルには、作業ペイン用のHTMLマークアップが含まれています。
  • ./src/taskpane/taskpane.cssファイルには、作業ペインのコンテンツに適用されるCSSが含まれています。
  • ./src/taskpane/taskpane.jsファイルには、作業ペインとOutlookの間のやり取りを容易にするOffice JavaScript APIコードが含まれています。

コードを更新する

  1. VS Codeまたは任意のコード エディターでプロジェクトを開きます。

    ヒント

    Windows では、コマンド ラインからプロジェクトのルート ディレクトリに移動し、code . を入力して VS Code でそのフォルダーを開くことができます。 Mac では、VS Code でプロジェクト フォルダーを開くためにそのコマンドを使用する前に、code コマンドをパスに追加する必要があります。

  2. ファイル ./src/taskpane/taskpane.html を開き、main> 要素全体< (body> 要素内) を<次のマークアップに置き換えます。 この新しいマークアップは、./src/taskpane/taskpane.jsのスクリプトがデータを書き込む場所にラベルを追加します。

    <main id="app-body" class="ms-welcome__main" style="display: none;">
        <h2 class="ms-font-xl"> Discover what Office Add-ins can do for you today! </h2>
        <p><label id="item-subject"></label></p>
        <div role="button" id="run" class="ms-welcome__action ms-Button ms-Button--hero ms-font-xl">
            <span class="ms-Button-label">Run</span>
        </div>
    </main>
    
  3. コードエディターで、ファイル./src/taskpane/taskpane.jsを開き、実行関数内に次のコードを追加してください。 このコードは、Office JavaScript API を使用して、現在のメッセージへの参照を取得し、その subject プロパティの値をタスクペインに書き込むものです。

    // Get a reference to the current message
    const item = Office.context.mailbox.item;
    
    // Write message property value to the task pane
    document.getElementById("item-subject").innerHTML = "<b>Subject:</b> <br/>" + item.subject;
    

試してみる

注:

開発の最中でも、OfficeアドインはHTTPではなくHTTPSを使用する必要があります。 次のいずれかのコマンドを実行した後に証明書をインストールするように求められた場合は、Yeoman ジェネレーターによって提供される証明書をインストールするプロンプトを受け入れます。 変更を行うには、管理者としてコマンド プロンプトまたはターミナルを実行する必要がある場合もあります。

  1. プロジェクトのルート ディレクトリから次のコマンドを実行します。 このコマンドを実行すると、ローカル Web サーバーが起動し、アドインが サイドロード されます。

    npm start
    
  2. Outlook で、閲覧ウィンドウでメッセージを表示するか、独自のウィンドウでメッセージを開きます。

  3. ホームタブ(または新しいウィンドウでメッセージを開いた場合はメッセージタブ)を選択し、リボンのタスクパネルの表示ボタンを選択、アドインの作業ペインを開きます。

    アドイン リボン ボタンが強調表示された Outlook のメッセージ ウィンドウのスクリーンショット。

    注:

    作業ウィンドウで、「このアドインを localhost から開くことはできません」 というエラーが表示される場合は、「トラブルシューティングの記事」 に記載されている手順に従ってください。

  4. WebView Stop On Load ダイアログ ボックスでプロンプトが表示されたら、OK を選択します。

    注:

    [キャンセル] を選択すると、このアドインのインスタンスの実行中はダイアログが表示されなくなります。 ただし、アドインを再起動すると、ダイアログはもう一度表示されます。

  5. 作業ペインの下部までスクロールし、実行リンクを選択してメッセージを作業ペインに書き込みます。

    実行リンクが強調表示されたアドインの作業ウィンドウを示すスクリーンショット。

    メッセージの件名を表示するアドインの作業ウィンドウのスクリーンショット。

次の手順

おめでとうございます、最初のOutlook作業ペインアドインの作成に成功しました。 次に、Outlook アドインの機能の詳細説明と、より複雑なアドインを作成する方法について、「Outlook アドインのチュートリアル」をご覧ください。

関連項目