LANG SELRCT

コードを書く場所についてはこちら

2016年5月27日金曜日

スプレッドシートにサイドバーを表示する雛形

スプレッドシート上にGUIを表示するとき、GUIで画面を覆ってしまいたくない場合はサイドバーに表示することもできます。
サイドバーに表示するとシート上でカーソル操作をしながら入力を行うことができます。

複雑な処理を書く前の雛形として、サイドバーにテキストエリアを表示し、そこに入力した文字をアクティブセルにも自動で入力するというだけの簡単な動作をするアプリを作ってみました。


コード.gs
function openSidebar() {
    var html = HtmlService.createTemplateFromFile('index')
        .evaluate()
        .setSandboxMode(HtmlService.SandboxMode.IFRAME)
        .setTitle('Input App');
    SpreadsheetApp.getUi().showSidebar(html);
}

function set_value(value){
  var sh = SpreadsheetApp.getActiveSheet();
  var range = sh.getActiveRange();
  range.setValue(value);
}


index.html
<!DOCTYPE html>
<html>
<head>
    <base target="_top">
</head>
<body>
    <textarea id="ta" onkeyup="run_input()"></textarea>
</body>
<script>
    function run_input() {
        var value = document.getElementById("ta").value;
        google.script.run.set_value(value);
    }
</script>
</html>


スプレッドシートに表示される画面


コードを書いて実行するまでの手順です。

1. コード.gsにコードを書いて保存します。

2. ファイル>新規作成>HTMLファイル を選択します。

3. ファイル名を入力してOKをクリックします。

4. index.htmlに上記コードを入力して保存します。

5. コード.gsタブでopenSidebarを実行します。

6. 許可を確認をクリックします

7. 許可をクリックします

実行後、スプレッドシートへ戻ると、作成したサイドバーが表示されます。

表示されたサイドバーのテキストエリアに文字を入力すると、アクティブセルに同じ文字が入力されるアプリケーションが作れました。



参考

Dialogs and Sidebars in G Suite Documents / Custom sidebars
https://developers.google.com/apps-script/guides/dialogs