Web アプリとブラウザ拡張を連携させる — postMessage ブリッジと declarativeNetRequest
学習アプリのポモドーロと連動して、フォーカス中だけ誘惑サイトをブロックする拡張機能「adalab shield」の連携設計を解説。postMessage によるプロトコル設計、なりすまし対策、declarativeNetRequest でのページ読み込み前ブロックを紹介します。
2026-06-169 min read
なぜ作っているか
自分が困ったものを、自分のために作っています。
はじまり
なぜ作っているか
大学の勉強と作業を並行していて、タイマー・TODO・学習記録アプリを3つ行き来するのが面倒でした。それなら1つにまとめようと思って作ったのが「adalab focus」です。他のプロダクトも、だいたい「自分が困ったから」という理由から始まっています。
2
Live
2025
Since
1
Developer
作るときに決めていること
まずオフラインで動かす
ネットが無くても使えること。サーバーが落ちても手元で完結する作りを優先します。
設定を増やさない
機能を足すより、迷う画面を減らす。初見で使い方が分かるのを目標にしています。
自分が毎日使うものだけ
「たぶん誰か使う」では作りません。自分が困って、自分が毎日開くものだけ作ります。
要望はだいたい取り込みます
個人開発なので大企業のような対応速度はありませんが、Discord や X でもらった意見はかなりの割合でそのまま入れています。
Products
今すぐ使えるものと、開発中のもの。ステータスは正直に書いています。
adalab focus
LIVE集中力を可視化する PWA。TODO・ポモドーロ・学習記録・統計・カウントダウンを 1 つのダークなネオン画面に。
React 19TypeScriptViteTailwind v4Cloudflare PagesD1PWA
adalab shield
公開中 v0.2フォーカス中の誘惑サイトを自動ブロックする、adalab focus 連携の集中ガード拡張機能。
TypeScriptReactChrome Extension API (MV3)Firefox WebExtensionsdeclarativeNetRequest
このほか Rem bot・Navi・Sumio・QRaft などを開発中です。
開発中のものも含めて全部見るLatest Blog
最新の技術記事やプロジェクトの進捗をお届けします
ポモドーロタイマーを setInterval で作ってはいけない — タイムスタンプ方式の状態設計
Web アプリのタイマーをカウントダウン変数で実装すると、タブのバックグラウンド化やリロードで簡単に壊れます。「開始時刻だけを持ち、残り時間は毎回計算する」タイムスタンプ方式の設計と、複数タブ同期・リロード復元の実装を adalab focus の実例で解説します。
2026-06-1510 min read
サーバーレスで Google ログインを実装する — Cloudflare Pages Functions + PKCE
常駐サーバーなしで Google OAuth 2.0 ログインを実装する方法を解説。Authorization Code Flow + PKCE の仕組み、Cloudflare Pages Functions でのトークン交換、自前 JWT によるセッション管理まで、adalab focus の実装をベースに紹介します。
2026-06-147 min read
ブラウザゲーム
Play Games
ブラウザで今すぐプレイ可能！オンライン対戦でスキルを競い合おう
Tech Stack
実際にプロダクトで使っている技術です。数を増やすより、使い慣れたものを深く使う方針でやっています。
React
Next.js
TypeScript
JavaScript
Tailwind CSS
CSS/SCSS
News
最新のお知らせ
お知らせ2026-06-12
学習管理アプリ「adalab focus」を公開しました
TODO・ポモドーロタイマー・学習記録・統計・試験カウントダウンを 1 つにまとめた集中管理アプリ「adalab focus」を公開しました。PWA としてスマホにもインストールでき、Google アカウントでログインすると PC とスマホで自動同期、オフラインでも動作します。学習時間のシェア画像生成や、同じ時間に勉強している人が見えるランキングなどコミュニティ機能も搭載しています。study.adalabtech.com からご利用いただけます。
お知らせ2026-06-12
集中ガード拡張機能「adalab shield」v0.2 を公開しました
adalab focus のポモドーロと連携し、フォーカス中は YouTube や TikTok などの誘惑サイトを自動でブロックするブラウザ拡張機能「adalab shield」v0.2 を GitHub で公開しました。休憩中は自動で解除され、ブロック画面にはフォーカスの残り時間と取組中のタスクが表示されます。現在ストア申請を準備中です。
お知らせ2026-03-03
ミニゲーム「リバーシ」を公開しました
AIと対戦できるリバーシ（オセロ）ゲームを公開しました。かんたん・ふつう・むずかしいの3つの難易度に加え、実績システムやオンライン対戦機能も搭載しています。