はじめに
「今のExcel工程表、使いにくすぎる…！でも、サードパーティ製のガントチャートツールはライセンス料が高くて導入の稟議が通らない…」
「それなら、自分でExcelを拡張して、専用のアドインを作ってしまえばいいのでは！？」
そう意気込んでモダンなOfficeアドイン開発（TypeScript）に挑戦したものの、最初の環境構築で想像以上の数の壁にぶつかりました。
この記事では、開発者プログラムの審査落ちから始まり、数々のエラーを乗り越えて「Web版Excelで自作アドインを動かす」までに至ったリアルな奮闘記を、手順とコード付きでまとめます。
これからアドイン開発を始める方の参考になれば幸いです。
第1の壁：Microsoft 365 開発者プログラム「資格なし」の絶望
Officeアドインを開発するには、無料でE5ライセンスが使える「Microsoft 365 開発者プログラム」に登録するのが王道だと聞き、早速「Join now」をクリックしました。
しかし、電話番号認証を終えて出てきたのは無情なメッセージでした。
You don't current qualify for a Microsoft 365 Developer Program sandbox subscription.
なんと、審査に弾かれてしまったのです。最近は不正利用対策で新規アカウントの審査が非常に厳しいとのこと。
一瞬「詰んだか…？」と思いましたが、調べてみると 「開発用のサンドボックス環境がなくても、無料のWeb版Excel（Excel Online）があれば、サイドロード機能を使って開発・検証ができる」 ということが判明。
気を取り直して、普段使っている個人アカウントのExcel Onlineで進めることにしました。
第2の壁：OneDrive容量オーバーで「空白のブック」が開けない
意気揚々とWeb版Excelを開き「空白のブックを作成」をクリックした瞬間、今度は「OneDriveのストレージ上限を超えています」というエラーが。
原因は、スマホのギャラリー（写真・動画）が自動的にOneDriveへバックアップされる設定になっており、無料枠の5GBを使い切っていたためでした。
スマホ側の自動同期設定をオフにし、OneDrive上の不要な画像データを削除。
ゴミ箱も空にして、ようやく真っ白なExcelシートにたどり着きました。
第3の壁：Node.jsのバージョンとタイポの罠
Excel側の準備ができたので、いよいよローカルPCの開発環境構築（雛形の作成）です。
ターミナルを開き、コマンドを打ち込みました。
npm install -g yo henerator-office
すると見事に 404 Not Found のエラー。
よく見ると generator を henerator と打ち間違えていました。初歩的なミスです（笑）。
気を取り直して正しいコマンドを打ち込み、プロジェクトを生成しようとします。
npm install -g yo generator-office
yo office
すると今度は、アスキーアートのキャラクターから「Node.jsのバージョンが対応していない。LTS版にしてね」と怒られてしまいました。
確認すると、私の環境には最新の v25.x（Current版）が入っていました。
開発ツールには安定性が求められるため、推奨される v24.15.0（LTS版）にダウングレードしてインストールし直すことで、ようやくこの壁を突破しました。
第4の壁：最大の難所「keytar」と6GBのBuild Tools
LTS版のNode.jsを入れ、いざ yo office を実行！…したのですが、途中の npm install で大量の赤いエラーログが流れ、処理が強制終了してしまいました。
エラーログを解読すると、パスワード管理系のモジュールである keytar という部品をビルドするために、 「C++の開発環境（Visual Studio Build Tools）」 が必要とのこと。
Excelのアドインを作るだけなのにC++のコンパイラを要求されるとは夢にも思いませんでした。
仕方なく、Microsoftの公式サイトから「Build Tools for Visual Studio 2026」のインストーラーをダウンロードし、 「C++ によるデスクトップ開発」 にチェックを入れてインストールを実行。
約6GBという超特大サイズのダウンロードとインストールが始まり、完了するまでじっと耐え忍びました。
そしてついに！プロジェクトの生成とサーバー起動
巨大なBuild Toolsのインストールを終え、中途半端に作られていた失敗作のフォルダを一度削除。
祈るような気持ちでもう一度コマンドを叩きました。
yo office
ウィザードに従って、以下の通りに選択します。
- Project Type:
Office Add-in Task Pane project - Script Type:
TypeScript - Name:
MyExcelTool - Application:
Excel
数分後……ターミナルに Congratulations! Your add-in has been created! の文字が表示されました。ついに環境構築の壁をすべて打ち破った瞬間です！
すぐにプロジェクトフォルダに移動し、開発用サーバーを起動します。
cd MyExcelTool
npm run dev-server
Compiled successfully の文字を確認し、ローカルサーバーが無事に立ち上がりました。
感動の瞬間：Web版Excelへのサイドロード
いよいよ、自作のアドインをExcelに読み込ませます（サイドロード）。
- ブラウザでExcel Onlineを開く。
- 「ホーム」タブの右端にある「アドイン」アイコンをクリックし、「その他のアドイン」を選択。
- 「個人用アドインの管理」から「マイ アドインのアップロード」をクリック。
- 作成したプロジェクトフォルダの中にある
manifest.xmlを選択。
※この時、ブラウザがローカルサーバー（localhost）との通信をブロックしたため、別タブで https://localhost:3000/taskpane.html を開き、セキュリティ警告の詳細設定から「安全ではないサイトへ移動」を許可して通信を開通させる必要がありました。
そして、Excelの画面をリロードすると……
画面右側に 「MyExcelTool」 の作業ウィンドウがバッチリ表示されました！！
動作確認：セルを青色に染める
初期状態のコードでは、ボタンを押すと選択したセルが黄色になる仕様でした。
せっかくなので、VS Codeを開いてコードを少し書き換え、自分が操作している実感を味わうことに。
src/taskpane/taskpane.ts を開き、以下の部分を編集します。
// 書き換え前
// range.format.fill.color = "yellow";
// 書き換え後
range.format.fill.color = "blue";
ファイルを保存すると、ローカルサーバーが自動で再ビルドしてくれます。
Excel画面に戻り、右側のウィンドウの「Run」ボタンをクリック。
すると見事、選択していたセルが一瞬で青色に変わりました！
おわりに：目指せ、無料で使えるExcel版Redmine！
開発者プログラムの審査落ち、ストレージ不足、Nodeのバージョン違い、そして6GBのC++ビルドツール……。
振り返るとトラブルだらけの環境構築でしたが、ブラウザ上のExcelと自分の書いたTypeScriptのコードが繋がって動いた瞬間の感動は、それまでの苦労をすべて吹き飛ばしてくれました。
ここから先は、この環境をベースにして、 「Redmineのような使いやすい工程表（ガントチャート）」 をExcelアドインとして自作することを目指します！
少しずつ開発を進め、得られた知見や進捗はどんどん記事化していく予定ですので、ぜひ見守っていただけると嬉しいです。
最後まで読んでいただき、ありがとうございました！