残るは、サイドバー用のHtmlファイルです。スクリプトエディタで、＜ファイル＞メニューの＜新規作成＞から＜Htmlファイル＞サブメニューを選んで、新しくHtmlファイルを作りましょう。

名前は、ここでは「Sidebar.html」としておきます。これは前回、onOpenでSidebarを呼び出していたからわかりますね。

作成したら、下のリスト欄のように記述をしてください。これですべて完成です。ここでは、いくつか注意すべき点がありますので説明しておきましょう。


●CSSのロード

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">

最初に、このようなCSSのリンク用タグが用意されていますね。これはGoogleが用意するアドオン用のCSSです。これを読み込んで利用することで、アドオンらしいルック＆フィールを得ることができます。


●サーバー側スクリプトの呼び出し
ここでは、ボタンのonclickにdoActionという関数を設定してあります。このdoAction関数で行っていることは、サーバー側にあるhello関数を呼び出して実行することです。これは以下のように行います。

google.script.run
    .withSuccessHandler(……成功時の処理……)
    .withFailureHandler(……失敗時の処理……)
    .withUserObject(……受け渡すオブジェクト……)
    .呼び出す関数(引数);

なんだかわかりにくいですが、google.script.runの後にメソッドチェーンでいくつもの処理を続けて書いているということはわかるでしょう。これらは整理するとこうなります。

withSuccessHandler――呼び出した処理が正しく実行された場合のコールバックです。引数には関数を用意します。
withFailureHandler――呼び出した処理の実行に失敗した場合のコールバックです。やはり引数には関数を用意します。
withUserObject――コールバックが呼び出される際に受け渡すオブジェクトを用意するものです。

そして、これらの後に、実際に呼び出す関数を続けて記述すれば、それが実行されます。クライアント側からそのままサーバーの関数が呼び出せるのはなんだか不思議な感じがしますね。

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<h1>サンプルAdd-on</h1>
<div>
<p>あなたの名前:</p>
<div><input type="text" id="mysidebar_intput1" />
<button onclick="doAction(event);" class="action">Click</button></div>
</div>

<script>
function doAction(e) {
  var str = document.querySelector('#mysidebar_intput1').value;
  google.script.run
    .withSuccessHandler(
      function(msg, element) {})
    .withFailureHandler(
      function(msg, element) {})
    .withUserObject(this)
    .hello(str);
}
</script>