M365Con 2027 – 無料オンラインカンファレンス · 11–22 Jan 2027 · 120 sessions→ m365con.net

ブログ · Mirko Peters

VBAからOffice アドインへの移行:Web開発者が有利な理由

By ·

長年にわたり、一般にVBAとして知られるVisual Basic for Applicationsは、オフィス業務の自動化における揺るぎない王者でした。Microsoft ExcelやWordの中でカスタムフォームを作成したり、データ処理を自動化したり、複雑なレポートを生成したりしたい場合、VBAが主要なツールでした。しかし時代は変わりました。企業がクラウドファースト型のアーキテクチャ、クロスプラットフォーム対応、最新のWeb開発スタックを採用するにつれ、デスクトップに依存する従来のマクロは、技術的負債のボトルネックになりつつあります。

Automatically translated with AI from the original post. Read the English original

▶ BLOGMigrating from VBA toOffice Add-ins: Why Web…M365.FM
Titelbild: Migrating from VBA to Office Add-ins: Why Web Developers Have the Advantage

長年にわたり、一般にVBAとして知られるVisual Basic for Applicationsは、オフィス業務の自動化における揺るぎない王者でした。Microsoft ExcelやWordの中でカスタムフォームを作成したり、データ処理を自動化したり、複雑なレポートを生成したりしたい場合、VBAが主要なツールでした。しかし時代は変わりました。企業がクラウドファースト型のアーキテクチャ、クロスプラットフォーム対応、最新のWeb開発スタックを採用するにつれ、デスクトップに依存する従来のマクロは、技術的負債のボトルネックになりつつあります。

HTML、CSS、JavaScriptを理解しているモダンなWeb開発者であれば、Microsoft 365を拡張する際に大きな競争優位性を持っています。Windowsのアーキテクチャに縛られた旧式の言語を新たに学ぶ必要はありません。既存のWeb開発スタックを活用すれば、強力で安全なクロスプラットフォームのOfficeエクステンションを構築できます。キャリアと組織にとって最も賢明な選択が、VBAからモダンなOffice アドインへの移行である理由を詳しく見ていきましょう。

重要なポイント

Office アドインは、Office内で動作するWebアプリです。小さなXMLマニフェストが表示場所を制御し、Office JavaScript APIを使うと、コードから安全にドキュメントのデータを読み書きできます。一度構築すれば、Windows、Mac、Office on the Webで動作し、一般的なモダンWebアプリと同じように更新を配信できます。

Office アドインとは(そして何ではないか)

  • 該当するもの: Webサーバーでホストされる HTML/CSS/JS(または React/Angular/Vue)で、タスク ウィンドウ、コンテンツ アドイン、コマンドとしてOfficeに表示されます。
  • 該当しないもの: COM/VSTOのバイナリ、マシン用インストーラー、OSに依存するプラグイン。更新はWebアプリを再デプロイすることで配信されます。

複雑なマシンレベルのインストーラー、レジストリの編集、ローカルOSへの強い依存が必要だった従来のVSTO(Visual Studio Tools for Office)やCOMアドインとは異なり、モダンなOffice アドインは、基本的にOffice内に埋め込まれた安全なブラウザーコントロール内でホストされるWebページです。そのため、デプロイのパイプラインは他のWebアプリケーションのデプロイとまったく同じになります。

3つの主要な構成要素

  1. マニフェスト(XML): 設計図にあたる部分で、配置場所(リボン/コマンド)、適用範囲(Word/Excel)、アクセス許可、SourceLocation URLを定義します。
  2. Web アプリ: UIとロジックであり、任意のフロントエンドスタックで構築でき、APIと通信します。
  3. Office JS API: ブック/ドキュメントのデータへの橋渡し役です(非同期で、Office/Excel/Wordオブジェクトを通じて使用します)。

最小限のマニフェスト(コピー&ペースト用のスターター)

<?xml version="1.0" encoding="UTF-8"?><OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp" Version="1.0.0.0" Id="00000000-0000-0000-0000-000000000001" ProviderName="Contoso" DefaultLocale="en-US" DisplayName DefaultValue="Contoso Reports"> <Hosts> <Host Name="Workbook"/> <Host Name="Document"/> </Hosts> <DefaultSettings> <SourceLocation DefaultValue="https://yourdomain.com/addin/index.html"/> </DefaultSettings> <Permissions>ReadWriteDocument</Permissions> <VersionOverrides xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xsi:type="VersionOverridesV1_0"> <Hosts> <Host xsi:type="Workbook"> <Ribbons> <Ribbon> <Tabs> <Tab id="Contoso.Tab" label="Contoso"> <Group id="Contoso.Group" label="Reports"> <Control id="Contoso.OpenPane" label="Open" type="Button" superTip="Open Contoso task pane" onAction="ContosoAction.OpenPane"/> </Group> </Tab> </Tabs> </Ribbon> </Ribbons> <Actions> <FunctionFile resid="Contoso.FunctionFile.Url"/> <Function Name="ContosoAction.OpenPane"/> </Actions> </Host> </Hosts> <Resources> <bt:Urls xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"> <bt:Url id="Contoso.FunctionFile.Url" DefaultValue="https://yourdomain.com/addin/functions.html"/> </bt:Urls> </Resources> </VersionOverrides></OfficeApp>

ホストに合わせてSourceLocationとURLを変更してください。Permissionsは最小限に保ってください(たとえば、書き込みが本当に必要になるまではReadDocumentを使用します)。

