コンテンツまでスキップ

Outlook 365のアドインを作ってみる（１）

Microsoft365で、アドインの開発をしてみたときのメモです。まずは、公式のチュートリアルをそのままやってみることにしました（なので内容はチュートリアルと丸被りです）。

参考にした資料

最初の Outlook アドインをビルドするチュートリアル: メッセージ作成 Outlook アドインのビルド
https://learn.microsoft.com/ja-jp/office/dev/add-ins/tutorials/outlook-tutorial?tabs=jsonmanifest

前提条件

以下のソフトウェアをインストールする。

npm install -g yo generator-office
  • テキストエディタ(今回はVisual studio Codeを使っています)
  • Githubのアカウント(このチュートリアルではGistを使います)

手順1 Gistにコードを追加する

Gistに2コードを追加する。なお、Gistは公開(Public)とします。

  1. test.md
# Hello World

This is content converted from Markdown!

Here's a JSON sample:

  ```json
  {
    "foo": "bar"
  }
  ``` {data-source-line="34"}
  1. test.js
<html>
  <head>
    <style>
    h1 {
      font-family: Calibri;
    }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is a test</p>
  </body>
</html>

手順2 Outlook アドイン プロジェクトを作成する

1．Yeomanを使ってアドインのテンプレートを作成する。

yo office

C:\Users\tomin>yo office

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Office  │
    |--(o)--|    │   Add-in generator, by   │
   `---------´   │ @OfficeDev! Let's create │
    ( _´U`_ )    │    a project together!   │
    /___A___\   /╰──────────────────────────╯
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? Choose a project type: Office Add-in Task Pane project
? Choose a script type: JavaScript
? What do you want to name your add-in? mail_send_linq
? Which Office client application would you like to support? Outlook
? Which manifest type would you like to use? unified manifest for Microsoft 365

----------------------------------------------------------------------------------

      Creating mail_send_linq add-in for Outlook
      using JavaScript and Office Add-in Task Pane project and unified manifest for Microsoft 365
      at C:\Users\tomin\mail_send_linq

----------------------------------------------------------------------------------
  1. 以下のライブラリをインストールする。
  • MarkdownをHTMLに変換する Showdown
  • 相対URLを構築するためのURI.js
  • DOM の 操作を簡略化するための jQuery
npm install showdown urijs jquery --save
  1. マニュフェストを更新
    とりあえず、アドインの説明文を変更する。今回は、yo を実行時、「unified manifest for Microsoft 365」を指定したので、マニュフェストファイルは、"manifest.json"です。このファイルの説明文を変更します。
"description": {
    "short": "メール送信改善",
    "full": "メール送信改善を行うアドインです"
},

他にも会社名などの情報もあります。

"developer": {
    "name": "EvoLiNQ Corp.",
    "websiteUrl": "https://www.evolinq.link",
    "privacyUrl": "https://www.evolinq.link/privacy",
    "termsOfUseUrl": "https://www.evolinq.link/servicesagreement"
},

手順3 動かしてみる

プロジェクトのルートディレクトリで、以下のコマンドを実行します。
途中で、「Allow localhost loopback for Microsoft Edge WebView?」と聞いてきます。「Microsoft Edge WebViewでローカルホストのループバックを許可しますか？」ということなので、開発環境なので、”Y”を選択してきます。

PS C:\Users\tomin\mail_send_linq> npm start

> office-addin-taskpane-js@0.0.1 start
> office-addin-debugging start manifest.json

Debugging is being started...
App type: desktop
? Allow localhost loopback for Microsoft Edge WebView? Yes
�G���[: �A�N�Z�X�����ۂ���܂����B�Ǘ��҂Ƃ��ăR�}���h�����s���Ă�������

Failed to add loopback exemption.
Will try to sideload the Office Add-in without the loopback exemption, but it might not load correctly from localhost.

Enabled debugging for add-in b84e38d6-6180-4e06-a19c-291aa844e2cf.
Starting the dev server... (webpack serve --mode development)
The dev server is running on port 3000. Process id: 27200
Sideloading the Office Add-in...
Manifest package saved to C:\Users\tomin\AppData\Local\Temp\manifest.zip
running: npx @microsoft/teamsapp-cli install --file-path "C:\Users\tomin\AppData\Local\Temp\manifest.zip"

Using account tominari@evolinq.link
TitleId: U_d681c7ed-ef62-0686-906d-6ce268d1721d
AppId: b69b3f3b-2e25-4eb1-929c-2db73d87f690

Successfully registered package! (U_d681c7ed-ef62-0686-906d-6ce268d1721d)
 STDERR:

Launching outlook via C:\Program Files\Microsoft Office\Root\Office16\OUTLOOK.EXE
Debugging started.

これで、ローカル環境で、WEBサーバーが立ち上がり、さらにoutlookが起動します。

image-2

outlookのサイドメニューから、アプリの管理を選ぶと、一覧に作成したアドインが表示されます。

image-3

ここで、開くを押すと（？）、アドインが有効になっていました。
そして、outlook on the WEBでも、アドインが有効になりました。

長くなってきたので、一旦、ここで区切って、次回から処理を追加していきますね。
, ,