web-dev-qa-db-ja.com

Google Appsスクリプトの別のHTMLページへのリンク

ScriptDbConsole.htmlからlegend.htmlにリンクすると、次のエラーメッセージが表示されます。

リクエストされたファイルは存在しません。アドレスを確認して、もう一度お試しください。

これは通常、通常の環境で機能しますが、ここでは機能しないと思います。それはscript.google.comにあります。

Script.google.comプロジェクトで新しい.htmlファイルを作成する場合、他のファイルと同じ場所に作成されるので、このコードは実際に正しく機能しますか？ ScriptDbConsole.htmlからlegend.htmlを開くにはどうすればよいですか？

<a href='legend.html' target='_blank'>Open in new window</a>
htmlgoogle-apps-scriptweb-applicationsgoogle-apps-script-web-application
20
MOTIVECODEX

HtmlServiceではHTMLを提供できますが、「ホスティング」ページではないため、Apps ScriptプロジェクトのさまざまなHTMLファイルにURLで直接アクセスすることはできません。代わりに、Webアプリは公開時にURLを持ち、それが唯一のURLになります。

これは、スクリプトから個別のページを提供し、それらをhtmlファイルリンクと同様に動作させる方法です。

doGet()関数は、呼び出されたときにイベントが渡されます。これを利用して、提供するページを指定できます。 WebアプリIDが_<SCRIPTURL>_の場合、URLと特定のページを要求するクエリ文字列は次のようになります。

_https://script.google.com/macros/s/<SCRIPTURL>/dev?page=my1
_

テンプレートHTMLを使用して、必要なURL +クエリ文字列をその場で生成できます。 doGet()では、クエリ文字列を解析して、提供するページを決定するだけです。

スクリプトは次のとおりです。2つのサンプルページに、ページを切り替えるためのボタンが含まれています。

Code.gs

_/**
 * Get the URL for the Google Apps Script running as a WebApp.
 */
function getScriptUrl() {
 var url = ScriptApp.getService().getUrl();
 return url;
}

/**
 * Get "home page", or a requested page.
 * Expects a 'page' parameter in querystring.
 *
 * @param {event} e Event passed to doGet, with querystring
 * @returns {String/html} Html to be served
 */
function doGet(e) {
  Logger.log( Utilities.jsonStringify(e) );
  if (!e.parameter.page) {
    // When no specific page requested, return "home page"
    return HtmlService.createTemplateFromFile('my1').evaluate();
  }
  // else, use page parameter to pick an html file from the script
  return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate();
}
_

my1.html

_<html>
  <body>
    <h1>Source = my1.html</h1>
    <?var url = getScriptUrl();?><a href='<?=url?>?page=my2'> <input type='button' name='button' value='my2.html'></a>
  </body>
</html>
_

my2.html

_<html>
  <body>
    <h1>Source = my2.html</h1>
    <?var url = getScriptUrl();?><a href='<?=url?>?page=my1'> <input type='button' name='button' value='my1.html'></a>
  </body>
</html>
_
43
Mogsdad

GoogleアプリスクリプトWebアプリは、主に単一ページのWebアプリアプリケーションで使用するように設計されています。ただし、複数ページのアプリケーションとしても使用できます（非推奨）。これがサンプルのウェブアプリです：

Code.gs：

//@return Base Url
function getUrl() {
  return ScriptApp.getService().getUrl()
}
//@return Html page raw content string
function getHtml(hash) {
  return HtmlService.createHtmlOutputFromFile(hash).getContent()
}

//@return provided page in the urlquery '?page=[PAGEID]' or main index page
function doGet(e) {
  var page = e.parameter.page
  return HtmlService.createHtmlOutputFromFile(page || 'index')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setTitle('App Demo')
}

page1.html

<h3>This is Page 1</h3>
<p>Hello World!</p>

page2.html

<h4>This is Page2</h4>
<p>Goodbye World!</p>

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top" />
    <title>Single Page App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
      h1 {
        text-align: center;
        margin: 2px;
        text-transform: uppercase;
        background-color: green;
      }
      span:hover,
      a:hover {
        background-color: yellowgreen;
      }
      body {
        background-color: brown;
        color: white;
        font-size: 2em;
      }
      a:visited {
        color: white;
      }
    </style>
  </head>
  <body>
    <h1><span id="type">Single</span> Page App Demo</h1>
    <div id="main">Loading...</div>
    <script>
      //Change base url
      google.script.run
        .withSuccessHandler(url => {
          $('base').attr('href', url)
        })
        .getUrl()

      //Function to handle hash change
      function change(e) {
        let hash = e.location.hash
        if (!hash) {
          main()
          return
        }
        google.script.run
          .withSuccessHandler(htmlFragment => {
            $('#main').html(htmlFragment)
          })
          .getHtml(hash)
      }
      google.script.history.setChangeHandler(change)

      //Function to add Main page html
      function main() {
        $('#main').html(`
            <ul>
              <li><a href="#page1">Page1</a></li>
              <li><a href="#page2">Page2</a></li>
            </ul>`)
      }

      //Loads Main html from main function
      //Adds toggle to span to change to a Multiple page app
      $(() => {
        main()
        $('#type').on('click', () => {
          let hf = $('a').attr('href')
          if (!hf) return
          hf = hf.indexOf('#') + 1
          $('#type').text(hf ? 'Multiple' : 'Single')
          $('a').each((i, el) => {
            $(el).attr('href', (i, v) =>
              hf ? '?page=' + v.slice(1) : '#' + v.slice(6)
            )
          })
        })
      })
    </script>
  </body>
</html>

参照：

1
TheMaster