医療・臨床分析画面の開発

医療・臨床分析プロダクトの画面開発とアクセシビリティ・性能改善、開発環境の改善、バックエンド作業をあわせて担当しています。

• 長い分析プロセスで条件設定から結果確認まで続けられるよう、入力・実行・結果・レポート画面とECharts・Plotlyベースの比較チャートを開発しました。
• 画面サイズが変わった場合やエラー後に再入場した場合でも作業を続けられるよう、企画書になかったレスポンシブ・エラー・再入場時の動作を提案し、企画・デザイン・バックエンド担当者と決めて反映しました。
• 入力項目が多い画面で反復入力とマウス移動の負担を減らすため、キーボードのTab移動とimport機能を追加しました。
• 画像リクエストとUI修正範囲を減らすため、画像ベースのUIを共通コンポーネントへ置き換え、静的画像を画面サイズ別WebPへ変換するビルド処理を追加しました。計算上の画像転送量は約95%減り、別途行ったLighthouse比較ではLCPが1.3秒から1.0秒、Speed Indexが3.4秒から0.7秒へ短縮しました。
• 同じ疾患一覧を画面ごとに再取得しないよう、直接取得コードを共通TanStack Query hookへ置き換え、キャッシュと再取得の基準を一か所で管理しました。

AI開発ツールの活用経験

• AIが医療・臨床用語と画面動作を独自に解釈しないよう、プロジェクト指示、作業別Skill、実行Hook、PRルールをリポジトリに置き、CodexとClaudeが参照できるようにしました。
• 非開発職もドメイン資料を理解しやすいよう、企画・履歴文書をMarkdownへ移し、Codex・Claudeから検索できるローカルLLM WikiベースのMCPサーバーを開発・配布しました。

開発環境とバックエンド運用

• ViteとNext.js Pages Routerに分かれ、構造と書き方が異なっていた4つのフロントエンドプロジェクトの構造とデプロイフローを統一し、既存コードを共通コーディング規約に合わせて修正しました。
• 手動DockerデプロイをGitHub Actionsへ移す作業を主導し、デプロイ後にバックエンドのHTTP応答やコンテナ状態に異常があればActions Summaryとログを残すようにしました。
• 型・テスト・ビルドエラーがリモートブランチへ上がらないよう、Husky pre-commit・pre-pushにtypecheck・test・buildを接続しました。
• サービスエラーをプロダクト・環境・リクエスト単位で追跡するため、3つのバックエンドでログを業務DBから分離し、環境・サービス・リクエストID別に保存しました。Adminにはログ照会とフロントエンドエラー報告APIを追加し、フロントエンドのエラー種別をサーバーログへ関連付けられるようマッピングしました。

WebViewプロダクトとWebゲーム

• 動画プラットフォームには繰り返し訪問するコンテンツが必要でしたが、イベントやゲームをアプリへ入れると変更のたびにアプリ配布を待つ必要がありました。WebView Playgroundを提案してプロトタイプで実演し、採用後は専用フロントエンドプロジェクトの構築を主導しました。その後、占い・イベントを移し、ギフトコード・ラッキードロー・アンケートへ拡張しました。
• 動画視聴以外にも気軽に楽しめ、再訪するきっかけとなるコンテンツが必要でした。PhaserでFlyingPopと既存ボーナスを使うOpenSesameを開発しました。当時のDB確認に関する本人の回想では、両ゲームの週間ユニーク利用者は約2,000〜3,000人でした。
• アプリ・バックエンド担当者とFlutter bridge・ゲームAPIを連携し、広告完了・ディープリンク・Safari音声・重複進行・timeout問題を処理しました。

AI活用とコンテンツ運用ツール

• 8言語への字幕翻訳を繰り返す負担を減らすため、CLIをWebツールに移し、Shortimeのバックオフィスに組み込みました。本人の回想では、1人で1話に約3日かかっていた作業が1日6〜8話を処理する水準になりました。
• ユーザーリテンションを高めるコンテンツを確保し、バックリンクを活用したSEO流入戦略を検証するため、Sellectorsの商品ブログ下書きをAIで生成するプロトタイプを制作しました。
• 3つの動画プラットフォームを繰り返し検索する時間を減らすため、候補動画を一画面に集約しました。同程度のキーワード数で約50分の確認が10分以内になったという運用担当者のフィードバックを得ました。

顧客向けコマース

