是否可以在 google 应用程序脚本中使用 p5.js 库

Question

我正在尝试从 google 应用程序脚本访问 p5.js 库。下面是我试过的 doGet() 函数。我做错了吗？还是在使用应用程序脚本时无法访问此库？

function doGet() { eval(UrlFetchApp.fetch('https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js', Object).getContentText());

return HtmlService.createHtmlOutputFromFile('index');
}

我还尝试通过删除 Object 参数来更新代码，如下所示：

    function doGet() {
eval(UrlFetchApp.fetch('https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js').getContentText());
      return HtmlService.createHtmlOutputFromFile('index');
    }

但我仍然遇到错误。

语法错误：后缺少名称。运算符。

更新：我从下面尝试了马里奥的代码。它修复了第一个错误。但是现在我正在尝试创建一个 canvas，但我看到的只是一个空白页。没有列出错误。这是代码现在的样子。

doget.gs

function doGet() {
   var template = HtmlService.createTemplateFromFile("demo");
   return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME); 
}

sketch.gs

function setup() {
  createCanvas(400,600);
}

function draw() {
  background(100);
}

demo.html

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
    <script src="sketch.gs"></script>
</head>
<body>
</body>
</html>

Answer 1

首先您必须创建一个新文件并将所有 HTML 代码放入您要使用的 javascript。

demo.html

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
    <?!= include('sketch'); ?>
</head>
<body>
</body>
</html>

sketch.html

<script>
function setup() {
  createCanvas(400,600);
}

function draw() {
  background(100);
}
</script>

然后在您的 Appsscript 文件中 code.gs。这会混合使用 Google Apps 脚本代码和 HTML 来生成动态页面

function doGet() {
   var template = HtmlService.createTemplateFromFile("demo");
   return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME); 
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

这是 HTML 服务的 Google 文档 https://developers.google.com/apps-script/guides/html/templates

是否可以在 google 应用程序脚本中使用 p5.js 库

Is it possible to use the p5.js library in google apps script

javascript

web-applications

google-apps-script

p5.js