Microsoft Officeのアドイン開発:Word編

2021.06.03.木
JavaScript

開発部の柳井です。今回はJavaScriptの記事です。

アプリケーションはそれ自体の機能のみでなく、拡張機能(アドイン・アドオンとも)をインストールすると好みの機能を追加出来るものがあります。例えばブラウザだとChromeFirefoxなどでアドインが提供されており、自社製品のGrpMailもChrome向けにGrpMail@Watcherという拡張機能があります。ブラウザだけでなく、Microsoft Officeの製品でもAppSourceというストアでアドインが提供されています。今回はWordのアドインについて紹介します。

概要

Office製品のアドインはHTML + JavaScript + CSSで構成されます。WordなどのOfficeアプリケーションの中で小さいブラウザが動作しているという感覚です。どこのWebサイトを見に行くかという情報は、XML形式のマニフェストファイルを参照します。Wordなどを開きながらWebサイトを見るだけではなく、Office.js(API)を使用することでWordなどのコンテンツそのものも操作出来ます。

チュートリアル

公式のチュートリアルを使いながら、Wordのテキストを抽出してみましょう。Visual Studioでもプロジェクトを作れますがここではnpmを使います。Node.jsとnpmをインストール後、YeomanとOfficeアドイン用のYeomanジェネレーターをインストールします。最新版ではありませんが、例えば以下の様にインストールされます。ちなみにMicrosoft公式ドキュメントの日本語版はinstallが「取り付ける」などたまに変な翻訳になっているところもあるので注意してください。

次に、Yeomanジェネレーターを使用してアドインのプロジェクトを作成します。質問項目が表示されるので、矢印キーで選択したり、プロジェクト名を入力します。

最初の質問で「Office Add-in Task Pane project using Angular framework」などを選ぶとAngular、React、Vue.jsなどのフレームワークを使えますが、ここではバニラJavaScriptで行きます。

プロジェクト名のディレクトリに移動し、package.jsonを見ると、npmのコマンドが書かれています。以下のコマンドを実行するとWebサーバが起動し、ファイルが変更された時も随時ビルドします。

https://localhost:3000というURLでこのWebサーバにアクセス出来る様になりますが、普通にブラウザでアクセスしても何も起きません。

以下を実行し、Word上からアドインを起動します。

Wordがうまく起動しなかったり、アドインのアイコンが[ホーム]の右端に表示されない場合は、[挿入]→[アドイン]→[個人用アドイン](下向き三角)→[開発者アドイン]から「Consoto〜」を選んでください。「Consoto」とはMicrosoftがよく使う「サンプル」とか「ほげほげ」の意味です。

アドインが右側に表示されたら、下部の「Run」をクリックしてみましょう。「Hello World」という文字が青色でWordに挿入されます。

こちらにあるサンプルコードでは、テキストを変更したり画像を挿入したりしています。JavaScriptからWordのコンテンツにアクセスするので非同期処理としてasync/awaitが書かれています。今回はこちらを参考に、Wordのテキスト全体を取得します。サンプルコードによってはOffice.initializeとOffice.onReady()の違いがありますが、最初は気にしなくて良いです。$(‘#submit’)の様なセレクターを使いたい場合は、適宜jQueryを追加してください。



サンプルのsendFile()内では、抽出したテキストをWebサーバにPOSTしていますが、今回のgetText()ではテキストボックスに表示するだけです。Office.jsの仕様上、document.getFileAsync()は一気にテキストを抽出出来ず、file.getSliceAsync()で少しずつ抽出します(slice)。抽出したテキストをまとめるためにPromise.all()を使っています。細切れなのが分かる様にsliceSizeを100バイトにしていますが、サンプルにある様に100,000バイトなら余裕で動きます。

開発と公開

console.log()を使っていますが、macのSafariのWebインスペクタを使うにはこちらのコマンドで設定を変更する必要があります。なお、開発者ツールはmacではSafari、WindowsではOSやOfficeのバージョンによってEdge・IE11など内部で動作するブラウザのものになります。

npmで起動するWebサーバではなくApacheなどを使う場合は、ドキュメントルートにビルドしたファイルを配置し、Word側でサイドロード(ストアで公開しない場合)の設定をします。macでは特定のフォルダに、Windowsの場合は任意の共有フォルダーにマニフェストファイルを置きます。またはAppSourceで公開したり、Office365の管理センターで組織内ユーザに展開したりも出来ます。

デスクトップ(OSのネイティブ)のアプリケーションは、アドインだとしてもCやSwiftなどを使わないといけないとイメージしていましたが、JavaScriptで手軽に開発が出来る様になっています。Officeを使いながら何かを自動化したい時などにいかがでしょうか?





キー・ポイントでは、課題を自分で解決しようとするエンジニアを募集しています。

-->
柳井裕子

柳井裕子 の紹介

2016年入社、開発部所属。主にWatasoon、WebFile(自社サービス)の他、受託案件にも携わっています。開発日誌ではVRオフィス見学などを投稿してます。