LANG SELRCT

コードを書く場所についてはこちら

2018年8月16日木曜日

HTMLServiceのテンプレートファイルをワンクリックで作成したい


HTMLServiceでアプリケーションを作る時に


function doGet(){
  return HtmlService.createHtmlOutputFromFile("index");
}

みたいなコードを書いたり
.htmlファイルを新規作成するのは毎回やることなので

ワンクリックで基本的なコードが書かれたファイルを作成したくなった



実現するための手順
  1. テンプレート用のスクリプトファイルをGoogleドライブ内に用意する
  2. そのファイルをコピーするスクリプトファイルを用意してWebアプリにする
  3. そのアプリを開いたらマイドライブにテンプレートファイルのコピーが作成される


1. テンプレートファイルを用意する


コード1.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する



ここでは.htmlファイルはデフォルトのままにしておきます

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


2. 1のファイルをコピーするスクリプトファイルを用意する


コード2.gs
var FILE_ID = "ファイルID";

function doGet() {
  var copy_file_url = copy_file_to_mydrive();
  var open = '<script>window.open("' + copy_file_url + '","_top")</script>';
  var html = HtmlService.createHtmlOutput(open);
  return html;
}

function copy_file_to_mydrive() {
  var file = DriveApp.getFileById(FILE_ID);
  var name = "Copy of " + file.getName();
  var copy_file = file.makeCopy(name);
  return copy_file.getUrl();
}
意訳
ファイルIDを指定する

この機能がやること
ファイルをコピーしてそのURLを取得して
そのファイルを開くスクリプトを書いて
そのスクリプトを含むHTMLを作成して
返す


この機能がやること
対象のファイルを取得して
名前を決めて
コピーを作成して
作成したファイルのURLを返す


これをWebアプリケーションとして導入します

やり方はこちらに↓
HTMLでページを作る


3.2で作ったWebアプリケーションを開く


うまくいくとテンプレートファイルがマイドライブにコピーされます

リンクとして使う場合はこのWebアプリケーションのURLを aタグ の href に指定します
(自分以外に共有する場合は共有設定の変更が必要です)