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以外のアドインもちょっと試してみたい。