アドオン・プログラムを作ろう！ (3/5)

前ページで作成したスクリプトの説明の続きです。――「アドオン」メニューに追加したメニュー項目では、showSidebarという関数を呼び出すようにしていました。このshowSidebarで、サイドバーを表示する処理をしています。ざっと内容を整理しましょう。


1. Uiオブジェクトの取得

var ui = SpreadsheetApp.getUi();

まずは、Uiオブジェクトを取得します。これはアドオン関係のスクリプトの基本ですね。


2. HtmlOutputオブジェクトの生成

var sidebar = HtmlService.createHtmlOutputFromFile('Sidebar');

HtmlServiceオブジェクトの「createHtmlOutputFromFile」を使い、Htmlファイルを読み込んでHtmlOutputオブジェクトを生成します。ここでは'Sidebar'という名前のファイル（つまり、Sidebar.html）を読み込むようにしておきました。


3. HtmlOutputの設定

sidebar.setTitle('マイ・アドオン');

HtmlOutputで必要な設定を行っておきます。ここではsetTitleを呼び出してタイトルを設定しています。サイドバーでは、タイトルは必ず設定しておくようにしましょう。


4. HtmlOutputの表示

ui.showSidebar(sidebar);

Uiオブジェクトの「showSidebar」メソッドを呼び出し、HtmlOutputをサイドバーとして表示します。これで、Sidebar.htmlの内容がサイドバーとして画面に現れます



もう１つ、「hello」というメソッドも用意しておきました。これは、Sidebar.htmlの中から呼び出して実行させる処理です。ここでは、引数を受け取り、それをアラートとして画面に表示する処理だけ用意してあります。

var ui = SpreadsheetApp.getUi();
var re = ui.alert("Message", msg + 'さん、こんにちは！', ui.ButtonSet.OK);

Uiオブジェクトを取得し、「alert」メソッドでアラートを表示しています。このあたりは、Uiオブジェクトの使い方がわかれば、ごく一般的な処理であることがわかるでしょう。アドオンだからという特別な処理は何も必要ないんです。


※HtmlServiceの利用
http://libro.tuyano.com/index3?id=926001&page=4

※Uiのalertについて
http://libro.tuyano.com/index3?id=1189003&page=3

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  var addon = ui.createAddonMenu();
  addon.addItem('サイドバーを表示', 'showSidebar');
  addon.addToUi();
}

function onInstall() {
  onOpen();
}

function showSidebar() {
  var ui = SpreadsheetApp.getUi();
  var sidebar = HtmlService.createHtmlOutputFromFile('Sidebar');
  sidebar.setTitle('マイ・アドオン');
  ui.showSidebar(sidebar);
}

function hello(msg){
  var ui = SpreadsheetApp.getUi();
  var re = ui.alert("Message", msg + 'さん、こんにちは！', ui.ButtonSet.OK);
}