Home ・

データ・計測　

最終更新日: 2026年04月13日

Google Apps Script｜初心者でも簡単！Webサイト開発

エンジニアチーム

#データ・計測

ツイートシェア

エンジニアチーム

#データ・計測

ツイートシェア

この記事を読んでる方へ

▼データマーケティングの教科書下

初心者の方から、より詳しくなりたいという方へ。
本書ではデータマーケティングの基礎から学び、データを通じて顧客の行動や感情を理解し、より確かな意思決定を目指します。

詳しく知りたい

みなさん、こんにちは！

「Webサイトを作ってみたいけど、難しそう…」と思っていませんか？

そんな方のために、初心者でも手軽に始められ、柔軟にカスタマイズ可能なWebサイトをGASで作成・公開する方法を、開発手順からデプロイまで丁寧に解説してご紹介します！

1 Webサイトを開発しよう
- 1.1 プロトタイプの作成
- 1.2 GASにコードを貼り付け
2 Webサイトのデプロイ
- 2.1 doGet関数の定義
- 2.2 URLの生成
3 機能追加＆再デプロイしよう
- 3.1 アクティビティデータを動的に取得する
4 まとめ

Webサイトを開発しよう

Webサイトを開発するにあたりHTMLのコードが必要になるため、今回はGeminiを使って静的なWebサイトのプロトタイプを生成してもらうところから始めてみます。もちろん、Gemini以外の他のAIや自分で書いたコードでも大丈夫です。

プロトタイプの作成

まずはGemini Canvasに任せて、Webサイトのおおまかな見た目や構成をサクッと作ってみましょう。
コードの知識がなくても、ログイン画面やダッシュボードといった基本ページを自動で作ってくれるので、初心者でも簡単です。

Gemini Canvasとは？

Gemini Canvasは、GoogleのAIサービス「Gemini」に新しく追加された、インタラクティブな作業スペースです。この機能を使うと、AIと対話しながら、一つの画面内で文章やコードの生成、そしてその編集までを効率的に行うことができます。

Gemini Canvasの主な特徴

リアルタイム編集：Geminiが生成したテキストやコードを、その場で直接修正できます。また変更内容はリアルタイムに反映されます。

手軽なUI設計：プロンプトに作りたいアプリのイメージを伝えるだけで、AIがそのUIコードを生成してくれます。デザインの専門知識がない方でも、AIとの対話を通じてデザインを調整し、アイデアを素早く形にすることが可能です。

コードの生成・編集・実行：HTML、React、Pythonなどのコードをプロンプトで指示するだけで自動生成し、さらにその場でプレビューや動作確認ができます。これにより、専門的な知識がなくてもプロトタイプの開発が非常にスピーディに行えます。

コードの生成

プロンプト入力欄に作りたいものや、AIに生成してほしい内容を具体的に記述します。ざっくりした内容でもAIはそれに基づいて最初のドラフトを生成してくれます。プレビュー画面でアプリのUIを確認しながら、自分の作りたい形になるようにGeminiに指示してみてください。入力後、「Canvas」をクリックしてから送信ボタンをクリック。 HTML、CSS、JavaScript、Pythonなどのコードが生成され、場合によってはそのプレビューや実行結果も表示されます。（今回は、最終的にGASを使ってウェブアプリを作るので、HTMLのコードが作成されるようにしましょう。）

生成されたプロトタイプのコード

生成されたプロトタイプのプレビュー

ダッシュボードページ

アクティビティ詳細ページ

GASにコードを貼り付け

１. Googleスプレッドシートの新規作成 Googleドライブから新規のGoogleスプレッドシートを作成してください。

２. HTMLファイルを作成 GASで新規のHTMLファイルを作り、「index.html」と名前をつけてください。このファイルに、先ほどGemini Canvasで作ったHTMLコードを貼り付けます。

Webサイトのデプロイ

doGet関数の定義

GASで新規のスクリプトファイル（doget.gs）を作り、下記のコードを貼り付けてください。

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

URLの生成

①新しいデプロイ

デプロイ＞新しいデプロイを押下し、デプロイの種類で「ウェブアプリ」を選択します。

②デプロイ設定

ウェブアプリの説明とアクセスできるユーザーを入力し、デプロイをクリックします。

③URLの生成

④デプロイ

デプロイした後に生成されたURLにアクセスし、アプリ画面が出てきたらデプロイ成功です！

機能追加＆再デプロイしよう

生成AIが作ってくれたプロトタイプは、そのまま使うだけでなく用途に合わせて自由に機能やデザインを追加・変更し、実用的なWebアプリへ柔軟に発展させることも可能です！

アクティビティデータを動的に取得する

今回Geminiに生成してもらったコードは、アクティビティの内容が直書きされた静的なサイトとなっているので、GASでGoogleスプレッドシートから動的に取得するように変更し、そのデータがアクティビティに反映されるようにします。

コードの追加・修正

＜Code.gs内のデータ取得部分＞

/**
 * スプレッドシートからアクティビティデータを取得する
 */
function getActivitiesFromSheet() {
  const sheetId = 'xxxxxxxxxxxxxxxxxxxxxxx'; // アクティビティ用スプレッドシートID
  const sheetName = 'xxxxxxxx'; //データが記載されているシート名
  
  try {
    const sheet = SpreadsheetApp.openById(sheetId).getSheetByName(sheetName);
    if (!sheet) {
      Logger.log('アクティビティシートが見つかりません。');
      return [];
    }

    // ヘッダー行を除いた全データを取得
    const data = sheet.getRange(2, 1, sheet.getLastRow() - 1, sheet.getLastColumn()).getValues();
    
    // 取得したデータをオブジェクトの配列に変換
    const activities = data.map(row => {
      return {
        id: row[0],
        title: row[1],
        description: row[2]
      };
    });
    
    return activities;
    
  } catch (error) {
    Logger.log('アクティビティデータの取得中にエラーが発生しました: ' + error.message);
    return [];
  }
}

先ほどと同じ手順でスクリプトを作成します（Code.gs）。
上記のコードでは、Googleスプレッドシートから「アクティビティ」データを取得する処理を行なっています。

＜index.html内のデータ表示部分＞

// サーバーからデータを取得
google.script.run.withSuccessHandler(function(activities) {

 // データをグローバル変数に保存
 allActivities = activities; 

 // データが取得できたらHTMLを生成して表示
 appContainer.innerHTML = getActivitiesListPageHtml();
 attachActivitiesListPageEvents();
})
.withFailureHandler(function(error) {
 console.error('アクティビティデータの取得に失敗:', error.message);
 showMessageBox('アクティビティデータの取得に失敗しました。');
 renderPage('dashboard');
})
.getActivitiesFromSheet();

上記のコードはHTMLコードの抜粋になりますが、Code.gsのサーバー側関数 getActivitiesFromSheet() を呼び、データを変数に保存した後に、HTMLを生成して表示する処理を行なっている部分です。

必要に応じてスクリプトやHTMLの修正をしてください。