概要
BARN MAP は、倉庫・納屋・物置などの保管場所とアイテムを地図上で視覚的に管理するPWAアプリです。スマートフォンでもPCでも動作し、オフラインでも使用できます。
主な機能は以下の通りです。
- 建物・フロア（地図）・場所・アイテムの4階層で物品を管理
- 地図上にピンを配置して場所を視覚化
- 描画ツールで間取り図を作成・背景画像を読み込み
- QRコードを印刷して棚・箱に貼付、スキャンでアイテム登録
- 写真添付で実物を記録
- ConoHa WINGサーバーとのクラウド同期（複数端末対応）
データ構造
BARN MAP は以下の4階層でデータを管理します。
フロア＝地図という設計のため、建物にフロアを追加すると自動的に地図が作成されます。サイドバーでフロアをタップすると、その地図に切り替わります。
起動画面
アプリを開くと起動画面が表示されます。状況に応じて選択肢が変わります。
| 選択肢 | 説明 |
|---|---|
| ☁ サーバーから復元して続ける | クラウド同期が設定済みの場合に表示。サーバーの最新データを取得して起動します。 |
| 💾 ローカルデータから続ける | このブラウザに保存済みのデータがある場合に表示。前回の続きから始めます。 |
| ＋ 新規で開始する | データをリセットしてサンプルデータで始めます。同期設定もクリアされます。 |
建物の管理
建物は場所と地図をグルーピングするための最上位の単位です。
建物を追加する
建物を編集・削除する
サイドバーの建物名にカーソルを合わせると表示される ✎ ボタンから編集モーダルを開けます。フロアの追加・削除、建物自体の削除もここで行えます。
地図（フロア）の管理
各フロアが1つの地図に対応します。建物モーダルでフロアを追加すると地図が自動生成されます。
地図を切り替える
サイドバーのフロア名（🗺アイコン付き）をタップすると、その地図に切り替わります。
地図を直接作成する（建物なし）
マップタブのツールバーでマップセレクターが非表示になっていますが、エディタタブの「＋ 地図」ボタンや、地図編集モーダルから建物に割り当てることができます。
地図を編集・削除する
サイドバーの地図名横の ✎ ボタンから、名前変更・所属建物の変更・地図の削除が可能です。削除するとピン・エリアも一緒に削除されます。
場所の管理
場所は「棚A-1」「工具コーナー」のような具体的な保管場所です。アイテムは必ずいずれかの場所に紐づきます。
場所を追加する
場所を編集する
サイドバーの場所名横の ✎ ボタンから編集できます。所属建物/フロアの変更もここで行います。
アイテムの管理
アイテムは実際の物品（ESP32、スパナ、MC4コネクタなど）です。
アイテムを追加する
在庫タブ
📦タブでは全アイテムを一覧表示できます。検索・カテゴリ絞込み・場所絞込み・ソート機能があります。アイテムカードをタップすると編集できます。
場所の検索・選択
アイテム追加時の「保管場所」は検索付きドロップダウンになっています。
- クリックするとドロップダウンが開き、建物/フロアごとにグループ化された場所一覧が表示されます
- 上部の検索ボックスに文字を入力すると、場所名でリアルタイムに絞り込めます
- 場所をタップして選択します
地図の閲覧
🗺タブのマップビューでは、地図上にピンで場所が表示されます。
ツールバーのモードボタンで表示を切り替えます。
| ボタン | モード | 説明 |
|---|---|---|
| 👁 | 表示モード | ピンをタップで詳細表示、ドラッグで移動 |
| 📍 | ピン配置モード | 場所を選択してから地図をタップでピンを配置 |
| 🗂 | 概要ビュー | 全マップのサムネイル一覧 |
ズーム操作
地図の右下にズームコントロールがあります。
| 操作 | 説明 |
|---|---|
| ＋ / ー | 25%刻みで拡大/縮小（20%〜400%） |
| 1:1 | 100%にリセット |
| ⛶ | 地図全体が画面に収まるようにフィット |
| ピンチ（2本指） | スマートフォンでのピンチズーム |
| Ctrl+ホイール | PCでのホイールズーム |
ピンの配置・移動
ピンを配置する
ピンを配置すると、その場所は自動的に現在の地図（フロア）に紐づけられます。
ピンを移動する
表示モード（👁）でピンをドラッグすると、同じ地図内で位置を移動できます。
ピンのポップアップ
表示モードでピンをタップすると、その場所のアイテム一覧がポップアップ表示されます。「一覧で見る」で在庫タブに、「QR表示」でQRコードに移動できます。
地図エディタ
✏️タブで地図にフリーハンドの描画や背景画像を設定できます。
描画ツール
| ツール | 説明 |
|---|---|
| ✏️ ペン | フリーハンド描画 |
| ▭ 矩形 | 四角形を描画 |
| ╱ 直線 | 直線を描画 |
| T テキスト | 文字を配置 |
| ⬜ エリア | 名前付きエリア領域を作成 |
| ⌫ 消しゴム | 描画を消去 |
背景画像
サイドバーの「📷 背景画像」から間取り図や写真を読み込めます。読み込むとキャンバスサイズが画像に合わせて自動調整されます。
保存
描画が終わったら「💾 保存してマップへ」をタップ。マップビューに反映されます。クラウド同期が設定されている場合は自動的にサーバーにもアップロードされます。
エリア管理
エリアは地図上の特定区域に名前と色を付けて可視化する機能です。
作成したエリアはマップビューにも半透明で表示されます。
QRコード
📷タブでは、登録した場所ごとにQRコードが自動生成されます。印刷して棚や箱に貼り付けておくと、スキャンで素早くアイテム登録ができます。
QRドメイン設定
QRコードのURLベースは「QR ドメイン」欄で設定できます。ConoHa WINGにアップロードした場合のURLを入力してください。空欄の場合は現在のブラウザURLが使用されます。
QR/バーコードスキャナー
ヘッダーの 📷 スキャン ボタンでカメラが起動します。
- 場所QR — BARN MAP で生成したQRを読むと、その場所を保管先としたアイテム追加モーダルが開きます
- バーコード — JAN/EAN等を読むと、バーコード番号がメモ欄に入力された状態でアイテム追加モーダルが開きます
写真添付
アイテム追加/編集モーダルで「📷 撮影」または「🖼 選択」から写真を添付できます。
- 写真は 480×320px に自動リサイズされ、JPEG 75% 品質で保存されます
- データはBase64としてlocalStorageに保存されるため、大量の写真は容量を圧迫する可能性があります
クラウド同期
ConoHa WINGにbarn_sync.phpをアップロードし、同期設定を行うと複数端末間でデータを同期できます。
設定手順
barn_sync.php, .htaccess, .env をアップロード?action=setup&confirm=yes にアクセスしてDBテーブルを作成同期バッジの状態
| バッジ | 状態 |
|---|---|
| ✓ 同期済 | サーバーと同期が完了しています |
| ↻ 同期中 | データを送受信しています |
| ● 保存待 | ローカル変更があり、まもなく送信されます（2秒デバウンス） |
| ✗ エラー | 同期に失敗しました。設定を確認してください |
| ⊘ オフライン | ネットワーク接続がありません |
バックアップ・復元
JSONファイルに保存
ヘッダーの 💾 保存（PCの場合）またはメニュー → 「💾 データ保存」で、全データをJSONファイルとしてダウンロードできます。地図の描画データ・背景画像も含まれるため、ファイルサイズが大きくなる場合があります。
JSONファイルから復元
📂 読込 からJSONファイルを読み込むと、現在のデータがすべて置き換えられます。
在庫のインポート/エクスポート
📦在庫タブの 💾/📂 ボタンで、アイテム・場所データのみの軽量インポート/エクスポートが可能です（描画データは含まれません）。
PWAインストール
BARN MAP はPWA（Progressive Web App）としてホーム画面に追加できます。
- ブラウザがインストール可能と判断すると、ヘッダーに ⊕ ボタンが表示されます
- タップするとホーム画面にアプリアイコンが追加され、ネイティブアプリのように起動できます
- Service Worker によるキャッシュで、オフラインでも動作します