LANG SELRCT

Apps Script Reference  (Create: Create new Spreadsheet | Create new Apps Script

Friday, May 27, 2016

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

スプレッドシート上に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

Latest post

スプレッドシートA列にある複数のテキストをスライドに追加したい(Google Apps Script)

今回Google Apps Scriptでやりたいこと GoogleスプレッドシートA列にある複数の値を取得して Googleスライドに渡して 図形オブジェクトのテキストとして追加したい ① スプレッドシートのA列に値を入れておく ② Code.gsのinsertNewShape...