Google Apps Script - 備忘録 - 002

2022年5月16日 20:03

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 合体演算子 (??) は論理演算子の一種です。この演算子は左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値を返します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

これまでに特殊な演算子として、三項演算子と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を削除するかどうかを処理するようにしました。

１万文字超えたので続きは#003で。

この記事が気に入ったらサポートをしてみませんか？