株式会社ライオット

SCROLL

サービス

SERVICE

01.

受託開発

Webアプリケーション開発を専門にしています。要件定義などの上流工程から保守・運用まで、システム開発の全工程を一貫して対応。フロントエンドからバックエンド、インフラ構築まで、プロダクト開発に必要な全領域をワンストップでお任せください。

WORKS

02.

エンジニアマッチング
サービス

エンジニアと企業の『最適な出会い』を、一過性のものではなく、永続的な『信頼の絆』へ。 Re:Linkエンジニアは、受託開発で培った「優良企業との信頼関係」と「高い継続率の実績」を基盤としています。私たち自身がエンジニアだからこそ可能な「確かな目利き」で、スキルや適性を正確に見極め、ミスマッチのない最高のマッチングをお約束します。

CHECK

支援事例

WORKS

プロジェクト概要

「LIVENODE ID」は、チケット・EC・ファンコミュニケーションなどアーティストとファンの接点を共通IDで統合するプラットフォーム「LIVENODE」の認証基盤です。クライアントであるKulture社と協働し、統合テスト・品質改善を経てプロダクションリリースまで仕上げました。 Ory Kratos（ID管理）とOry Hydra（OAuth2/OIDC）を基盤に、パスワード認証・パスキー・TOTP（二要素認証）・バックアップコードなど、多要素認証手段を提供し、複数のRelying Party（RP）が統一的にユーザー認証を行えるセキュアなプラットフォームを実現しています。

成果と実績

1. AIを活用したベース実装生成コードのプロダクション化

今回のプロジェクトではまず、プラットフォームの思想や利用方針を理解したクライアントによる、AIを活用したスピーディなベース実装が行われました。それを、長く使われるプラットフォーム基盤として求められるクオリティへと引き上げるため、UI刷新・統合テスト・セキュリティ強化・運用設計を経て本番品質に仕上げました。 AI時代における新しい開発パートナーシップの形として、AIとクライアントによる高速なイメージの具現化と、弊社の技術力による品質保証・運用設計を組み合わせた、高品質・高効率な開発を実現しました。

2. セキュアな多要素認証基盤の構築

パスキー（WebAuthn/FIDO2）によるパスワードレス認証、TOTP二要素認証、バックアップコードを組み合わせた多層防御を提供。脆弱性診断の実施やCloud Armorによるレート制限・WAF設定など、プロダクション運用に必要なセキュリティ対策を包括的に実施しました。

3. OAuth2/OIDCによるマルチサービス統合

Ory Hydraを活用したOAuth2/OIDC準拠の認可基盤を構築。複数のサービス（Relying Party）がシームレスにユーザー認証を統合でき、 Outboxパターンによるイベント駆動のプロフィール同期や、RP向けAPIによるサービス連携など、サービス横断的なユーザー管理を実現しました。

4. クリーンアーキテクチャによる保守性の高い実装

GoバックエンドAPI開発においてクリーンアーキテクチャおよびドメイン駆動設計（DDD）に基づくレイヤー分離を徹底。外部サービス（Kratos、Hydra、Cloud Pub/Sub）との疎結合を実現し、長期的な保守性と拡張性を確保しました。

開発環境と技術的チャレンジ

1. パスキー Conditional UI の実装

WebAuthn Conditional UIを採用し、ユーザーがログインフォームにフォーカスするだけでパスキー候補が自動表示される体験を実現。 OSやブラウザごとの挙動差異（macOS iCloudキーチェーン連携、Android Chrome挙動等）を検証し、安定した認証フローを構築しました。

2. Outboxパターンによるイベント駆動アーキテクチャ

プロフィール変更をGoogle Cloud Pub/Sub経由でRelying Partyに連携するOutboxパターンを実装。 DBトランザクション内でイベントを記録し、Publisherワーカーが非同期配信することで、データ整合性を保ちながらサービス間のリアルタイム同期を実現しました。

3. OpenTofuによるマルチ環境IaC管理

develop・staging・production・dress-rehearsalの4環境をOpenTofu（IaC）で完全管理。 Cloud Run、AlloyDB、Cloud Armor、Cloud Pub/Sub、Secret ManagerなどのGCPリソースをコード化し、GitHub Actionsによるタグ駆動デプロイと承認ゲートで安全なリリースフローを実現しました。

4. 開発環境フロントエンド: Next.js (App Router) + Tailwind CSS + Radix UI
バックエンド: Go + Echo + PostgreSQL
認証基盤: Ory Kratos + Ory Hydra (OAuth2/OIDC)
インフラ: GCP (Cloud Run, AlloyDB, Cloud Armor, Cloud Pub/Sub)
IaC: OpenTofu
CI/CD: GitHub Actions
監視: OpenTelemetry + Datadog
E2Eテスト: Playwright
負荷テスト: Grafana k6
言語: TypeScript + Go

プロジェクト概要

「DMM TV」のウェブフロントエンド開発を初期段階から全面的にサポートしました。本サービスは、動画配信市場における後発ながら、すでに100万人以上のユーザーを獲得し、高トラフィック環境下で安定稼働を実現しています。初期フェーズでは、競争の激しい市場で勝ち抜くため、柔軟な戦略が必要とされる中、頻繁に変更される仕様に対応することが大きな課題となりました。これに対し、UIライブラリを使用せず、独自実装を採用することで、高い柔軟性を持つ設計を実現し、迅速な仕様変更対応を可能にしました。また、リリース後には、初期設計で採用したRendertronからNode.jsサーバーへの移行を主導。SSR（サーバーサイドレンダリング）環境の設計と最適化を行い、パフォーマンスの向上を図りました。現在も継続的な機能強化と改善を進め、サービスの成長を支えています。

