LANG SELRCT

コードを書く場所

2019年12月21日土曜日

スプレッドシートに用意したHTMLをindex.htmlに表示してみる


Google Apps ScriptのHtmlServiceで
index.htmlに表示するHTMLをスプレッドシートから読み込みたい

ということがやりたくて書いたコードです。


今回やること

表示したいHTMLをA1に用意しておく
(今回はテキストボックスを表示するだけ)

コード.gsに returnHtml() という関数を用意して
スプレッドシートのA1のデータを取得して返す
index.htmlの getHtml() でそれを実行して
返ってきたHTMLを innerHTML で表示する



コード.gs
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("index");
}

function returnHtmlFromSheet(){
  var ssUrl = 'https://docs.google.com/spreadsheets/d/SPREADSHEET_ID/edit#gid=0';
  var sheet = SpreadsheetApp.openByUrl(ssUrl);
  var range = sheet.getRange('A1');
  var value = range.getValue();
  return value;
}



index.html
<!DOCTYPE html>
<html>
  <body>
    <div id="mainDiv"></div>

<script>

getHtml();
function getHtml() {
  google.script.run
  .withFailureHandler(onFailure)
  .withSuccessHandler(gotHtml)
  .returnHtmlFromSheet();
}

function gotHtml(result) {
  document.getElementById('mainDiv').innerHTML = result;
}

function onFailure(e) {
  alert([e.message, e.stack]);
}

</script>
</body>
</html>


最新の投稿

JIRAにステータスを追加したい

JIRAにステータスを追加したときの備忘録です。 新規ステータスを作成する ワークフローでステータスを追加する ボードにステータスを配置する 1. 新規ステータスを作成する Jira settingsを開きます Issuesを選択します ...