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

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 を追加します。

まずは、 HTML ファイルを作成します。

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

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

    

      

        

          メッセージ表示するテキストを入力して下さい
          
        
      
      メッセージを表示する
    

    
    

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

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

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

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

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