NotionAI（Opus 4.6）で企画・設計し、Antigravity（Gemini 3.1 Pro）に実装を丸投げして、Webツール集を作った話。

計画から公開まで、AIエージェントをどう使い分けたかの実例記録。

この記事でわかること

• AIコーディングエージェント「Antigravity」でWebツール集を構築した実例
• NotionAI × Antigravityの具体的なワークフロー
• 3週間見積りの実装を1日で完了させた並列実行の仕組み

---

動機

業務で使うWebツール、探せばいくらでも見つかる。全角半角変換、JSON整形、CSV加工……。

ただ、どれもちょっと引っかかる。入力したデータ、サーバーに送信されてないか？

業務データを扱う以上、「たぶん大丈夫」では済まない。情シスとしてはなおさら。

かといって既存ツールのUIは古かったり、広告まみれだったり。仕事で使うには微妙なものが多い。

なら自分で作ろう、と思った。

完全クライアントサイド処理。サーバーへのデータ送信ゼロ。モダンUI。

ちょうどAIコーディングエージェントの実験もしたかったので、開発の大半をAIに任せる前提で始めた。

---

技術スタック

項目	技術
フレームワーク	Astro + React Islands
UIコンポーネント	shadcn/ui + Tailwind CSS
ホスティング	Cloudflare Pages
CI/CD	GitHub Actions
テスト	Playwright（E2E）
コスト	実質 ¥0（Cloudflare Pages + GitHub Actions 無料枠）

Astro + React Islandsの組み合わせは、AIエージェントとの相性がいい。ツール1つ追加するのに「ロジック（lib）+ コンポーネント（component）+ ページ（page）」の3ファイルで完結する。テンプレートが定型化されるので、AIへの指示がシンプルになる。

ソースコードは GitHub で公開している。「サーバーと通信しません」を口だけでなくコードで証明するため。

👉 github.com/maru0014/tools-codelife-cafe

---

AIワークフロー：計画 → プロンプト → 実装

このプロジェクトでは、2つのAIエージェントを役割分担して使った。

【コピペでOK】PDFファイル一括ダウンロード。ブラウザで開かずにダウンロードさせる方法

この記事でできるようになること

• Webページ内のすべてのPDFリンクを一括ダウンロードできるようになる
• ブラウザでPDFファイルを開かずに直接ダウンロードさせる設定ができるようになる
• JavaScriptを使ってaタグにdownload属性を付与する方法を理解できる
• ブラウザの「名前をつけて保存」ダイアログを省略する設定ができるようになる
• URLからファイル名を抽出する方法を学べる

※複数ページを横断して実行する場合は以下記事を参考にサブウィンドウを活用してみてください

codelife.cafe

---

サンプルコード: ページ内のすべてのPDFリンクにdownload属性付与して開く

F12でブラウザコンソールを開いてコピペで動きます

// ファイル名取得関数
const getFilename = url => new URL(url).pathname.split('/').pop();

// スリープ関数
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

// PDFファイルのaタグにdownload属性を付与
const links = [...document.querySelectorAll("a")]
    .filter(a => /\.pdf/.test(a.href))
    .map(a => {
        const fileName = getFilename(a.href);
        a.setAttribute("download", fileName);
        a.setAttribute("target", "_blank");
        return a;
    });

// 全てのリンクを順番にクリック
for (const link of links){
    await sleep(1000);
    console.log(link.href);
    link.click();
}

Google Workspace管理者必須のCLIツール GAM でいつもの作業をコマンドで出来るか試してみる

前回、前々回まででWindowsでもMacでもセットアップ手順を確認できたので、今回はGAMコマンドをいろいろ試してみます。

↓セットアップ手順はこちら↓ codelife.cafe codelife.cafe

いつもの作業 といいつつ世の中の情シスの人が実際によくやっている業務ランキングとかに合わせたほうが良いかなと思ったのでGPT-5に「よくある業務ランキングTOP10」でディープリサーチを依頼。 上位3種類の業務をGAMコマンドでやってみることにします。（上位5種にしようと思ったけど予想してたより検証大変で3にしましたm( )m）

---

🥇 第1位：ユーザーアカウント管理

主な内容

• アカウント作成／削除
• ライセンス割り当て
• 部署異動に伴う権限変更

作業手順例（新入社員アカウント作成）

1. 管理コンソールにログイン（https://admin.google.com/）
2. ユーザー → ユーザーを追加 を選択
3. 氏名・メールアドレスを入力
4. 初期パスワードを設定（ユーザーに初回変更を強制）
5. 必要な ライセンス（Business/Enterprise等）を割り当て
6. 部署に応じた グループに追加（例：営業部、全社通知グループ）

GAMでやると...？

Google Workspace管理者必須のCLIツール GAM の設定手順を画像多めで解説（Windows編）

Google Apps Manager（GAM）は、Google Workspaceの管理業務を効率化するためのコマンドラインツールです。これを使うことで管理コンソールのGUIではポチポチ手作業でやっていた業務をコマンド1行でできるよう自動化し、大量のタスクを短時間で処理できます！

だけど難点はセットアップ手順が地味にハードル高いこと。特権管理者権限を持たせるんですから簡単すぎても困るんですが、だからといって手作業は…。ということでこの記事ではなるべく分かりやすくセットアップ手順を解説していきます。

↓macの方はこちら↓

codelife.cafe

Google Workspace管理者必須のCLIツール GAM の設定手順を画像多めで解説（macOS編）

Google Apps Manager（GAM）は、Google Workspaceの管理業務を効率化するためのコマンドラインツールです。これを使うことで管理コンソールのGUIではポチポチ手作業でやっていた業務をコマンド1行でできるよう自動化し、大量のタスクを短時間で処理できます！

だけど難点はセットアップ手順が地味にハードル高いこと。特権管理者権限を持たせるんですから簡単すぎても困るんですが、だからといって手作業は…。ということでこの記事ではなるべく分かりやすくセットアップ手順を解説していきます。

↓Windowsの方はこちら↓

codelife.cafe