Google Apps Scriptで最も簡単なWebページを作成して公開する

hello

photo credit: duncan Hello via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

Google Apps Scriptを使うとスプレッドシートやドキュメント、カレンダー、GmailといったG Suiteを中心としたサービスをいとも簡単に操作することができます。

そんなGoogle Apps Scriptですが、HTML・CSSによるWebページを作成できることはご存知でしたか?

しかも、サーバーはGoogleが用意してくれているものをそのまま使えますので、個別のサーバー契約やセッティングなど不要で、すぐさまインターネットにWebページを公開することができるのです。

しかも無料…!

ということで、本シリーズでは、GASユーザーかつHTMLページ・CSS初心者向けにWebページの作り方の基本中の基本を解説していきます。

まず、最初の一歩として、GASで最も簡単なWebページを作成して公開する方法をお伝えします。

Hello World的なやつです。

では、行ってみましょう!

スポンサーリンク

新規スタンドアロンスクリプトを作成する

早速ですが、新規スクリプトを作成しましょう。

コンテナバインドでもいいのですが、しばらくはスプレッドシートなどとの連携はしませんので、このシリーズではスタンドアロンで作成をしていきます。

まず、Apps Scriptのダッシュボードページにアクセスしてください。

そして、画面左上の「新規スクリプト」をクリックしましょう。

Apps Scriptダッシュボードから新規スクリプトを作成

すると、簡単にスタンドアロンの新規スクリプトを作成することができます。

スクリプトエディタが開きますので、プロジェクト名を「無題のプロジェクト」から任意のプロジェクト名に変更しましょう。今回は「WebPage」としました。

新規作成したプロジェクト

GASのプロジェクトにHTMLファイルを作成する

続いて、GASのプロジェクト内にHTMLファイルを作成します。

HTMLとは

HTMLとはHyper Text Markup Language略で、Webページを作るための言語です。それを記述するためのファイルがHTMLファイルというわけです。

Google Apps Scriptでふだんスクリプトを作成するのはGSファイルですよね。

それとは別の種類のファイルとして、GASのプロジェクト内に、そのHTMLファイルを作成して持つことができるというわけです。

HTMLファイルの新規作成

では、スクリプトエディタのメニューから「ファイル」→「新規作成」→「HTMLファイル」と選択します。

GASのプロジェクト内にHTMLファイルを作成する

「ファイルを作成」ダイアログが開きますので、ファイル名を入力して「OK」としてください。ここでは「index」とします。

GASのCreate Fileダイアログ
なお、GASでHTMLファイルを作成する場合は、拡張子「.html」は勝手に付与されますので、入力は不要です。

これで、GASのプロジェクト内に「index.html」が作成されました。

GASのプロジェクトに作成したHTMLファイル

既に一部のHTMLが入力されている状態ですね。ありがたい…!

HTMLファイルの編集

HTMLファイルもGSファイルと同様にスクリプトエディタで編集をすることができます。

試しに、<body>と</body>の間の行に、以下のHTML文を入力してみてください。

<h1>Hello HTML!</h1>

つまり、以下のような状態になります。

GASプロジェクトのHTMLファイル

あ、保存は忘れずにしてくださいね。

Webページを公開する

doGet関数を作成する

今度は、「コード.gs」を編集していきます。既に書いてある関数myFunctionは消しちゃってOKです。

代わりに以下、doGetという名前で関数を作成します。

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

この関数の内容については後述しますね。こちらも保存を忘れずに…!

ウェブアプリケーションとして導入する

これで、Webページが公開できる状態になりましたので、ウェブアプリケーションとして導入していきましょう。

スクリプトエディタのメニューから「公開」→「ウェブアプリケーションとして導入」を選択します。

GASでウェブアプリケーションとして導入

すると、「Deploy as Web app(ウェブアプリケーションとして導入)」ダイアログが開きます。

まず、Project versionを入力します。これはウェブアプリケーションのバージョン管理するための設定です。

初回ですのでプルダウンは「New」で、テキストは「最初のバージョン」などと入力しておきましょう。

続いて「Who has access to the app(アプリケーションにアクセスできるユーザー)」ですが、以下パターンから選択します。

  • Only myself: 自分のアカウントでログインしていればアクセスできます
  • Anyone within {ドメイン名}: G Suiteに登録している{ドメイン名}のアカウントでログインしていればアクセスできます
  • 全ユーザー: Googleアカウントでログインしていればアクセスできます
  • Anyone, even anonymous: ログインせずに誰もがアクセスできます

公開範囲に応じて選択しますが、今回は「Anyone, even anonymous」に設定をして「Deploy」をクリック!

GASのウェブアプリケーションとして導入ダイアログ

WebページのURL

すると、以下のようにこのWebページにアクセスするための「ウェブプリケーションのURL」が生成されます。

このURLを見ていただきたい方に共有すれば、皆さんがこのページにアクセスできるようになるわけです。

GASのウェブアプリケーションのURLを取得

すぐに、Webページを確認したい場合は「最新のコード」をクリックすれば、別タブで開いてくれます。

どうぞ!

GASで作成したWebページ

非常にシンプルではありますが「Hello HTML!」と表示されたWebページが開きます。

まとめ

以上、GASで最も簡単なWebページを作成して公開する方法をお伝えしました。

これ、なんなくやっていますが、実際に公開できるページを作成するには、Webサーバーを用意しないとなんですよ。

GASならGoogleが用意してくれるので、無料ですぐにWebページを公開できます。これ、ほんとありがたい話なんです。

さて、HTMLファイルと、GSファイルのdoGet関数の詳細については今回は割愛してしまいましたので、次回以降解説をしていきますね。

GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説
GASユーザーのためのHTML・CSSによるWebページ制作入門を伝えしています。今回は、GASでWebページを表示するdoGet関数のスクリプトとその仕組について丁寧に解説をしていきますよ!

どうぞお楽しみに!

連載目次:GASユーザーのための初めてのHTML・CSS講座

Google Apps ScriptではHTML・CSSを使ってWebページを作成し、公開することもできます。本シリーズでは、HTMLやCSSの全くの初心者が、GAS環境を利用してその基本的な知識を身に着けられるようにお手伝いしますよ!
  1. Google Apps Scriptで最も簡単なWebページを作成して公開する
  2. GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説
  3. GASで作成した最も簡単なWebページのHTMLコードについて丁寧に解説
  4. 【GASユーザーのためのHTML入門】よく使う基本のHTMLタグを紹介します
  5. 【GASユーザーのためのHTML入門】アンカーリンクを張るaタグの書き方
  6. GASのWebページにGoogleドライブ内の画像を挿入する方法
  7. GASで作ったWebページにCSSでスタイルをする最初の一歩
  8. 【GASユーザーのためのHTML入門】好きな要素にだけCSSでスタイルを適用する
  9. 【GASユーザーのためのHTML入門】範囲指定するだけの便利なdivタグとspanタグ
  10. GASでWebページを作るときにHTMLとCSSを別ファイルに記述する方法
  11. GASでWebページを作成する際にCSSフレームワークBootstrapを導入する方法
  12. GASのWebページのナビゲーションをBootstrapでスタイルする方法
  13. GASとBootstrapでWebページを超簡単にいい感じのレイアウトにする方法
  14. GASでWebページを作るときにページのタイトルを設定する方法
  15. GASで作成したWebページにファビコンを設定する方法
  16. GASで作成したWebページをスマホで表示させたいときのmetaタグviewportの設定
タイトルとURLをコピーしました