コンテンツにスキップ

Apps (フロントエンド)

Speakeasy のフロントエンドは SvelteKit 5 + Svelte 5 (Runes) で構築された2つのアプリケーションで構成されています。両アプリとも Cloudflare Workers にデプロイされ、SvelteKit Remote Functions と Native RPC を通じてバックエンドサービスと通信します。

共通技術スタック

カテゴリ	技術	バージョン
フレームワーク	SvelteKit	2.50.0
UI ライブラリ	Svelte 5 (Runes)	5.47.1
スタイリング	Tailwind CSS v4 + daisyUI 5	4.1.18 / 5.5.14
ビルド	Vite	7.3.1
デプロイ	@sveltejs/adapter-cloudflare	7.2.5
バリデーション	Zod	4.3.6
テスト	Vitest	4.0.17
ランタイム	Cloudflare Workers	compatibility_date: 2025-11-03

共通設定

SvelteKit Remote Functions: 有効（experimental）
Async Compiler: 有効（experimental）
Remote Bindings: 有効（dev 環境で Cloudflare の Service Binding をリモート利用）
Observability: ログ・トレース 100% サンプリング
リージョン: aws:ap-northeast-1（東京）

Counter（店舗管理コックピット）

店舗スタッフが顧客とのコミュニケーションを管理するメインアプリケーションです。

項目	内容
パス	`apps/counter`
ドメイン（本番）	counter.plfumg.com
ドメイン（開発）	counter.plfumg.net
開発ポート	5174

Service Bindings

バインディング	サービス	用途
`PROOF`	Proof	認証・セッション管理
`VINTAGE`	Vintage	連絡先・グループ管理
`FIZZ`	Fizz	チャット・一括配信
`BASE`	Base	組織・店舗情報
`BELL`	Bell	通知設定・配信

RPC クライアント

src/lib/
├── proof-rpc.ts      # 認証サービスクライアント
├── vintage-rpc.ts    # 連絡先サービスクライアント
├── fizz-rpc.ts       # チャットサービスクライアント
├── base-rpc.ts       # 基盤サービスクライアント
└── bell-rpc.ts       # 通知サービスクライアント

Remote Functions（20ファイル）

ファイル	機能領域
`chat.remote.ts`	チャットメッセージ送受信
`chatrooms.remote.ts`	チャットルーム一覧・管理
`contacts.remote.ts`	連絡先一覧・検索
`contact-crud.remote.ts`	連絡先の作成・更新・削除
`contact-groups.remote.ts`	連絡先グループ管理
`contact-labels.remote.ts`	ラベル管理
`contact-chat-ng.remote.ts`	チャットNG管理
`domain-blacklist.remote.ts`	ドメインブラックリスト
`notifications.remote.ts`	通知一覧
`shop-notifications.remote.ts`	店舗通知設定
`shop-settings.remote.ts`	店舗設定
`files.remote.ts`	添付ファイル管理
`accounts.remote.ts`	アカウント管理
`availability.remote.ts`	オンライン状態管理
`search.remote.ts`	横断検索
`line.remote.ts`	LINE 連携
`benchmark.remote.ts`	パフォーマンス計測
`components/layout/getUserProfile.remote.ts`	ユーザープロフィール取得
`components/layout/Sidebar.remote.ts`	サイドバーデータ
`components/ThemeSwitch.remote.ts`	テーマ切替

ルート構成

src/routes/
├── (authorized)/              # 認証済みユーザー向け
│   ├── chat/                  # チャット
│   │   └── [roomId]/          #   チャットルーム詳細
│   ├── contact/               # 連絡先
│   │   └── [id]/              #   連絡先詳細
│   ├── broadcast/             # 一括配信
│   ├── settings/              # 設定
│   │   ├── notice/            #   通知設定
│   │   ├── shop/              #   店舗設定
│   │   │   └── line/          #     LINE 連携
│   │   │       └── callback/  #       LINE コールバック
│   │   └── tags/              #   タグ管理
│   ├── account/               # アカウント設定
│   └── push-test/             # プッシュ通知テスト
├── (guest)/                   # 未認証ユーザー向け
│   ├── sign-in/               # サインイン
│   └── no-shop/               # 店舗未登録
├── select-shop/               # 店舗選択
├── auth/                      # 認証
│   └── sso/                   # SSO コールバック
└── api/                       # API ルート
    ├── broadcast/             # 配信 API
    │   ├── count/             #   受信者数取得
    │   ├── recipients/        #   受信者一覧
    │   └── [id]/              #   配信操作
    │       ├── cancel/        #     キャンセル
    │       ├── execute/       #     実行
    │       └── recipients/    #     受信者一覧
    └── settings/
        └── notifications/
            └── test/          # 通知テスト送信

