Google Apps Scriptでサイトを作成して公開する方法

最終更新日：2026年8月7日

はじめに

項目	Google Apps Script	Excel VBA	Python
主な用途	Google Workspace自動化	Excel業務自動化	汎用自動化・データ分析
学習難易度	低（JavaScript系）	中	低〜中
実行環境	クラウド（無料）	Windows/Excel必須	ローカル or クラウド
Googleサービス連携	最高	低	API経由で可

Webサイトを作成するにはサーバーを契約したり、ドメインを取得したりなどなにかとコストがかかるものです。安くて簡単にWebサイトを作成できたら良いのにな〜と考えたことはないでしょうか？そこで今回はGoogle Apps Scriptを使って無料でWebサイトを構築する方法についてお伝えしていきます。Google Apps Scriptは以下、「GAS」と省略する場合がありますのでご了承ください。

---

Google Apps Scriptでサイトを作成する方法

では早速、Webサイトを作成していきましょう。今回用意していただくのはスクリプトエディタ（Apps Script）だけで大丈夫です。スプレッドシートは使わないため、スプレッドシートから開く必要はありません。コンテナバインドの必要がないためです。スクリプトエディタを単独で開いてください。単独での開き方がわからない場合は、スプレッドシートの「拡張機能＞Apps Script」からスクリプトエディタを開いてももちろん大丈夫です。

ここではサンプルとして以下のようなソースコードで作成していきます。

上がHTMLファイルで下がGASのコードです。このようにGoogle Apps Scriptのエディタ内でHTMLとGASのコードを作成することができます。上記のコードで作成したWebサイトは以下のようにブラウザで表示されます。

このように短い行数でも簡単にWebサイトが作成できます。ここにCSSを記述するとさらに見栄えがよくなりますが、ここでは割愛しますのでご了承ください。また、ウィンドウのタブに書かれたページタイトルとファビコンも下の画像のように設定可能です。

ページタイトルとファビコンが変わるだけで一気にWebサイト感が増すのでこの設定はオススメです。では実際にどのようにして作成しているのかについてお伝えしていきましょう。

HTMLファイルを作成

まずHTMLファイルを作成していきます。ファイル＞新規作成＞HTML を選択しクリックします（エディタのバージョンにより「ファイル＞New＞HTMLファイル」等、表記が異なる場合があります）。

ファイル名を任意で設定してください。ここではわかりやすいようにindexとしています。すると、index.htmlというすでにコードが書かれたファイルが作成されます。この中身を好きなように編集してください。HTMLの記述方法がわからない方は上記に表示した内容を真似していただいても構いません。URLは各自で変更してください。

コード.gsを編集

HTMLの記述が完了したら、次はもとから用意されているコード.gsの中身を変更してきます。myFunction()をdoGet()に修正し、以下のように記述します。

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

これでコード.gsの変更は完了です。では次はサイトを公開してみましょう。

---

作成したサイトを公開する方法

現在のApps Scriptエディタでは、画面右上の「デプロイ」＞「新しいデプロイ」の順にクリックしてください（旧エディタでは「公開＞ウェブアプリケーションとして導入…」という表記でした）。

「新しいデプロイ」の画面が表示されたら、種類の選択で歯車アイコンから「ウェブアプリ」を選び、説明欄に任意のバージョン名を入力し、「アクセスできるユーザー」でWebサイトにアクセス可能な範囲を設定します。設定はあとからでも変更可能ですので、はじめのうちやテスト段階の場合は「自分のみ」で自分だけがアクセス可能にしておくと良いでしょう。

「デプロイ」をクリックすると、URLが記載された画面が表示されます。このURLをクリックすると新規ウィンドウでWebサイトが開きます。以上がGoogle Apps ScriptでWebサイトを公開する方法です。

---

Google Apps ScriptでHTMLを作成する際の注意点

Webサイトの作成と公開する方法をお伝えしましたが、前述したページタイトルとファビコンについてはHTMLのheadタグ内に記述してもコードを読み取ってくれず、無効になってしまうため、GASではHTMLではなく、コード.gs内に記述することになります。また、HTMLファイル内で記述したコードが反映されていないケースがあれば、ページタイトルとファビコン同様、コード.gs内に記述すれば解決することもあるので覚えておくと良いでしょう。

