Office Add-inのマニフェストファイルをつくる

電氣羊 @ Goldenbridge in Osaka

2020年01月16日

”Office Add-in”については書籍はほとんどありません。

Webの情報が頼りです。

というわけで、ドキュメントに目を通してみます。

https://docs.microsoft.com/ja-jp/office/dev/add-ins/

Office Add-inに必要なものは、

Add-inの概要が書かれたマニフェストファイル（XML）
Add-inの起点となるHTMLファイル
Add-inの動作を記述したJavaScriptファイル

ですね。

あと、2と3のファイルをホストするサーバーも必要ですが、個人で使う分や開発段階では開発サーバーでも十分でしょう。

# マニフェストファイルとは

Office Add-inは、アプリケーションの起動時にマニフェストファイルを読み込みます。

そしてそこに書かれているホストドメインを、Officeアプリケーションの中で開けるようになります。

Officeとブラウザの間でプロセス間通信をしながら処理をするような形です。

さて、このマニフェストファイル。

Microsoftの審査に通ったものはストアにあるのですが、

開発段階では「サイドロード」という方法でOfficeに読み込ませます。

ところがこの説明がなかなかわかりづらい……

マニフェストの作り方や、プラットフォームごとのサイドロードの仕方が別のページにあったり、

「サイドロードしたファイルの削除の仕方」が見つからなかったり……

いくつか手探りでやったことをメモします。

# マニフェストの作製

Visual Studio（+IIS）でテンプレートを使うこともできますが、何せ起動が遅い。

公式ドキュメントの説明を読んでも、なかなかわからないところが多いです。

ここでは公式が推奨しているもう一つの方法、Node.jsのツールを使う方法をお勧めします。

https://github.com/OfficeDev/generator-office

まずはnpmを使って専用のツールをインストールします。

※私はyarn派ですけどね。

プロジェクトごとに使い分ける性質のものでもないので、グローバルでいいでしょう。

npm -g install yo
yo office

インストールが終わったら、そのまま yo と入力すれば、インタラクティブな表示がされます。

あとは作りたいコンテンツに合わせてカーソルで選んでいくだけ。

AngularやReactも使えますし、Typescriptも使えます。

※※ここには表示されていませんが、私はVue.js派です。もちもんVueも問題なく使えます。

一通りの設定ができたら、必要なファイルが作成されます。

これでプロジェクトのひな型ができました。

# サイドロードしてみる

yoコマンドでPowerShellに表示される指示のとおり

cd ”My Office Add-in”
npm start

と打ち込めばOk……

のはずなのですが、なにやらエラーがでる。

Error: Unable to sideload the Office Add-in. 
Error: Unable to delete registry value "C:\My Office Add-in\manifest.xml" in key "HKCU\SOFTWARE\Microsoft\Office\16.0\W
ef\Developer".
ProcessUncleanExitError: DELETE command exited with code 1:

・ｽG・ｽ・ｽ・ｽ[: ・ｽw・ｽ閧ｳ・ｽ黷ｽ・ｽ・ｽ・ｽW・ｽX・ｽg・ｽ・ｽ ・ｽL・ｽ[・ｽﾜゑｿｽ・ｽﾍ値・ｽ・ｽ・ｽ・ｽ・ｽﾂゑｿｽ・ｽ・ｽﾜゑｿｽ・ｽ・ｽﾅゑｿｽ・ｽ・ｽ

どうやらレジストリをいじるのに失敗しているようですね。

最後に文字化けしているのが怪しい……

というわけで、PowerShellの文字コードをUTF-8に変えてみます。