Evolution-linked records

Outlook 365のアドインを作ってみる(1)

作成者: TOMINARI Takayuki|Aug 18, 2024 2:12:24 AM

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が起動します。

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

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

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