タブレット & 画面の向き

ひと目でわかる

Unveily SDK はすべてのプラン（Basic・Standard・Pro）共通でタブレットレイアウトの最適化と画面の回転（縦・横）処理をデフォルトでサポートしています。特別な設定をしなくても、ビルドすると自動的に適用されます。

画面の回転処理

動作の仕組み

AndroidManifest.xml に android:configChanges 属性が宣言されているため、端末が回転しても Activity が再作成されません。

<!-- AndroidManifest.xml — 自動で処理されます。変更不要です -->
<activity
    android:name=".MainActivity"
    android:configChanges="orientation|screenSize|keyboardHidden|screenLayout|smallestScreenSize"
    ... />

そのため、回転しても：

WebView の読み込み状態（URL・スクロール位置）が保持されます
JavaScript の実行コンテキストがリセットされません
ログインセッション・フォームの入力などがそのまま保持されます

回転時の自動処理

回転が発生すると、SDK 内部で以下を自動的に実行します：

開いているすべてのパネル（サイドドロワー、トップダウンメニューなど）を閉じます
システムバーの余白（inset）を新しい向きに合わせて再適用します
ウェブに onOrientationChanged イベントを送ります

ウェブ ↔ アプリの向き API

現在の向きを取得する（同期）

// "portrait" または "landscape" を返します
const dir = window.unveilyBridge.app.orientation();
console.log(dir); // "portrait"

回転イベントを受け取る

回転が起きるたびにネイティブが自動的に呼び出します。

function onOrientationChanged(info) {
  // info.orientation  — "portrait" | "landscape"
  // info.isLandscape  — boolean
  console.log('向きが変わりました:', info.orientation);

  if (info.isLandscape) {
    // 横向きレイアウトの処理
    document.body.classList.add('landscape');
  } else {
    document.body.classList.remove('landscape');
  }
}

onOrientationChanged 関数はページが読み込まれた後にのみ呼び出されます。初期の向きは window.unveilyBridge.app.orientation() で直接確認してください。

タブレット対応

ドロワーの幅の自動調整

サイドドロワーの幅が画面サイズに応じて自動的に変わります。

端末の種類	最小幅の基準	ドロワーの幅
スマートフォン	< 600dp	280dp
7インチタブレット	≥ 600dp	320dp
10インチタブレット	≥ 720dp	380dp

Android の values-sw600dp / values-sw720dp リソースシステムで実装されており、自動的に選択されます。

タブレットかどうかを確認する（同期）

const tablet = window.unveilyBridge.app.isTablet();
// smallestWidth ≥ 600dp であれば true

if (tablet) {
  // タブレット専用レイアウトを適用
  document.documentElement.setAttribute('data-device', 'tablet');
} else {
  document.documentElement.setAttribute('data-device', 'phone');
}

アプリ情報のコールバックで確認する

getInfo のコールバックにも含まれています：

window.unveilyBridge.app.getInfo(function(info) {
  console.log(info.isTablet);    // true | false
  console.log(info.orientation); // "portrait" | "landscape"
});

初期化パターン（推奨）

ページの読み込み時に向きと端末の種類を一度に読み込んで適用するパターンを推奨します。

document.addEventListener('DOMContentLoaded', function () {
  if (!window.unveilyBridge) return;

  const isTablet = window.unveilyBridge.app.isTablet();
  const orientation = window.unveilyBridge.app.orientation();

  applyLayout(isTablet, orientation);
});

function onOrientationChanged(info) {
  const isTablet = window.unveilyBridge.app.isTablet();
  applyLayout(isTablet, info.orientation);
}

function applyLayout(isTablet, orientation) {
  const root = document.documentElement;
  root.dataset.device = isTablet ? 'tablet' : 'phone';
  root.dataset.orientation = orientation;
}

/* CSS の例 */
[data-device="tablet"] .sidebar { width: 280px; }
[data-device="phone"]  .sidebar { display: none; }

[data-orientation="landscape"] .hero { height: 50vh; }
[data-orientation="portrait"]  .hero { height: 70vh; }

QR スキャンと回転

QR スキャン画面（QRScanActivity）は、スキャンの安定性のために縦向き固定で動作します。 QR スキャン中に端末を回転させてもスキャン画面自体は縦向きのまま維持され、スキャン完了後にメイン画面に戻ると現在の端末の向きが適用されます。

API	戻り値の型	説明
`unveilyBridge.app.isTablet()`	`boolean`	タブレット（sw ≥ 600dp）かどうか
`unveilyBridge.app.orientation()`	`"portrait" \| "landscape"`	現在の向き
`onOrientationChanged(info)`	コールバック関数	回転時にネイティブが呼び出す
`info.isLandscape`	`boolean`	横向きかどうか
`info.orientation`	`string`	`"portrait"` または `"landscape"`