Google Apps ScriptでWebアプリケーション作成 その3

2020年5月1日

社内の簡易アプリをGoogleAppsScriptとGoogleスプレッドシートで作成するためのテストです。

2年ぐらい前のメモを復習↓

https://sugizo.info/2018/05/11/105/

https://sugizo.info/2018/05/15/133/

GASのwebアプリケーションをググってみたところ、GAS+Vue.jsで作るのが良さそうです。Vue.jsがまったくわかりませんが。

最初はJQueryでwebアプリケーションを作ります。最終的はGAS+Vue.jsの方法を調べます。

Google Apps ScriptがV8 Runtimeをサポート

「Rhinoランタイム」というJavaScriptを実行するエンジンでしたが、2020年2月からV8ランタイム」というJavaScript実行エンジンがサポートされました。これから使うならV8ですね。一部バグがあるようですが近いうちに解消するでしょう。

https://developers.google.com/apps-script/guides/v8-runtime?hl=ja

すぐに使うのはletとconstとテンプレートリテラルと関数のデフォルト引数、配列の検索あたりです。

varとletとconst

これからはほとんどletとconstを使います。(であってる?)

https://techacademy.jp/magazine/14872

https://qiita.com/wannabe/items/b2a0d63fc786eab13c48

ログ出力クラス consoleクラス

ログ出力にはLoggerクラスとConsoleログクラスがあるが、V8 Runtimeサポート後はConsoleログクラス一択です。ログの確認場所はエディタではなく、Apps Scriptダッシュボードです。

https://developers.google.com/apps-script/reference/base/console

// console.log() console.info() console.warn() console.error()
function myFunction(){
  let num = 100;
  console.log('testtest');
  console.log('num=' + num); // 文字列を結合する方法
  console.info('num=%d', num);//フォーマット文字列を指定する方法
  
  
  //V8ランタイム環境のテンプレートリテラル(テンプレート文字列)を使用する方法 ★おすすめ
  console.info(`num=${num}`); //バックダッシュ(`)で囲まれた文字列はテンプレートリテラル
  console.info(`num=${num+20}`); // 式も可能
  
}

公式ドキュメントの関数の速度計測方法

以下のようにConsoleクラスのtimeメソッドとtimeEndメソッドで時間を計測できます。

function measuringExecutionTime() {
  // A simple INFO log message, using sprintf() formatting.
  console.info('Timing the %s function (%d arguments)', 'myFunction', 1);

  // Log a JSON object at a DEBUG level. If the object contains a property called "message",
  // that is used as the summary in the log viewer, otherwise a stringified version of
  // the object is used as the summary.
  var parameters = {
    isValid: true,
    content: 'some string',
    timestamp: new Date()
  };
  console.log(parameters);

  var label = 'myFunction() time';  // Labels the timing log entry.
  console.time(label);              // Starts the timer.
  try {
    myFunction(parameters);         // Function to time.
  } catch (e) {
    // Logs an ERROR message.
    console.error('myFunction() yielded an error: ' + e);
  }
  console.timeEnd(label);      // Stops the timer, logs execution duration.
}

ログをスプレッドシートに保管する方法

GoogleドライブにGoogleAppsScriptとGoogleスプレッドシートを作成しました。Gas1ログシートのシート名は「log」にしました。

Gas1をWebアプリケーションとして作成し、アクセス時にスプレッドシートにログを残します。

Gas1にはindex.htmlとコード.gsを作成

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    HelloWorld!
  </body>
</html>

コード.gs

const GAS1_SHEET_ID = "1f9QNeD9MXzGJElZnvo6mmXFB4vW1qy1_T-tM58iKI9A"
 
function doGet(e)
{
  console.log(e);
  
  // getEmail()、getUserLoginId()はスクリプト実行者とスクリプトオーナーのドメインが同じ場合のみ動作する
  // 別ドメインのときはセキュリティ上、取得できない
  const userEmail = Session.getActiveUser().getEmail();
  
  // IDを指定してスプレッドシートを取得
  const logSheet = SpreadsheetApp.openById(GAS1_SHEET_ID); 
  
  // シート名「log」に書き込む
  logSheet.getSheetByName('log').appendRow([new Date(), userEmail, 'doGet(e)', e]); 
  
  //index.htmlファイルからHtmlTemplateオブジェクトを生成
  const template = HtmlService.createTemplateFromFile('index');
  
  // evaluateメソッドでHtmlOutputオブジェクトを生成
  return template.evaluate().setTitle('test');
}

ブラウザでアクセス

Webアプリケーションとしてデプロイしてアクセスします。

スプレッドシートのログ確認

アクセスごとに、スプレッドシートにログとして1行追加されます。任意の値をセットすれば、開発時や運用時に利用できます。ただし、スプレッドシートに書き込む時間は遅いのでパフォーマンスは悪くなります。

以上です。jQueryは次回。