最初の 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からのパッケージを最新のバージョンにすることをお勧めします。

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

  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. コードエディタで、./src/taskpane/taskpane.html ファイルを開き、全体の<main>要素(一部の<body>要素)を次のマークアップに置き換えます。 この新しいマークアップは、./src/taskpane/taskpane.js のスクリプトがデータを書き込む場所にラベルを追加します。

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

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

試してみる

注意

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

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

    npm start
    
  2. テスト用に Outlook アドインをサイドロードする」の手順に従って Outlook アドインをサイドロードします。

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

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

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

    注意

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

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

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

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

次のステップ

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