読み込み中...

モバイル · 進行中

通勤ポッド

通勤中に聴く個人向けポッドキャスト再生アプリ。再生位置に連動した文字起こし表示、チャプター要約、オフライン再生に対応し、iOSとWeb（PWA）で利用

期間: 2026年9月 – 現在
分野: モバイル
所属: 趣味（個人・チーム）
状態: 進行中

Expo
React
TypeScript
Cloudflare

概要

Expo・Expo Router・TypeScriptで、個人向けの通勤用ポッドキャスト再生アプリを開発しています。
朝・夜の回をエピソード一覧に並べ、再生速度の切り替え、15秒スキップ、続きからの再開、再生位置に合わせた文字起こしのハイライト、チャプターごとの要約表示ができます。
Web版はPWAとしてホーム画面に追加でき、直近7日分の音声と文字起こしを自動保存して圏外でも再生できます。

アーキテクチャ

Web (PWA)Service Workerでオフライン再生
iOSJWTをSecureStoreに保存
Cloudflare Worker (Web版)静的アセット配信・同一オリジンプロキシ
配信カタログCloudflare Worker

Expo（React Native / react-native-web）とExpo Routerで、iOSとWebを1つのコードベースで構成し、音声再生にはexpo-audioを使っています。
配信カタログは別のCloudflare Workerにあり、Cloudflare Accessで保護しています。
アプリはAccessのトークン転送フローでJWTを取得してSecureStoreに保存し、リクエストに付与します。
Web版はCloudflare Workerが静的アセットを配信しつつ、認証転送とカタログ取得を同一オリジンでプロキシします。
Service Workerでアプリ本体をキャッシュし、オフライン保存や再生進捗のロジックは単体テスト付きのモジュールに分割しています。

技術的挑戦

課題Cloudflare Accessで保護された配信をアプリから利用解決Accessのトークン転送でJWTを受け取って保存し、認証エラー時はトークンを破棄して再ログイン
課題Web版でHttpOnly Cookieを読めない制約解決Workerで認証転送とカタログ取得を同一オリジンにプロキシ
課題通信できない環境での再生解決直近7日分の音声・文字起こしの自動保存と、Service Workerによるアプリ本体のキャッシュ
課題再生位置に連動した文字起こし解決文字起こしのタイミング情報から読み上げ中のフレーズを強調し、チャプター要約をボトムシートで表示