とまと　あんらいぷ…

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

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

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

• 【GAS】HTML Serviceを使ってGoogleドライブにファイルをアップロードする
• 初めてのGoogle Apps Script入門（GAS）- 概念の習得
• 【GAS】Google Apps SrriptでGoogle ドライブにファイルをアップロードする
• 【GAS】Google Apps Srript タイトル（title）タグの設定方法
• Google Apps Script（スクリプト）内からSpreadSheetを参照する方法（初級）