データ性能
約2秒から800ミリ秒へ
2秒の待ち時間でも、作業の流れは止まります。この本番システムでは、重要なユーザー操作に遅延の影響が出ていました。
原因をPostgreSQLまで追い、パーティション、インデックス、トリガー、永続化処理を一つのデータ経路として見直しました。変更後は感覚ではなく、元の計測値と比較しました。
平均応答時間は約2秒から約800ミリ秒になりました。
社名を伏せた事例
以前の職務から10件の事例を紹介します。課題と制約、選んだ技術的な方法、その結果を具体的にまとめました。企業名は公開していません。
事業継続
2週間で使える代替手段を構築
通信制限によって、チームが頼る連絡手段が使えなくなりました。復旧を待つだけでは日々の業務に空白が生じます。
Rust、Go、Tauri、Vueを用いて、クロスプラットフォームのトンネリングアプリとブラウザー拡張を調査、構築、試験、導入しました。既存の端末で使える代替手段が必要でした。
通信手段を復旧し、関連する継続的なインフラ費用を約98%削減しました。
オフラインデータ
通信がなくても続けられる作業
接続が切れても、それまでの作業まで失うべきではありません。難しいのは、オフラインの変更を残し、再接続時に整合させることでした。
IndexedDBにリアルタイムイベントを保存し、複雑なオブジェクト状態の整合処理を作りました。同期できない間も作業を進められる形です。
主要な操作をオフラインで続け、通信復帰後に同期できるようになりました。
フロントエンド設計
並行開発を支える明確な境界
開発者が増えるにつれ、共有データの流れが摩擦を生みました。機能ごとに、他の変更と衝突せず育てられる余地が必要でした。
Vueアプリに明確な機能境界、集約したイベント、予測しやすいデータの責任範囲を設けました。並行して作業するチームが使える設計を目指しました。
開発者が並行して作業でき、その構造は当初のチームを超えて使われました。
開発者体験
1コマンドで環境を準備
手作業の多い開発環境では、新しい仲間の初日が設定のトラブル対応で終わりかねません。準備自体が仕事になっていました。
繰り返しの手順をGit hooks、Bash、CIに移し、残る判断を文書化しました。引き継ぎは暗記する一覧から実行できるコマンドに変わりました。
新しく加わった人が初日から1コマンドで環境を準備できるようになりました。
CMSとSEO
編集可能なコンテンツとアプリの操作感
サイトにはCMSの編集しやすさ、検索からたどれるページ、アプリのような軽快さが同時に必要でした。どれかを失うと体験が損なわれます。
独自のハイドレーション、ルーティング、コンテンツ処理でVueとPHP・WordPressを結びました。編集手順を保ちながら、ページ全体を読み直さずに移動できるようにしました。
CMSの作業手順と検索向けのURLを保ちながら、アプリのような操作を実現しました。
キャンペーン開発
モバイル向けキャンペーンを3週間で提供
モバイル向けキャンペーンには、会場情報、参加状況、分析、メッセージ連携を短期間で揃える必要がありました。指定されたAngularは当時新しい技術でした。
3日で開発に必要な知識を身につけ、アプリとサービス連携を構築しました。期限内に求められたのは、個別の画面ではなく動く全体像でした。
3日で開発に必要な知識を身につけ、アプリを3週間で提供しました。
水資源への関心
ブラウザーの制約を越える3D表現
水をテーマにした表現には動く3Dが求められました。当時のWebGL対応はブラウザーによってばらつきがあり、同じ物語を届けられない恐れがありました。
Blenderでモデリングとレンダリングを担当し、物語を伝えるスプライトを制作しました。ライブ3Dが安定する場面ではWebGLと組み合わせました。
全場面をライブ3Dに頼らず、複数のブラウザーで視覚的な物語を届けられました。
女性の安全
危険を感じたときの目立たない退出
危険な状況で女性の安全に関するページを読む人にとって、素早く離れることは訪れることと同じくらい大切です。通常の退出では、現在の閲覧の流れに目立つ痕跡が残り得ます。
History APIとpopstateで、素早い退出時にキャンペーンページ自身の履歴項目を扱いました。ブラウザーの全履歴を削除するものではなく、目立ちにくく離れるための設計です。
退出後、現在のブラウザー履歴にキャンペーンページが目立つ項目として残る可能性を減らしました。
モバイルAR
実際の空間で製品を確認
製品画像は形を示せても、利用者の空間に置いた姿までは示せません。足りないのは製品の周りにある現実の部屋でした。
3DアセットをVectaryでモバイルWebXR・ARのプレビューにしました。スマートフォンのカメラで大きさや配置をその場で確かめられます。
スマートフォンのカメラを通じて製品モデルを配置し、確認できるようになりました。