私がずっと追いかけている「Office アドイン(旧名：Office 用アプリ)」、登場から4年が経過した今でも、

“知名度が低い！”

低いなんてものじゃない。
Microsoft Officeユーザーのほとんどは知らないんじゃないか？と思えるくらい超マイナーな機能と化しています。

当ブログでは専用カテゴリーを作るくらい色々記事を書いてきたわけですが、正直全くと言っていいほどアクセスがありません。

そこで今回は“これさえあればOffice アドイン開発を体験できるよ！”という観点で、Office アドインのことを紹介してみようと思います。

Office アドインの概要

Office アドインの概要については下記の記事にまとめているので、そちらをご参照ください。

2015.09.28

Office アドインの概要

先日書いた記事「Office 2016で進化したOffice アドイン」で、Office アドインの機能が追加されたことを紹介しましたが、今回は改めて“Office アドインとはなにか？”ということを紹介したいと思います。 Office アドインとは...

また、Microsoftが公開しているGitHubにも詳しい概要が記載されています。
(MSDNにも情報がありますが、GitHubの方が情報が新しいです。)

とりあえずOffice アドインとは、

1. WordやExcelといったOfficeアプリケーション(Online含む)上で動作するWebアプリである。
2. アドインの情報を記載したマニフェストファイル(XML)とアドイン本体となるWebページ(HTML + JavaScript)で構成される。
3. 文書内に埋め込まれたWebベースのオブジェクト、作業ウィンドウ、拡張したリボンからアドインの機能を呼び出せる。
4. 専用のJavaScriptライブラリ(JavaScript API for Office)を読み込むことで、アドインからOfficeドキュメントを読み書きできる。

といったところを押さえておけば問題ありません。

開発に必要なもの

1. インターネット環境(Webブラウザー)
2. Microsoft アカウント

テキストエディタやVisual Studioでアドインを開発することもできますが、開発体験するだけであれば、それらは不要です。デスクトップ版のOfficeすら不要で、Office Onlineが実行できるインターネット環境さえあればOKです。

Office アドインを開発してみる

それでは実際にOffice アドインを作ってみます。

1. Napaにアクセスし、Microsoft アカウントでサインインします。





2. 「このアプリがあなたの情報にアクセスすることを許可しますか？」との確認画面が表示された場合は「はい」ボタンをクリックします。



3. 作成するアドインの種類を選択する画面が表示されるので「Task pane Add-in for Office」(作業ウィンドウ アドイン)を選択し、プロジェクト名を入力後「Create」ボタンをクリックします。



4. アドイン本体となるWebページが自動的に生成されるので、ひとまずこの状態で「Run Project」ボタンをクリックします。



5. ポップアップをブロックしたとの警告が表示された場合は、ポップアップを許可します。



6. アドインが自動的にデプロイされ、Excel Onlineが立ち上がります。
7. 作業ウィンドウにアドインが表示されるので、「開始」ボタンをクリックしてアドインを実行します。



8. 「ブックの編集」から「ブラウザーで編集」をクリックします。



9. 適当なセルに適当な文字列を入力します。
10. 手順9.のセルを選択し、アドイン上にある「Get data from selection」ボタンをクリックします。



11. アドイン下部に選択したセルの値が表示されます。



12. Excel Onlineの画面はそのままにして、Napaでの作業に戻ります。
13. Exploreから「Home.js」を選択します。



14. コードを下記のように書き換えます。

・Before

function getDataFromSelection() {
    Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,
        function(result) {
            if (result.status === Office.AsyncResultStatus.Succeeded) {
                app.showNotification('The selected text is:', '"' + result.value + '"');
            } else {
                app.showNotification('Error:', result.error.message);
            }
        }
    );
}

・After

function getDataFromSelection() {
    Office.context.document.setSelectedDataAsync("さようなら",
        function(result) {
            if (result.status === Office.AsyncResultStatus.Failed) {
                app.showNotification('Error:', result.error.message);
            }
        }
    );
}

15. Excel Onlineの画面に戻り、ページを更新します(F5キー)。
16. 再びアドイン上にある「Get data from selection」ボタンをクリックすると、今度は選択したセルに「さようなら」と入力されます。

プログラム経験がある方であればもう分かるかと思いますが、手順10.の時点ではボタンクリック時にgetSelectedDataAsync メソッドが呼び出されセルの値を読み込み、手順16.の時点では、コードを書き換えたことによりsetSelectedDataAsync メソッドが呼び出され、セルに値を書き込んだわけです。

以上のように、Napaさえあれば手軽にOffice アドインを作ることができますが、その反面、下記のような注意点もあります。

1. Napaが勝手にマニフェストファイルを用意するため、アドインを細かく設定できない。
2. Napaが用意するマニフェストファイルはバージョンが古く、新しいAPIの機能が使えない。

ただ、手軽に開発でき、Office アドインの動作を確かめられるNapaは非常に便利なツールですので、Office開発者の方は是非さわってみてください。

そして、WordやPowerPoint、OneNoteといった他のアプリケーション用アドインも作ってみたい、もっと色々な機能を試してみたい、という方は、是非是非このブログや下記資料を参考にしてOffice アドインを作ってみてください！

• Office-js-docs_ja-jp
• https://github.com/Microsoft/Office-js-docs_ja-jp/tree/master/docs
• JavaScript API for Office について
• https://github.com/Microsoft/Office-js-docs_ja-jp/blob/master/docs/develop/understanding-the-javascript-api-for-office.md
• 任意のエディターを使用して Office アドインを作成する
• https://github.com/Microsoft/Office-js-docs_ja-jp/blob/master/docs/get-started/create-an-office-add-in-using-any-editor.md
• Napa で Office アドインを作成する
• https://github.com/Microsoft/Office-js-docs_ja-jp/blob/master/docs/get-started/create-an-office-add-in-with-napa.md
• Visual Studio での Office アドインの作成とデバッグ
• https://github.com/Microsoft/Office-js-docs_ja-jp/blob/master/docs/get-started/create-and-debug-office-add-ins-in-visual-studio.md