とまと あんらいぷ…

エンジニアの活動記録とかつぶやきとか

GitHub
スポンサードリンク

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【GAS】HTML Serviceを使ってGoogleドライブにファイルをアップロードする

Class UiAppが非推奨になってしまった


【GAS】Google Apps SrriptでGoogle ドライブにファイルをアップロードする」で
Googleドライブにファイルをアップロードする記事を書きました。

この記事の中で、htmlの出力にはClass UiAppを使う実装を紹介していましたが
どうやら2014年12月に非推奨になってしまい、ビルドが通らなくなってしまったようです。

UiApp https://developers.google.com/apps-script/reference/ui/ui-app
非推奨というか、もう動かない。

確かに、独特のhtml出力メソッドを利用するやり方は馴染みにくいし
分からなくもない。
仕方がないので新しく推奨されているHTML Serviceで書きなおしてみました。
実装の方法もガラっと変えているので、既存の実装をコンバートしたわけではないことにご注意下さい。

UiAppからHTML Serviceへ


HTML Serviceでは、UiAppに存在していたhtmlを出力するための関数がごちゃごちゃあるわけでもなく
ダイレクトにhtmlを記載するか、予めhtmlファイルを作成しておいて、
そのhtmlをテンプレートとして呼び出すかが主流な使い方となります。

HTML Service:https://developers.google.com/apps-script/guides/html/

htmlをダイレクトに出力するには
HtmlServiceのcreateHtmlOutput()関数を利用します。

例えばこのような形で

var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.append('<p>Hello again, world.</p>');
return output;

直接htmlを出力します。
UiAppにもこんな感じのものがありましたので今回は割愛します。

実装とデザインの分離に慣れる


ほとんどのWEB開発モデルに採用されていますが、
やはり「実装とデザインを分ける」というのはもはや当たり前の手法になっています。

その主流に習い、今回はcreateTemplateFromFileを作って実装します。
動作確認のためとはいえ、htmlと実装コードが混在するようなソースを作るクセがついてしまうのは良くないからね。

というわけで、作成したコードは以下のとおり。
GAS内部のファイルは3つに分かれています。

・アップロードコード.gs
 ページの表示と、Googleドライブにアップロードされたファイルを保存します。
・Form.html
 フォームとアップロードボタンを記載したhtml
・Cpmplete.html
 アップロード完了時に表示されるメッセージ

アップロードコード.gs


Form.html


Cpmplete.html


さくっと解説します。

createTemplateFromFile 関数


createTemplateFromFile という名の通り、別に用意したhtmlをコード内で呼び出し
htmlのテンプレートとして利用します。

実装はdoGet(e)内に記載していますが
return template.evaluate(); としている理由は
GASでhtml出力を行う場合、doGet()関数の戻り値をHtmlOutputクラスとして
返却する必要があり、HtmlTemplateクラスを、HtmlOutputに変換しています。

Form.html アップロードの実装


GASではformタグ内のPOSTメソッドをサポートしていません。
formによってサーバーに送信する機能の代替として
JavaScriptでハンドラ関数を定義し、サーバーとの通信を実装します。

詳しくは、HTML Service: Communicate with Server Functionsを参考下さい。

ちょろちょろとした動きはコードのコメントに書いています。

Cpmplete.html おまけ


createTemplateFromFile() でこんなことできるよ。
というものです。
といのは言い訳で、参考にしたこちらサイト(Form and file upload with htmlService and app script not working)の構成を崩さずに作ったので
そのまま残っています。
今回のソースも殆ど参考サイトのアップロード部分以外を削り、コメントを残しただけです(ドヤッ)

アップロードコード.gsのprocessForm()関数の戻り値は、
そのままForm.htmlのupdateOutput関数に引き渡されます。
で、テンプレートを利用すれば、予めhtmlに宣言した動的な変数を書き換えることができます。

それではよきGASライフを!

※この記事の記載内容の不備、ご指摘事項などあればご連絡をお願いいたします。


▼この記事を読んだ方は、こんな記事も読んでいます。▼

コメント

Re: 質問への返信

アップロード完了後に、ヘッダを消したい(多分ページ遷移したい)というコメントがあったので回答します。
これはまずいとか、考え方が違っているとか言うことがあればコメントいただければ幸いです。

あくまでも、概念習得のために見てほしいだけで、
ソースコードを綺麗に書くとか
構想を整えるというのは別の概念として学習いただきたいのですが

GASには"ページを遷移する"という事は概念としてサポートされていないようです。
あくまでも、1ページ1プロジェクト。
つまり、createTemplateFromFileで作られるページはいつも1つということらしいです。(間違ってるかも)
「GASページ遷移」で検索いただければそれっぽい情報がでてきます。

というわけで、アプローチとして「要らないものはhtml上から非表示にする」というアプローチをするならば
最初にヘッダにClassを付けて、Upload完了後のイベントで消すということが考えられます。

https://drive.google.com/open?id=15xwstybayJid1IbksE6wGMi6DmUUHl3uJyFQMCPrRVKVSEoowUebnF8u
 ※//ヘッダを消す で検索

ご希望の答えになってますでしょうか。

htmlを複数作って移動するという事をしたいだけならば
doPostをすればいいんのでしょうけど、form内のdoPostはこれもまたサポートされてないようで動きません。
多分セキュリティのための措置なのでしょうけど、案外GAS自由度は低いですね。
それもこれも安心(セキュリティ)のためと思います。

そんななかで、提供されているサービスに沿ったプログラムの実装を行っていくのも一つの楽しみかもしれません。

プログラムの写経はとてもいいことですので、せっかく興味を持って取り組んでいることをどんどん吸収していってください!
頑張って!

(そもそも私、GASを組んだことがないので他のプロの方にこのコードを見せると怒られそうな気がします)

  • 2018/04/30(月) 04:00:24 |
  • URL |
  • Dalmore #-
  • [ 編集 ]

Re: Re: 質問への返信

ちなみに質問者さんのコードでもバッチリ動きましたよ。

https://drive.google.com/open?id=1hD9dxOiC2TJRXGBN01Dz68hL5ntq666KpvTnwUx0RNNk6QOCG7_Mc3nQ

ちゃんと見てないけど、どこかで構文エラーで落ちているような???

というわけで私のコメントなんかよりも質問者さんが自身で導き出したコードはお目当ての動きをしていると思います。

  • 2018/04/30(月) 04:23:06 |
  • URL |
  • Dalmore #-
  • [ 編集 ]

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://dalmore.blog7.fc2.com/tb.php/129-23df5f72
この記事にトラックバックする(FC2ブログユーザー)

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。