Web Services

作成の経緯

何らかのテストに使えるダミーのホームページが欲しかったため、SF的な世界観を持つ架空のサービスサイトとして作成しました。記憶の売買という近未来的なコンセプトを軸に、マーケットプレイス、体験セッション、安全性と倫理など、リアルなサービスサイトとしての体裁を整えています。

AI関係のクレジットが余っていたら更新

AI関係のクレジットが余っていたら、ちょこちょこ更新していこうかなという温度感で作っています。React 19 + TypeScript + Tailwind CSS の構成で、モダンなフロントエンド技術を使った実験的なプロジェクトでもあります。

作成の経緯

開発中にJWTの中身を確認したい場面は多いですが、既存のオンラインツールにトークンを貼り付けるのはセキュリティ上のリスクがあります。そこで、完全にクライアントサイドで動作し、トークンが外部に送信されない安全なJWT解析ツールを開発しました。

jwt.io風のUIを目指して

jwt.io のような直感的なレイアウトを参考に、左側に入力・右側にデコード結果を表示するUIを実装しました。JWT解析だけでなく、ヘッダー・ペイロードの編集や新しいJWT生成にも対応しています。

作成の経緯

Flutterプロジェクトの依存パッケージの状態を手軽に確認したくて開発しました。Flutter SDK環境がなくてもブラウザだけで監査できるので、チームメンバーとの共有にも便利です。

Kiroのspecで作ってみた

Kiroのspec機能を使って要件定義からデザイン、実装タスクまで整理しながら作成しました。Next.js 15 (App Router) + Tailwind CSS 4 の構成です。

作成の経緯

Flutter版の成功を受け、同じコンセプトをWebフロントエンド開発にも適用するために開発しました。GitHub Advisory Database APIによる脆弱性検出や、フレームワークのメジャーアップデート検出にも対応しています。

CLI版からWeb版へ

最初はCLI版として作成し、その後Web版に展開しました。コアモジュール（パーサー、チェッカー、カテゴライザー）を共有する構成で開発しています。

作成の経緯

CLI版のHealth Monitorは便利でしたが、「PCを開かなくてもスマホからサッと確認したい」という場面が増えてきました。そこで、Next.js + Vercel の構成でWeb版を開発し、どこからでもアクセスできるダッシュボードを実現しました。

CLI版からWeb版への移植

Python版の監視ロジックをTypeScriptに移植し、Vercel Cron Jobsで定期実行する構成にしました。ダッシュボードUIから監視対象の追加・編集もでき、手動チェックもワンクリックで実行可能です。Tailwind CSS v4 を使ったモダンなUIに仕上げています。

作成の経緯

以前作成していたチャットボットが、使用していたAIサービスの変更によりモデルが動かなくなってしまいました。せっかくなのでRAGデータを入れ替えて、別のWebサービスとして作り直すことにしました。

ベクトルDBもRAGデータ作成もAIに任せれば怖くない

ベクトルデータベースの構築やRAGデータの作成は、自力でやろうとすると知識がないとかなりキビしい領域です。しかしAIを使えばそのあたりの懸念はほぼ考えなくてよく、指示するだけで進められるので本当に楽です。当初はChromaDBをベクトルDBとして使用する予定でしたが、Vercelのサーバーレス環境ではChromaDB（SQLiteベース）が動作しないため、JSONファイルベースのインメモリベクトル検索方式を採用しています。

作成の経緯

上記のAI FAQ ChatBot（RAG版）をベースに、より高度な推論能力を持つReActパターンを導入した進化版です。単純なRAGでは1回の検索で回答を生成していましたが、ReAct版ではAIが「思考→検索→観察」のサイクルを最大3回繰り返し、複雑な質問にも段階的に情報を収集して正確な回答を生成します。

作成の経緯

フロントエンド開発やAPIクライアントのテスト時に、手軽に使えるダミーAPIが欲しかったため開発しました。JSONPlaceholderのような既存サービスを参考にしつつ、日本語対応や特殊エンドポイント（遅延、ステータスコード）などの機能を追加しています。

Honoフレームワークを試してみたかった

軽量で高速なHonoフレームワークを使ってみたくて、このプロジェクトを作成しました。Vercelへのデプロイも簡単で、サーバーレス環境での運用がスムーズにできています。Swagger UIも統合されているので、APIのドキュメントも自動生成されます。

作成の経緯

開発作業中にUUIDが必要になる場面が多く、広告がなくシンプルで、なおかつデザインの優れたツールが欲しくて開発しました。「開いてすぐ生成、すぐコピー」という効率性を最優先に設計しています。

Next.js 15 の練習も兼ねて

最新の Next.js 15 (App Router) を使って、どこまでシンプルかつプレミアムな質感のツールが作れるか試してみました。Vanilla CSS でのグラスモフィズム（透かし）デザインの採用など、見た目にもこだわっています。

作成の経緯

iBeaconスキャナーアプリで取得したビーコンデータをクラウドに蓄積・確認したいというニーズから開発しました。Next.js API RouteとSupabaseを組み合わせることで、サーバーレスなデータ登録・参照の仕組みを検証しています。

Supabase Free Planの維持対策も兼ねて

Supabase Free Planはアクティビティが低いとプロジェクトが一時停止されます。Vercel Cron Jobsで毎日1回ライフチェック用のデータを書き込むことで、プロジェクトの停止を防ぐ仕組みも組み込んでいます。

作成の経緯

Javaプロジェクトで使用しているMavenライブラリのバージョンを手軽に確認したくて開発しました。最初はPython CLIツールとして作成し、その後ブラウザから手軽に使えるWeb版に展開しました。

CLI版からWeb版へ

Python CLI版の機能をNext.js + TypeScriptに移植し、Maven Central Repository APIと連携するWebアプリとして再構築しました。環境構築不要でブラウザからすぐに使えるのが利点です。

作成の経緯

使用している技術スタックに関連する脆弱性情報を定期的に確認したいというニーズから開発しました。JVN・JVN iPediaのAPIを活用し、キーワードフィルタリングで必要な情報だけを素早く確認できる仕組みを実現しています。

セキュリティ監視の手間を減らしたい

脆弱性情報は日々更新されますが、全件を追うのは現実的ではありません。Apache・Spring・Reactなど使用中の技術名をキーワードとして登録しておくだけで、関連する脆弱性だけを絞り込んで確認できます。キーワードはブラウザのローカルストレージに保存されるため、次回以降もそのまま使えます。