初期メンバーとして、顧客向けコマースと販売者・運用者向け画面、モバイルWebView・Webゲーム、コンテンツ運用ツールをフロントエンド中心に開発しました。

• 国内外のユーザーが自分の言語と決済環境で注文できるよう、韓国語・日本語・英語・繁体字中国語に対応し、海外ユーザーかどうかに応じて国内決済手段と海外カード・PayPalを分けました。国別の住所入力と海外送料も注文フローへ接続しました。
• 決済後もギフト受取から購入確定、クレーム、レビューまで続くフローが必要でした。ギフト受取・キャンセルと購入確定、返品・交換・返金と一部返品金額の処理、レビュー一覧・作成・修正と写真レビューを開発し、購入確定の有無・同一商品の注文項目・返品状態に応じてレビュー作成条件を分けました。
• 主な利用環境がモバイルで、PC・モバイル画面を別々に開発する工数が他のプロダクト作業へ影響していたため、顧客画面はPCでも同じアプリライクなモバイルUIを使用する構成にしました。
• ライブ販売の参加者が販売状況を見失わず新しい参加をすぐ認識できるよう、商品・参加状態を5秒ごとに更新しました。新規参加にはconfettiと、自ら提案したAWS Pollyの音声案内を接続しました。
• カテゴリとセラーショップの無限スクロール・一覧状態の復元をあわせて設計・実装しました。

販売者向け画面と運用者バックオフィス

• 販売者が商品と複数の注文情報を広い画面で確認し直接処理できるよう、デスクトップレイアウトの商品・配送設定と注文・キャンセル・交換・返金画面を開発しました。
• 既存担当者のアプリ開発への異動後も運用要望へ対応できるよう、Flutter WebバックオフィスをNext.jsへ一括で置き換え、フロントエンド実装を単独で担当しました。
• 運用チームが商品・販売者承認と注文・クレーム・精算・問い合わせ、バナー・検索キーワードを直接管理できるよう画面を移行・開発し、検索リセット・Excelエクスポート・ドラッグ並び替えを追加しました。

共通加入導線と性能改善

• 複数の顧客ページで同じ保険加入モーダルを再利用できるよう、共通CDN SDKを作りました。API keyと表示オプションは設定として受け取り、商品別の画面アセットはplanIdパスへ分離しました。
• 加入画面で白い画面とローダーが約5秒表示されていたため、初期取得をPromise.allでまとめ、顧客情報の取得を前倒ししました。さらに担当フローをNext.jsへ移し、初期データをSSRで処理しました。Lighthouse LCP 1.2秒と日本現地での進入時間1.2〜1.5秒を確認した後に配布しました。

加入・運用システム

• ユーザーが保険料確認から申込完了までオンラインで続けられるよう、職業ベースの保険料算定、加入者情報・告知、カード決済を接続しました。加入手順の長い別のがん・入院保険には中断保存・復元を適用し、復元時にはカード情報を初期化しました。
• 運用者が保険顧客・取引・加入履歴と契約・代理店情報を照会し、ファイル業務を処理できるよう、管理システムと別のバックオフィスを開発しました。検索・詳細画面とSpringバックエンド、CSVファイルのS3保存モジュール、支店・募集人・契約・決済・保険料請求書照会とファイルアップロードを担当しました。

外交部領事コールセンター保守

• 領事コールセンターの運用要望と障害へ対応するため、相談アプリケーションの機能改善・不具合修正と無料通話アプリのトラブルシューティングを担当しました。アンケート用JSP画面とDBバッチサーバー連携APIも開発しました。

Smart-DISデータ移行と実行環境の切り替え

• データベース・OS・ネットワーク環境が異なる機関にもSmart-DISを配布できるよう、データ移行機能を開発し、OracleクエリをMariaDBでも動作させました。Linux専用機能はWindowsへ移し、閉域網ではオンラインライブラリを代替した後、運用マニュアルを作成しました。

公共機関インフラの構築と運用

• 公共機関システムの障害と監査へ対応できるよう、国務調整室の世宗・ソウルのサーバーとネットワーク・セキュリティ・バックアップ機器を運用し、障害復旧・セキュリティ監査・国政監査準備を担当しました。

社会保障情報院高度化事業

• 新しい機器と機関を運用日程に合わせて開通するため、社会保障情報院高度化事業で機器検収・マウント・設置テストを担当しました。

児童保護専門機関の構築および保守

• 児童保護専門機関のコールセンター移転と新規機関の開設で、機器移転とインフラ構築を進めました。