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」を使ってコーディング体験した方がはるかにマシだと思います。

【ポケモンカード】シロナさんSRをゲットしました。前のページ

【スナックワールド】記憶のマナのしずく入手方法次のページ

関連記事

  1. Office関連

    テキストボックスの中にある表を操作するWordマクロ

    Yahoo!知恵袋で、「Wordマクロでテキストボックスの中にある表の…

  2. アイコン一覧

    Office 365アイコン(imageMso)一覧(V)

    Office 365のデスクトップ版Officeアプリケーション(Wo…

  3. Office関連

    [PowerPoint]Applicationオブジェクトのイベントを利用する

    PowerPointのApplicationオブジェクトには、スライド…

  4. Excel

    Google Calendar APIを使って日本の祝日を取得するVBAマクロ

    祝日の一覧を用意する必要があったので、Google Calendar …

  5. Office関連

    Microsoft Translator APIで文字列を翻訳するVBAマクロ

    以前書いた記事で、Google翻訳を使って文字列を翻訳するマクロを紹介…

コメント

  • コメント (0)

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

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

Time limit is exhausted. Please reload CAPTCHA.

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

Translate

最近の記事

アーカイブ

PAGE TOP