Office アドイン

Office アドイン開発をはじめよう!(2016年10月版)

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

“知名度が低い!”

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

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

そこで今回は“これさえあれば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. officeaddin_getstarted_napa_01

    officeaddin_getstarted_napa_02

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

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

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

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

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

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

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

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

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

  24. コードを下記のように書き換えます。
  25. ・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);
                }
            }
        );
    }
  26. Excel Onlineの画面に戻り、ページを更新します(F5キー)。
  27. 再びアドイン上にある「Get data from selection」ボタンをクリックすると、今度は選択したセルに「さようなら」と入力されます。
  28. officeaddin_getstarted_napa_13

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

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

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

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

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

【ライバルカード】親愛の魔王ルシ子QRが出る確率は?前のページ

【3月のライオン】色紙ARTを買ってみたよ。次のページ

関連記事

  1. Office アドイン

    [Officeアドイン]アドイン コマンド(Add-In Commands)の紹介(2)

    昨年末に書いた記事で「アドイン コマンド」を紹介しているのですが、知ら…

  2. Office アドイン

    「マイクロソフト Office 用アプリ開発スタートアップガイド」レビュー

    ※ 下記レビューはあくまでも個人的な感想です。日本初(恐らく)…

  3. Office アドイン

    [Office用アプリ]日経パソコン 2013/8/26号 の記事

    日経パソコン 2013/8/26号 のニュース&トレンドにOffice…

  4. Office アドイン

    [Officeアドイン]Office JavaScript API Helpersを使って楽にアドイ…

    Office アドインとMicrosoft Teamsタブには、開発を…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

Time limit is exhausted. Please reload CAPTCHA.

※本ページはプロモーションが含まれています。

Translate

最近の記事

アーカイブ

PAGE TOP