公開日：6/15/2021
    シェア：

    GASでWEBサイトを作れる？実はいろいろできるみたいです

    　

    会員登録やスケジュール管理、仕事の勤怠管理までWEBサイトの上でできるのが当たり前の昨今、自分でもそんなサイトを作りたいと考えている人もいるかもしれません。

    でも、実際につくろうと思うとデータベースが必要だったり、PHPなどの新しい言語が必要尾だったりと高いハードル感じるでしょう。

    しかし！Googleを使えばかんたんなシステムを作ることができます！

    しかも、WEBサーバーも開発環境もGoogleが準備してくれています。

    では、どのようなことができるのか「フリーランス向け会計システム」を作りながら探っていきましょう。

    ※ここでは2021年6月時点で使える新しいエディタ画面を使って解説をしています。

    まずはWEBページを表示してみる

    最初の一歩は、WEBサイトの表示です。これができるとちょっとうれしい部分です。

    ではさっそく、必要なファイルを作っていきます。

    使うGoogleアカウントからGoogleドライブを開きます。

    次に「＋新規」から　その他→GoogleAppsScript　と進みましょう。


    無題のプロジェクトができました。あとで名前がわからなくならないように、プロジェクト名を「フリーランス向け会計システム（β）」にしておきました。

    次にコードを書いていきます。

    GASのコード

    すでに書かれているコードを消して、次のコードを入力します。

    function doGet() {
      return HtmlService.createTemplateFromFile('index').evaluate();
    }

    GoogleAppsScript（ちょっと長いのでこれからGASとします）でHTMLを表示させるときには、doGetという関数を使って処理を書くことが決まっています。

    この処理が実行されると、indexというHTMLファイルが出力されます。

    WEBページを作ったことがある人ならご存知だと思いますが、HTMLとはWEBページで表示するデータの入っているファイルです。

    では、HTMLファイルを作っていきましょう。

    HTMLのコード

    まずはHTMLファイルを作成します。

    作り方は、ファイル右側の「＋」からHTMLをクリックします。


    すると、名前が入力できるので「index」と入力します。

    この「index」はGASコードに入れた「('index')」と同じ名前というのがポイントです。
    名前が入力できると、ベースのHTMLファイルが作られます。

    このままでは実行しても何も表示されないので下のように書き換えましょう。
    <!DOCTYPE html>
    <html>
      <head>
        <base target="_top">
      </head>
      <body>
        <h1>フリーランス向け会計システム（β）</h1>
        <p>フリーランス向けに必要な機能だけを使える会計システムです。</p>
      </body>
    </html>
    これでHTMLの準備ができました。
    では、WEBページとしてとして表示されるかを見ていきましょう。

    デプロイをテストする

    最近、GASの画面が新しくなり「デプロイ」ボタンができました。
    では、ここからWEBとして公開できるように設定を進めていきましょう。

    まず「実行」ボタンを押しておきます。（これがわからず苦労しました・・・）

    すると、画面の下側にログは表示されます。黄色で実行完了になっていればOKです。

    次に「デプロイ」→「デプロイのテスト」をクリックします。

    ここで「種類の選択」の下が空欄だった場合、種類の選択の右側にある「⚙歯車」からウェブアプリを選択します。
    URLが表示されていたらクリックしてブラウザで開いてみましょう。

    HTMLで作成したページが表示されました。

    これはまだテスト状態ですが、完成したらデプロイをして公開することができます。
    もちろん、データベースを使った動的なWEBサイトも作れます！

    ＜前の記事　　次の記事＞