1

私はかなり熟練した Web 開発者なので、Google App Scripts を使用した Google Web フレームワークは私にぴったりです。残念ながら、私は壁にぶつかる前にあまり先に進みません。これが最大のものです（現在）。

シナリオ: 私が新しい言語に取り組むときに常に使用するプログラミングの問題のいくつかを解決するための簡単なアプリを開発します。各問題を別のページに入れます。css と javascript を別々のファイルに入れます。

これは最初はうまくいきます。最初の問題は、手段の問題の統計的平均です。スプレッドシートからデータを読み取るためのスターター テンプレートを見つけ、テンプレートを変更してデータを表示し、そこから進みました。CSS は単純で、ファイルに含まれていました。最初の index.html と code.gs だけが必要でした。

しかし今、私は index.html を変更して、他の HTML ファイルを呼び出すためのリンクを追加したいと考えています。このファイルは、App プロジェクトが喜んで追加してくれます。さらに .gs ファイルを追加することもできます。素晴らしいと思います。しかし、どのようにそれらを呼び出すのですか? リンクには URL が必要ですが、私が持っているのはプロジェクトへの URL だけです。私の知る限り、同じプロジェクトに含まれるファイルを参照する方法はありません。他のライブラリで関数を呼び出すことはできますが、このライブラリの別のページでは呼び出すことができません。.gs スクリプトは、サーバー側のコードのようです。クライアント側の JavaScript ファイルにアクセスするにはどうすればよいですか。またはCSSファイル？

私はあなたのサイトでこれを見つけましたが、実際にそれをどのように使用するかについての手がかりがありません. プロジェクトの Javascript ファイルと CSS ファイルを Google Apps Script Web アプリで使用しますか? .

これらの質問に対する答えを検索して検索しましたが、実際に機能するプロジェクトの例ではほとんど見つかりませんでした。

あなたが私に与えることができるどんな助けにも感謝します.

4

1 に答える 1

5

あなたは私と同じようなことをしようとしていると思います。基本的に、ログインして、ログイン後に追加のデータを提供できるシステムが必要です。そのため、基本的なフォームから始めて、あなたが話している壁にぶつかり、HTML ページを読み込むことができないようです。

その後、文字列を送り返すことができることに気付きました。したがって、その文字列を div に入れることができるため ( を参照loadPage())、別のページを表示できます。以下は、失敗の処理を含む簡単な例です。その後、期待どおりにページを書き続けることができます。したがって、次のフォームと次のフォームに値を渡して、アプリケーションを作成できます。

これを使用するには、任意のユーザー名を入力できますが、失敗し、スローされたエラー メッセージが表示されます。ユーザー名として入力するfuzzyjulzと、ログイン プロセスからの追加情報を含む次のページが表示されます。

Code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('Main')
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

function onLogin(form) {
  if (form.username == "fuzzyjulz") {
    var template =  HtmlService.createTemplateFromFile('Response');

    //Setup any variables that should be used in the page
    template.firstName = "Fuzzy";
    template.username = form.username;

    return template.evaluate()
      .setSandboxMode(HtmlService.SandboxMode.NATIVE)
      .getContent();
  } else {
    throw "You could not be found in the database please try again.";
  }
}

function include(filename) {
  return HtmlService.createTemplateFromFile(filename)
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .getContent();
 }

Main.html

<?!= include('CSS'); ?>
<script>
  function loadPage(htmlOut) {
    var div = document.getElementById('content');
    div.innerHTML = htmlOut;
    document.getElementById('errors').innerHTML = "";
  }
  function onFailure(error) {
    var errors = document.getElementById('errors');
    errors.innerHTML = error.message;
  }
</script>
<div id="errors"></div>
<div id="content">
  <?!= include('Login'); ?>
</div>

CSS.html

<style>
  p b {
    width: 100px;
    display: inline-block;
  }
</style>

ログイン.html

<script>
  function onLoginFailure(error) {
    var loginBtn = document.getElementById('loginBtn');
    loginBtn.disabled = false;
    loginBtn.value = 'Login';
    onFailure(error);
  }
</script>
<div class="loginPanel">
  <form>
    <p>
      <b>Username: </b>
      <input type="text" name="username"/>
    </p>
    <input type="button" id="loginBtn" value="Login" onclick="this.disabled = true; this.value = 'Loading...';google.script.run
      .withSuccessHandler(loadPage)
      .withFailureHandler(onLoginFailure)
      .onLogin(this.parentNode)"/>
  </form>
</div>

Response.html

<div class="text">
  Hi <?= firstName ?>,<br/>
  Thanks for logging in as <?= username ?>
</div>
于 2015-05-26T00:38:36.770 に答える