最小構成の Excel コード(Office.js)

// index.html includes: <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>Office.onReady(() => { // Wire UI events, then…});async function writeMarkup() { await Excel.run(async (context) => { const sheet = context.workbook.worksheets.getActiveWorksheet(); const range = sheet.getRange("A1:B2"); range.values = [["Product", "Revenue"], ["Widgets", 125000]]; range.format.autofitColumns(); await context.sync(); });}async function readSelection() { await Excel.run(async (context) => { const range = context.workbook.getSelectedRange(); range.load("values,address"); await context.sync(); console.log("Selected:", range.address, range.values); });}

重要なルール

  • Excel.run(ctx => { …; return ctx.sync(); })を使用して、操作をまとめて適用します。
  • 先に読み込み(range.load("props"))を行い、await context.sync()を実行してから値を読み取ります。
  • すべての処理は非同期です。DOM 操作のような命令的な編集ではなく、処理をチェーンでつなげてください。

作業ウィンドウとコンテンツ アドインの違い

  • 作業ウィンドウ: 画面横に表示されるサイドパネル UI です。ツール、検索、データ操作、自動化に適しています。
  • コンテンツ アドイン: ドキュメントやシート内に表示されます(例: 埋め込みのビジュアル、マップ、KPI タイル)。
  • コマンド: 作業ウィンドウを開いたり、JavaScript 関数を実行したりするリボンのボタンです。

展開のパス

  • 一元化された展開(管理センター): ユーザー、グループ、テナント単位で割り当てます。
  • ネットワーク/URL のマニフェストを共有: 開発・テスト用にサイドロードします。
  • AppSource: 公開マーケットプレースです(ブランディングとコンプライアンスの要件を満たす必要があります)。

セキュリティ & ガバナンスのヒント

  • <Permissions>では最小特権の原則を適用してください。
  • すべてのアセットで CORS、CSP、HTTPS を使用してください。
  • トークンを localStorage に保存しないでください。セッションと有効期間の短いトークンを使用することを推奨します。
  • SSO を使用する場合は、(Entra アプリと連携した)Office SSO を設定するか、PKCE/OAuth を代替手段として使用してください。
  • サポートしやすくするために操作をログに記録してください(個人情報は含めないこと)。テナントの DLP ポリシーを遵守してください。

Power Platform との連携(ボーナス機能)

  • 作業ウィンドウから Power Automate フローをトリガーします(例: 「Submit to Finance」)。
  • 作業ウィンドウに Power BI のタイルやレポートを埋め込みます。
  • 適切な場合は、Graph を使用して M365 のデータ(メール、ファイル)を取得します。

よくある落とし穴(と対処法)

  • リボンに何も表示されない: マニフェストの ID または場所が誤っているか、ホストが違います(例: Word 専用のアドインを Excel で使用している)。
  • コードが「何もしない」: Excel.run または await context.sync() が抜けています。
  • Mac/Web で認証が失敗する: クロスオリジン、SSO、ポップアップのフローが許可されていることを確認してください。すべてのホストでテストしてください。
  • アクセス許可のエラー: 要求した機能がマニフェストに含まれていません(例: ReadWriteDocument がないのに書き込みを行っている)。

スターター ファイル構成

/addin /public index.html functions.html styles.css /src app.js excel-actions.js manifest.xml

今週中に作成する: 5 ステップのチェックリスト

  1. ひな形作成: index.html を作成し、office.js を読み込んで、シンプルな UI を表示します。
  2. Excel との連携: Excel.run を使って、選択範囲の読み取りと A1:B2 への書き込みをそれぞれ 1 つずつ追加します。
  3. マニフェスト: SourceLocation を index.html に向けます。ReadDocument を最初に設定します。
  4. サイドロード: 開発用としてインストールし(Office on the web またはデスクトップ版)、リボンのボタンと作業ウィンドウが表示されることを確認します。
  5. 堅牢化: エラー処理を追加し、アクセス許可を必要最小限に絞り込み、Mac と Web でテストしたうえで、組織への一括展開を計画します。

よくある質問

Q: VBA や VSTO の経験は必要ですか?
いいえ。最新のアドインは Office JS を使った純粋な Web アプリです。Web 開発のスキルがそのまま活かせます。

Q: 1 つのコードベースで、すべての環境で動作しますか?
はい。Windows、Mac、Office on the web で動作します(ホストと要件セットごとに機能を検証してください)。

Q: 更新はどのように展開されますか?
新しい Web ビルドをデプロイすると、クライアントは次回の読み込み時にそれを取得します。マニフェストの更新が必要になるのは、新しいコマンドやアクセス許可を追加するときだけです。

まとめ

Office アドインは、Web のスキルを実際の Excel/Word の自動化に変える最も確実な方法です。移植性が高く、管理しやすく、すばやく公開できます。マニフェストを理解し、Office JS の非同期フローを正しく扱えば、手作業のレポート作成(とコピー&ペーストの多くの作業)を大幅に減らせます。VBA を使わずにこれらの機能を活用する方法について詳しく知りたい方は、関連する Podcast エピソードもぜひご覧ください: Build Office Add-Ins for Excel and Word Without VBA。

Entities in this article

Microsoft Excel HTTP JavaScript Technical debt Azure Functions Microsoft Agent skill React Visual Studio

Related articles

RSS