【GAS】サイドバーの例文集から文を選択してドキュメントに挿入する方法

どうもcoto.です。
今回はGドキュメント上でのサイドバーに関連したGASを少々。

Contents

やりたいこと
コード
1. GAS（gs）側のコード
2. HTML側のコード
少しだけ解説
お好みで
御託

やりたいこと

① Gドキュメントを開く
② サイドバーに設置されたドロップダウンから例文を選ぶ
③ 挿入ボタンを押す
④ Gドキュメントに②で選んだ例文が転記される
※「カーソル位置に挿入」はボタン押下の直前にカーソルがある位置、「末尾に挿入」はドキュメントの最後にそれぞれ例文が転記されます。

コード

GAS（gs）側のコード

//サイドバーを表示
function Sidebar() {
  var htmlOutput = HtmlService.createTemplateFromFile('index').evaluate().setTitle('例文');
  DocumentApp.getUi().showSidebar(htmlOutput);
}

//カーソル位置挿入ボタン用
function insertText(text){ 
  DocumentApp.getActiveDocument().getCursor().insertText(text + ' ');   //追加した分の後ろに半角スペースを入れる
}


//末尾挿入ボタン用
function insertText2(text){
  var para = DocumentApp.getActiveDocument().getBody().getParagraphs();
  var paralength = para.length;
  var p1   = para[paralength-1];
  p1.appendText(text + ' ');  //追加した分の後ろに半角スペースを入れる
}

特にファイル名の指定はありません。

HTML側のコード

このhtmlの内容でサイドバー内の表示を制御します。装飾などもお好みで。ちなみにhtmlのファイル名はGAS側で指定している通り「index.html」です。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <select id="extext">
      <option value="はじめまして">はじめまして</option>
      <option value="こんにちは">こんにちは</option>
      <option value="さようなら">さようなら</option>
    </select>

    <div>
      <button onclick= "insertbutton()">カーソル位置に挿入</button>&nbsp;
      <button onclick= "insertbutton2()">末尾に挿入</button>
    </div>


<!-- ボタンの挙動 -->    
    <script>    
      function insertbutton(){
         var seltext = document.getElementById("extext").value;          //選択した例文を取得
         google.script.run.insertText(seltext);
      }

      function insertbutton2(){
         var seltext = document.getElementById("extext").value;          //選択した例文を取得
         google.script.run.insertText2(seltext);
      }         
    </script>


  </body>
</html>

今回はドロップダウンの中身をHTMLで直接作成していますが、選択肢を頻繁に編集するならスプレッドシートと紐づけた方が便利です。

過去に似たような方法を紹介しているのでご参考まで。