メニュー
\ ポイント最大11倍! /詳細を見る

GAS│Webページを複数作成・表示する方法

GAS(Google Apps Script)を使って、HTMLを表示してみました。
通常であれば1プロジェクトにつき、1ページしか表示できませんが、擬似的に複数ページ遷移できるようになっています。

GoogleAppsScript(GAS)でページ遷移を擬似的に実装する方法 – Qiita

海外でフリーランスをしているテクニカルアーティスト
ゲーム開発・映像制作・WEB制作等を請け負っています。
当ブログは作業効率化のための技術ブログです。

目次

Webページを複数作成・表示する方法(.gs)

function doGet(e){
var page=e.parameter["p"];
if(page == "index" || page==null){
var app = HtmlService.createTemplateFromFile("Index.html");
return app.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
else if(page =="menu1"){
var app = HtmlService.createTemplateFromFile("Menu1.html");
return app.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
else if(page =="menu2"){
var app = HtmlService.createTemplateFromFile("Menu2.html");
return app.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
else{
var app = HtmlService.createTemplateFromFile("Error.html");
return app.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
}

https://script.google.com/macros/s/プロジェクトID/exec?p=menu1

というように、パラメーターをつけて複数ページ遷移するようになっています。

.hrml

各HTMLの中はお好みで。

試しにiframeでページを埋め込んでみたりしてみました。
リンク先のURLを見せたくない場合にある程度有効です。

<!DOCTYPE html>
<html>
<head>
    <base target="_top">
  </head>
<body>
<iframe src="https://cg-method.com/search?q=gas"  width="256" height="256"></iframe>
</body>
</html>

iframeに変数を用いる方法

変数はiframeの後にします。

  <iframe src="" id="ifr" width="256" height="256"></iframe>
<script>
  var link = "https://cg-method.com/"; 
  document.getElementById("ifr").src= link; 

変数の組み合わせ方法

似たようなURLが多い場合、変数を上手く使えないか試してみました。

  <iframe src="" id="ifr" width="256" height="256"></iframe>
<script>
  var link = "https://cg-method.com/";
  var page = "search?q=gas/";
  var str = link + page; 
  document.getElementById("ifr").src= str;
  </script>

【GAS】スクリプトのプロパティで設定した変数をHTMLで使用する方法 – CGメソッド

全記事一覧

  • URLをコピーしました!
目次