概要

Office、今回はWord上でアドインとして使えるアプリケーションの制作を試みました。
開発フレームワークはReactです。
なお筆者はReactを仕事で扱ったような経験はありません。

私が開発したプロジェクト上では下記のとおり。

% npm list --depth=0
~中略~
├── react@18.2.0

所感

既存アプリケーションのheadタグ内にscriptタグを埋め込めば、おそらく問題なく動作する
Yeoman generatorによる導入は、私のようなReact初学者には扱いが難しい
ブラウザコンソール上でエラーを確認しても、Office Word内では正常動作を確認できた

「既存アプリケーションのheadタグ内にscriptタグを埋め込めば、おそらく問題なく動作する」

これがこの記事の結論となります。

public/index.html

<!-- headタグ内に記述 -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

おまじないを付けておく

Office.jsは、下記設定をnullにするそうです。

window.history.replaceState = null;
window.history.pushState = null;

検証不足なのですが、おそらくブラウザコンソール上でこのエラーを確認できても、Office上では正常動作を確認できるかもしれないです。

それでも念の為、下記参考サイトのとおりに、headタグ内に追記を行って回避しています。コードはリンク先でご確認ください。

Office.jsの初期化について

Microsoftによる公式ドキュメントにも、初期化を行うべきだという記述がありますが、私は初期化せずとも正常動作を確認できました。あまりこの有無についてはよく分かっていないです。

「Yeoman generatorによる導入は、私のようなReact初学者には扱いが難しい」

Reactに慣れ親しんでいる方は yo office でプロジェクトひな形を作成するかたちでよいと思います。

該当Generatorは現在も開発が進んでいるそうですが、Reactのバージョンが最新でない等、useStateを使うのがやっとな私には扱いが難しかったです。

プロジェクト作成時のパッケージバージョン記載は下記。

package.json

  "dependencies": {
    "@fluentui/react": "^8.52.3",
    "core-js": "^3.9.1",
    "es6-promise": "^4.2.8",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "regenerator-runtime": "^0.13.7"
  },

「ブラウザコンソール上でエラーを確認しても、Office Word内では正常動作を確認できた」

一部と内容が重なりますが、動作確認はブラウザとOfficeの両方で行うとよいかと思います。

Uncaught (in promise) ReferenceError: Word is not defined

私はWord上で動くアドインを開発しましたが、ブラウザコンソール上で上記を確認しても、プログラムによってWordを操作することができました。

これがこの記事の肝であり、私はブラウザ上でデバッグを行っていたばかりに、Word上で動作確認をしないことで、かなりの時間を消費しました。
私のような被害者が生まれませんように…。

参考サイトリストは、今回各所にリンクを貼ったので割愛。