Officeアドインを手順に沿って作成


# はじめに

なんとなくイメージがつかない新アドイン。officeのCOMなども使えなくなっていくそう。
ExcelはまだVBAと離れることはなさそうですが、Outlookはアドオンがサーバベースとなり、COMからの離脱が早々に行われそうなので、学習。

https://learn.microsoft.com/ja-jp/office/dev/add-ins/quickstarts/outlook-quickstart?tabs=visualstudio

# 準備

## VSCodeのインストール

VSCodeはインストールしていましたが、下記が入っているか確認。

> 以前に Visual Studio 2019 以降をインストールしている場合は、Visual Studio インストーラーを使用して、Office/SharePoint 開発ワークロードがインストールされていることを確認します。


https://learn.microsoft.com/ja-jp/visualstudio/install/modify-visual-studio?view=vs-2022

VSコードのインストーラを起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/9b1e3e5c-d4bf-7974-dbcd-50475e405fd3.png)

変更ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/75dfbb3c-8774-1f61-1807-a10409ba173e.png)

officeビルドツールにチェックが入っていたので、大丈夫そうです。
チェックが入っていない場合、選択 > インストールしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/62acc92d-2590-d105-8606-2e8dbfdad3d8.png)

### おや？


> [Visual Studio] メニュー バーで、[ファイル]>[新規作成]>[プロジェクト] の順に選択します。

ツールが2019版、今回利用したのが2022のためか上記がメニューから出てきません。

## 改めて準備 ~ 開発環境のセットアップ

https://learn.microsoft.com/ja-jp/office/dev/add-ins/overview/set-up-your-dev-environment?tabs=yeomangenerator

> Node.js (アクティブ LTS バージョン)
npm (Node.js と共にインストール)
Yeoman - v4.x (以上)
Microsoft Office 用 Yeoman ジェネレーター - v1.9.5
Visual Studio Code (VS Code) またはお好みのコード エディター

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/97fd278c-3453-cdd3-63f2-ab425a4393c4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/04706d61-efb6-e80a-ea91-daee6d273bdb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/08eb3f24-d941-1480-93be-02ea86bc9bde.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/05ca7b8c-f6dd-911d-7757-9ae3d2c672f9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/fe885bb8-0cf3-9fdc-0b20-b4967b115878.png)

インストール後

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/07feff46-ab66-78f6-533c-646036ef17ad.png)

``` 
// Yeoman ジェネレーターをインストールする - Yo Office
npm install -g yo generator-office
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/238ef992-cbed-43db-4c65-926192e45fd3.png)

## アドイン プロジェクトの作成
ようやく始められます。
ジェネレータからプロジェクトを作成します。

アドインを作成するためのフォルダにコマンドで移動(cd)、フォルダ移動後に下記コマンドを実行。

``` 
// Yeoman ジェネレーターを使用してアドイン プロジェクトを作成
yo office
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/b092b365-ed02-5cf8-91ab-b589d674a91d.png)

マニフェストファイルは作成することにしました。

## ソースを書き換える
手順に従って書き換える。


# 試してみる
## アドインを個人管理用に追加
手動でサイドロードが安定…と思ったらエラーに。なぜ？

### GIDをちゃんと割り振ろう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/73dd8b9a-6e54-09cb-2bf2-75263c561d53.png)

デフォルトではマニフェストのIDがOFFICEになっています。このためログインを求められたり？するみたいですが、エラーになります。

https://atmarkit.itmedia.co.jp/ait/articles/1301/25/news063_3.html

> Officeアドインに固有のGUID（この例では「8CFD3187-0DA1-4665-8442-BC35F5432557」）を作成して、 （2） のとおりに設定する（固有のGUIDを生成するには、例えば「Generate GUIDs online」のようなオンライン・サービスを使えばよい）。

https://www.guidgen.com/

## アドインはインストールできた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/f2c716b9-77d3-01ed-77b1-7d2ec0809393.png)

## 動作を確認しよう
メッセージから「タスクパネル」を表示して確認…といわれたものの表示がわからず右往左往。
「リボン」が「シンプルリボン」だったため表示されていませんでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/b4478d51-11b6-3ea4-4bf3-9aa6d138ece4.png)

メニューから「クラシックリボン」を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/bf25d5bf-2f65-1bdf-55b5-7a8d563a4685.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/586aea32-d336-e725-fb40-7edf31811def.png)

でた～～～！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20262/b11234f8-5fc3-bfbf-e955-25a7630570c1.png)

無事タスクパネルに表示されました。