Microsoft365で、アドインの開発をしてみたときのメモです。まずは、公式のチュートリアルをそのままやってみることにしました（なので内容はチュートリアルと丸被りです）。
最初の Outlook アドインをビルドするチュートリアル: メッセージ作成 Outlook アドインのビルド
https://learn.microsoft.com/ja-jp/office/dev/add-ins/tutorials/outlook-tutorial?tabs=jsonmanifest
以下のソフトウェアをインストールする。
npm install -g yo generator-office
Gistに2コードを追加する。なお、Gistは公開(Public)とします。
# Hello World
This is content converted from Markdown!
Here's a JSON sample:
```json
{
"foo": "bar"
}
``` {data-source-line="34"}
<html>
<head>
<style>
h1 {
font-family: Calibri;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a test</p>
</body>
</html>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
----------------------------------------------------------------------------------
npm install showdown urijs jquery --save
"description": {
"short": "メール送信改善",
"full": "メール送信改善を行うアドインです"
},
他にも会社名などの情報もあります。
"developer": {
"name": "EvoLiNQ Corp.",
"websiteUrl": "https://www.evolinq.link",
"privacyUrl": "https://www.evolinq.link/privacy",
"termsOfUseUrl": "https://www.evolinq.link/servicesagreement"
},
プロジェクトのルートディレクトリで、以下のコマンドを実行します。
途中で、「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でも、アドインが有効になりました。
長くなってきたので、一旦、ここで区切って、次回から処理を追加していきますね。