| name | gas-webapp-hig |
| description | GAS Webアプリ開発スキル（HIG準拠版）。
Use when: GASでWebアプリを作成、doGet、スプレッドシート連携Webアプリ、HIG準拠、GASウェブアプリ、gas-webapp、Apps Script Webアプリ、Googleサービス連携、Gemini API連携の時。
|
GAS Webアプリ開発スキル（HIG準拠版）
Google Apps Script（GAS）で高品質なWebアプリを開発するためのスキル。
Apple Human Interface Guidelines（HIG）の20原則を組み込み、業界標準のUI/UXを保証する。
このスキルを使用する時
- GASでWebアプリを作成したい
doGet()でHTMLを返すアプリを開発- Googleサービス連携のWebアプリ（スプレッドシート、ドキュメント、スライド、カレンダー、Gmail、Chat等）
- Gemini APIなど外部AI連携のWebアプリ
- 高品質なUI/UXのGASアプリが必要
このスキルを使用しない時
- スタンドアロンスクリプト（トリガーのみで動作、UI不要）
- Gmailフィルタリング・自動返信（バックグラウンド処理のみ）
- スプレッドシートのカスタム関数（CUSTOM_FUNCTION）
- Apps Script APIの利用（外部からGASを呼び出す）
核心ルール
1. 言語規則（厳守）
UIテキストは全て日本語またはカタカナのみ
NG: Settings, Home, New, Light, Dark
OK: 設定, ホーム, 新規作成, ライト, ダーク
例外: フッター署名部分のみ英語可
2. テーマシステム（6種必須）
| テーマ名 | data-theme値 |
|---|
| ライト | light |
| ダーク | dark |
| オーシャン | ocean |
| フォレスト | forest |
| サンセット | sunset |
| サクラ | sakura |
3. 必須機能
- ロード画面: テーマ色同期、フェードアウト
- ツアー機能: Driver.js v1.0.1、最低5ステップ
- 設定モーダル: テーマ選択、フォント設定、リセット
- LocalStorage: 設定の永続化
4. GAS固有の制約対応
| 制約 | 対応策 |
|---|
| 1-3秒の遅延 | ローディング表示 + ボタンdisabled |
| 処理中断不可 | クライアント側キャンセルフラグ |
| 取り消し不可 | 論理削除（アーカイブ）優先 |
| リアルタイム不可 | ポーリング or 手動更新 |
HIG 20原則（概要）
詳細は references/hig-principles.md を参照。
Phase 1: 全アプリ必須（7項目）
- ユーザーの主導権を保証する
- コンストレイント（制約）を活用する
- オブジェクトは自身の状態を体現する
- すべての操作可能な要素は意味を持つ
- デフォルトボタンには具体的な動詞を用いる
- エラー表示は建設的にする
- 黙って実行する（不要な確認を排除）
Phase 2: フォーム・入力UI（8項目）
- 入力フォームにはストーリー性を持たせる
- 操作の流れを作る（ボタン重力）
- 選択肢の文言は肯定文にする
- 値を入力させるのではなく結果を選ばせる
- ユーザーに厳密さを求めない
- 入力サジェスチョンを提示する
- フェールセーフを優先する
- 操作の近くでフィードバックする
Phase 3: UX向上（5項目）
- ユーザーの記憶に頼らない
- データよりも情報を伝える
- 即座の喜びを与える
- 回答の先送り（必須項目の最小化）
- プログレッシブ・ディスクロージャ
ワークフロー
Step 1: 要件確認
以下をヒアリング：
- アプリ名（日本語/カタカナ）
- 目的・機能
- 対象ユーザー
- 連携するGoogleサービス（スプレッドシート、ドキュメント、スライド、カレンダー、Gmail、Chat等）
- 外部API連携の有無（Gemini API等）
- 必要なCRUD操作
Step 2: 設計
- データ構造（連携サービスに応じた設計）
- 画面構成（ヘッダー、メイン、モーダル）
- GAS関数一覧
- appsscript.json の設定（OAuth スコープ等）
Step 3: 実装
references/design-system.md のテンプレートを使用。
出力ファイル：
- Code.gs: doGet関数 + サーバーサイド処理
- Index.html: HTML/CSS/JS統合ファイル
- appsscript.json: プロジェクト設定（必須）
Step 4: デプロイ
references/gas-deployment.md の手順に従ってデプロイ。
重要: clasp push だけではWebアプリに反映されない。必ず「新しいデプロイ」を作成すること。
Step 5: チェックリスト確認
references/checklist.md の全項目を確認。
出力ファイル構成
appsscript.json（必須）
{
"timeZone": "Asia/Tokyo",
"dependencies": {},
"exceptionLogging": "STACKDRIVER",
"runtimeVersion": "V8",
"webapp": {
"executeAs": "USER_DEPLOYING",
"access": "ANYONE_ANONYMOUS"
}
}
Code.gs
const SHEET_NAMES = {
DATA: 'データ',
SETTINGS: '設定'
};
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index')
.setTitle('アプリ名')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function getOrCreateSpreadsheet() {
const props = PropertiesService.getScriptProperties();
let ssId = props.getProperty('SPREADSHEET_ID');
if (!ssId) {
const ss = SpreadsheetApp.create('アプリ名_データ');
ssId = ss.getId();
props.setProperty('SPREADSHEET_ID', ssId);
initializeSheets(ss);
}
return SpreadsheetApp.openById(ssId);
}
function getData() {
try {
const ss = getOrCreateSpreadsheet();
const sheet = ss.getSheetByName(SHEET_NAMES.DATA);
if (!sheet) {
return { success: false, error: 'シートが見つかりません' };
}
const data = sheet.getDataRange().getValues();
return { success: true, data: data };
} catch (e) {
console.error('getData error:', e);
return { success: false, error: e.message };
}
}
Index.html
HTML, CSS, JavaScript を1ファイルに統合。
詳細テンプレートは references/design-system.md 参照。
詳細リファレンス
| ファイル | 内容 |
|---|
references/hig-principles.md | HIG 20原則の詳細とコード例 |
references/design-system.md | CSS変数、テーマ、HTMLテンプレート |
references/gas-constraints.md | GAS制約と対策の詳細 |
references/gas-deployment.md | デプロイ手順（clasp/GASエディタ） |
references/gas-integrations.md | Googleサービス連携パターン |
references/gas-ai-integration.md | Gemini API連携 |
references/checklist.md | 出力前セルフチェックリスト |
クレジット
このスキルは以下のプロンプトをベースに作成されています：
Original: gas-webapp-prompt-hig.md
Author: Akari (akari-iku)
License: MIT License
スキル化にあたり、500行ルールに従いreferencesに詳細を分離しました。
