だって楽したいじゃんか!

大学院(機械工学科)を首席で卒業した男がこれまでの経験を生かさず殺さず発信していく

【GAS 】簡易サーバーレスWebアプリを作る①Hello World

f:id:makimakimakino:20190114224927p:plain
Webアプリ開発(フロントエンド側)の勉強のために、簡単に動いて動作確認できるものはないかなぁ、サーバー立てるのも面倒だし。。。と思ったらGASを使って簡易的なサーバーレスアプリが作れるらしいので試してみました。

今回は簡単にHello Worldと表示するアプリを作って公開してみます。

まずは、Webアプリのプロジェクトを作りましょう。プロジェクトの作り方は【GAS】Google Apps Scriptとは - だって楽したいじゃんか!を参照ください。

gsファイルの編集

gsファイルを編集します。作成したときには下記のようになっていると思いますが、書き換えます。

f:id:makimakimakino:20190416221746p:plain


コード.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")
}


アプリのエンドポイントにGetでアクセスされた際の処理をdoGet関数に記載します。

HtmlServce.createTemplateFromFIleの引数にhtmlを指定します。

指定はGASプロジェクト内のファイルを指定可能で、拡張子の記載は特に必要ありません。

これによって、HtmlServiceのインスタンスが生成されます。

また、本来HTMLのheadタグ内部に記載するtitleやmetaタグ情報はHTMLに記載しても読み込まれないため、HtmlServiceインスタンスにaddしていきます。

HTMLファイルの編集

ブラウザで表示させるHTMLを作成します。ファイル>新規作成>HTMLファイルを選択します。

f:id:makimakimakino:20190416221624p:plain

ファイルを作成ダイアログで、ファイル名を指定し、保存を押下します。

f:id:makimakimakino:20190416221944p:plain

HTMLファイルが作成されます。

f:id:makimakimakino:20190416222030p:plain

立ち上がったHTMLを編集していきます。

今回はサンプルなので、次のように編集します。


index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h2>Hello World<h2>
  </body>
</html>


Hello Worldをbodyに埋め込んでいるだけです。

アプリの公開

それでは早速アプリケーションとして公開してみます。

公開>ウェブアプリケーションとして導入を押下します。

f:id:makimakimakino:20190416222214p:plain

プロジェクトバージョンを指定したり、アクセスできるユーザを指定して、導入を押下します。

f:id:makimakimakino:20190416222404p:plain

アプリケーションにアクセスできるURLが発行されるので、メモしておきましょう。

f:id:makimakimakino:20190416222513p:plain

それではブラウザのURL入力欄に上記URLを入力させてみましょう。

f:id:makimakimakino:20190416222808p:plain

画面にHello Worldが表示されました。

一番シンプルなWebアプリが完成です。

まとめ

今回はGASで簡単にサーバーレスWebアプリが作れるということで、試しに一番簡単なアプリケーションを作成してみました。

とはいえ、Hello Worldを表示させただけで、アプリを使うというところまでは程遠いので、次回以降もうちょっと作りこんでいきます。

JavaScriptやCustomStyleSheetなんかも使えたり、GASを使うメリットであるGoogle Spread Sheetなどとのアプリとの連携などできそうなことがたくさんあります。