2022年10月31日SHAREツイートシェアはてブLINE最近いろいろな場面で活用しているのがGoogleAppsScript。通称GASと呼ばれます。Googleでは、excelやWordと同じようなことができるツールとして、Googleスプレッドシート、Googleドキュメントなどがあります。これらのツールの中では、マクロやVBAと同じように、Scriptを組んで、自動実行させることもできるため、まさに、手軽に無料で使えるMicrosoftのexcelやWordといったところですよね。GASはexcelとかには無い特徴もあります。自動実行を行うScriptはJavaScriptで記述できるので、学習が容易さて、そんな便利なGoogleAppsScriptですが、今回はその中でも、「アドオン」と呼ばれる機能の解説と、雛形の作成を行おうと思います。Googleスプレッドシートの「アドオン」とは、スプレッドシートを開いた後、多くの場合はユーザの入力を受付ながら、自動で処理を実行できる仕組みです。シート上に並んでいるURLから、自動で最新情報を取得するとか、ユーザに入力フォームを表示して、入力された情報を元に、シートにデータを投入するなどといったことができます。「コード.gs」に以下のソースをコピペSidebar.html側の解説ボタンのイベントハンドラを登録sayHello関数コード.gs側の解説まとめ今回作成するGASのスプレッドシート・アドオン今回作成するアドオンは、以下のような感じです。右側にフォームを配置し、そこに、テキスト入力エリアとボタンをのせます。UserNameに文字が入力されたら、その値をセルのA1に書き込みつつ、「Hello!+ユーザ名」をフォームに戻して表示する動きをすることにしましょう。何に使えるかわからないって?確かに。アドオンの基本要素がつまってるんですよ。・イベントバンドルした後、どのようにJavaScriptの関数を呼ぶか・スプレッドシートのセルの扱い方などなど。このアドオンを雛形にすれば、比較的楽に自分の思ったことをさせられるアドオンに育てやすいのではないかなーとの思いで書きました。イベントハンドリングのところは、単純にソースみても、(私は)最初理解に苦しんだので、どなたかの参考になればうれしいです。サイドバーやスクリプトなど、最初の用意まずはじめに、GoogleDriveでGoogleスプレッドシートを新規に作成します。作成したら、「Test1」等の適当な名前を付けて保存しましょう。これが、アドオンを作成する基準の場所になります。<このシートに対して、アドオンを載せていくことになります。エディタ」を選択します。これでアドオンを記述していくスクリプトを編集する画面が開きます。開く場合には、「コード.gs」という、JavaScriptを記述するファイルとmyFunction()という関数が自動で生成されるはずです。HTMLファイル」を選択し、新しいファイル名として「sidebar」と入力します。これで、「sidebar.html」が作成されます。ここに、スプレッドシートの右側に表示されるページをhtml形式で記述していきます。「https://developers.google.com/apps-script/add-ons/css」を見ると、Googleチックな見た目のページを作るためのCSSが記載されているので、統一感のあるユーザインターフェースを作成できると思います。ソースコードの編集まずは、「sidebar.html」と「コード.gs」に以下のソースを貼り付けて、実行してみることにしましょう。はじめに、どのような動きをするのかをイメージしてから、実際に細かいソースの中身を見ていくとわかりやすいと思いますので。ソースの中身は、後で解説します。userName;}貼り付けできたら、プロジェクトごと保存します。適当な名前をつけて保存してください。アドオンの実行(初回はセキュリティの権限承認が必要)では、早速実行してみましょう。シートをリロードするか、再度開きなおします。すると、画面上部のメニューの「アドオン」のところに「Test1Project」→「Start」という項目が増えているはずです。この「Start」を選択することで、アドオンが実行されます。初回実行時には、以下のように承認が必要です。GoogleAppsを有料で使っていると、設定で表示しないようにもできるはず。)下記で権限を許可する。$('#say-hello').click(sayHello);});これは、「id=”say-hello”」のボタンのクリックイベントに対して、sayHelloという関数を登録しています。sayHello()」がコールされます。sayHello関数たぶん、はじめて見る人は、これが一番理解しづらいのではないかと思います。私も、最初は、意味がわかりませんでした。「https://developers.google.com/apps-script/guides/html/reference/run」このページに書いてあることを読み解けば、わかるのですが、少し、解説します。google.script.runはクライアント側から、サーバサイドのJavaScriptを呼ぶことができます。sidebar.htmlに記述されている「sayHello」関数から、サーバサードの「コード.js」に記述されている関数helllo(userName)を呼ぶためのAPI(非同期)です。google.script.runでhello(userName)が呼ばれる。呼ばれる際に、成功時と失敗時のハンドラをwithSuccessHandler、withFailureHandlerで登録している。element)が呼ばれることになる。(どちらも無名関数)ここで、両無名関数の第一引数returnMsg、msgは、hello(userName)の成功時または失敗時の戻り値。elementにはwithUserObject(this)のthisが渡る。onOpen(e);}アドオンがインストールされたときに呼ばれます。多くの場合は、後ほど説明する「onOpen()」を呼ぶだけのシンプルな関数です。.addToUi();}このスプレッドシートが開かれたときに呼ばれます。場合は、メニューにアイテムを追加するのに利用されます。「Test1Project」→「Start」という項目が増えていたのは、ここで行っていたんですね。Startという名前でメニュー・アイテムを登録し、クリックされたら「showSidebar」という関数を呼ぶように登録していることがわかります。SpreadsheetApp.getUi().showSidebar(ui);}HtmlService.createHtmlOutputFromFileで、プロジェクトのファイルから、sidebarというhtmlファイルを読み込んで表示します。userName;}上記で出てきた「hello(userName)」関数です。userName」を返すだけのシンプルなものですね。エラーが起こって、これを返すのに失敗すると、エラーのメッセージが返却されます。withFailureHandlerでハンドリンクされるときにmsgとして渡されるのか、その正体だったんですね。まとめいかがでしたでしょうか。GoogleAppsScriptのスプレッドシート・アドオン。今回はシンプルなものでしたが、ここを理解すれば、いろいろなことをさせられそうなことが想像できますよね。世界中で公開されている便利なアドオンの中身を理解する助けにもなるんじゃないかと思います。最近のコメント表示できるコメントはありません。