Zenn
🔖

GAS入門：ドキュメントをフォルダーに入れてPDFに変換

2021/11/10に公開
CSS
HTML
GAS
Google Apps Script
tech

作るもの

今回はGASを使ってドキュメントをフォルダーに入れてボタンを押すとPDFに変換する小さなウェブアプリを作成します。
※なお、このプロジェクトにおいて取り掛かるには基本的なJavaScriptの知識が必要とされます。

今回作成する物のコードは自分のGitHub Gistから見れます：
https://gist.github.com/501A-Designs/0c95b43ea459ac230e7611b8b077179f

はじめ

  1. Google Driveから新しいApp Script Projectを作成。
  2. デフォルトでCode.gsというファイルがあります。.gsはGscript・Google App Scriptの略でそのファイルの中にはmyFunctionという関数があるはず。
  3. GASからウェブアプリを作成するにはユーザーに表示されるインターフェイスを作成する必要がある。そのため、新しくindex.htmlというファイルを作成する。

これで開発環境が整いました🎉

  1. しかし、開発を始める前以下をCode.gsファイルに入力する必要がある。
function doGet(){return HtmlService.createHtmlOutputFromFile("index")}
  1. これが何をするのかを正確に知る必要はない。 GASにindexというHTMLファイルを探すように指示していることを知っておけば大丈夫。

⬇️ それでは、興味深い部分に取り掛かりましょう。

フォルダーからドキュメント抽出

myFunction（）関数内で、使用する3つの異なるフォルダーのフォルダーIDを格納する変数を各々作成できる。

フォルダーの役割

  1. 1つ目のフォルダーは、デフォルトでドキュメントが保存される場所。folderId
  2. 2つ目のフォルダーは、新しいPDFが作成される場所。moveTofolderId
  3. 最後のフォルダーは、PDFへの変換が完了したドキュメントを保存できる場所になります（したがって、次のドキュメントグループに移動するときに、重複を防ぐことができる）。doneFolderId 
function doGet(){
	var folderId = " ";
	var moveToFolderId = " ";
	var doneFolderId = " ";
}

このオブジェクトのルートは DriveAppであり、これを利用して、フォルダーIDをパラメーターとして受け取るgetFolderById（）メソッドを使用して、フォルダーをIDを通してアクセスできる。

全てのドキュメントを含むfolderIdのフォルダーがあるため、getFiles（）メソッドを使用し、フォルダー内のすべてのファイルを取得できる。

function myFunction() {
	var folderId = " ";
	var moveToFolderId = " ";
	var doneFolderId = " ";
	var allFiles = DriveApp.getFolderById(folderId).getFiles();
	var getMoveToFolder = DriveApp.getFolderById(moveToFolderId);
	var getDoneFolder = DriveApp.getFolderById(doneFolderId);
}

フォルダー内のファイルにループ

  1. 特定のフォルダー内のすべてのファイルにアクセスできる変数ができたので、 while（）ループを使用して各ファイルを反復処理できる。
  2. whileループは、この場合、ファイルにそれ自体以外のファイルがあるかどうか、つまり hasNext（）メソッドであるという条件を取る。これにより、フォルダに何も残らなくなるまでループが実行され続けられる。変数を割り当てる（doc）ことで、各ドキュメントを個別に保存することもできる。
  3. これにより、moveTo（）メソッドを使用し、各ドキュメントを特定のフォルダーに移動できる。
while(filesN.hasNext()){
	var doc = filesN.next();
	doc.moveTo(doneFolder);
	var docName = doc.getName();
}
  1. getName（）メソッドを使用して、ファイル名を変数名docNameに格納することもできます。

これで、フォルダをループして、その中の各ファイルにアクセスできるようになりました🔁

各々のファイルをPDF化

  1. 各ドキュメントにアクセスできるため、getAs（）メソッドを使用してGoogleドキュメントファイルを好きなように保存できる。 この場合、PDFとして保存するので、パラメータ内に 'application.pdf'を入力。
  2. また、setName（）メソッドを利用し、ファイル名をドキュメント名.pdfにできる。
docBlob = doc.getAs('application/pdf');
docBlob.setName(docName + ".pdf");
var file = downloadedFolder.createFile(docBlob);
Logger.log(file.getUrl());
  1. 後に、作成するファイルをパラメーターとして取り込んだcreateFile（）メソッドを使用して、特定のフォルダーにこの新しいPDFファイルを作成できる。
    ※必要に応じて、getUrl（）メソッドを使用して作成されたファイルの場所をLogger.log（JavaScriptでいうconsole.log（））も実行できる。

UIの作成

  1. HTMLとCSSを使用して簡単なUIを構築できます。 ボタンのonclickイベントを設定して、 Code.gsでmyFunction（）関数を実行する関数を作る。
<html>
  <head>
    <base target="_top">
  </head>
  <script>
    function startConversion(){
      google.script.run.myFunction();
    }
  </script>
  <body>
    <button onclick="startConversion();">Convert Doc to PDF</button>
  </body>
</html>
  1. 上にある状態でも機能するが、withSuccessHandler（）メソッドを追加することでちょっとした工夫ができる。withSuccessHandler（）メソッドはCode.gsにあるｍｙFunctionが正常に実行された後にパラメーターを通しまた新たな別の関数が実行させることができる関数。
  2. よって、以下のようなものができる
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <script>
    function startConversion(){
	  google.script.run.withSuccessHandler(createUpdate).myFunction();
    }
    function createUpdate(){
	  alert("Its Done!")
    }
  </script>
  <body>
    <button onclick="startConversion();">Convert Doc to PDF</button>
  </body>
</html>

おめでとうございます！これでワークフローが自動化されました🥳

もちろん、読み込みアニメーションをDOMに追加するなど、alert（）メソッドよりクリエイティブなこともできる。そのより良いバージョンと完全なコードは自分のGitHub Gistから見ることができる。

Discussion