INDEPENDENT DEVELOPER / STS WORKS
使いやすさの
裏側を、設計する。
アプリの操作感から、データが流れる仕組みまで。
STS WORKSを主宰する私が、企画・設計・実装を手がけたアプリを通して、技術と設計の工夫を紹介します。
from idea to implementation
THE ENGINEERING BEHIND THE EXPERIENCE
⌘ApplicationFlutter / Swift / Web
01
interaction → logic → data
☁AWSAPI · Queue · Storage
⌁On deviceNative · Graphics · Local DB
Built around the problem.↗
APPLICATION ARCHITECTUREAWS / SERVERLESSNATIVE INTEGRATIONLOCAL PROCESSING
01 / CLOUD & BACKEND
アプリの先にある、AWSの仕組み。
認証、API、非同期処理、データ保存。
アプリとバックエンドのつながりを紹介します。
01
昼と夜のカフェの雰囲気を楽しみながら、ジャズを繰り返し聴ける音楽アプリ。
AWS ARCHITECTURE
音源の配信と、再生を支える制御を分ける。
構成図は横にスクロールして読めます ↔
AWS上の処理主要な処理の流れ
React NativeExpo AVTypeScriptCloudFrontS3API GatewayLambdaSecrets ManagerLocal cache
↳音源はCloudFrontとS3から配信し、Lambdaは再生に必要なAPI処理を担当。端末の再生状態とキャッシュを組み合わせ、配信とプレイヤーの責務を分けています。
設計のポイントを読む
- 音源の配信と再生APIをCloudFrontでつなぎ、配信側とアプリ側の役割を分離。
- Node.jsのLambdaが再生APIを担当し、端末は再生状態と音源キャッシュを管理します。
- Expo AVで再生を制御し、ダウンロード済みの音源をローカルキャッシュから再利用します。
取得時ソースのv2音源配信と端末再生の主要経路です。従来のv1配信、無料曲の定期更新、通知、課金、分析、監視は省略しています。図は稼働中環境との一致やすべての音源のオフライン再生を保証するものではありません。
02
天使と悪魔の視点で、会話や出来事を振り返るiOSアプリ。
AWS ARCHITECTURE
AIの分析と、端末での根拠検証を分ける。
構成図は横にスクロールして読めます ↔
AWS上の処理主要な処理の流れ
SwiftUIAVFoundationPythonAPI GatewayLambdaDynamoDBSecrets ManagerJeV / OpenAI
↳音声・表示は端末、分類と応答の組み立てはクラウドへ。分析結果の引用が実際の発言に含まれるかを端末でも検証し、外部モデルの切り替えとアプリの体験を分離しています。
設計のポイントを読む
- SwiftUIとAVFoundationが入力・音声・表示を担当。最近の会話を送る経路は、利用者の同意を条件にしています。
- Python LambdaでJeVを優先し、失敗時にはOpenAI側へ判定の組ごと切り替え。異なる提供元の結果を混ぜない設計です。
- 引用文・発言ID・応答形式を端末で照合。DynamoDBに利用状態、Secrets Managerに外部サービスの設定を分けて管理。
取得時ソースのクラウド連携を示しています。新しい会話経路には開発中の実装を含み、ストア公開版との一致や分類精度を示す図ではありません。Apple認証、課金、監視は省略しています。
03
デスクトップでの制作活動を記録し、統計や制作の証跡として見返せるアプリ。
AWS ARCHITECTURE
操作の記録と集計を、キューで分離する。
構成図は横にスクロールして読めます ↔
AWS上の処理主要な処理の流れ
FlutterGoAPI GatewayLambdaSQSDynamoDBS3Cognito
↳アプリからの記録をSQSで受け取り、集計処理を切り離す。記録の入口と集計ワーカーが、それぞれの役割に集中できる構成です。
設計のポイントを読む
- FlutterのデスクトップUIとOSごとのネイティブ実装を組み合わせ、制作活動を記録。
- GoのLambdaで取り込み、SQSを挟んだワーカーでバッチを再編成・集計。
- DynamoDBに統計、S3にアーカイブを保存。認証はCognitoで扱います。
記録・集計の主要経路を簡略化しています。認証、Webサイト、課金、DLQ、監視は図から省略しています。
04
来店スタンプや特典を管理し、顧客のWalletと連携する店舗向けアプリ。
AWS ARCHITECTURE
店舗アプリとWalletを、ひとつのAPIでつなぐ。
構成図は横にスクロールして読めます ↔
AWS上の処理主要な処理の流れ
FlutterNode.jsAPI GatewayLambdaCognitoDynamoDBApple Wallet
↳店舗での操作、カード情報、Walletの発行・更新をバックエンドでつなぐ。アプリの表示とカードデータの処理を分けています。
設計のポイントを読む
- Flutterの店舗アプリと顧客向けのWalletを連携。
- API GatewayとNode.js Lambdaが店舗アプリのAPI処理を担当。
- DynamoDBのカード・店舗データをもとにWallet Passを生成・更新します。
主要なAPI・Wallet連携のみを図示。S3アセット、通知キュー、管理画面、監視は省略しています。
05
写真上で選んだ帯の内側だけを、AIでコミック風に加工するiPhoneアプリ。
AWS ARCHITECTURE
必要な画像領域だけを送り、端末で合成する。
構成図は横にスクロールして読めます ↔
AWS上の処理主要な処理の流れ
SwiftUIUIKitCloudFrontLambdaDynamoDBSecrets ManagerFLUX
↳選択範囲の切り出しと完成画像への合成をiPhone側で行い、AWSのプロキシを経由してAIを呼び出す。画像処理と外部サービス連携の役割を分けています。
設計のポイントを読む
- UIKitで回転した帯領域を切り出し、生成結果を元写真へフェザー合成。
- CloudFrontとLambdaが外部AIへのリクエストを担当。
- Lambdaで生成回数と処理状態を扱い、DynamoDBで状態、Secrets Managerで設定を管理します。
生成の主要経路です。認証、購入、通知は省略。外部AIはAWS境界の外に示しています。
06
作品の空間周波数を分析し、自分らしい波形や作品比較に変えるWebアプリ。
AWS ARCHITECTURE
画像の特徴はブラウザで計算し、結果をクラウドへ。
構成図は横にスクロールして読めます ↔
AWS上の処理主要な処理の流れ
ReactTypeScriptCanvasDCTp5.jsLambdaDynamoDB
↳画像を32×32に縮小してDCTで特徴を抽出する処理はブラウザで実行。保存する特徴量と圧縮プレビューを、API経由でクラウドへ渡します。
設計のポイントを読む
- Canvasで輝度を読み、Hann窓と2次元DCTから周波数の特徴を計算。
- p5.jsで特徴ベクトルに基づく波形を描画。
- CloudFrontでWebとAPIを配信し、Lambdaを通してDynamoDBへ特徴量と圧縮プレビューを保存。
解析と保存の主要経路です。元画像と圧縮プレビューは区別しています。認証、モバイル版、監視は省略。
07
写真のブレ・明るさ・顔の状態などを調べ、整理と復旧を助けるiOSアプリ。
AWS ARCHITECTURE
写真の解析は端末へ。復旧用の保存はAWSへ。
構成図は横にスクロールして読めます ↔
AWS上の処理主要な処理の流れ
SwiftUIPhotoKitVisionCore ImageCognitoAPI GatewayLambdaDynamoDBS3
↳PhotoKit・Vision・Core Imageで写真を端末内で解析。任意の復旧保存では、APIがメタデータを管理し、画像本体はS3へ送ります。画像の転送とAPIの処理を分けています。
設計のポイントを読む
- 写真IDの処理済み状態を記録し、バッチの再開と重複処理の抑制を組み込んでいます。解析のために画像をサーバーへ送る構成ではありません。
- PythonのLambdaが復旧用のAPIを担当し、DynamoDBで利用状態と保存情報を管理。
- 画像本体はS3へ、メタデータはAPIへ送ることで、転送処理と状態管理の役割を分離。
端末内の解析と任意の復旧保存を中心にした概念図です。共有・招待、App Clip、購入検証、期限切れデータの整理、監視は省略しています。
02 / APP & DEVICE
端末とブラウザの中に、設計の工夫を。
ネイティブ連携、描画、ローカル処理。
独自バックエンドを持たないアプリの構成です。
01
球体を動かして時刻を選ぶ、触れる操作感を持つアラームアプリ。
APPLICATION ARCHITECTURE
立体的な操作感と、アラームの実務を分ける。
構成図は横にスクロールして読めます ↔
アプリ内の処理主要な処理の流れ
FlutterWKWebViewThree.jsJavaScript bridgeDrift / SQLiteLocal notifications
↳球体の描画はThree.js、アプリの状態とアラームはFlutter。WebViewのJavaScriptブリッジを介して選んだ時刻を受け渡し、役割をつないでいます。
設計のポイントを読む
- Three.jsの球体UIをローカルアセットとしてWKWebView内に読み込み。
- JavaScriptとDartの間で時刻・設定を受け渡し。
- Drift/SQLiteにアラームと履歴を保存し、OSのローカル通知でスケジュール。
時刻選択・保存・通知の主要経路です。独自アプリバックエンドはありません。RevenueCat、Firebase設定・障害収集は省略しています。
02
紙の絵や写真を反転・白黒・構図ガイドで確認するアプリ。
APPLICATION ARCHITECTURE
カメラ、色変換、ガイドを端末内で重ねる。
構成図は横にスクロールして読めます ↔
アプリ内の処理主要な処理の流れ
FluttercameraColorFilterCustomPainterdart:uiLocal files
↳入力画像に色変換とガイド描画を重ねて表示。カメラ映像、参照画像、保存画像を扱う流れを、Flutterと端末の機能で組み立てています。
設計のポイントを読む
- cameraとimage_pickerで映像・写真を取り込み、拡大や反転を制御。
- ColorFilterの行列で明暗を変換し、CustomPainterで構図ガイドを描画。
- 参考画像の位置・透明度を調整し、端末内のファイルへ書き出して共有。
画像処理の主要経路です。独自アプリバックエンドはありません。Firebase Remote Configによる更新案内は省略しています。
03
撮影した紙や写真を、検索できる立体的な書庫へ整理するiOSアプリ。
APPLICATION ARCHITECTURE
画面はReact Native、データの責務はSwiftへ。
構成図は横にスクロールして読めます ↔
アプリ内の処理主要な処理の流れ
React NativeTypeScriptSwiftVision OCRSwiftDataThree.jsWKWebView
↳React Nativeが操作画面、Three.jsが書庫の描画を担当。OCR・写真ファイル・永続データの扱いをSwift側へ集め、JSONブリッジで画面とデータ処理の責務を分けています。
設計のポイントを読む
- WKWebViewに同梱したThree.jsで空間表示。画面と描画層は、ネイティブが返す状態から表示を組み立てます。
- SwiftのScanPipelineとリポジトリが処理途中の状態を保存。Vision OCRの全ページが成功してから認識結果を更新し、途中失敗でも再開できる設計です。
- SwiftDataにメタデータ、ImageStoreに写真を保存。非同期検索には世代番号を持たせ、古い結果が新しい入力の表示を上書きしないようにしています。
取得時のReact Native連携と端末保存の実装例です。独自アプリバックエンドはありません。開発中の変更も含み、ストア公開版との一致を示していません。撮影、購入、移行仕様は省略しています。
03 / ABOUT THE DEVELOPER
体験と仕組みを、
ひとつにつなぐ。