Smartphone Level (スマホ水平器)

スマートフォンのジャイロセンサーを利用した、レスポンシブなブラウザベースの水平器アプリケーションです。

概要

このアプリは、ReactとViteを使用して構築されており、スマートフォンの傾きをリアルタイムで検知して表示します。DIYや家具の設置、撮影時の水平確認など、日常の様々なシーンで活用できます。

主な機能

• リアルタイム表示: 端末の傾きを視覚的なバブル（気泡）と数値（度単位）でリアルタイムに表示。
• 4つの測定モード:
  • 自動切り替え: 端末の持ち方に合わせて、水平（平置き）・垂直（縦）・垂直（横）を自動判定。
  • 水平 (平置き): デスクや床などに置いて使用するモード。
  • 垂直 (縦置き): 壁などに背面を当て、縦向きに立てて使用するモード。
  • 垂直 (横置き): 壁などに背面を当て、横向きに置いて使用するモード。

技術スタック

• Frontend: React 19, TypeScript
• UI Framework: Material UI (MUI) 9
• Build Tool: Vite 8
• Package Manager: Bun (recommended) / npm / yarn
• Deployment: GitHub Pages

セットアップ

必要条件

• Bun (または Node.js)

インストール

# リポジトリのクローン
git clone https://github.com/Densyakun/level.git
cd level

# 依存関係のインストール
bun install

開発サーバーの起動

bun run dev

ビルド

bun run build

デプロイ

GitHub Pagesへのデプロイには以下のコマンドを使用します：

bun run deploy

注意事項

• ブラウザのセキュリティ制限により、HTTPS接続が必須となります。
• iOS端末では、初回起動時にモーションセンサーへのアクセス許可が必要です（「開始する」ボタンをクリックしてください）。
• 端末のセンサー精度に依存するため、厳密な精度が求められる業務用には適さない場合があります。