Zenn
😆

Google Driveに保存したjsをGASで配信するサンプル

2023/11/23に公開
HTML
JavaScript
GAS
tech

Google Driveに保存してあるjsファイルをGASサーバーから配信する方法

対象者

gasをHTTPサーバとして使っててjsファイルをinlineで書きたくない方向け

ソースコード

サーバ側とクライアント側で分けてます。

サーバ側ソースコード

index.gs
// js download時のurl
// `https://script.google.com/a/macros/xxx/s/YYY/dev?js=${jsファイル名}`

/**
 * http get で呼ばれる関数
 */
function doGet(e) {
  if (!!e.parameter.js) {
    // jsファイルを配信する場合
    return sendJSFile(e.parameter.js);
  }
  
  // htmlファイル配信時の設定
  const htmlName = "test";
  const template = HtmlService.createTemplateFromFile(htmlName);
  return template.evaluate();
}

/** サービスのurlを取得する関数 */
function getURL() {
  return ScriptApp.getService().getUrl();
}

/** ファイル名からjsファイルを読み込む関数 */
function getJSFileFromFileName(fileName) {
  const id = fileName === 'sample.js' ? 'XXXXX' : null;
  if (id === null) throw new Error("対象外のファイルが指定された場合のエラーメッセージ");
  return DriveApp.getFileById(id);
}

/** ファイル名を指定された場合にjsファイルを配信する関数 */
function sendJSFile(fileName) {
    // ファイル名でファイルを取得する関数
    const file = getJSFileFromFileName(fileName);
    
    // jsファイルをテキストとして読み込み
    const contents = file.getBlob()
                         .getDataAsString('utf-8');

    // MimeTypeをJAVASCRIPTに指定して返信
    return ContentService.createTextOutput(contents)
                         .setMimeType(ContentService.MimeType.JAVASCRIPT);
}

配信するHTML

test.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="preload" href="<?= getURL() ?>?js=sample.js" as="script">
  </head>
  <body>
    <!-- サービスのurlを呼び埋め込み、queryパラメータにjsを設定する -->
    <script src="<?= getURL() ?>?js=sample.js"></script>  
  </body>
</html>

Google Drive に保存するファイル

sample.js
alert("success");

Discussion