GASのダイアログをファイルをアップロードが成功したら閉じる方法

close

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

Google Apps Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えするシリーズです。

前回の記事はこちら。

Google Apps ScriptでCSVファイルのデータをスプレッドシートに展開する方法
Google Apps Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えするシリーズです。今回は、GASでCSVファイルをスプレッドシートに展開する方法です。

ダイアログから渡したCSVファイルをスプレッドシートに展開する方法をお伝えしました。

これで完成!…と思いきや、アップロードした後にダイアログが表示しっぱなし…という問題があったんですね。

今回は、それを解消していきましょう。

ということで、GASのダイアログをファイルをアップロードが成功したら閉じる方法です。

では、行ってみましょう!

スポンサーリンク

前回のおさらい

では、これまでのおさらいです。

ダイアログを作成する「dialog.html」はこちら。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form>
      <input name="myFile" type="file">
      <button onclick="google.script.run.uploadCsv(this.parentNode);">アップロード</button> 
    </form>
  </body>
</html>

「アップロード」ボタンをクリックすると、サーバー側のuploadCsv関数をフォーム要素を渡しつつ呼び出します。

一方で、サーバー側の「コード.gs」がこちら。

function showDialog(){
  var html = HtmlService.createHtmlOutputFromFile('dialog');
  SpreadsheetApp.getUi().showModalDialog(html, "CSVアップロード");
}

function uploadCsv(form) {  
  var blob = form.myFile;
  var csvText = blob.getDataAsString();    
  var values = Utilities.parseCsv(csvText);
  SpreadsheetApp.getActiveSheet().getRange(1, 1, values.length, values[0].length).setValues(values);
}

showDialog関数がダイアログを表示する関数、uploadCsv関数がクライアント側から呼び出されて

  1. 受け取ったフォーム要素からCSVファイルを取り出し
  2. CSVファイルからCSVテキストを取り出し
  3. CSVテキストを二次元配列化し
  4. 二次元配列をスプレッドシートに展開する

というものでした。

ただ、ファイルを「アップロード」すると、スプレッドシートへの展開はうまくいくのですが、ダイアログが閉じてくれない…

GASでCSVファイルをスプレッドシートに展開

その点を解消するのが今回のミッションです。

サーバー側の処理が完了したらダイアログを閉じる

さて、どうやってそのサーバー側の処理が完了したらダイアログを閉じるというミッションをクリアするかですが

  1. アップロードが完了したら、それを受けて
  2. ダイアログを閉じる

という処理をすればよいわけですよね。

サーバー側の関数の呼び出し成功で関数を実行する

まず前者ですが、今回の場合は「updateCsv関数の呼び出しが無事に完了したら」ともいいかえることができます。

そのようなときに使用するのが、google.script.runのwithSuccessHandlerメソッドです。

以下のように記述して、「関数名」で指定したサーバー側の関数の呼び出しが無事に完了したら、引数に指定した「コールバック関数」を実行します。

google.script.run.withSuccessHandler(コールバック関数).関数名(引数1, 引数2,…)

ですから、今回のケースでは、「dialog.html」のbutton要素のonclick属性に仕込むスクリプトを以下のようにすればよいわけです。

google.script.run.withSuccessHandler(function(){
  //何か処理
}).uploadCsv(form);

クライアント側からダイアログを閉じる

withSuccessHandlerメソッドの引数内に記述する関数内の「何か処理」でダイアログを閉じる処理を入れます。

ですが、このスクリプト…クライアント側で動作するhtmlファイル内ですよね?

クライアント側からダイアログの操作って…できるんでしょうか?

って、できるんです!

google.script.hostというものを使うと、ダイアログやサイドバーを操作することができるんです。

そして、それらを閉じる命令としてcloseメソッドが用意されています。

google.script.host.close()

これを使って、以下のようにすればファイルアップロード後にダイアログが閉じるはず…!

google.script.run.withSuccessHandler(function(){
  google.script.host.close();
}).uploadCsv(form);

scriptタグにJavaScriptを記述する

さて、button要素のonclick属性に記述する処理がだいぶ増えてしまったので、ダブルクォーテーション内に書くのは、だいぶしんどいですね。

なので、関数化して外出ししましょう。

HTMLファイル内のJavaScriptはscriptタグ内に記述することができます。

<script>
 // スクリプト
</script>

ですから、今回の場合は以下のようにscriptタグ内の関数uploadCsvにまとめます。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form>
      <input name="myFile" type="file">
      <button onclick="uploadCsv(this.parentNode);">アップロード</button> 
    </form>
    
    <script>
      function uploadCsv(form) {
        google.script.run.withSuccessHandler(function(){
          google.script.host.close();
        }).uploadCsv(form);
      }
    </script>
  </body>
</html>

button要素のonclick属性にuploadCsv関数の呼び出しを入れればよいわけですね。

ダイアログを閉じる動作確認

では、ダイアログを閉じる動作確認をしましょう。

ダイアログを表示して、CSVファイルをアップロードすると…

GASのダイアログからCSVを展開してダイアログを閉じた

ちゃんとダイアログが閉じました!

まとめ

以上、GASのダイアログをファイルをアップロードが成功したら閉じる方法をお伝えしました。

google.script.runのwithSuccessHandlerメソッドと、google.script.hostのcloseメソッドですね。

クライアント側でできることもいくつかあるんですね。

次回は、ファイルアップロードが失敗したときについて考えていきます。

GASのダイアログでファイルアップロードが失敗したらアラートを表示する方法
Google Apps Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えするシリーズです。今回はGASのダイアログでファイルアップロードが失敗したらアラートを表示する方法です。

どうぞお楽しみに!

連載目次:GASのダイアログでcsvファイルアップローダーを作ろう

Google Apps Scriptでダイアログを作成する方法はいくつかありますが、HTMLサービスとUiサービスを組み合わせると自由で多機能なダイアログが作れます。このシリーズではそんなダイアログの作り方を易しく紹介していきます。
  1. Google Apps Scriptでダイアログを作るいくつかの方法と基礎知識
  2. GASで最も簡単なHTMLサービスによるダイアログを作成する方法
  3. GASのダイアログで作成するファイルアップローダーの部品を配置する方法
  4. GASのダイアログでボタンをクリックしてアラート表示を動作させる方法
  5. GASのダイアログのボタンクリックでサーバー側の関数を呼び出すgoogle.script.run
  6. GASのダイアログのデータをフォーム要素を渡すことでまとめてサーバー側に渡す方法
  7. GASのダイアログでアップロードしたファイルをBlobオブジェクトとしてサーバー側に渡す方法
  8. Google Apps ScriptでCSVファイルのデータをスプレッドシートに展開する方法
  9. GASのダイアログをファイルをアップロードが成功したら閉じる方法
  10. GASのダイアログでファイルアップロードが失敗したらアラートを表示する方法
タイトルとURLをコピーしました