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を参照する方法（初級）
