【GAS 】簡易サーバーレスWebアプリを作る①Hello World
Webアプリ開発(フロントエンド側)の勉強のために、簡単に動いて動作確認できるものはないかなぁ、サーバー立てるのも面倒だし。。。と思ったらGASを使って簡易的なサーバーレスアプリが作れるらしいので試してみました。
今回は簡単にHello Worldと表示するアプリを作って公開してみます。
まずは、Webアプリのプロジェクトを作りましょう。プロジェクトの作り方は【GAS】Google Apps Scriptとは - だって楽したいじゃんか!を参照ください。
gsファイルの編集
gsファイルを編集します。作成したときには下記のようになっていると思いますが、書き換えます。コード.gs
function doGet(e) { var template = HtmlService.createTemplateFromFile('index'); return template.evaluate().setTitle('Hello World').addMetaTag("viewport", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0") }
HtmlServce.createTemplateFromFIleの引数にhtmlを指定します。
指定はGASプロジェクト内のファイルを指定可能で、拡張子の記載は特に必要ありません。
これによって、HtmlServiceのインスタンスが生成されます。
また、本来HTMLのheadタグ内部に記載するtitleやmetaタグ情報はHTMLに記載しても読み込まれないため、HtmlServiceインスタンスにaddしていきます。
HTMLファイルの編集
ブラウザで表示させるHTMLを作成します。ファイル>新規作成>HTMLファイルを選択します。ファイルを作成ダイアログで、ファイル名を指定し、保存を押下します。
HTMLファイルが作成されます。
立ち上がったHTMLを編集していきます。
今回はサンプルなので、次のように編集します。
index.html
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> <h2>Hello World<h2> </body> </html>
Hello Worldをbodyに埋め込んでいるだけです。
アプリの公開
それでは早速アプリケーションとして公開してみます。公開>ウェブアプリケーションとして導入を押下します。
プロジェクトバージョンを指定したり、アクセスできるユーザを指定して、導入を押下します。
アプリケーションにアクセスできるURLが発行されるので、メモしておきましょう。
それではブラウザのURL入力欄に上記URLを入力させてみましょう。
画面にHello Worldが表示されました。
一番シンプルなWebアプリが完成です。
まとめ
今回はGASで簡単にサーバーレスWebアプリが作れるということで、試しに一番簡単なアプリケーションを作成してみました。とはいえ、Hello Worldを表示させただけで、アプリを使うというところまでは程遠いので、次回以降もうちょっと作りこんでいきます。
JavaScriptやCustomStyleSheetなんかも使えたり、GASを使うメリットであるGoogle Spread Sheetなどとのアプリとの連携などできそうなことがたくさんあります。
- 【GAS】Google Apps Scriptとは - だって楽したいじゃんか!
- 【GAS】無料!!30分で作れるLINEチャットボット - だって楽したいじゃんか!
- 【GAS】人工知能APIを使って自然な返答をするLINEチャットボットを作ってみる【LINE】 - だって楽したいじゃんか!
- 【GAS】LINE Front-end FrameworkをGASで作ったWebアプリと連携させたらうまくいかなかった話【LIFF】 - だって楽したいじゃんか!
- 【GAS 】簡易サーバーレスWebアプリを作る①Hello World - だって楽したいじゃんか!
- 【GAS】定期的に特定条件のメールを抽出し転送する方法 - だって楽したいじゃんか!