MENU
GAS

GASを使ってたった5分でWebページを作成・公開する方法

thumbnail
n-mukineer
えぬ
えぬ

こんにちは、えぬ（@nmukineer）です！

GAS（Google Apps Script）を使うと、簡単なWebサイトをサーバレスで作って無料で公開することができます。慣れれば５分程度でデプロイまでできますので、ぜひ試してみてください！

今回は、GASでHTMLファイルを作成して、Webページ（GAS的にはWebアプリ）として公開する手順を詳しく解説していきます。

応用していけば、こちらの記事のようなWebアプリもすぐに作れますので、読んでみてくださいね！

あわせて読みたい
GASで完全サーバレスのWebアプリを作成する方法を徹底解説
GASで完全サーバレスのWebアプリを作成する方法を徹底解説
Contents
  1. GASプロジェクトの作成～デプロイまで
  2. HTMLファイルを準備して表示させる
  3. まとめ

GASプロジェクトの作成～デプロイまで

GASプロジェクトの作成

まずはGASプロジェクトを準備しましょう。プロジェクトの作成方法に関しては以下の記事に詳しく説明してありますので、そちらをご参照ください。

あわせて読みたい
【無料】GASを使い始めるための3ステップ【簡単】
【無料】GASを使い始めるための3ステップ【簡単】

GASのプロジェクトを作成し、GCPのプロジェクトへの紐づけまでを行って下さい。

GCPプロジェクトへの紐づけができたら、試しにデプロイしてみます。

コード.gsファイルに、doGet()という関数を作成します。

doGet関数

このdoGetは、GASがWebアプリとして動作する際に、GETメソッドが実行されたときに実行される関数です。

今は空白なので、何も実行されませんが、ここにHTMLファイルの呼び出しコードを書いていくことでブラウザ上で表示させることができるようになります。

GASのデプロイ

まだ何もいったんデプロイしてみましょう。デプロイ方法については、以下の記事に書いてありますので、参考にしてみてください。

初回のデプロイの時はこちら
GASで作ったAPIにM5StackからPOSTする方法
GASで作ったAPIにM5StackからPOSTする方法
２回目以降のデプロイ方法はこちら
GASからLINE Notifyを使ってLINE通知する方法
GASからLINE Notifyを使ってLINE通知する方法

一度デプロイまで成功していれば、コードを少しずつ修正しながら何度も再デプロイできますので、最初から完璧に仕上げ少しずつ動作確認をしていくほうがおすすめです。

いったんデプロイが完了すると、その際に表示されたURLをブラウザのアドレスバーにコピペして開くことで、動作確認ができます。

ブラウザで開くとまだdoGet関数が空の状態なので、以下の画面になると思います。

空のdoGetのままデプロイしたときの画面

デプロイ前にテストしたい場合

GASの場合、デプロイしなおす手間が非常に少ないため、

少しコードをいじってはデプロイ、いじってはデプロイ…

みたいなやり方でも大丈夫なのですが、もっと簡単に確認する方法があります。

公開されたURLとは別に、検証用のURLも用意されており、下記のように「デプロイをテスト」を選択します。

表示された「ウェブアプリ」のURLをコピーしてブラウザで開くと、テスト用の画面が表示されます。

このやり方である程度デバッグを進めていき、形になってきたらデプロイするという進め方のほうが効率的ですね。ぜひ使ってみてください。

HTMLファイルを準備して表示させる

HTMLファイルの作成

HTMLを選択

ファイルの「＋」ボタンから、「HTML」を選択します。

名前を[index]に変更

デフォルトだと「無題」というファイルが作成されるので、「index」に変更します。拡張子は入れる必要はありません。

HTMLを編集する

index.htmlが作成できたら、デフォルトでコードが記載されていると思います。

そのままでは何も要素がないので、以下のようにh1タグで本ブログのタイトルと、ブログへのリンクを入れてみます。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>N日後にムキムキになるエンジニアブログ</h1>
    <div>
      <a href="https://n-mukineer.com/">こちら</a>からどうぞ
    </div>
  </body>
</html>

これで一度保存し、「コード.gs」に戻りましょう。

GASスクリプトからHTMLを呼び出す

doGet関数に、以下のように１行を追加します。

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

こうすることで、「index」という名前のHTMLファイルを呼び出すことができます。

実際にデプロイして確認してみると…

HTMLファイルが呼び出せた

このように、ブラウザでHTMLファイルが表示され、リンクもちゃんと設定されました！

あとは、HTMLを作りこんで、CSSやJavaScriptで装飾したり動きをつけたりしていけば、本格的なWebページとして完成する、というわけです！

まとめ

今回は、GASでWebページを作る際の基本的なステップについて解説しました。

まとめ
  • GASはHTMLファイルを呼び出してブラウザで表示させることができる
  • サーバレス・無料で使えるので、簡単なサイトを作りたい場合はおススメ！
  • デプロイ前に「デプロイをテスト」することで動作確認を効率化することができる

以下の記事では、HTMLとgsファイルを連携させるために「スクリプトレット」と呼ばれるタグを使った書き方を紹介していますので、よかったら見てみてください。

あわせて読みたい
時短ワザも紹介！GASで作ったHTMLファイルにスクリプトレットを使って変数を渡す方法
時短ワザも紹介！GASで作ったHTMLファイルにスクリプトレットを使って変数を渡す方法
このブログを書いている人
えぬ
えぬ
N日後にムキムキになるエンジニア
Contact
WebアプリエンジニアとしてIoTシステムを開発中。30代折り返し。 趣味（モノづくり、プログラミング、筋トレ）や子育てのことを主に記事にします。 TOEIC: 900点/第一級陸上無線技術士/第３種電気主任技術者/技術士一次試験合格/基本情報技術者/第２種電気工事士/デジタル技術検定２級（情報・制御）
Recommend
こちらの記事もどうぞ
記事URLをコピーしました