はじめに
QRコード読んでスマホのライトを会場で制御してピカピカやるとか、すげぇ。 pic.twitter.com/ihr5XrVCm2
— もがちゃん🏀ビーコル (@moga_bcor) December 10, 2025
Xですげぇと話題になっていたので、作ってみました。
開発環境
- MacBook Air M1, 2020
- Cursor 2.0.60
- nvm 0.39.7
- Node.js 22.4.0
- ngrok 3.34.0
- iPhone 12 Pro
- iPhone 13
- iPhone 16
- iPhone 17
フォルダ構成
frontend: Vite + React + TypeScript のフロントエンド
backend: Express + TypeScript のバックエンド
my-mobile-light/
├── backend/ # バックエンドサーバー
│ ├── src/
│ │ └── server.ts # Express + WebSocketサーバー
│ ├── package.json
│ ├── tsconfig.json
│ └── node_modules/
│
├── frontend/ # フロントエンドアプリケーション
│ ├── src/
│ │ ├── components/
│ │ │ ├── AdminPage.tsx # 管理画面コンポーネント
│ │ │ ├── AdminPage.css
│ │ │ ├── FlashlightClient.tsx # クライアント画面コンポーネント
│ │ │ ├── FlashlightToggle.css
│ │ │ └── FlashlightToggle.tsx
│ │ ├── App.tsx # ルーティング設定
│ │ ├── App.css
│ │ ├── main.tsx # エントリーポイント
│ │ └── index.css
│ ├── public/ # 静的ファイル
│ ├── dist/ # ビルド成果物（本番用）
│ ├── package.json
│ ├── vite.config.ts # Vite設定
│ ├── tsconfig.json
│ └── node_modules/
│
└── README.md
起動方法
こちらのリポジトリをクローンして下さい
git clone https://github.com/SatoshiRobatoFujimoto/my-mobile-light.git
cd my-mobile-light
ngrokを起動
ngrok http 3000
Forwarding https://xxxx.ngrok-free.dev -> http://localhost:3000
frontend/.envを編集
VITE_API_URL=https://xxxx.ngrok-free.dev
frontendをビルド
cd frontend
npm install
npm run build
backendを起動
cd backend
npm install
npm run dev
PCで https://xxxx.ngrok-free.dev を開く
スマホでhttps://xxxx.ngrok-free.dev/1 を開く（※カメラのアクセスを許可して下さい）
PCの方にデバイスが登録される
PCの方でオン/オフするとスマホのライトがオン/オフされます！
作ってみた https://t.co/uQzELnJRrC pic.twitter.com/3gxgfWe52Q
— がちもとさん (@sotongshi) December 11, 2025
4台繋いでみると、こんな感じです！
それぞれのスマホで
- https://xxxx.ngrok-free.dev/1
- https://xxxx.ngrok-free.dev/2
- https://xxxx.ngrok-free.dev/3
- https://xxxx.ngrok-free.dev/4
に繋いでください
進化した https://t.co/IOV6LKIuYF pic.twitter.com/Qxiha2hYsw
— がちもとさん (@sotongshi) December 11, 2025
お疲れ様でした。