Officeアドインの作り方 ー その3.5. アドインのデバッグ・動作確認方法 (npmコマンド + VS Code編)

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

VS Codeの拡張機能を用いると以下のような npmをコマンドでの実行等の煩雑さを省けます。一方で動作内容等は明確になるので、念のためにこちらで書いておきます。

不要だよって方は、次の記事へ移動してください。

npmコマンドでやってみたい方は以下からスタートです。

スポンサーリンク

アドイン動作確認方法(npm によるデバッグ)

以下の特殊記号 “˽” はスペースを 、”⏎”はEnterキーを示します。

デバッグの開始と終了

コマンドプロンプトを起動して、プロジェクトフォルダ内へ移動します。

cd “My Office Add-in”⏎

(cdと˽(スペース)を入力した後に[M + Tab]を入力すると、自動でダブルクォーテーションで囲まれたフォルダ名が表示されます。)

npm start⏎

(npm˽startと入力し、エンターキーを押す)

? Allow local host loop back for Microsoft Edge WebView?(Y/n)

n⏎

(webpack が起動して、Officeアドインの動作確認が可能な状態。)

セキュリティ警告の画面、証明書のインストール「はい」のボタンを押す。

Windowsセキュリティの重要な警告画面で、「アクセスを許可する」のボタンを押す。

Excelが自動で起動されます。

WebViewの読み込み中止画面で、「OK」を押す。

npm stop⏎

(npm˽stopと入力、エンターキーを押してください。デバッグを終了するために、エクセルを終了した場合でもnpm stopをコマンド入力しておいてください。)

デバッグの開始と終了(画像)

画像では全部のパスを入力してますが、その必要はありません。

プロジェクトフォルダへ移動後、 npm start

プロジェクトフォルダへ移動 ⇒ npm start

? Allow local host loop back for Microsoft Edge WebView?(Y/n)

nを入力。 (yを入力するとエラー発生したので、npm startから再度開始した図)

Edge WebVeiw

webpackが起動されます。併せて、CAのインストール

セキュリティ警告画面で,「はい」ボタンを押す。

CAのインストール

Windowsセキュリティの重要な警告画面で、「アクセスを許可する」ボタンを押す。

Windowsセキュリティの重要な警告
アクセスを許可すると色々とロードされている模様

Excelが自動で起動されます。

「ホーム」タブの一番右端にボタンが追加されているので、押してください。

WebViewの読み込み中止画面が表示されるので、「OK」を押してください。

WebViewの読み込み中止画面

アドインが正しく読み込まれたようです。

デバッグを終了する場合は、npm stopを入力してください。(Excelが終わっていても。)

VS codeの起動(コマンドプロンプトにて)

プロジェクトのフォルダへ移動した状態で、

code .⏎

(“code˽.”(code+スペース+ドット)を入力して、エンターキーを押して下さい)

VS codeが起動して、以下のような画面が表示されますので、「はい、作成者を信頼します」を押してください。

このフォルダー内のファイルの作成者を信頼しますか?

このリポジトリにおすすめの拡張機能をインストールしますか?とメッセージが表示された場合はインストールしておいてください。

まとめ

念のためにnpmコマンドによる方法を書いておきましたが、実際はVS Codeの拡張機能を使用した機能の方が、断然便利です。

次回はVS Codeによるデバッグの仕方を記していきます。

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