Google Apps Script - 備忘録 - 002
Google Apps Scriptの練習のために簡単なWebアプリを作成してみました。
ドットインストールの「詳解PHP ウェブ開発編」を参考にさせて頂いております。
詳解PHP ウェブ開発編 » #14 複数の値を受け取ってみよう
以下、お手本のコード。
(有料コンテンツなので一部だけ)
<select name="colors[]" multiple>
$colors = filter_input(INPUT_GET, 'colors', FILTER_DEFAULT, FILTER_REQUIRE_ARRAY);
$colors = empty($colors) ? 'None selected' : implode(',', $colors);
以下、GASのコード。
// コード.gs
function doGet(e) {
let page = e.parameter['page'];
if (page == null || page == 'index') {
let temp = HtmlService.createTemplateFromFile('index');
let output = temp.evaluate();
output.setTitle('PHP Practice');
return output;
} else if (page == 'result') {
let temp = HtmlService.createTemplateFromFile('result');
let colors = e.parameters['colors'];
colors = colors == null ? 'None selected' : colors;
temp.colors = colors;
let output = temp.evaluate();
output.setTitle('PHP Practice');
return output;
}
}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form action="https://script.google.com/macros/s/☆ID☆/exec" method="GET">
<input type="hidden" name="page" value="result">
<select name="colors" multiple>
<option value="orange">Orange</option>
<option value="pink">Pink</option>
<option value="gold">Gold</option>
</select>
<button>Send</button>
</form>
</body>
</html>
<!-- result.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p><?= colors; ?></p>
<p><a href="https://script.google.com/macros/s/☆ID☆/exec?page=index">Go back</a></p>
</body>
</html>
クエリパラメーターに「colors=orange&colors=pink」のように同じkeyがある場合はe.parametersで配列取得できる。
公式ドキュメント > https://developers.google.com/apps-script/guides/web
parametersに行きつくまで結構苦戦した。。
詳解PHP ウェブ開発編 » #15 チェックボックスから値を受け取ろう
以下、GASのコード。
// コード.gs
function doGet(e) {
let page = e.parameter['page'];
if (page == null || page == 'index') {
let temp = HtmlService.createTemplateFromFile('index');
let output = temp.evaluate();
output.setTitle('PHP Practice');
return output;
} else if (page == 'result') {
let temp = HtmlService.createTemplateFromFile('result');
let colors = e.parameters['colors'];
colors = colors == null ? 'None selected' : colors;
temp.colors = colors;
let output = temp.evaluate();
output.setTitle('PHP Practice');
return output;
}
}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form action="https://script.google.com/macros/s/☆ID☆/exec" method="GET">
<input type="hidden" name="page" value="result">
<label><input type="checkbox" name="colors" value="orange"> Orange</label>
<label><input type="checkbox" name="colors" value="pink"> Pink</label>
<label><input type="checkbox" name="colors" value="gold"> Gold</label>
<button>Send</button>
</form>
</body>
</html>
<!-- result.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p><?= colors; ?></p>
<p><a href="https://script.google.com/macros/s/☆ID☆/exec?page=index">Go back</a></p>
</body>
</html>
クエリパラメーターから配列で取得するのはひとつ前の #14 と同じ。
詳解PHP ウェブ開発編 » #16 ラジオボタンから値を受け取ろう
以下、お手本のコード。
(有料コンテンツなので一部だけ)
// $color = filter_input(INPUT_GET, 'color');
// $color = isset($color) ? $color : 'None selected';
// $color = $color ?? 'None selected';
$color = filter_input(INPUT_GET, 'color') ?? 'None selected';
以下、GASのコード。
// コード.gs
function doGet(e) {
let page = e.parameter['page'];
if (page == null || page == 'index') {
let temp = HtmlService.createTemplateFromFile('index');
let output = temp.evaluate();
output.setTitle('PHP Practice');
return output;
} else if (page == 'result') {
let temp = HtmlService.createTemplateFromFile('result');
let color = e.parameters['color'];
color = color ?? 'None selected';
temp.color = color;
let output = temp.evaluate();
output.setTitle('PHP Practice');
return output;
}
}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form action="https://script.google.com/macros/s/☆ID☆/exec" method="GET">
<input type="hidden" name="page" value="result">
<label><input type="radio" name="color" value="orange"> Orange</label>
<label><input type="radio" name="color" value="pink"> Pink</label>
<label><input type="radio" name="color" value="gold"> Gold</label>
<button>Send</button>
</form>
</body>
</html>
<!-- result.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p><?= color; ?></p>
<p><a href="https://script.google.com/macros/s/☆ID☆/exec?page=index">Go back</a></p>
</body>
</html>
本レッスンのテーマはラジオボタンではなくNull合体演算子ですね。
「A ?? B」AがNullの場合はB、そうでない場合はAを返すようです。
これまでに特殊な演算子として、三項演算子とNull合体演算子が出てきました。
詳解PHP ウェブ開発編 » #17 選択した値で背景色を変えよう
以下、GASのコード。
// コード.gs
function doGet(e) {
let page = e.parameter['page'];
if (page == null || page == 'index') {
let temp = HtmlService.createTemplateFromFile('index');
let output = temp.evaluate();
output.setTitle('PHP Practice');
return output;
} else if (page == 'result') {
let temp = HtmlService.createTemplateFromFile('result');
let color = e.parameters['color'];
color = color ?? 'transparent';
temp.color = color;
let output = temp.evaluate();
output.setTitle('PHP Practice');
return output;
}
}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form action="https://script.google.com/macros/s/☆ID☆/exec" method="GET">
<input type="hidden" name="page" value="result">
<label><input type="radio" name="color" value="orange"> Orange</label>
<label><input type="radio" name="color" value="pink"> Pink</label>
<label><input type="radio" name="color" value="gold"> Gold</label>
<button>Send</button>
</form>
</body>
</html>
<!-- result.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body style="background-color: <?= color; ?>;">
<p><?= color; ?></p>
<p><a href="https://script.google.com/macros/s/☆ID☆/exec?page=index">Go back</a></p>
</body>
</html>
詳解PHP ウェブ開発編 » #19 Cookieを使ってみよう
以下、お手本のコード。
(有料コンテンツなので一部だけ)
setcookie('color', $colorFromGet);
以下、GASのコード。
// コード.gs
function doGet(e) {
let page = e.parameter['page'];
if (page == null || page == 'index') {
let temp = HtmlService.createTemplateFromFile('index');
let color = PropertiesService.getUserProperties().getProperty('color') ?? 'transparent';
temp.color = color;
let output = temp.evaluate();
output.setTitle('PHP Practice');
return output;
} else if (page == 'result') {
let temp = HtmlService.createTemplateFromFile('result');
let color = e.parameters['color'] ?? 'transparent';
temp.color = color;
PropertiesService.getUserProperties().setProperty('color', color.toString());
let output = temp.evaluate();
output.setTitle('PHP Practice');
return output;
}
}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body style="background-color: <?= color; ?>;">
<form action="https://script.google.com/macros/s/☆ID☆/exec" method="GET">
<input type="hidden" name="page" value="result">
<label><input type="radio" name="color" value="orange"> Orange</label>
<label><input type="radio" name="color" value="pink"> Pink</label>
<label><input type="radio" name="color" value="gold"> Gold</label>
<button>Send</button>
</form>
</body>
</html>
<!-- result.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body style="background-color: <?= color; ?>;">
<p><?= color; ?></p>
<p><a href="https://script.google.com/macros/s/☆ID☆/exec?page=index">Go back</a></p>
</body>
</html>
いろいろ探してもGASにはCookieが使える情報が見つからなかった。
その際に見つかるのは、JavascriptのlocalStorageオブジェクトを使う方法。
だがしかし、自分の環境が悪いのか、現在は使えなくなっているのか、はたまた自分の使い方が間違っているのか、全然使うことができず。。
そこでたどり着いたのが、UserPropertyを使用した方法。
UserPropertyにセットする際、注意が必要なのが型の内容。
toString()メソッドを使用してなんとかうまくいきました。
今回は躓く所(cookieに替わる方法、localStorageがなぜか使えない、UserPropertyにセットした値を取得するとエラーが出力、、)がたくさんあって、何度かあきらめてスキップしそうになった。。
詳解PHP ウェブ開発編 » #21 Cookieを削除してみよう
以下、お手本のコード。
(有料コンテンツなので一部だけ)
<a href="reset.php">[reset]</a>
以下、GASのコード。
// コード.gs
function doGet(e) {
let page = e.parameter['page'];
if (page == null || page == 'index') {
let temp = HtmlService.createTemplateFromFile('index');
let reset = e.parameter['reset'];
if (reset == 'true') {
PropertiesService.getUserProperties().deleteProperty('color');
}
let color = PropertiesService.getUserProperties().getProperty('color') ?? 'transparent';
temp.color = color;
let output = temp.evaluate();
output.setTitle('PHP Practice');
return output;
} else if (page == 'result') {
let temp = HtmlService.createTemplateFromFile('result');
let color = e.parameters['color'] ?? 'transparent';
temp.color = color;
PropertiesService.getUserProperties().setProperty('color', color.toString());
let output = temp.evaluate();
output.setTitle('PHP Practice');
return output;
}
}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body style="background-color: <?= color; ?>;">
<form action="https://script.google.com/macros/s/☆ID☆/exec" method="GET">
<input type="hidden" name="page" value="result">
<label><input type="radio" name="color" value="orange"> Orange</label>
<label><input type="radio" name="color" value="pink"> Pink</label>
<label><input type="radio" name="color" value="gold"> Gold</label>
<button>Send</button>
<a href="https://script.google.com/macros/s/☆ID☆/exec?page=index&reset=true">[reset]</a>
</form>
</body>
</html>
<!-- result.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body style="background-color: <?= color; ?>;">
<p><?= color; ?></p>
<p><a href="https://script.google.com/macros/s/☆ID☆/exec?page=index">Go back</a></p>
</body>
</html>
UserPropertyを削除する方法はdeletePropertyメソッドを使用しました。
お手本ではリダイレクト関数を使用してindex.phpに移動していますが、GASにはリダイレクト方法が無い(無くなった?)ようです。
そのため、クエリパラメーターにresetのフラグをセットして直接index.htmlに移動する方法にしました。
doGet関数でresetの条件分けによってUserPropertyを削除するかどうかを処理するようにしました。
1万文字超えたので続きは#003で。
この記事が気に入ったらサポートをしてみませんか?