読者です 読者をやめる 読者になる 読者になる

技術のメモ帳

気が向いたときに書いてます

[GAS]URLのドキュメントがダウンロードできるWEBアプリケーション

今回は、Google Apps ScriptのHTML Serviceを使って、URLのドキュメントをダウンロードするだけのWEBアプリケーションを実装します。

Google Apps ScriptでWEBアプリケーションを実装するための演習です。

仕様は次の通りです。

  • HTMLでFormが表示できること
  • URLが入力できて、送信できること
  • URLのドキュメントをダウンロードできること
  • HTML以外のドキュメントもダウンロードできること

Google Apps Scriptの実装

application.gsを実装します。

今回は、公式リファレンスのベストプラクティスに倣って、createTemplateFromFile()メソッドを使って、テンプレートからHTMLを作成しています。

function doGet() {
  return HtmlService.createTemplateFromFile('layout')
           .evaluate()
           .setSandboxMode(HtmlService.SandboxMode.IFRAME)
           .setTitle('Sample App');
}

function include(filename) {
  return HtmlService
           .createHtmlOutputFromFile(filename)
           .getContent();
}

function onFormSubmit(url) {
  try {
    var response = UrlFetchApp.fetch(url).getBlob();
    return {
      byte: Utilities.base64Encode(response.getBytes()),
      name: response.getName(),
      contentType: response.getContentType()
    };
  } catch(e) {
    return null;
  }
}

HTMLテンプレートの実装

layout.htmlとして実装します。include()は、Partial HTMLが挿入されます。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('_stylesheet'); ?>
  </head>
  <body>
    <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Sample App</a>
        </div>
      </div>
    </nav>
    <div class="container">
      <form>
        <div class="form-group">
          <label for="url">Download URL</label>
          <input name="url" id="url" class="form-control" />
        </div>
        <input type="submit" class="btn btn-default" value="Download" />
      </form>
    </div>
    <?!= include('_script'); ?>
  </body>
</html>

クライアント側 JSの実装

JavaScriptですが、_script.htmlとして、以下のように実装します。

ライブラリには、CDNからjQueryを利用しています。

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script>
/**
 * 参考:
 * javascriptで生成したファイルをローカルに保存する - Qiita
 * http://qiita.com/ukyo/items/d623209655a003b13add
 * params {blob}     Blob
 * params {filename} String
 */
function download(blob, filename) {
  var objectUrl = (window.URL || window.webkitURL).createObjectURL(blob),
           elem = document.createElement('a'),
          event = document.createEvent('MouseEvent');
  elem.download = filename;
  elem.href     = objectUrl;
  event.initEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
  elem.dispatchEvent(event);
}

/**
 * 参考:
 * JS: base64文字列をBlob形式のFileに変換する - Qiita
 * http://qiita.com/uin010bm/items/150003f016287750cf34
 * params {base64}      Array
 * params {contentType} String as image/png
 */
function toBlob(base64, contentType) {
  var bin    = atob(base64.replace(/^.*,/, '')),
      buffer = new Uint8Array(bin.length);
  for (var i = 0; i < bin.length; i++) {
    buffer[i] = bin.charCodeAt(i);
  };
  try {
    return new Blob([buffer.buffer], { type: contentType });
  } catch (e){
    return false;
  }
}

$(function() {
  $('form').on('submit', function (e) {
    e.preventDefault();
    var params = {
      url: $('#url').val(),
      success: function (res) {
        console.log(res);
        download(toBlob(res.byte, res.contentType), res.name);
      },
      failure: function (res) {
        console.warn(res);
      }
    };
    google.script.run
      .withSuccessHandler(params.success)
      .withFailureHandler(params.failure)
      .onFormSubmit(params.url);
  });
});
</script>

スタイルシートの実装

CSSは、_style.htmlとして実装します。

特殊な表示はないため、CDNからNormalize.cssBootstrapを呼び出しているのみとなります。

<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
/* do something */
</style>

動作確認

スクリプトエディタから、デプロイすると、次のように表示されます。

[Download]をクリックすると、ファイルのダウンロードできました。

実際のアプリケーションは以下となりますので、もしご興味があったら、触ってみてください。

Sample App

参考リンク