Google スプレッドシートで使えるアドオンを作ってみよう | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

Google スプレッドシートで使えるアドオンを作ってみよう

Google スプレッドシートは、 Excel ライクな無料で使えるサービスです。
今回は Google スプレッドシートで使えるアドオンを作ります。
Google App Script が使える人なら、アドオンを作るのはとてもハードルが低いです。
よく行う操作をアドオンにして、仕事を効率化しましょう!

スポンサーリンク

アドオンの実装の流れ

アドオンは、 Google App Script が使えれば、特別な関数をいくつか覚えるだけで作れます。
開発環境も、 Google App Script を作るときと同じ、スクリプトエディタを使います。

アドオンを作る流れを把握しておきましょう。
   ・スプレッドシートに、アドオン用のメニューを追加する
   ・アドオンの機能を作成する
   ・アドオンのサイドバーを呼び出す
   ・アドオンのサイドバーに現れる UI を作成する
   ・アドオンを配布する(この行程は、この記事では省略します)

スプレッドシートに、アドオン用のメニューを追加する

スプレッドシートを作成し、スクリプトエディタを開いたら、メニュー追加用の処理を書きます。
gs ファイルに、初めに書かれている処理は削除して、以下を書きます。


function onInstall(e) {
  onOpen(e);
}

function onOpen(e) {
  var ui = SpreadsheetApp
    .getUi()
    .createAddonMenu()
    .addItem('アドオン_メニュー', 'showSidebar')
    .addToUi();
}

onInstall 関数は、シートが開かれたタイミングで実行されます。
SpreadsheetApp の getUi 関数で、スプレッドシートの UI を取得し、 createAddonMenu 関数でアドオンメニューのオブジェクトを作成します。
そこに addItem({タイトル文字列}, {呼び出す関数名}) 関数で項目追加を行い、 addToUi 関数で、UI オブジェクトに追加します。

ここまでできたら、メニューに以下の様な項目が追加されているはずです。
ただし、showSidebar 関数がまだないので、エラーが出ます。
アドオンメニュー

アドオンの機能を作成する

アドオンで実行したい関数を用意します。
今回は message を表示するだけの hellowWorld 関数を作りました。


function helloWorld(message){
  var ui = SpreadsheetApp.getUi();
  ui.alert("メッセージ", message, ui.ButtonSet.OK);
}

アドオンのサイドバーを呼び出す

以下のコードで、アドオンのメニューのボタンを押されたときに、サイドバーにアドオンの UI を表示します。


function showSidebar() {
  var sidebarUi = HtmlService
    .createHtmlOutputFromFile('Sidebar')
    .setTitle('アドオン_タイトル');
  SpreadsheetApp
    .getUi()
    .showSidebar(sidebarUi);
}

createHtmlOutputFromFile({呼び出すHTMLファイル名}) 関数でサイドバーの HTML ファイルを指定します。
showSidebar 関数でサイドバーオブジェクトを表示します。

アドオンのサイドバーに現れる UI を作成する

最後に、アドオンのサイドバーの UI を追加します。

まずは、 HTML ファイルを作成します。
HTMLファイル作成
ヘッダーには以下のコードを書き足します。
これは、 Google がアドイン用に提供している CSS です。




bodyに以下のコードを書きます。



    

ポイントは、 google.script.run の関数で、サイドバーの UI 側から、サーバーにあるスクリプトを実行しています。

実行してみる

それでは実行してみましょう!

アドオンを表示すると、このようなサイドバーが表示されます。
アドオンサイドバー

メッセージを入力して、 Click すると入力したメッセージが表示されます。
表示されるメッセージ

まとめ

簡単なアドオンを作成してみましたが、いかがでしたでしょうか?
Google App Script ができれば、それをアドオン化するのは、それほど難しくなかったかと思います。
作成したアドオンを公開するには、審査が必要らしいのが残念ですが、ぜひチャレンジしてみて下さい!