<!-- https://unlockos.io/ja/manual/unlock-lab -->

# Unlock Lab ヘルプ

## 概要

Unlock Labは、チェックイン機能のテスト・開発・配布のための統合ダッシュボードです。施設オーナーは誰でも使用でき、自社サイトへの組み込み用URLやコードを簡単に取得できます。

## 主な機能

- **チェックイン設定の選択** - 既存のチェックイン設定を選んでテスト
- **モバイルプレビュー** - 実際のスマートフォン画面でチェックイン体験を確認
- **URL・スニペット生成** - 自社サイトへの貼り付け用URLとコードを取得
- **デバッグ機能** - システムログの確認とAPI呼び出しテスト

---

## サイト貼り付け用URLとコード取得（最重要）

### 概要

Unlock Labの最も重要な機能は、**チェックインURLとホストアプリスニペットの生成**です。これらを使用することで、お客様が自社のウェブサイトやアプリから直接チェックインできるようになります。

### 前提条件

URL・スニペットを生成する前に：
1. **チェックイン設定の作成** - 「チェックイン設定」ページで設定を作成済みであること
2. **施設IDの確認** - 現在の施設が選択されていること

### チェックインURL作成

#### 用途
- QRコードとして施設内に掲示
- ウェブサイトのリンクとして設置
- メールやメッセージでゲストに送信

#### 手順
1. Unlock Labページで「チェックイン設定を選択」ドロップダウンから対象の設定を選択
2. 「3. サイト貼り付け用URLとコード取得」セクションで「チェックインURLを作成」ボタンをクリック
3. 生成されたURLをコピー
4. お客様に共有またはQRコードに変換

#### URL形式

施設スラッグが設定済みの場合（推奨）：
```
https://checkin.unlockos.io/{スラッグ}?config=yyy&reservationId=zzz
```

施設スラッグが未設定の場合（旧来の形式）：
```
https://checkin.unlockos.io?facilityId=xxx&configId=yyy
```

**パラメータ説明:**
- `config`（スラッグあり）または `configId`（旧形式）: チェックイン設定ID
- `facilityId`: 施設ID（スラッグなしの旧形式のみ）
- `reservationId`: （オプション）宿泊プランで予約済みの場合
- `reservationType`: （オプション）`unpaid`（決済+チェックイン）または `paid`（鍵のみ）

---

### ホストアプリスニペット作成

#### 用途
ホストアプリスニペットは、**完全に独立したチェックインアプリケーション**として機能する単一のHTMLファイルです。

**主な使用ケース:**
- Wix、Squarespace、WordPressなどのサイトビルダーへの埋め込み
- 自社サイトのiframeとして埋め込み
- スタンドアロンのチェックインキオスク端末
- カスタムアプリ内でのWebView表示

#### 手順
1. Unlock Labページで「チェックイン設定を選択」ドロップダウンから対象の設定を選択
2. 「3. サイト貼り付け用URLとコード取得」セクションで「ホストアプリスニペットを作成」ボタンをクリック
3. モーダルが開き、完全なHTMLコードが表示されます
4. 以下のいずれかを実行:
   - **コピー**: クリップボードにコピーして貼り付け
   - **ダウンロード**: HTMLファイルとしてダウンロード（`unlockos-checkin-host-{configId}.html`）

#### スニペットの特徴
- **完全に自己完結** - 外部依存なしで動作（React、i18n、すべて内包）
- **デザインシステム統一** - UnlockOSの公式デザイントークンを使用
- **レスポンシブ** - モバイル、タブレット、デスクトップに対応
- **マジックリンク認証** - メール認証で安全にチェックイン
- **ダークモード対応** - 設定に応じてテーマ切り替え可能

#### サンプルコード構造
```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>UnlockOS Check-in Host App</title>
    <!-- デザイントークン、スタイル -->
</head>
<body>
    <div id="unlock-checkin"></div>
    <link rel="stylesheet" href="https://cdn.unlockos.com/v1/dist-snippet/unlock-snippet-sdk.css">
    <script src="https://cdn.unlockos.com/v1/dist-snippet/unlock-snippet-sdk.umd.js"></script>
    <script>
      UnlockSDK.init({
        facilityId: 'your-facility-id',
        configId: 'your-config-id',
        theme: 'light',
        lang: 'ja',
        supabaseUrl: 'https://your-project.supabase.co',
        token: 'your-anon-key'
      });
    </script>
</body>
</html>
```

---

## テストチェックイン

### 概要

モバイルプレビュー画面で、実際のチェックイン体験を事前確認できます。本番環境に影響を与えずに動作確認が可能です。

### 使用方法

1. **チェックイン設定を選択** - 画面上部のドロップダウンから設定を選択
2. **モバイルプレビュー確認** - iPhone風のプレビュー画面が表示されます
3. **「チェックインを開始する」ボタンをクリック** - プレビュー内で実際の操作を試せます
4. **結果を確認** - チェックイン完了画面、入室キー発行などを確認

### 予約機能のテスト（宿泊プラン用）

宿泊プランを使用している場合：
1. 「予約を作成」ボタンをクリック
2. チェックイン・チェックアウト日時を入力
3. 料金計算結果を確認
4. 生成されたURLには`reservationId`パラメータが含まれます

---

## 在室状況の確認

Unlock Labでは、リアルタイムの**在室状況（Occupancy）**を確認できます。

- **現在の在室者数** - 施設内の現在のゲスト数
- **最大収容人数** - チェックイン設定で定義された上限
- **利用率** - パーセンテージ表示

これにより、施設の混雑状況を一目で把握できます。

---

## デバッグ機能

### ログ表示

システムのログを確認して、問題の診断に役立てることができます。

### API呼び出しテスト

APIエンドポイントへのリクエストをテストできます。

---

## よくある質問

### Q: Unlock Labでのテストは本番環境に影響しますか？
A: Unlock Lab内のモバイルプレビューで実行したテストチェックインは、本番データベースに記録されます。ただし、テストとして明確に識別できるため、後で削除可能です。本番環境への影響を避けたい場合は、テスト専用の施設を作成することをお勧めします。

### Q: 生成されたURLやスニペットの有効期限はありますか？
A: URLやスニペット自体に有効期限はありません。ただし、チェックイン設定を削除・無効化すると、そのURLからのチェックインはできなくなります。

### Q: スニペットのセキュリティは大丈夫ですか？
A: スニペットにはSupabaseのanon key（公開鍵）のみが含まれ、Row Level Security（RLS）により不正なデータアクセスは防止されています。ただし、本番環境のanon keyを含むため、公開前に必ずテストしてください。

### Q: ホストアプリスニペットをカスタマイズできますか？
A: ダウンロードしたHTMLファイルを編集することで、デザインや文言をカスタマイズできます。ただし、SDK初期化部分（UnlockSDK.init）のパラメータは変更しないでください。

### Q: 誰がUnlock Labを使用できますか？
A: 施設の管理者権限を持つユーザーは誰でもUnlock Labにアクセスできます。開発者権限は不要です。

### Q: QRコードはどうやって作成しますか？
A: 生成されたチェックインURLを、QRコード生成サービス（例: QR Code Generator、Google Chart API）に貼り付けることで、QRコードを作成できます。多くのサービスは無料で利用可能です。

---

## 関連ページ

- [チェックイン設定](checkin-config-form.md) - チェックイン設定の作成・編集
- [チェックイン一覧](checkin-list.md) - 過去のチェックイン履歴を確認
- [プラン一覧](plan-list.md) - 宿泊プランの設定（予約機能が必要な場合）
- [API Keys](api-keys.md) - API連携（高度な使用）