環境変数

変数名	説明
`PUBLIC_DOOR_URL`	Door ゲートウェイの URL
`PUBLIC_LINE_LIFF_ID`	LINE LIFF アプリ ID
`PUBLIC_BASE_URL`	アプリのベース URL
`PUBLIC_LINE_BOT_ID`	LINE Bot ID

Penthouse（管理者コンソール）

システム管理者がアカウント・組織・システム設定を管理するための管理コンソールです。

項目	内容
パス	`apps/penthouse`
ドメイン（本番）	penthouse.plfumg.com
ドメイン（開発）	penthouse.plfumg.net
開発ポート	5173

Service Bindings

バインディング	サービス	用途
`PROOF`	Proof	認証・セッション管理
`VINTAGE`	Vintage	連絡先管理
`BASE`	Base	組織・アカウント管理

注意: Counter と異なり、Penthouse は Fizz（チャット）と Bell（通知）へのバインディングを持ちません。

追加バインディング

バインディング	種別	用途
`ANALYTICS`	Analytics Engine	DB オペレーショントラッキング（speakeasy_db_operations）

RPC クライアント

src/lib/
├── proof-rpc.ts              # 認証サービスクライアント
├── base-rpc.ts               # 基盤サービスクライアント
├── auth-client.ts            # better-auth クライアント
└── server/
    └── vintage-rpc.ts        # 連絡先サービスクライアント（サーバー側のみ）

Remote Functions（12ファイル）

ファイル	機能領域
`features/accounts/api/accounts.remote.ts`	アカウント管理
`organizations/api/organizations.remote.ts`	組織管理
`features/analytics/sql-explorer/api/operations.remote.ts`	DB オペレーション分析
`features/analytics/sql-explorer/api/stats.remote.ts`	統計情報
`features/analytics/sql-explorer/api/tables.remote.ts`	テーブル情報
`cloudflare/database.remote.ts`	Cloudflare DB 操作
`cloudflare/sql.remote.ts`	SQL エクスプローラー
`cloudflare/storage.remote.ts`	ストレージ操作
`cloudflare/workers.remote.ts`	Workers 管理
`components/layout/getUserProfile.remote.ts`	ユーザープロフィール取得
`components/layout/Sidebar.remote.ts`	サイドバーデータ
`components/ThemeSwitch.remote.ts`	テーマ切替

ルート構成

src/routes/
├── (authorized)/              # 認証済みユーザー向け
│   ├── account/               # 自分のアカウント設定
│   ├── accounts/              # アカウント一覧管理
│   ├── organizations/         # 組織管理
│   │   └── [id]/              #   組織詳細
│   ├── impersonating/         # 代理ログイン
│   ├── admin/                 # システム管理
│   │   ├── accounts/          #   アカウント管理
│   │   ├── billing/           #   請求管理
│   │   ├── cloudflare/        #   Cloudflare リソース管理
│   │   ├── database/          #   データベース管理
│   │   ├── domain-blacklist/  #   ドメインブラックリスト
│   │   │   └── [id]/
│   │   ├── global-domain-blacklist/ # グローバルブラックリスト
│   │   │   └── [id]/
│   │   ├── oidc/              #   OIDC 設定
│   │   ├── organizations/     #   組織管理（管理者向け）
│   │   ├── scim/              #   SCIM プロビジョニング
│   │   └── sql/               #   SQL エクスプローラー
│   └── api/
│       └── auth/
│           └── error/         #   認証エラーハンドリング
├── (guest)/                   # 未認証ユーザー向け
│   ├── sign-in/               # サインイン
│   └── unauthorized/          # 権限不足
└── api/
    └── organizations/
        └── external-info/     # 組織外部情報 API

環境変数

変数名	説明
`PUBLIC_DOOR_URL`	Door ゲートウェイの URL

データフローパターン

両アプリケーションは同一のデータフローパターンを使用しています。

ブラウザ (Svelte 5 コンポーネント)
  ↓ Remote Function 呼び出し（自動シリアライズ）
SvelteKit サーバー (*.remote.ts)
  ↓ RPC クライアント (*-rpc.ts)
Service Binding (platform.env.{SERVICE})
  ↓ Native RPC（V8 構造化クローン）
WorkerEntrypoint (各サービス)
  ↓ Drizzle ORM / Durable Objects / Queues
PostgreSQL (Hyperdrive) / KV / R2

詳細は Native RPC & Service Bindings およびデータフローを参照してください。