AngularでOfficeアドインを開発してみる

今回は Mocrosoft Outlookアドインを初めて開発してみる。

導入

👇の公式Doc参考にしました。
Visual Studio Code を使用して Office アドインを開発する

環境

VSCode
Node.js
Yeoman & Yeomonジェネレーター
- インストール

  npm install -g yo generator-office

アドインプロジェクトを作成する

Yeomanジェネレーターを使って作成してみる

yo office

👆のコマンドをたたくと、いろいろと設定を聞かれるので答える。

私はAngularをよく触っているので、Angularを選択

? Choose a project type
> Office Add-in Task Pane project using Angular framework

? Choose a script type
> TypeScript

? What would you want to name your add-in?(アドインの名前)
> My Office Add-in

? Which Office client application would you like to support?
> Outlook

cd コマンドでカレントディレクトリを作成したプロジェクトに移動しましょう

cd "My Office Add-in"

デバッグ実行してみる

npm start

証明書関係でいろいろ聞かれるが、とりあえず「はい」を選択。

Outlookアプリが立ち上がってくれた。

テスト用にアドインをサイドロードまで自動で行ってくれました。

手動で行いたい場合は👇の公式Docを参考にしながらやってみてください

https://docs.microsoft.com/ja-jp/office/dev/add-ins/outlook/sideload-outlook-add-ins-for-testing#sideload-manually

リボンのところに（特に変更してなければ）Contso Add-inの領域が表示されてると思います。

Show Taskpane からアドインを確認できます。

実際にコード書いてみる

今回は簡単なカウンタアプリを作成する
Angularプロジェクトで作成したので、👇のファイルに記述していきます。

app.component.html(src\taskpane\app\app.component.html)
app.component.ts(src\taskpane\app\app.component.ts)

app.component.html

主にmainの中をかえていく。

ボタンを定義
countした結果を表示するよう定義

app.component.html

<header class="ms-welcome__header ms-bgColor-neutralLighter ms-u-fadeIn500">
    <img width="90" height="90" src="../../../assets/logo-filled.png" alt="Contoso Task Pane Add-in" title="Contoso Task Pane Add-in" />
</header>
<main class="ms-welcome__main">
    <h2 class="ms-font-xl ms-fontWeight-semilight ms-fontColor-neutralPrimary ms-u-slideUpIn20"> counter </h2>

    <br />
    <br />
    <button (click)="run()">count</button>
    <br />
    <p>count: {{sum}}</p>
</main>

app.component.ts

カウントさせる変数を定義
サンプルからあるrun関数をそのまま使う
- 関数内でさっき定義した変数を+1させる

app.component.ts

export default class AppComponent {
  sum = 0;

  async run() {
    this.sum++;
  }
}

実行

npm start

👇実際に動かしてみた。（名前出てますが特に気にしないでください）

ソースはコチラ👇にあります。

npm startすれば自動でサイドロードされすぐ動作を試せるかと思います。

作ってみて感想・気になったこと

ジェネレーターで爆速でコーディングできたので強いと思った。
Angularに慣れてる分、APIリクエストを送るとかも簡単に実装できそう
Pipeline用のyamlっぽいのも自動生成してくれてたので参考になりそう。
まだコードの中身までは深くまで抑えれてないが、理解できそうな気がする。
もしデリバリするならばどんな感じでデリバリーさせるかなどはまだ踏み出せていないのそこらへんはままだ調査が必要になりそう。
Outlook以外のアドインもちょっと試してみたい。