Officeアドインの作り方 ー その3. 開発用テンプレートでプロジェクト作成 (VS Code編)

officeアドイン
スポンサーリンク

前回では開発インストールを行いました。今回はそれらインストールしたツールを使用して、Officeアドインのテンプレートでプロジェクトを作成したいと思います。エクセルのアドインを作成したいと思います。今回はデバッグまでは行わず、その前の確認までとします。

VS Codeを使用する場合はこちらのプロセスを通るかと思います。

スポンサーリンク

準備と開発小ネタ

準備

C:\ドライブの直下に[c:\OAdd_code]として、フォルダを作成しました。こちらを今後開発のフォルダとしていきます。コマンドプロンプトのショートカットが置かれているのは下の小ネタを参考。空のフォルダで構いません。

c:\OAdd_code

今回の目的であるテンプレートを作成した後は以下のようになります。

開発小ネタ

少しだけ開発を楽にする小ネタです。コマンドプロンプトのショートカットをコピーしてここにおいてください。

そして、右クリック→プロパティにて、作業フォルダを以下のように「%CD%」に変更して、適用(A)ボタンを押して閉じてください。

こうしておくことでこのコマンドプロンプトのショートカットをダブルクリックで開くことで、ディレクトリの移動の手間が一つへります。

コマンドプロンプトのプロパティ⇒作業フォルダ

公式の解説

Microsoft公式の解説はこちら。

https://docs.microsoft.com/ja-jp/office/dev/add-ins/quickstarts/excel-quickstart-jquery?tabs=yeomangenerator

yo officeでテンプレートを用いたプロジェクト作成

コマンドプロンプトでのプロジェクト作成の流れ

今回のコマンドプロンプトでの入力を ( ⏎はEnterキーを示します)

yo office⏎

(Use arrow keys)

  • Continue
  • Exit

キーボードの矢印キーで選択、Enterキーで決定 (Continueを選択決定)

Choose a project type:(Use arrow keys)

  • Office Add-in Task Pane project
  • Office Add-in Task Pane project using Angular framework
  • Office Add-in Task Pane project using React framework
  • Office Add-in Task Pane project supporting single sign-on
  • Office Add-in project containing the manifest only
  • Excel Custom Functions Add-in project

キーボードの矢印キーで選択、Enterキーで決定 (Office Add-in Task Pane projectを選択決定)

Choose a script type:(Use arrow keys)

  • TypeScript
  • JavaScript

キーボードの矢印キーで選択、Enterキーで決定 (JavaScriptを選択決定)

What do you want to name your add-in?

キーボードで「My Office Add-in」を入力

Which Office client application would you like to support?(Use arrow keys)

  • Excel
  • Onenote
  • Outlook
  • Powerpoint
  • Project
  • Word

キーボードの矢印キーで選択、Enterキーで決定 (Excelを選択決定)

以上でプロジェクトの作成は完了です。

「My Office Add-in」が作成できていることを確認してください。

コマンドでの選択(画像)

プロジェクトのフォルダ名を入力する画像は省略。

“My Office Add-in”のフォルダが作成されていることを確認してください。

まとめ

以上で、プロジェクトの作成できました。

次回は VS Codeによるデバッグの実行を行ってみたいと思います。

VS Codeによるデバッグはこちら。

npmによるデバッグ・動作確認はこちら (npmでの動作させるとより中身の動きが分かりやすいかと思います。)

タイトルとURLをコピーしました