Office Javascript APIの使い方を簡単に調べることが可能なScript Labアドインの使い方について説明しています。
Office Javascript APIの使い方だけでなく、HTML、CSS等がどのようにExcel・Word・PowerPoint等で表示されるのかも調べることが可能です。
Contents
ScriptLabのインストール方法
以下、エクセルでのインストール・使い方等を書いていますが、基本他のWord, PowerPoint等でも同じですので、是非Script Labアドインをインストールして、Office Javascript APIの使い方に慣れていってください。
「開発」タブ→「アドイン」ボタン(六角形のアイコン)を押してください。

Officeアドインのパネルが表示されるので、タイトル下の小さく表示されている「ストア」の項目を押して、検索窓にて「Script Lab」の検索を行い、追加ボタンを押します。

続行ボタンを押してください。

Script Labのタブが表示されます。「OK」を押してください。

ScriptLabの使い方
Codeボタン押す
まずは「Code」ボタンを押してください。

画面右側にCode画面が表示されます。

拡大した図。Scriptのタブが表示されているかと思います。

上部にあるHTMLタブを選択した図。ここでHTMLを変更することで、HTMLの表示テストも可能です。

上部にあるCSSタブを選択した図。

上部にあるLibrariesタブを選択した図。インターネット上に配置されたOffice.js等をダウンロードしてきます。

実際にCodeを走らせてみる
上部にある「▷Run」ボタンを押してください。Run in this paneをクリックしてください。

しばらく後に、Runボタンが表示されます。Runボタンを押してください。

下のコンソールに”Your code goes here”と表示されています。実際にCodeタブで表示されていたコードの内容が実行されていることが分かります。

自分のコードで使ってみる
「Alt+Shift+A」で既存のコードをコメントアウトしてください。(VS Codeと同じ使い方が可能!)
また yo-officeで作成したコードを貼り付けてください。画像下のリンクを参考

Runボタンを押してください。HTMLとCSSは変更していないので、この時点では変わりなし。

実際にCode paneのRunボタンを押した図が以下のようになります。選択されたセルが黄色になり、consoleには選択されたシートと選択されたセルの番号がひょじされています。

編集・他のサンプルについて
Code Paneの左上にあるハンバーガーアイコンを押すと以下が表示されます。
「+」ボタンは空のスクリプトを作成してくれます。「Samples」は簡単なサンプルが表示されます。また「My Snippets」では自分で作成したものを保存等が可能です。

Office Javascript API について
実際に自分のアドインを開発する際は、以下のリンクから探して、上記のScript Lab アドインで実行してみて作り上げていきます。


