WEBアプリ
別ドメイン
特に意味は無いけど、短くて覚えやすいドメインurtell.comが空いていたので、適当にいくつかのWEBアプリを作って置いてある。
excess
excess — ブラウザで動くCSV/TSVビューア＆エディタ。
ExcelなしでCSVファイルをサクッと開ける。大容量ファイルにも対応。
カラム幅を自動調整、フィルタリング、ソート、様々な形式へのエクスポートなど、いろいろできる。
サーバーサイドの処理はなく、全てブラウザ上で完結する。
ファイルもサーバーにアップロードせず、OPFSを使ってローカルで処理する。
ブラウザのタブを閉じてもファイルは消えないし、同じブラウザであれば別のタブからもアクセスできる。
soluid
solid.js 用のコンポーネントライブラリ。 package.json にインストールするのではなく、スタンドアロンで動作する。
npm package: https://www.npmjs.com/package/soluid
AACHAT
映像がアスキーアートに変換されて表示される簡易ビデオ通話ツール。
共通のキーワードを入力した２ユーザー間で、１−１の通話ができる。
ちなみに、普通に映像を表示するほうが、実装は簡単。無駄にテキストに変換していると言える。
WEBRTCを使うが、シグナリングに自前のPipingServerを使う。
シグナリング成功後はP2Pで直接通信するため、サーバーが不要というところが素晴らしい。
P2P接続できない場合は接続不可。（TURNサーバー無し）
ただ、ミュートやカメラオフなどの、実用的な必須機能がほとんど未実装。
認証基盤デモ用RP
ちょっとした実験でWEBアプリを作るときに、いちいち認証基盤を用意するのが面倒だし、外部サービスを使っても管理が面倒なので、 自前でOIDCっぽいIdPと簡単なデモ用RPを作ってみるという実験。
リンク先はRPで、Login, Signup, settings 画面はIdP
Email/Password認証とパスキー認証に対応。
- CloudRun + NeonDB + SESで構成。
- NestJS でAPIを書いて、SolidJSでフロントエンドを書いている。
NestJSのAPIサーバーに静的ファイルも同居してるのでCloudRunで全部いける状態。
PEERFACE
WebRTCを使ったP2Pビデオ通話アプリ。
CloudFront + S3 + CloudRun + NeonDBで構成。 Nest.jsでAPIを書いて、Solid.jsでフロントエンドを書いている。
パスキーのデモ
パスキーのデモサイト。
パスキーを使って登録してログインすると、パスキーを更に登録したり、それらを使って認証をテストしたりできる。
Claude Code を試すために作ったので、無駄にi18n対応したり、無駄にデザインを切り替えられるようになっている。
APIはRustで書いてビルドしたバイナリを乗せた小さいLWA入りのイメージをLambdaにデプロイ。 フロントエンドはSolid.jsで書いて、S3にデプロイしている。
Pulumiでデプロイした。
Rust でAPIを書いて、Lambda に乗せてPulumiでデプロイする実験でもある。
PipingServer
AA電話のWebRTCで無理やりシグナリングに使っているPipingServer。
本来の使い方としては、一方からテキストを送信して、他方で1回だけ受信できるサーバー。
/p/の後に適当な名前をつけて、そこにテキストをPUT methodで送信すると、別のシェルから同じURLにGET methodで受信できる。
送信側
echo "こんにちは。" | curl -T - https://ppng.urtell.com/p/sample-hoge
受信側(別のターミナル、別のPCで)
curl https://ppng.urtell.com/p/sample-hoge
サイト内
soluid Components
Soluid Components のコンポーネントカタログ兼デモページ。
npx soluid で実行できる
npm package: https://www.npmjs.com/package/soluid
rusterd-demo
rusterd (ER図DSLコンパイラ) のデモページ。
NFC Writer
NFCタグにURLやテキストを書き込めるWebアプリ。
プロフィール画像生成ツール
適当なアバター画像やヘッダ画像を生成するツール。
PNG, WebP形式でダウンロード可能。
Favicon生成ツール
画像をアップロードしたらFavicon(.ico形式)が返ってくるツール。
Facial
face-api.js を使って、表情を検出できるかどうか試してみたページ。
いきなりカメラ起動するので怖いけど、何も記録してません。
表情を６種類の感情の割合で解釈してくれる。
人間の表情が6種類なわけないし、精度は微妙。
fearful を出すのが一番ムズい。
TILT
Playdate向けのゲーム。加速度センサーで本体を傾けてボールを転がし、ゴールを目指す。
Sideloadでインストール可能。
Braille Pattern Generator
画像をアップロードすると点字文字を使ったテキストを生成するツール。
CLIツールもある。
Chrome拡張機能
Roughlet – AI Page Summary & Translate
ウェブページを要約・翻訳するChrome拡張機能。