成果と実績

1. 初期開発の成功による基盤構築

柔軟なアーキテクチャを採用し、以降の開発がスムーズに進行するための土台を構築しました。特に、後の機能追加や仕様変更に耐えられるフロントエンドを実現しました。

2. 高トラフィック環境への対応

100万人以上のユーザーを抱えるサービスにおいて、安定性とパフォーマンスを両立。独自設計のフロントエンドにより、大量の同時アクセスにも対応できるシステムを開発しました。

3. 明確な設計プロセスの導入

初期段階では要件が不確定で頻繁に変更される状況でした。この課題に対応するため、設計書の導入を主導し、要件の整理と共有を徹底。チーム間の認識齟齬を防ぎ、開発の効率化を実現しました。この取り組みにより、変更に対する柔軟性を保ちながらも、納期を遵守する体制を構築しました。

4. レビューMaster制度の導入

納期が非常に厳しいスケジュールの中、レビューの効率化を図るため、レビュワーを特化させた「レビューMaster」制度を導入。コードの品質を保ちながら、レビューのスピードを向上させ、タイトなスケジュールにも柔軟に対応できる環境を整えました。これにより、品質とスピードの両立を実現しています。

開発環境と技術的チャレンジ

1. Apollo Cacheの積極的な活用

当時はまだ普及の途中にあったApollo Cacheを採用し、データ取得の効率化とフロントエンドのパフォーマンス向上を実現。特に、Relay風のカスタムページネーションロジックを実装し、大量データの効率的な取得とスムーズなユーザー体験を提供しました。

2. 独自UIライブラリの設計と社内npmパッケージ化

マルチデバイス対応を最適化するために、独自設計のUIコンポーネントライブラリを構築。これを社内npmパッケージとして公開し、プロジェクトでの再利用性を確保しました。この取り組みにより、開発スピードを向上させるだけでなく、デザインと機能の一貫性を担保しました。

3. 開発環境フレームワーク: Next.js + Emotion
データ管理: GraphQL + Apollo Client
言語: TypeScript
コード品質: ESLint + Prettier
コンポーネント設計: Storybook
ユニットテスト: Jest
エンドツーエンドテスト: Playwright
モニタリング: Datadog

プロジェクト概要

「KLEW」のフロントエンド開発プロジェクトを全面的に支援し、アーティストとファンをつなぐ革新的なプラットフォームの構築に貢献しました。本プラットフォームは、ライブチケットを通じて両者の絆を深め、より親密で充実したコミュニケーションを実現することを目指しています。また、このプラットフォームではWeb3技術を活用し、ライブチケット所要者に限定NFTを発行する機能を提供。これにより、デジタル記念品や特典を通じて、アーティストとファンの新しいエンゲージメントモデルを確立しました。弊社は、ユーザーにシンプルで快適な体験を提供するため、フロントエンド領域の設計から実装までを一貫して担当。直感的な操作性と高いパフォーマンスを兼ね備えたインターフェースを実現し、サービスの成功を支えています。

成果と実績

1. 直感的で快適なユーザー体験の提供

設計から実装までの一貫した取り組みにより、ユーザーはスムーズにライブチケットをアップロードし、限定NFTを受け取る体験を享受。モバイルデバイスからのアクセスも最適化され、幅広いユーザー層に対応しました。

2. スクラム開発の導入によるチーム全体の効率向上

開発プロセスにスクラムを導入し、短いスプリントを重ねることで、プロジェクトの進捗を迅速に可視化。スクラムイベントを活用し、チーム内のコミュニケーションを強化。タイトなスケジュールの中でも高い開発効率を維持しました。

3. レビューAIの導入による品質向上

コードレビューにAIツールを取り入れ、潜在的な問題の検出と最適化提案を自動化。これにより、コード品質を確保しながら、レビューにかかる時間を大幅に削減しました。

4. スピードと品質の両立

スクラム開発の柔軟性とレビューAIの精度を組み合わせることで、短期間での高品質な開発を実現。リリーススケジュールを厳守しながら、ユーザーにとってシンプルで快適な体験を提供しました。

開発環境と技術的チャレンジ

1. React Suspenseの導入

React Suspenseを活用し、低コストでSEOとユーザーパフォーマンスを両立。サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のバランスを最適化することで、初回表示速度を向上させ、検索エンジンからのインデックス精度も向上しました。

2. 仮想リストを活用したチャット機能

チャット機能では、Webスマホブラウザにおいて、上下方向への無限スクロールに対応する仮想リストを導入。要素の高さが動的に変化する場面にも対応することで、大量のメッセージを効率的に管理しながらスムーズな操作感を提供しました。これにより、リアルタイムチャットでの優れたパフォーマンスを実現しました。

3. Apollo Cacheを活用した即時フィードバック

コメント投稿時に、バックエンドDBへの反映を待たずにApollo Cacheに即時反映させる仕組みを採用。これにより、ユーザーにリアルタイムの操作感を提供しつつ、非同期処理によるバックエンド更新をシームレスに実現しました。

4. 開発環境フレームワーク: Next.js + Tailwind CSS
データ管理: GraphQL + Apollo Client
言語: TypeScript
コード品質: ESLint + Prettier
コンポーネント設計: Storybook
ユニットテスト: Jest
モニタリング: Datadog