Webの試作を、ストアの「入口」にする

受託向けの試作を、アプリにして営業に使う話

Transcript

1. Webの試作を、 ストアの「入口」にする 受託向けの試作を、汎用アプリにして営業に使う話 Bitz Co., Ltd. Yukio Murakami Cocoa勉強会
2. 今日の話 1 2 3 4 Webで試作 壁にぶつかる 発想を変える 作ったもの スマホのブラウザで 通行量を数える お客さんに アカウントを用意してもらう 手間 汎用アプリにして ストアで見つけてもらう iOS・Android・Mac・Web 作るもの、作らないもの FlowCounter ― Cocoa勉強会 2
3. きっかけは「店舗前の通行量カウント」 ヒントにした事例 • 店舗前の通行量をカメラで数える • PC でスクリプトを動かす方式 FlowCounter ― Cocoa勉強会 やってみたこと • iPhone の Safari、Android の Chrome だけで 動かす • インストール不要。URL を開けば数えられ る • 映像は送らず、数えた結果だけを記録する 3
4. 試作の構成(2026年9月) スマホのブラウザ(Safari / Chrome) Cloudflare 時刻・向きだけ カメラの 映像 人を見つける MediaPipe 同じ人を 追いかける 線を越えた 向きを数える • Workers + KV で日別に集計 • 集計ページで確認 映像はブラウザの外に出ない 保護: Cloudflare Access(メールアドレスで許可)、API トークン、レート制限 FlowCounter ― Cocoa勉強会 4
5. 2日で、実機で数えられるところまで 約50ms 約150ms 2日 iPhone Safari Pixel 4a Chrome 実機で動くまで GPU、約20fps GPU、約6〜7fps 2026年9月13日〜14日 1フレームの推論時間(MediaPipe EfficientDet-Lite0)。どちらの実機でも、線を越えた人を向き別に数え、集計ページで見られること を確認した FlowCounter ― Cocoa勉強会 5
6. 実際の案件に当てはめると お客さんの Cloudflare で動かす手順 1 アカウントを作ってもらう 2 API トークンを発行してもらう 3 KV(集計用・レート制限用)を作る 4 デプロイして、シークレットを設定する 5 Cloudflare Access で利用者を絞る FlowCounter ― Cocoa勉強会 案件ごとに、 この手間 • お客さんの負担が大きい • 試してもらう前の壁が高い • そもそも URL を知っている人にしか届 かない 6
7. この試作を、どう知ってもらうか? 受託の試作は、その案件の中だけで終わってしまう 7
8. 汎用アプリにして、ストアに置く 自分で使ってもらう 相談してもらう 数えて、書き出して、 表計算で見る 要件に合わせた解析や 運用の支援は有償で FlowCounter ストアで配布 App Store / Google Play で公開予定 活用を記事にする 記事を読んだ人が アプリを入れる FlowCounter ― Cocoa勉強会 8
9. アプリでやること、やらないこと 数えることと書き出しに絞る 1 要件に合わせた解析はアプリの外。ここを相談として受ける 映像もデータも預からない 2 推論は端末の中。データは利用者の iCloud や Google ドライブに残り、サーバーの利用料もかからない お客さんごとの違いは、設定で吸収する 3 線の位置、数える対象、感度を設定画面で変える。ストアに出すのは1つだけ 機能を足すかの基準 4 見つけてもらうのに役立つか。運用の手間と費用が増えないか FlowCounter ― Cocoa勉強会 9
10. Webの試作とアプリの違い Web の試作 アプリ(FlowCounter) 届け方 URL を知っている人だけ ストアで探せる(公開予定) 使い始めるまで Cloudflare のアカウントと設定 インストールして、線を引くだけ 映像の処理 ブラウザの中(MediaPipe) 端末の中(Vision / MediaPipe) データの置き場所 Cloudflare の KV 利用者の端末と iCloud / Google ドライブ サーバーの費用 Cloudflare の利用料(無料枠あり) かからない FlowCounter ― Cocoa勉強会 10
11. アプリは入口、仕事は相談から 使う場面 相談として受けること 店舗前の通行量 出店前の調査 イベントの来場者数 FlowCounter ― Cocoa勉強会 時間帯ごとの人通りと、 入店した人の数 • 要件に合わせた集計とレポート • 設置場所や運用の相談 • 要件に合わせた機能の開発 候補地の前を通る人の数を、 数日かけて数える 入口の出入りを 向き別に数える 受託の試作が、案件が終わったあとも営 業してくれる 11
12. 作ったもの: 4つのプラットフォーム 数える 保存先(利用者のもの) 集計して見る iPhone(iOS 26〜) iCloud Drive Mac アプリ Vision で人を検知 SwiftUI 端末内のファイルを 自動で複製 macOS 26〜。複数端末・複数日を 結合し、Swift Charts でグラフ Android(13〜) Google ドライブなど Web ビューア / 表計算 MediaPipe で人や車など Jetpack Compose JSON / CSV を 利用者が選んだ場所へ ブラウザの中だけで集計 Windows でも見られる 端末の外に出るのは、線を越えた時刻と向きなどの計測データだけ FlowCounter ― Cocoa勉強会 12
13. 集計の画面(Web ビューア) 書き出した JSON を 読み込むだけ • 複数の端末、複数の日をまとめ て集計 • 時間帯別・日別、向き別に表示 • データはブラウザの外に出ない • 結合した CSV を書き出せる flowcounter.bitz.work で試せる サンプルデータ(架空)を読み込んだ状態 FlowCounter ― Cocoa勉強会 13
14. Apple 側の作り SwiftUI、1つのターゲット Vision iCloud Drive のコンテナ iOS と macOS を1つのマルチプラット フォームのターゲットに。XcodeGen で生成 DetectHumanRectanglesRequest で人 を検知。追跡と線の判定は自前 iPhone の記録を自動で複製し、Mac が読む。サーバーを用意しなくてよ い Swift Charts String Catalog サインイン情報を持たない Mac で時間帯別・日別・向き別の集 計を表示 画面は英語をベースにし、日本語は ローカライズで対応 保存先の選択と認証は OS 標準の画 面に任せる FlowCounter ― Cocoa勉強会 14
15. ネイティブにしたときの速さ 1フレームの推論時間(短いほど速い) iPhone は2倍以上速く iPhone 16e / Vision Vision で約22ms。カメラの上限の30fps で動く 約50ms iPhone / Web版 約22ms Pixel 4a / Web版 約150ms Pixel 4a はほぼ同じ 約168ms(約6fps)。Web 版もこの速さで 、向き別に数えられていた Pixel 4a / ネイティブ 約168ms 参考値。端末や映している内容はそろえていない FlowCounter ― Cocoa勉強会 15
16. 数え方は Swift と Kotlin で別々に、テストデータは共通 testdata/counting/*.json Swift 追跡 FlowCounterCore • カルマンフィルタ(等速)で位 置を予測 • ハンガリアン法で検知と対応 付け • 許容距離は人の矩形の大きさ に比例 swift test Python で生成 左右・逆向き、30fps と 7fps、すれ違 い、欠落、往復 など10シナリオ Kotlin counting/ ./gradlew testDebugUnitTest 向きの定義など、数え方の意味だけを揃え、中身はそれぞれのプラットフォームに合わせた FlowCounter ― Cocoa勉強会 16
17. カメラを使うアプリとしての配慮 ガイドブックの想定に当てはまる 映像は 保存も送信もしない 経産省・総務省「カメラ画像利活用ガイドブック」の「人・車等 の数のカウント」の使い方 使う場所は利用者しだい 端末の外に出るのは、線を越えた時刻と向きな どだけ。録画の API は使わない ストアで配るので、どこで使われるかは分からない。利用者向け の注意書きで対応する 掲示のひな形を公開 「カメラ作動中」の掲示とプライバシーポリシーを flowcounter.bitz.work で公開している FlowCounter ― Cocoa勉強会 17
18. Claude Code と、5日で4つのプラットフォームに 2026-09-13 2026-09-14 2026-10-10 2026-10-14 Web 試作 Cloudflare に記録 アプリに着手 機能が揃う ブラウザで人を検知し、 実機で速さを確認 集計と保護まで 実機で確認 目的と方針を決めて iPhone と Pixel で検知 4つのプラットフォームで 計測・保存・集計 判断の理由と測定値は、日付をつけて docs/plan.md に残している FlowCounter ― Cocoa勉強会 18
19. いまの状態とこれから できている これから • 4つのプラットフォームで計測 ・保存・集計 • 店頭での精度と、10〜30分の 連続稼働を測る • 店頭で試させてもらえる店舗 ・場所 • 英語をベースに、日本語に対 応 • 結果を見て検知の方式を決め る • 使ってみた感想 • Mac と Pixel 4a で実機確認、 iPhone は一部 • ストアに申請する • Web ビューアを公開 FlowCounter ― Cocoa勉強会 募集していること 19
20. 試作を、汎用アプリにして 営業の入口にする • 受託の試作は、案件ごとに持ち込むより、アプリにして見つけてもらう • アプリは数えることに絞り、解析と運用は相談として受ける flowcounter.bitz.work 相談・実証の協力、 受け付けています Bitz Co., Ltd. bitz.co.jp