LoginSignup
3
1

スプレッドシートからGASを実行する3つの方法

Last updated at Posted at 2023-12-24

はじめに

この記事は「Ateam LifeDesign Advent Calendar 2023」で完走賞を狙って25記事書いているうちの25日目の記事です。ようやく完走・・・!!

GASの書き方は今まで色々みてきたので、今日はスプレッドシート上からGASを実行する方法をいくつかご紹介します。今回はあらかじめhogeFunction()を作っておいてそれを実行していきます。

function hogeFunction() {
  SpreadsheetApp.getUi().alert('Hello, world');
}

メニューから実行する

新たにメニューを追加する

昨日の記事で触れたメニューを追加して、そこから関数を実行する方法です。

function onOpen(e) {
  SpreadsheetApp.getUi()
      .createMenu('My Menu')
      .addItem('My menu item', 'hogeFunction')
      .addToUi();
}

このようにしておくことでメニューに追加された「My menu item」をクリックすることでhogeFunctionを動かすことができます。

スクリーンショット 2023-12-23 13.41.01.png

マクロに追加する方法

「拡張機能」→「マクロ」から「マクロをインポート」を選択します。

スクリーンショット 2023-12-23 13.42.49.png

するとGASに書いてある関数が一覧で表示されるので実行したいものの「関数を追加」をクリックします。

スクリーンショット 2023-12-23 13.43.17.png

もう一度「拡張機能」→「マクロ」を見ると先程選択した関数が追加されていることが確認できます。このhogeFunctionのメニューをクリックすることで関数を実行することができます。

スクリーンショット 2023-12-23 13.43.43.png

ボタンを配置してボタンを押すことで実行する

シート内に任意のボタンを配置して、そのボタンを押すことで関数を実行する方法を見ていきます。まず「挿入」→「図形描画」をクリック。
スクリーンショット 2023-12-23 13.46.36.png

好きな図形を作ったら「保存して終了」を押します。

スクリーンショット 2023-12-23 13.47.15.png

配置された図形の右上にある三点リーダーをクリックすると「スクリプトを割り当て」というのが出てくるのでここをクリック。

スクリーンショット 2023-12-23 13.47.36.png

実行したい関数名を記入したら「確定」を押します。
これでこの図形をクリックされると関数が実行されるようになります。

スクリーンショット 2023-12-23 13.47.59.png

サイドバーに実行ボタンをhtmlで配置する

昨日の記事で触れたサイドバーにボタンを配置してクリックすることで実行するようにする方法です。
createHtmlOutputのなかにはhtmlを書くことが出来るのでそこでhtmlでボタンを作成しonclickイベントで関数が呼び出されるようにしていきます。

コード.gs
function onOpen(e) {
  let template = HtmlService.createTemplateFromFile('sidemenu');
  let htmlOutput = template.evaluate();
  htmlOutput.setTitle('サイドバーのタイトル');
  SpreadsheetApp.getUi().showSidebar(htmlOutput);
 }

今回はhtmlファイルを別途sidemenu.htmlとして作成して、それを呼び出す形で使用しています。template.evaluate()で指定されたファイルのhtmlを取得します。この段階では、まだサイドバーには表示されていません。htmlOutput.setTitle('サイドバーのタイトル')でサイドバーのタイトルを設定します。
showSidebar()メソッドを使用して、作成したhtmlを含むサイドバーを実際に表示します。このコードが実行されると、サイドバーが表示されます。

sidemenu.html
<!DOCTYPE html>
<html>
 <head>
   <base target="_top">
   <script>
     function hogeFunction(){
       google.script.run.hogeFunction();
     }
   </script>
 </head>
 <body>
   <button onclick="hogeFunction()">hogeFunctionを実行する</button>
 </body>
</html>

html側はこんな感じです。<button>タグでボタン要素を定義し、onclickイベントにhogeFunction()を関連付けます。こうすることでボタンがクリックされると、この関数が実行されるようにしています。hogeFunction()内ではgoogle.script.runを使ってサーバーサイドのhogeFunction()(つまりコード.gsで定義しているhogeFunction())を実行します。これにより、クライアント側からサーバーサイドのGASの関数を呼び出すことができるようになります。

スクリーンショット 2023-12-23 14.04.51.png

完成するとこのような画面になります。サイドバーにボタンが表示されており、ここをクリックすることで関数を実行することができます。

最後に

今回はスプレッドシートからGASを実行する方法についていくつかみていきました。簡単にできるものからちょっとコードを書く必要があるものまでありますが、用途に応じて適切なものを選んで、より使いやすいものを作っていきましょう。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1