Google Apps Scriptで社内ポータルサイトを1日で作った話
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を試してみる価値がある。