2017年2月25日土曜日

Google Apps Script： htmlページから別のhtmlページに遷移したりリンクをつけたりする方法

Google Apps Scriptというものがあります。これはGoogle docやGoogle spread sheetとも連携できて大変便利なのですが、htmlページ間の遷移が難しいのです。

ここではどうやってリンクを張ったりページを遷移させたりするのかを解説します。

まず、ページを遷移させる方法ですが、code.gsを以下のように書き変えてください。



function doGet(e) {
    Logger.log( Utilities.jsonStringify(e) );
    if (!e.parameter.page) {
        return HtmlService.createTemplateFromFile('page1').evaluate();
    }
    return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate();
}

function getScriptUrl() {
    var url = ScriptApp.getService().getUrl();
    return url;
}

つぎにpage1とpage2を作ります。このpage1とpage2の間で画面遷移を行います。
以下のようにコードを書いてください。これをpage1.htmlとします。













<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  　<h1>ページ 1</h1>
  　<?var url = getScriptUrl();?>
  　<input type="button" value="ページ2へ" onclick="window.top.location.href = '<?!=url?>?page=page2';"/>
  </body>
</html>

つぎにpage2.htmlを作ります。








<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>ページ 2</h1>
    <?var url = getScriptUrl();?>
    <input type="button" value="ページ1へ" onclick="window.top.location.href = '<?!=url?>?page=page1';"/>
  </body>
</html>

すると以下のようにpage1とpage2の間で以下のボタンを押すことで画面遷移が可能になります。

page1



page2


ボタン形式でなくリンク形式でページ間の遷移をしたい場合、htmlの<head></head>タグ内に<base target="_top">があることを確認したうえで

<?var url = getScriptUrl();?><a href = '<?!=url?>?page=page2'>
または
<?var url = getScriptUrl();?><a href = '<?!=url?>?page=page1'>

と書いてください。するとGoogle apps scriptのhtmlページ間のリンクを張り付けることが可能になります。


scriptによる遷移を使う場合はこんな感じ

Page2への遷移

<?var url = getScriptUrl();?>window.top.location.href = '<?!=url?>?page=page2';

Page1への遷移

<?var url = getScriptUrl();?>window.top.location.href = '<?!=url?>?page=page1';