Officeアドインの作り方 ー その5. ScriptLabでOffice Javascript API の使い方を知る

Script Labのインストール officeアドイン
スポンサーリンク

Office Javascript APIの使い方を簡単に調べることが可能なScript Labアドインの使い方について説明しています。

Office Javascript APIの使い方だけでなく、HTML、CSS等がどのようにExcel・Word・PowerPoint等で表示されるのかも調べることが可能です。

スポンサーリンク

ScriptLabのインストール方法

以下、エクセルでのインストール・使い方等を書いていますが、基本他のWord, PowerPoint等でも同じですので、是非Script Labアドインをインストールして、Office Javascript APIの使い方に慣れていってください。

「開発」タブ→「アドイン」ボタン(六角形のアイコン)を押してください。

開発⇒アドインボタン

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

ストア⇒Script Labの検索⇒追加ボタン

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

追加ボタン押下⇒続行

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

Script Labのタブが表示

ScriptLabの使い方

Codeボタン押す

まずは「Code」ボタンを押してください。

Script Labのボタン一覧

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

「Code」ボタンを押した様子

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

Script タブの拡大

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

HTMLを選択

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

CSSを選択

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

Librariesタブを選択

実際にCodeを走らせてみる

上部にある「▷Run」ボタンを押してください。Run in this paneをクリックしてください。

Runボタン押した

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

実行後(Run押した)の画面

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

実行後(Run押した)の画面

自分のコードで使ってみる

「Alt+Shift+A」で既存のコードをコメントアウトしてください。(VS Codeと同じ使い方が可能!)

また yo-officeで作成したコードを貼り付けてください。画像下のリンクを参考

codeの編集

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

Runボタン押した

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

Code PaneのRunボタンを押した。

編集・他のサンプルについて

Code Paneの左上にあるハンバーガーアイコンを押すと以下が表示されます。

「+」ボタンは空のスクリプトを作成してくれます。「Samples」は簡単なサンプルが表示されます。また「My Snippets」では自分で作成したものを保存等が可能です。

ハンバーガーアイコンを押した

Office Javascript API について

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

Office JavaScript API について - Office Add-ins
Office JavaScript API の概要
Office JavaScript API リファレンス ドキュメント - Office Add-ins
Office JavaScript Api について説明します。
Office アドインのコード サンプル - Office Add-ins
独自のアドインの学習や作成に役立つ Office アドインのコード サンプルの一覧。
タイトルとURLをコピーしました