Efo's Sandbox

Discord Webhook 429エラーをProxyで回避する

Fri, 24 Apr 2026 09:27:37 +0900

課題

Google Apps Script（GAS）からDiscordへWebhookでメッセージを送信する際，GASの共有IPアドレスが原因でDiscordのレートリミットに巻き込まれ，IPブロックされることがある：

Discord API Error (429): error code: 1015

この問題は自身の送信頻度が適正であっても発生する．

解決策

Cloudflare Workers（CFW）を用いて，リクエストをDiscordへ横流しするだけのプロキシを構築する．

drop-in replacement: クライアント側の変更を最小限にするため，Base URLの置換だけで機能するようパスをそのまま引き継ぐ仕様とする．
whitelist管理: セキュリティ対策として，WH_というプレフィックスから始まるCloudflare Secretsに登録されたWebhook URLのみを許可する．

実装

index.tsのみ．

export interface Env {
 [key: string]: unknown;
}
export default {
 async fetch(
 request: Request,
 env: Env,
 ctx: ExecutionContext,
 ): Promise<Response> {
 if (request.method !== "POST") {
 return new Response(JSON.stringify({ error: "Method Not Allowed" }), {
 status: 405,
 headers: { "Content-Type": "application/json" },
 });
 }
 const requestUrl = new URL(request.url);
 const pathname = requestUrl.pathname;
 const targetWebhook = `https://discord.com${pathname}`;
 const allowedWebhooks: string[] = Object.keys(env)
 .filter((key) => key.startsWith("WH_") && typeof env[key] === "string")
 .map((key) => env[key] as string);
 if (!allowedWebhooks.includes(targetWebhook)) {
 return new Response(
 JSON.stringify({
 error: "Forbidden: Webhook URL is not in the allowlist",
 }),
 {
 status: 403,
 headers: { "Content-Type": "application/json" },
 },
 );
 }
 const contentType =
 request.headers.get("content-type") || "application/json";
 try {
 const body = await request.text();
 const discordResponse = await fetch(targetWebhook, {
 method: "POST",
 headers: {
 "Content-Type": contentType,
 },
 body: body,
 });
 const responseBody = await discordResponse.text();
 return new Response(responseBody, {
 status: discordResponse.status,
 headers: {
 "Content-Type":
 discordResponse.headers.get("Content-Type") || "application/json",
 },
 });
 } catch (error) {
 return new Response(
 JSON.stringify({ error: "Internal Server Error while forwarding" }),
 {
 status: 500,
 headers: { "Content-Type": "application/json" },
 },
 );
 }
 },
};

使用方法

Webhook URLをWH_というプレフィックスから始まる名前でSecretsに登録し，送信元でdiscord.comをyour-worker.your-subdomain.workers.devに置換するだけ．

Colabでの開発体験をいい感じにする小ネタ集

Mon, 15 Dec 2025 00:20:25 +0900

VSCode 上のコードを Colab で実行する

VSCode には Google 公式 Colab 拡張機能がある：

この拡張機能を使うことで VSCode 上から Colab のランタイムに直接接続し，コードを実行できる．

これにより，VSCode でコーディングし，Colab の計算リソースを使って実行する，というワークフローをとれる．

なお，Google Drive のデスクトップアプリをインストールしておけば，Drive 上のファイルを VSCode で直接開ける．

この状態で Colab のランタイムを接続すれば，Drive 上のファイルをそのまま編集し，Colab 環境で実行できることになる．

GitHub 上のコードを Colab で開く

Colab はもともと，GitHub 上の public repo から直接ノートブックを開く機能を備えている．

公式解説

GitHub public repo への URL をgithub.com→colab.research.google.com/githubと置換するだけでよい．

ViteでReact+Tailwind+TSをサクッと構成する

Sat, 01 Nov 2025 13:34:53 +0900

Repository

https://github.com/Efo-YU/vite-react-tailwind-ts-swc

Motivation

Next.jsではTypeScriptとTailwind CSS(とベースたるReact)が標準的な構成として用いられる(create-next-app時に自動でsetupできる)
Next.jsはReactの代表的な full-stack framework とされるため，Reactを用いる際は上記の構成を真似したい
だがNext.js自体は超クソデカframeworkであるため，この構成を使うためだけにNext.jsを用いるのは無駄が多い
Viteなら簡単かつminimalにReact+Tailwind+TSを構成できる

Procedure

Initialize project

Commit: https://github.com/Efo-YU/vite-react-tailwind-ts-swc/commit/7d4de5eb7ac7561dc163684a4ccc556c874b6d94

下記を実行：

pnpm create vite

dialogで以下のように選択：

◇ Project name:
│ foo-bar-project # 任意にキーボード入力，Enterで決定
│
◇ Select a framework:
│ React # 十字キーで選択，Enterで決定
│
◇ Select a variant:
│ TypeScript + SWC # 十字キーで選択，Enterで決定
│

Note: SWCはNext.jsでも用いられているとのこと．

Add tailwindcss and @tailwindcss/vite dependencies

Commit: https://github.com/Efo-YU/vite-react-tailwind-ts-swc/commit/e9eda14599f8ef6cf8fd082c6611686abbebf1c0

pnpm i tailwindcss @tailwindcss/vite

Configure Tailwind CSS

Commit: https://github.com/Efo-YU/vite-react-tailwind-ts-swc/commit/42633c835ac2f62520d83d1b2d50a5c5da79a237

src/App.cssを削除
src/index.cssを@import "tailwindcss"ただ一行だけにする

@import "tailwindcss"

vite.config.tsにtailwindcssを追加

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
 plugins: [react(), tailwindcss()],
})

Edit `src/App.tsx`

前節までで構成は完了．ただし，pnpm create vite時に生成されたsrc/App.tsxはTailwindを用いておらず，もはや使えなくなっているため，Tailwindを用いたものに変える必要がある．

Brand New Site!

Sat, 01 Nov 2025 12:04:23 +0900

Rebuilt my website using Hugo with PaperMod theme, which was originally created with VitePress.

About Me

Mon, 01 Jan 0001 00:00:00 +0000

handle: Efo
undergrad in the DEPARTMENT of Science, Faculty of Science, Yamagata University in Japan
full-stack student / full-stUck developer
contact: goodev140@gmail.com
website: https://efo-yu.github.io/

Stats

身内向けプロフィール