Google Apps Script

【Google Apps Script】HTMLのページを複数作成・表示する方法

gas-make-html

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

参考

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

.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="http://www.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 = "http://www.cg-method.com/"; 
  document.getElementById("ifr").src= link;  

変数の組み合わせ方法

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

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

関連記事

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

Mayaの参考紹介

参考記事

  • Mayaに関連するまとめ記事23選!
  • 参考書籍

    キャラモデリングの書籍です。

    背景を作成する時に一読すべき書籍です。

    リグを組む時に一読すべき書籍です。

    ABOUT ME
    すいみん
    東京在住。デザイナー寄りのテクニカルデザイナー。 ブログは技術検証の備忘録として書いています。