質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

8196閲覧

GASでコード.gsからHTML(JavaScript)にBlobファイルを渡したい

tone

総合スコア12

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2018/12/07 07:49

編集2018/12/07 12:51

前提・実現したいこと

Google Apps Scriptについて質問させて頂きます。

Googleドライブに保存したファイルを
ローカルにダウンロードする機能を実装しています。

コード.gs側でGoogleドライブに保存してある
ダウンロードしたいファイル(テキストファイル)のURLを取得し、
ScriptApp.getOAuthToken();を付与してから
UrlFetchApp.fetchでgetBlob()でBlobを取得しました。

ここで取得したBlobを自動でダウンロードするため
HTML側(JavaScript)に渡したいのですが、
HTML側で内容を確認するとNULLになってしまいます。

Blobを渡すことは不可能なのでしょうか?

試したこと

コード.gsからHTMLへURL(文字列)を渡せることは確認していたので、
大丈夫かと思ったのですが・・・

文字列が取得できたコード(コード.gs)

function ProcFileDownload(formObject) { var folderName = 'フォルダ名'; var fileName = 'ファイル名'; //ファイル名からフォルダIDとファイルIDを取得 var folderId = DriveApp.getFoldersByName(folderName).next().getId(); var fileId = DriveApp.getFolderById(folderId).getFilesByName(fileName).next() var url = fileId.getDownloadUrl(); var wkToken = '&access_token=' + ScriptApp.getOAuthToken(); return url + wkToken; }

Blobが取得できないコード(コード.gs)

function ProcFileDownload(formObject) { var folderName = 'フォルダ名'; var fileName = 'ファイル名'; //ファイル名からフォルダIDとファイルIDを取得 var folderId = DriveApp.getFoldersByName(folderName).next().getId(); var fileId = DriveApp.getFolderById(folderId).getFilesByName(fileName).next() var url = fileId.getDownloadUrl(); var wkToken = '&access_token=' + ScriptApp.getOAuthToken(); return UrlFetchApp.fetch(url+wkToken).getBlob(); }

index.html(JavaScript部/共通)

HTML

1<script> 2 function handleFormDownloadSubmit(formObject) { 3 google.script.run.withSuccessHandler(downloadEvent).ProcFileDownload(formObject); 4 } 5 6 function downloadEvent(downloadFile) { 7 alert(downloadFile); //Blobの時はtypeofでObjectと表示されるが内容はNull 8 9 //以降はaタグを生成してclickイベントでダウンロード 10} 11</script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

papinianus

2018/12/07 08:10 編集

できると思いますし、文字列ができれば文字列で構成されるファイルはできように思えるのですが、文字列が取得できたコードと、blobが取得できないコードは開示していただけないのですか?
tone

2018/12/07 12:55

該当のコードを追記しました。整理していてふと思ったのですが、alertで内容を確認しているのが悪いのでしょうか。
guest

回答1

0

ベストアンサー

確かgoogle.script.runを使ってGAS側から直接blobをHTML側へ送ることはできなかったように記憶しています。そのため、回避策の一つとして、バイト配列を使って送ります。もちろん、base64に変換して送ることも可能です。修正したスクリプトは次の通りです。

GAS側

javascript

1function ProcFileDownload(formObject) { 2 var folderName = 'フォルダ名'; 3 var fileName = 'ファイル名'; 4 5 //ファイル名からフォルダIDとファイルIDを取得 6 var folderId = DriveApp.getFoldersByName(folderName).next().getId(); 7 var fileId = DriveApp.getFolderById(folderId).getFilesByName(fileName).next() 8 9 var url = fileId.getDownloadUrl(); 10 var wkToken = '&access_token=' + ScriptApp.getOAuthToken(); 11 12 return UrlFetchApp.fetch(url+wkToken).getContent(); // ここを修正しています。 13}

HTML側

javascript

1<script> 2 function handleFormDownloadSubmit(formObject) { 3 google.script.run.withSuccessHandler(downloadEvent).ProcFileDownload(formObject); 4 } 5 6 function downloadEvent(downloadFile) { 7 // alert(downloadFile); //Blobの時はtypeofでObjectと表示されるが内容はNull 8 9 var ar = new Uint8Array(downloadFile); // 追加したスクリプト 10 var blob = new Blob([ar.buffer]); // 追加したスクリプト 11 var url = window.URL.createObjectURL(blob); // 追加したスクリプト 12 13 //以降はaタグを生成してclickイベントでダウンロード 14} 15</script>

注意点

  • getContent()メソッドは[]byteを返します。
  • var blob = new Blob([arr.buffer]);{type: mimeType}を追加する必要があるかもしれません。サンプルのためここでは省略しています。mimeTypeが必要な場合は、GAS側か送ることも可能です。
  • GAS側スクリプトではformObjectは使用されていないようですが、サンプルスクリプトのため省略しているのかと考えました。

参考

投稿2018/12/10 02:34

kisojin

総合スコア899

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tone

2018/12/10 11:14

kisojinさん、回答ありがとうございます。 ご提示いただいた方法でファイルを扱うことができました。 {type: mimeType}の追加は不要でした。 (正しく指定してあげたほうがいいのかもしれませんが・・・) formObjectにつきましてはご想像の通りです。
kisojin

2018/12/15 07:20

問題が解決したとのこと、安心しました。結果のご連絡有難うございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問