fix アプローチ変えてみる

Author: usuyuki

frontend/package.json

@@ -64,7 +64,6 @@
     "chartjs-adapter-date-fns": "^3.0.0",
     "date-fns": "^4.1.0",
     "redis": "^5.12.1",
-    "svelte-i18n": "^4.0.1",
-    "web-haptics": "^0.0.6"
+    "svelte-i18n": "^4.0.1"
   }
 }

frontend/pnpm-lock.yaml

@@ -1,79 +1,83 @@
 /**
  * 触覚フィードバック（バイブレーション）ユーティリティ。
- * web-haptics ライブラリを使用して iOS / Android 両対応の haptic を提供する。
  *
- * iOS (Safari 17.4+):
- *   web-haptics が内部で input[type=checkbox][switch] + label を DOM に作成し、
- *   label.click() で Taptic Engine を起動する。
+ * iOS Safari (17.4+):
+ *   input[type=checkbox][switch] + label.click() を使用して Taptic Engine を起動する。
  *
  *   重要な制約:
- *   - web-haptics はデフォルトで要素を display:none にするが、iOS では
- *     display:none の要素から発火した click() では Taptic Engine が動作しない。
- *   - そのため attachHapticToButton の初回呼び出し時に DOM 要素を事前生成し、
- *     display:none → 画面外配置 (position:fixed left:-9999px) に変更する。
- *   - trigger() の同期部分はユーザージェスチャーコンテキスト内で実行されるため、
- *     pointerdown ハンドラから void trigger() で呼び出すことで iOS でも動作する。
+ *   - iOS では async 関数内から label.click() を呼び出すと、await より前でも
+ *     ユーザージェスチャーコンテキストが失われる場合がある。
+ *   - そのため label.click() は pointerdown ハンドラから直接・同期的に呼び出す。
+ *   - display:none の要素では Taptic Engine が動作しないため、
+ *     position:fixed で画面外に配置して描画ツリーに残す。
  *
  * Android 等:
- *   Vibration API (navigator.vibrate) を使用する。DOM 要素は作成されない。
+ *   Vibration API (navigator.vibrate) を使用する。
  */
 
-import { WebHaptics } from "web-haptics";
-
-// シングルトンインスタンス（DOM 要素はインスタンス内で管理される）
-let haptics: WebHaptics | null = null;
-// DOM 事前初期化済みフラグ（複数コンポーネントから呼ばれても一度だけ実行）
-let preInitDone = false;
-
-function getHaptics(): WebHaptics {
-  if (!haptics) {
-    haptics = new WebHaptics();
-  }
-  return haptics;
-}
+// iOS向け label 要素（シングルトン）
+let iosLabel: HTMLLabelElement | null = null;
+let domInitialized = false;
 
 /**
- * web-haptics が作成した DOM 要素の display:none を画面外配置に変更する。
- * iOS では display:none の要素への click() では Taptic Engine が動作しないため。
+ * iOS向け DOM 要素を初期化する。
+ * display:none を使わず position:fixed で画面外に配置して描画ツリーに残す。
+ * ユーザージェスチャーの前に呼び出してよい（DOM 生成のみ、haptic は発火しない）。
  */
-function fixHapticsElementStyles(): void {
-  if (typeof document === "undefined") return;
-  const label = document.querySelector('label[for^="web-haptics"]');
-  if (!label) return; // Android は Vibration API を使用するため DOM 要素なし
-  // display:none → 画面外に配置（描画ツリーに残したまま非表示にする）
-  (label as HTMLElement).style.cssText =
-    "position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;";
-  const input = label.querySelector("input");
-  if (input) {
-    // all:initial でリセット後に switch 要素として描画させる
-    (input as HTMLInputElement).style.cssText =
-      "all:initial;appearance:auto;display:block;";
+function initDOM(): void {
+  if (domInitialized || typeof document === "undefined") return;
+  domInitialized = true;
+
+  // Android / Chrome 系は Vibration API を使用するため DOM 要素不要
+  if (
+    typeof navigator !== "undefined" &&
+    typeof navigator.vibrate === "function"
+  ) {
+    return;
   }
+
+  const label = document.createElement("label");
+  const input = document.createElement("input");
+  input.type = "checkbox";
+  input.setAttribute("switch", "");
+  input.id = "haptic-switch";
+  label.setAttribute("for", "haptic-switch");
+
+  // 画面外に配置（display:none は iOS で haptic が動作しないため使用しない）
+  label.style.cssText =
+    "position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;pointer-events:none;";
+
+  label.appendChild(input);
+  document.body.appendChild(label);
+  iosLabel = label;
 }
 
 /**
- * DOM 要素を事前初期化する。
- * trigger() を非ジェスチャーコンテキストで呼び出すことで iOS 向け DOM 要素を生成し、
- * その後 display:none を画面外配置に変更する。
- * （非ジェスチャーなので haptic は発火しないが DOM だけ作られる）
+ * ユーザージェスチャーコンテキスト内で同期的に haptic を発火する。
+ * 必ず同期的なイベントハンドラ（pointerdown 等）から直接呼び出すこと。
+ * async 関数内から呼び出すと iOS で gesture context が失われる。
  */
-function preInitHaptics(): void {
-  if (preInitDone || typeof document === "undefined") return;
-  preInitDone = true;
-  // trigger() の同期部分が実行されることで iOS 向け DOM 要素が生成される
-  void getHaptics().trigger("light");
-  // trigger() の同期部分完了後（await 前）に DOM 要素が存在するのでスタイルを修正
-  fixHapticsElementStyles();
+function triggerHaptic(): void {
+  if (
+    typeof navigator !== "undefined" &&
+    typeof navigator.vibrate === "function"
+  ) {
+    // Android / Chrome: Vibration API
+    navigator.vibrate(25);
+    return;
+  }
+  // iOS Safari: label.click() でTaptic Engineを起動
+  iosLabel?.click();
 }
 
 /**
- * ボタン要素に pointerdown ハンドラを付与し、ユーザージェスチャーの中で振動させる。
+ * ボタン要素に pointerdown ハンドラを付与し、haptic を発火する。
  * iOS Safari ではユーザージェスチャーコンテキストが必要なため、
- * 非同期の成功コールバックではなくボタン押下時点で発火する。
+ * pointerdown で同期的に発火する。
  */
 export function attachHapticToButton(button: HTMLElement): () => void {
-  // 初回呼び出し時に iOS 向け DOM 要素を事前初期化してスタイルを修正する
-  preInitHaptics();
+  // iOS向け DOM 要素を事前生成（ユーザージェスチャーの前に実行してOK）
+  initDOM();
 
   function handler() {
     // div ラッパーに attach した場合も含め、内包ボタンが disabled なら無視する
@@ -82,9 +86,10 @@ export function attachHapticToButton(button: HTMLElement): () => void {
         ? (button as HTMLButtonElement)
         : button.querySelector("button");
     if (btn?.disabled) return;
-    // void で Promise を明示的に破棄（同期部分のみジェスチャーコンテキストで実行される）
-    void getHaptics().trigger("medium");
+    // 同期的に haptic を発火（async 経由にしないことで iOS の gesture context を保持）
+    triggerHaptic();
   }
+
   button.addEventListener("pointerdown", handler);
   // クリーンアップ関数を返す
   return () => button.removeEventListener("pointerdown", handler);