ページタイトルを変更する方法

現状のままだと、ページタイトルは「https://~~~」と表示されているのではないでしょうか。ページタイトルはWebサイトでは重要なので、しっかりとタイトル表示しておきましょう。コード.gsのコードを修正していきます。

function doGet() {
  const htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
  return htmlOutput;
}

これに加えてsetTitleメソッドを使うことでページタイトルを設定することが可能となります。setTitleメソッドを利用したソースコードはこのようになります。

function doGet() {
  const htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
  htmlOutput.setTitle("ここにページタイトルを入力します");
  return htmlOutput;
}

この状態で再度デプロイし直してWebサイトを開いてみると、ページタイトルが反映されます。

ファビコンを変更する方法

次はページタイトルの左側にあるファビコンを変更していきます。ファビコンはWebサイトの重要な顔で、Amazon、Google、Yahoo!、X（旧Twitter）、Facebookなどの有名企業はファビコンを見ただけですぐに会社名がわかるほどです。そのためページタイトル横のファビコンの設定はWebマーケの視点から見るととても重要なものなのです。

WebサイトをGoogle Apps Scriptで作成した場合、そのままのファビコンが表示されてしまうため、世間に公開する場合は変更することをオススメします。

function doGet() {
  const htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
  htmlOutput.setFaviconUrl("https://drive.google.com/uc?id=[ファイルID]&.png");
  return htmlOutput;
}

ファビコンの設定方法はsetFaviconUrlメソッドを利用します。上記のコードの場合、ファビコン画像はGoogle Drive内に保存した画像を利用しています。ファイルIDの取得方法についてはここでは割愛します。「Googleドライブ 画像 ファイルID」などで検索するとファイルIDの取得方法が紹介されているのでそちらを参考にしてください。また、最後尾に&.pngをつけることも忘れないようにしてください。この状態で再度デプロイし直してWebサイトを開くと、設定したファビコンが反映されます。

ページタイトルとファビコンの両方を表示させる場合は

htmlOutput
  .setTitle("ここにページタイトルを入力します")
  .setFaviconUrl("https://drive.google.com/uc?id=[ファイルID]&.png");

とすることでこのように表示されます。

この記事のポイント

• GASのHtmlServiceを使えば、スクリプトエディタだけでサーバー・ドメイン契約なしにWebサイトを作成・公開できる
• 公開は現在のApps Scriptエディタでは「デプロイ＞新しいデプロイ」から行い、アクセス範囲を「自分のみ」等で設定できる
• ページタイトル・ファビコンはHTML側ではなくコード.gs側でsetTitle/setFaviconUrlメソッドを使って設定する必要がある

よくある質問

Q. HTMLファイルにタイトルタグを書いてもページタイトルが変わりません

A. GASのWebアプリでは、HTMLのheadタグ内のtitleは無効になるため、コード.gs側でsetTitle()メソッドを使って設定する必要があります。

Q. コードを修正したのにWebサイトに反映されません

A. GASのWebアプリはコードを修正しただけでは反映されず、「デプロイ＞デプロイを管理」から新しいバージョンとして再デプロイする必要があります。

Q. 作成したWebサイトは無料で公開できますか？

A. はい。GoogleアカウントがあればGASのWebアプリ機能自体は無料で利用できます。ただし、独自ドメインを使いたい場合は別途ドメイン取得費用が必要です。

関連記事

• GoogleのスクリプトでWebサイトに文字を表示する

---

おわりに

以上がGoogle Apps ScriptでWebサイトを作成し公開する方法でした。HTMLが書ければ比較的簡単にWebサイトが作成できますが、通常のHTMLとは少し異なる部分もあり、コードが反映されていないと感じたときはHTMLファイルではなくgsファイルで対応できないか検討する必要があります。それさえ知っておくだけで問題解決に至るまでに泥沼にハマることは少なくなるでしょう。