Office アドイン

[Officeアドイン]チュートリアルでアドインの開発方法を学ぶ

MicrosoftのOffice Dev Centerには、Office アドイン(Excel)のチュートリアルが用意されています。今回はこのチュートリアルの実行方法を紹介します。
(前回の記事とえらく方向性が違いますが、気にせず進めていきます)

要件

  1. Excel 2016 バージョン 1711 以降
  2. Node.js(npm)

※ Node.jsのインストール方法は下記記事をご参照ください。

環境設定

  1. GitHubにアクセスして、リポジトリをZip形式でダウンロードします。
  2. 手順1.のファイルを適当なフォルダに解凍します。「Start」フォルダがチュートリアル前のフォルダ、「Completed」フォルダがチュートリアル後の完成版フォルダとなるため、今回は「Start」フォルダを使用します。
  3. コマンドプロンプトで手順2.の「Start」フォルダを開き、下記コマンドを実行します。
  4. npm install

  5. 下記コマンドを実行してファイルをビルドします。
  6. npm run build
  7. 下記コマンドを実行すると、ローカルサーバーが立ち上がります。
  8. npm start

  9. 下記記事を参考に、Office アドインのマニフェストファイルを配置する共有フォルダを用意します。
  10. 手順2.の「Start」フォルダにある「my-office-add-in-manifest.xml」ファイル(マニフェストファイル)を手順6.の共有フォルダにコピーします。

以上でチュートリアルの環境設定は完了です。

コードの書き換え

環境設定が終わったら、今度はアドインファイルのコードを書き換えて、コーディング体験をします。

  1. 上記環境設定の手順2.の「Start」フォルダにある「index.html」ファイルをテキストエディタで開きます。
  2. 「TODO1」部分を下記の通り置換します。
  3. <button class="ms-Button" id="create-table">Create Table</button>

  4. 「bundle.js」を読み込んでいる部分を「app.js」を読み込むように修正し、ファイルを上書き保存します。
  5. 上記環境設定の手順2.の「Start」フォルダにある「app.js」ファイルをテキストエディタで開きます。
  6. 「TODO1」部分を下記の通り置換します。
  7. if (!Office.context.requirements.isSetSupported('ExcelApi', 1.7)) {
        console.log('Sorry. The tutorial add-in uses Excel.js APIs that are not available in your version of Office.');
    }

  8. 「TODO2: Assign event…」部分を下記の通り置換します。
  9. $('#create-table').click(createTable);

  10. 「TODO2: Add handlers…」部分を下記の通り置換します。
  11. function createTable() {
       Excel.run(function (context) {
    
           // TODO4: Queue table creation logic here.
    
           // TODO5: Queue commands to populate the table with data.
    
           // TODO6: Queue commands to format the table.
    
           return context.sync();
       })
       .catch(function (error) {
           console.log("Error: " + error);
           if (error instanceof OfficeExtension.Error) {
               console.log("Debug info: " + JSON.stringify(error.debugInfo));
           }
       });
    }

  12. 「TODO4」部分を下記の通り置換します。
  13. const currentWorksheet = context.workbook.worksheets.getActiveWorksheet();
    const expensesTable = currentWorksheet.tables.add("A1:D1", true /*hasHeaders*/);
    expensesTable.name = "ExpensesTable";

  14. 「TODO5」部分を下記の通り置換します。
  15. expensesTable.getHeaderRowRange().values = [["Date", "Merchant", "Category", "Amount"]];
    expensesTable.rows.add(null /*add at the end*/, [
       ["1/1/2017", "The Phone Company", "Communications", "120"],
       ["1/2/2017", "Northwind Electric Cars", "Transportation", "142.33"],
       ["1/5/2017", "Best For You Organics Company", "Groceries", "27.9"],
       ["1/10/2017", "Coho Vineyard", "Restaurant", "33"],
       ["1/11/2017", "Bellows College", "Education", "350.1"],
       ["1/15/2017", "Trey Research", "Other", "135"],
       ["1/15/2017", "Best For You Organics Company", "Groceries", "97.88"]
    ]);

  16. 「TODO6」部分を下記の通り置換し、ファイルを上書き保存します。
  17. expensesTable.columns.getItemAt(3).getRange().numberFormat = [['?#,##0.00']];
    expensesTable.getRange().format.autofitColumns();
    expensesTable.getRange().format.autofitRows();

以上でコードの書き換えは完了です。
コードの内容の詳細については「Create a table in Excel」をご参照ください。

チュートリアル用Office アドインの動作確認

「環境設定」でサーバーの準備~マニフェストファイルの設定、「コードの書き換え」でアドイン用のコードの準備ができたので、今度はOffice アドインの動作確認を行います。

  1. Excelを起動します。
  2. 「挿入」タブから「個人用アドイン」をクリックします。
  3. Office アドインダイアログが表示されたら、「共有フォルダー」から「My Office Add-in」を選択し、「追加」ボタンをクリックします。
  4. 「ホーム」タブに表示される「Show Taskpane」ボタンをクリックします。
  5. 作業ウィンドウにOffice アドインが表示されます。エラーが表示されますが、無視してページを表示します。
  6. Office アドインが実行されるので「Create Table」ボタンをクリックします。
  7. 「コードの書き換え」で書き換えたコードが反映され、シートにテーブルが挿入されます。

以上でOffice アドインのチュートリアルの基本的な流れは終了です。

おわりに

今回Microsoftが用意したチュートリアルを実際に体験してみましたが、「思ってたんと違うわ、コレ・・・」というのが正直な感想です。

私としては、チュートリアルだけあって、今までOffice アドインに触れてこなかった人(特に非開発者)にも分かりやすいレベルのものを想像していたのですが、蓋を開けてみれば真逆でした。

これは、ある程度Office アドイン開発を知っている人でないと起動すらままならない代物です。

これをやるなら、個人的には「Script Lab」を使ってコーディング体験した方がはるかにマシだと思います。

関連記事

  1. Office関連

    [Excel Services ECMAScript]タイマーでグラフを描画する。

    タイマーで特定のセルの値を増やしていき、それに合わせてグラフを描画して…

  2. Excel

    Excel向けPower BI カスタム ビジュアル機能の紹介

    Power BI ブログの記事「Excel announces new…

  3. Office関連

    蛍光ペンでマークした部分の文字数をカウントするWordマクロ

    Twitterでたまたま下記のツイートを見つけたので、簡単な処理を考え…

  4. Office関連

    コマンドマクロ一覧(Word 2013)

    Word 2013に組み込まれている「コマンドマクロ」のコマンド名、説…

  5. Excel

    ファイルをBase64エンコード・デコードするVBAマクロ

    以前書いたファイルのBase64エンコード・デコード処理を行うVBAマ…

  6. Office関連

    [Outlook]仕分けルールでスクリプト(マクロ)を実行する。

    Msdn フォーラムにあった質問関連でメモを残しておきます。…

コメント

  • コメント (0)

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

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

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP