ログインページこそがデモである

GeekBye v1.7.5は、二重人格を持つ1週間のリリースです: 37コミットのうち28がログインページの再設計 — しかも_その_うち25はstyle(login)のマイクロ調整で、すべて同じ一日に着地しています。同時に、コードベースで最も教訓的なレースコンディションのひとつを修正したリリースでもあります。どちらの物語も語る価値があり、そして同じひとつの考えで交わります: ログインページは未認証ユーザーが最初に目にするものなのだから、プロダクトの写真ではなく、プロダクト_そのもの_であるべきだ、と。

およそ5時間だけのスクリーンショット

再設計は定石どおりに始まりました。2カラムに再構成し、サインインを左に、右にはプロダクトを — 画像として見せる。昼前のコミットはまさにそれをやっています: 11:57に本物のプレビュースクリーンショット、114 KBのPNGがリポジトリに入り、6分後に一度だけ更新されます。

17:04には消えていました。方向転換のコミットは、静的画像を344行の本物のコンポーネントに置き換えます — 実際のオーバーレイUIを再現する八つの小さなピースから組み立てられたLoginDemoパネルです: 脈打つEQバーと停止ボタンを備えた録音ナビピル、Chat/Transcriptタブ付きのチャットパネル、レンダリングされたアシスタントの回答(お誂え向きにReactのuseEffectの解説)、"Tell me more / Simplify / Show example"(詳しく / 簡単に / 例を見せて)のクイックアクション、ライブプロンプト行、そして⌘⏎のAssist入力欄。

「デモ」という言葉は誇張しやすいので、正確に言っておきましょう: ボタンには本物のホバーステート — グロー、シマー、トランジション — がありますが、クリックには何も配線されておらず、入力欄は読み取り専用です。サンドボックスではありません。これが何かと言えば、プロダクトの実際のUIボキャブラリーをライブでレンダリングしたものです: 同じロゴアセット、同じグラデーションボーダーとバックドロップブラーの処理、ホワイトラベルシステムが使うのと同じproductNameのインポート — だからこのデモは、このコードベースからビルドされる各プロダクトに合わせて自動でリブランドされます。スクリーンショットにはどれひとつできません。スクリーンショットは撮ったその日から古び、合わないディスプレイではぼやけ、たまたま撮影したプロダクトのブランドが永久に焼き付いています。コンポーネントはどのDPIでも鮮明で、常に最新で、すべてのブランドで正しい — デザインシステムの写真ではなく、デザインシステム_そのもの_だからです。

ちなみに、削除されたPNGはリリースタグの時点でまだリポジトリに残っています — 孤児となり、どこからも参照されずに。どのコードベースも、敗れたアプローチの残骸をいくつか抱えているものです。

一日25件のstyleコミットとはどういうものか

その一日のコミットログは、珍しいほど正直に保存されたデザイナーのスケッチ帳です。カラム比率は40/60、次に45/55。プラットフォームロゴの上の"Works with"(対応サービス)ラベルは昼に追加され、位置を変えられ、削除されました — 寿命はおよそ半日。プラットフォームロゴの行そのもの(Google Meet、Teams、Zoom、Slack、Webex)は朝の10:59に追加され、その夜22:08に丸ごと削除されました。そしてフッターの位置合わせには四つのアプローチを試す長編が要りました: 単一のラッパーコンテナ、次にセンタリングクラスの削除、次にflexboxセンタリング、最後にただ下端へ少し寄せるだけ。

これを無駄な右往左往と読むのは簡単です。私たちはこれを、デザイン作業の実際の姿だと読みます: レンダリングし、眺め、調整することで収束していく — そしてそれを一つの潰された「redesign login page」ではなく25の小さなコミットでやるということは、探索の過程そのものが記録されるということです。誰かが「前にロゴの行を試さなかったっけ?」と聞いたとき、答えはタイムスタンプ付きで履歴の中にあります。

OCRより速かったユーザー

