2026.03.18

Google Apps Scriptで社内ポータルサイトを1日で作った話

前職で「社内の情報がバラバラすぎる」という問題があった。マニュアルはGoogle Drive、連絡事項はチャット、申請フォームはあちこちのスプレッドシートに散らばっていた。予算もリソースも使えなかったので、GAS（Google Apps Script）だけで1日で社内ポータルを作った話をする。

なぜGASを選んだか

サーバー不要（Googleのインフラで動く）
追加コスト0円
Google WorkspaceのAPIと連携しやすい
デプロイがボタン1つ

社内ツールならこれで十分すぎる。

全体の構成

GASプロジェクト
├── Code.gs          # サーバーサイドのロジック
├── index.html       # メインのHTML
├── style.html       # CSS（HTMLファイルとして管理）
└── script.html      # フロントエンドJS

GASのHTMLサービスを使って、Webアプリとして公開する形をとった。

サーバーサイド（Code.gs）

function doGet(e) {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('社内ポータル')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

// スプレッドシートからお知らせを取得
function getAnnouncements() {
  const sheet = SpreadsheetApp.openById('YOUR_SHEET_ID').getSheetByName('お知らせ');
  const data = sheet.getDataRange().getValues();

  return data.slice(1).map(row => ({
    date: Utilities.formatDate(row[0], 'Asia/Tokyo', 'yyyy/MM/dd'),
    title: row[1],
    content: row[2],
    category: row[3]
  })).filter(item => item.title); // 空行を除外
}

// 便利リンクの一覧を返す
function getQuickLinks() {
  const sheet = SpreadsheetApp.openById('YOUR_SHEET_ID').getSheetByName('リンク集');
  const data = sheet.getDataRange().getValues();

  return data.slice(1).map(row => ({
    name: row[0],
    url: row[1],
    category: row[2],
    icon: row[3] || '🔗'
  })).filter(item => item.name);
}

データをスプレッドシートで管理することで、非エンジニアでもお知らせやリンクを更新できる。

フロントエンド（index.html）

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <?!= HtmlService.createHtmlOutputFromFile('style').getContent(); ?>
</head>
<body>
  <header>
    <h1>社内ポータル</h1>
    <p id="current-date"></p>
  </header>

  <div class="container">
    <!-- お知らせセクション -->
    <section class="announcements">
      <h2>お知らせ</h2>
      <div id="announcement-list">読み込み中...</div>
    </section>

    <!-- クイックリンクセクション -->
    <section class="quick-links">
      <h2>よく使うリンク</h2>
      <div id="link-grid"></div>
    </section>
  </div>

  <?!= HtmlService.createHtmlOutputFromFile('script').getContent(); ?>
</body>
</html>

クライアントサイド（script.html）

<script>
  // ページ読み込み時にデータを取得
  document.addEventListener('DOMContentLoaded', function() {
    // 今日の日付を表示
    document.getElementById('current-date').textContent =
      new Date().toLocaleDateString('ja-JP', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' });

    // お知らせ取得
    google.script.run
      .withSuccessHandler(renderAnnouncements)
      .withFailureHandler(handleError)
      .getAnnouncements();

    // クイックリンク取得
    google.script.run
      .withSuccessHandler(renderQuickLinks)
      .withFailureHandler(handleError)
      .getQuickLinks();
  });

  function renderAnnouncements(items) {
    const container = document.getElementById('announcement-list');
    if (items.length === 0) {
      container.innerHTML = '<p>お知らせはありません</p>';
      return;
    }
    container.innerHTML = items.map(item => `
      <div class="announcement-item">
        <span class="date">${item.date}</span>
        <span class="category category-${item.category}">${item.category}</span>
        <p>${item.title}</p>
      </div>
    `).join('');
  }

  function renderQuickLinks(links) {
    const container = document.getElementById('link-grid');
    container.innerHTML = links.map(link => `
      <a href="${link.url}" target="_blank" rel="noopener noreferrer" class="link-card">
        <span class="icon">${link.icon}</span>
        <span class="name">${link.name}</span>
      </a>
    `).join('');
  }

  function handleError(error) {
    console.error('Error:', error);
  }
</script>

デプロイ手順

GASエディタで「デプロイ」→「新しいデプロイ」
種類「ウェブアプリ」を選択
実行ユーザー：「自分」
アクセスできるユーザー：「自分のドメイン内の全員」
デプロイボタンを押してURLを取得

このURLを社内チャットやメールに貼ればすぐ使える。

実際に使われた機能

作ったポータルには最終的に以下が揃った：

社内お知らせ（スプレッドシートで管理）
よく使うリンク集（Google Forms、申請書、マニュアルなど）
社内カレンダー（Google Calendar APIで取得）
社員名簿（Google Directory APIで取得）

1日で作った初期版から、要望に応じて少しずつ機能を足していった。

まとめ

GASのWebアプリ機能は、社内ツール作成に本当に向いている。ポイントは：

データはスプレッドシートで管理：非エンジニアが更新できる
google.script.runで非同期通信：サーバーとクライアントのブリッジ
HTMLファイルを分割してインクルード：可読性を維持する

予算なし、サーバーなし、でも1日で動くものが作れる。社内ツールをどう作ろうか悩んでいるなら、まずGASを試してみる価値がある。