とまと あんらいぷ…

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

GitHub
スポンサードリンク

【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ライフを!

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


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

スポンサードリンク

コメント

コメントの投稿


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

トラックバック

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

FC2Ad