このリリースのエンジニアリングの物語は、その5日前、三つのコミットからなる修正チェーンの中で起きました。v1.5.12以降、Cmd+Hを押すとスクリーンショットが即時フィードバック付きでキューに入ります: サムネイルはすぐキューに現れ、テキスト抽出 — ローカルのApple Vision OCR、およそ1〜2秒 — はバックグラウンドで走ります。キューイベントは文字どおりocrText: ''のまま送り出され、あとで埋まると約束するコメントが添えられています。

これは良い最適化で、そして新しいレースを生みました。速いユーザーはCmd+Hを押して、すぐさま質問を送信します。スクリーンショットのテキストフィールドはまだ空です。リクエストは画面の内容を一切持たずに飛び、モデルは — 真実を、腹立たしいほど正直に — _"I cannot see images"(画像は見えません)_と答えます。素朴な実装はエラーで失敗したのではありません; 間違った質問への正しい答えで失敗したのです。これはソフトウェアの失敗の中で最も人を混乱させるかたちです。

修正は、最適化が先送りした非同期処理で送信パスをゲートします: キュー内のどれかのスクリーンショットのOCRテキストがまだ空なら、リクエストは待機し、UIは"Reading screen..."(画面を読み取り中)インジケータを表示します; テキストが届いた瞬間にuseEffectが発火し、抽出済みの全文を添えてリクエストを送ります。差分の中には、盗む価値のあるReact特有のディテールが二つあります: スクリーンショットのキューはレンダー中に同期されるrefへミラーリングされています。イベントハンドラのクロージャ連鎖が古い状態をキャプチャしていたからです; そして待機していたリクエストは、汎用のキュー済みリクエストフックを通さず直接送信されます。理由は同じstale closureです。

さらに、コミットメッセージそのものに正直なひねりが記録されています: このレースを狩るために追加したトレーシングログが、バックエンド側の二つ目のバグを明らかにしたのです — あるコードパスで、プロンプトの組み立てがスクリーンショットのテキストを丸ごと落としていました。症状はひとつ、バグは二つ。チェーン全体を計装し、テキストがどこで消えるかを見張ることで見つかりました。チェーンの結末は、レース修正の9分後のプロダクト判断でした: Cmd+Hはバッチ分析用にスクリーンショットをキューに入れ、Cmd+Enterは常に現在の画面を新しくキャプチャする — 曖昧なひとつのワークフローではなく、二つの明確なワークフローに。(Cmd+EnterのAssistが実際に何をするかは、それ自体が一本の記事です: いま見ているものへの即席AIヘルプ。)

同じ週からの小さな後日談を、ホワイトラベルの章の読者のために: Product/version (platform)のUser-Agentに開発モードの修正が入りました。パッケージ化されていないElectronではapp.getVersion()が返すのはプロダクトのバージョンではなく_Electronの_バージョンだからです。アイデンティティ文字列は、例によって、配管から漏れるのです。

このリリースが教えてくれた三つのこと

1. プロダクトはレンダリングせよ、撮影するな。 本物のコンポーネントで組んだログインページのデモは自動でリブランドされ、あらゆるディスプレイ密度を生き延び、古びようがない。スクリーンショットのアプローチは試され、一営業日のうちに削除された — 安い実験、明快な評決。
2. すべての非同期最適化には、使う場所でのゲートが要る。 「OCRテキストが空のままの即時フィードバック」はUXとして正しい判断でしたが、送信パスは最適化が先送りしたものを待つことを学ばなければなりませんでした。処理を先送りするなら、その結果の消費者を全員見つけ出し、「空」と「まだ準備できていない」の違いを教えること。
3. 容疑者ではなく、チェーン全体を計装せよ。 トレーシングログはスクリーンショットのテキストを端から端まで — ショートカットハンドラからIPC、APIクライアントまで — 追いました。だからこそ一度の調査で二つのバグが閉じられたのです。うち一つはネットワークの向こう側で。

v1の物語の前の章は、ミーティングをちゃんとまた見つけられるように(v1.7.3)を; そして弧の全体については、ソフトウェアを完璧に出荷することの解剖学をご覧ください。