Web システムの設計から本番運用まで、一貫して担当しています。

MNT Realty の業務基盤です。見込み客が見るのは公開ウェブサイト。同社が管理するストラータの居住者は、オーナーポータルにサインインしてお知らせを読み、共用設備を予約し、書類を取得します。スタッフはそのすべてを管理コンソールから運用します。

3つのサイト、3つのサブドメイン、ビルドは1つです。プロキシがサブドメインごとに振り分け、admin はコンソールへ、owners はポータルへ送り、公開サイトでは同じパスを not-found にします。それぞれが独自のレイアウトと、ホスト限定のセッション Cookie を持ちます。公開ページは事前生成し、コンソールとポータルはリクエストごとに描画します。読み書きはすべて1つのストアインターフェースを通るため、スタッフの入力はそのまま居住者に届き、背後のストアは画面に触れずに、設計済みの PostgreSQL スキーマへ差し替えられます。

アクセス権限は1か所の表で定義し、ナビゲーション、ページのガード、ファイル配信がすべて同じ表を読みます。権限外のセクションは「禁止」ではなく「存在しない」として返すので、ポータルが他の権限の領域を知らせることはありません。ストラータは本当の境界で、あるストラータを開いている間は別のストラータの情報に一切たどり着けません。会社情報・書類手数料表・共用設備の枠テンプレートといった業務上の事実は、ソース中の値ではなく、管理者が設定画面で編集できるバージョン管理付きのデータとして持ち、保存したどの版にも戻せます。

3つとも構築・デプロイ済みで、次はクラウドのデータ層とバックエンドのワークフローです。ソースコードは MNT Realty に帰属し、公開していません。

FIDO2 を使って開発する人のための Flask アプリケーションです。実機または仮想の認証器で登録・サインインし、WebAuthn のリクエストを JSON のまま編集し、返ってきたデータを読み解き、FIDO Alliance のメタデータから任意の認証器を調べられます。飛天ジャパンでのインターン中に作り、今も保守しています。

タブは4つです。簡易サインイン、リクエストを直接編集できる詳細モード、attestation オブジェクトや CBOR/CTAP 構造のコーデック、ルート証明書を検証するメタデータ検索です。サーバーは Yubico の python-fido2 に手を入れたもので、liboqs 経由で ML-DSA-44・-65・-87 を追加しています。訪問者ごとにセッション用の保存領域（ローカルディスクまたは Google Cloud Storage）を分け、14日間使われなければ削除します。

python-fido2 には耐量子計算機暗号の対応がなかったため、従来の経路を壊さないまま ML-DSA の COSE 識別子・鍵の扱い・attestation の検証を追加しました。liboqs をイメージに同梱すると Cloud Run の起動が遅くなるので、起動時の準備を遅らせ、gunicorn を1ワーカー構成にしました。FIDO のメタデータは古くなるため、日次の GitHub Action が再検証してコミットします。誰も手を動かさずに最新のままです。

webauthnlab.tech で公開中。FeitianTech のもとで保守しています。サーバー側の約120のテストファイルに加え、フロントエンドと PQC のテストが CI で動きます。

飛天ジャパンの顧客と営業チームのためのデモです。開発者向けプラットフォームはエンジニア向け、こちらは製品を検討している人向けです。仕様書を読まなくても、セキュリティキーを登録し、サインインし、耐量子計算機暗号の資格情報が動く様子を確かめられます。

開発者向けプラットフォームと同じ認証の仕組みと ML-DSA 対応の上に、React のフロントエンドを載せています。生のリクエストや応答の代わりに、手順に沿った画面を用意しました。

demo.ftsafe.com で公開中。ソースコードは飛天ジャパンのもので、公開されていません。

ソフトウェアで FIDO2 セキュリティキーとして振る舞う Rust のワークスペースです。社内のエンジニアや取引先が、ハードウェアが揃う前から ML-DSA の資格情報に対して開発できるようにするために作りました。自分のリポジトリから始まり、現在は FeitianTech のもとで保守されています。

認証器の中核は Trussed フレームワークと littlefs2 上に CTAP2.1 を実装しています。資格情報の管理、PIN/UV プロトコル1と2、リセットに対応します。ランナーが Linux の uhid で仮想 USB HID デバイスを登録し CTAPHID を話すため、Chrome・Firefox・libfido2 からは普通のキーとして見えます。ES256 と ML-DSA-44・-65・-87 を提示し、attach・detach・status・reset・pin を備えた小さなコマンドラインツール（常駐も可能）が付きます。

ブラウザは相手を厳しく選ぶので、Chrome や Firefox に受け入れられるまで HID 転送と CTAP のステートマシンを正確に作り込む必要がありました。CTAP と COSE の構造は従来の鍵を前提にしていて、耐量子計算機暗号の鍵はそのままでは収まりません。最初の版は C の FFI 経由で liboqs を呼んでいましたが、のちに純 Rust の fips204 に移し、秘密鍵は破棄時に消去しています。

Linux 上で動作し、開発者向けプラットフォームと合わせて使われています。CI では rustfmt・clippy・テストを実行しています。

rainzhang.me で公開しているポートフォリオです。1ページを2言語で、小さな専用デザインシステムの上に作っています。書体は1つ、生成りの紙色、アクセント色は1色、枠線と影は使いません。履歴書とカバーレターも同じシステムで作っているので、3つがひと続きのものとして見えます。

Next.js App Router が、型付けした1つのコンテンツモデルから両言語をビルド時に静的生成します。/en と /ja は構造が完全に同じで、異なるのは文章だけです。Tailwind は生の値ではなくデザインシステムのトークンを読み、Albert Sans は next/font で自前配信し、ミドルウェアが日本からの初回訪問者を日本語ルートへ送ります（本人が選び直した場合を除きます）。

経歴と制作物の行はその場で開き、言語スイッチのピルは英語と日本語のあいだを滑り、最初の画面は CSS だけで立ち上がります。問い合わせフォームは honeypot とタイムアウトを備えて Formspree に送信し、メールアドレスはワンクリックでコピーできます。すべて JavaScript なしで描画され、動きはすべて prefers-reduced-motion に従います。

rainzhang.me で公開中。Vitest のユニットテストと、Chromium・Firefox・Safari・モバイルを横断する Playwright の E2E テストを CI で実行しています。

CMPT 276 のグループ課題です。簡単な質問に答えるか行き先を選び、日付を決めると、ホテル・レストラン・観光地と日ごとの計画が出てきます。追加の質問に答えるチャットも付いています。

React と Tailwind のフロントエンド、OpenAI に行き先を尋ねるパスポート・ビザの質問フォーム、日付の入力とその検証、チャット機能を担当しました。Tripadvisor API を仲介する Express のサービスはチームメイトが書きました。

OpenAI の API キーをブラウザから呼んでいます。今ならバックエンド側に置きます。

2025年4月に完成し、現在も公開されています。