概要

Office Add-ins の作成から公開までの流れを体験するため、
Excel の画面上で動作するテキストエディタを作成しました。

全体像

エディタ (ダークモード)

設定画面 (ライトモード)

使用したもの

Yeoman (generator-office)
TypeScript
React
Google Fonts
FluentUI
monaco-editor/react

UIライブラリについてはMSなので FluentUI が推奨されています。
認証ポリシーの中に「FluentUI を使用していること」という一文を見かけたような気がしましたが、
ストアにある Office-Addins を見る限り、FluentUI を使用しなければならないということはなさそうでした。
FluentUI は多少のとっつきにくさはあったけど、なかなか使いやすいと思いました。
やはりさすがに Office アプリケーションとよく馴染むなぁといった感じです。

今回は Excel との連携が全くないアドインを作成しましたが、
本来は Excel JavaScriptAPI を通して相互作用をするものを作る感じになりますね。

特有のポイント

設定値

Office Add-ins 自体が何かしらの設定値を持っている場合が多いと思います。
今回の例でいうとテーマや言語など、設定画面に並んでいる項目がそれにあたります。

このような設定は

変更した時に画面上に反映される
次回起動時に前回の状態が復元される

の、2つの実装をする必要がありました。

例としてテーマを変更した際の実装は以下のような感じです。

const [selectedTheme, setSelectedTheme] = React.useState<string | undefined>(props.theme)
const onThemeChange = React.useCallback((_event: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption) => {
    const changedTheme = option.key
    setSelectedTheme(changedTheme)
    props.setTheme(changedTheme)

    Office.context.document.settings.set('theme', changedTheme)
    Office.context.document.settings.saveAsync((asyncResult) => {
        if (asyncResult.status == Office.AsyncResultStatus.Failed) {
            isLogging && console.log(`[Addins] [${moduleName}] Save Failed : Theme "${changedTheme}"`)
        } else {
            isLogging && console.log(`[Addins] [${moduleName}] Save Doned : Theme "${changedTheme}"`)
        }
    })
}, [])

プロダクトの規模感が小さかったので、すべての設定値は useState で扱うことにしました。
上記のように設定値が更新された場合にはまず state を更新することで画面に反映させています。

その後 Office.context.document.settings に対してもその設定値を保持させています。
これは OfficeAdd-ins が実行しているコンテキストのファイルに埋め込むということなので、
今回の場合だと Excel ファイルに設定値が保存されます。

OfficeAdd-ins 起動時には Office.context.document.settings から対象の設定値を各 State に読み出しますが、
設定値が存在しなければ (初回起動時など)、既定値を流し込みます。
大体の OfficeAdd-ins で設定値の運用はこの形でいけるかと思います。

テーマ

FluentUI でもテーマは ThemeProvider でシンプルに実装できました。

import { ThemeProvider } from "@fluentui/react"

//......

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <ThemeProvider>
        <Component title={title} isOfficeInitialized={isOfficeInitialized} />
      </ThemeProvider>
    </AppContainer>,
    document.getElementById("container")
  )
}

公開

結論からいうと Office ストアへの公開は不可能でした。
審査がどうこう以前に、開発者登録の時点でリジェクトの嵐に見舞われ突破できませんでした。

VSCode の Extension の場合はこの辺り簡単に公開ができたのですが、
Office-Addins は MS Partner Center から開発者登録をする必要があります。

これがまた画面遷移のたらい回しにあったり、書類を揃えたり、
そうこうしているうちに「…あ、もういいですわ…」ってなってしまうこと請け合いです。

せっかくWeb技術で開発ができます！セキュリティ面も安全です！マルチプラットフォームです！な基盤を用意したのに、
最後の公開部分がここまで大きな壁になっているのは残念としか言えないです。