Google Apps Scriptを使ってHTMLを扱う方法【メンターが回答】

「Google Apps Scriptを使ってHTMLを扱う方法がわかりません。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。Google Apps ScriptとHTMLの値の引き渡し方法についてぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

Google Apps Scriptを使ってHTMLを扱う方法だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

下記のソースコードでは、Google Apps Scriptで作成したindex.htmlにセレクトボックスを作成しました。

県名を選択したときに、その値をGAS側の「SHEET_NAME」という変数に入れて使いたいのですが、どのようにして値を取得して代入するのかが分かりません。

Google Apps ScriptとHTMLでの値の引渡しをする書き方を教えてもらえればと思います。

 

該当のソースコード

index.html

<form name="kenform">
  <select name="ken" onChange="kakunin()">
    <option value="県名1">県名1</option>
    <option value="県名2">県名2</option>
    <option value="県名3">県名3</option>
  </select>
</form>

sample.gs

function doGet(e) {
  var tpl = HtmlService.createTemplateFromFile('index');
  return tpl.evaluate();

function test() {
 var SPREAD_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
 var SHEET_NAME =      //←index.htmlで選択した値をここに使いたい
 ss = SpreadsheetApp.openById(SPREAD_ID);
 sheet = ss.getSheetByName(SHEET_NAME);
 //・・・以下続く

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

メンターからの回答

gas->htmlに関しては、テンプレート描画時にプレースホルダーをindex.htmlに記述することで行えます。プレースホルダーを記述した後に、doGet 関数で値を流し込みます。

function doGet(e) {
  var tpl = HtmlService.createTemplateFromFile('index');
  ken = e.parameter.ken;
  tpl.ken = ken;
  return tpl.evaluate();
}

html->gasに関しては以下のようにしてgas関数を呼び出すことで値を流し込めます。withSuccessHandlerでgas関数の戻り値を取ることも可能です。

google.script.run
  .withSuccessHandler(function() { console.log('success') })
  .withFailureHandler(function() { console.log('error') })
  .test(e.target.value);

 

以上、Google Apps Scriptを使ってHTMLを扱う方法について解説しました。

TechAcademyでは、現役HTML/CSSエンジニアのメンターが質問にすぐ回答します。

他にもPHPとHTMLをまとめてコメントアウトする方法をメンターが回答しているので、合わせてご覧ください。

 

回答してくれたメンター

鵜澤 峻平(うさわしゅんぺい)

現在はフリーランスのエンジニアをしていてプログラミング歴は5年目になります、普段は Rails、Laravel、Node.js等を使って Web、モバイルアプリケーションを作成しています。開発実績としては、いくつかの Web サービス、コンシューマー向けモバイルアプリケーション、NPO サイトリニューアル、ロボット用プログラムなどがあります。

TechAcademyでメンターをはじめたのは、「プログラミングでやりたいことがある人を応援したい」、「講師と受講者が話し合って学び方を決めていく」に惹かれたからです。

 

田島悠介

Google Apps Scriptを使ってHTMLを扱う方法について解説したよ。

大石ゆかり

Google Apps Scriptとは何でしょうか?

田島悠介

GメールやカレンダーやGMAPなどのGoogleのサービスと連携することが出来るんだよ。

大石ゆかり

わかりました。ありがとうございます!

 

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

CSSの書き方やWebデザインのスキルなど基礎から学ぶことができます。

独学に限界を感じている場合はご検討ください。