web_simple_apps/card.html at main · tomosud/web_simple_apps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html>
<head>
  <title>iPhone センサー背景色</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      padding: 20px;
      font-family: Arial, sans-serif;
      transition: background-color 0.1s ease;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .container {
      background: rgba(255, 255, 255, 0.9);
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      text-align: center;
      max-width: 400px;
      width: 90%;
    }

    button {
      background: #007AFF;
      color: white;
      border: none;
      padding: 15px 30px;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      margin-bottom: 20px;
    }

    button:hover {
      background: #0056b3;
    }

    #output {
      font-size: 14px;
      line-height: 1.5;
      margin: 20px 0;
      white-space: pre-line;
    }

    #colorInfo {
      font-size: 12px;
      color: #666;
      margin-top: 10px;
    }

    #maxValues {
      font-size: 12px;
      color: #333;
      margin-top: 15px;
      padding: 10px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>iPhone センサー背景色</h1>
    <button onclick="requestPermission()">センサー許可を求める</button>
    <button onclick="resetMaxValues()" style="background: #FF3B30; margin-left: 10px;">最大値リセット</button>
    <button onclick="toggleSensorMode()" style="background: #34C759; margin-left: 10px;">モード切替</button>
    <p id="output">データ待機中...</p>
    <p id="colorInfo">背景色はセンサーの値に基づいて変化します</p>
    <p id="maxValues">最大値記録: X: 0.00, Y: 0.00, Z: 0.00</p>
    <p id="sensorInfo">センサータイプ: 待機中...</p>
  </div>

  <script>
    let maxValues = { x: 0, y: 0, z: 0 };

    function resetMaxValues() {
      maxValues = { x: 0, y: 0, z: 0 };
      updateMaxValuesDisplay();
    }

    function updateMaxValuesDisplay() {
      document.getElementById('maxValues').innerText =
        `最大値記録: X: ${maxValues.x.toFixed(2)}, Y: ${maxValues.y.toFixed(2)}, Z: ${maxValues.z.toFixed(2)}`;
    }

    function requestPermission() {
      if (
        typeof DeviceMotionEvent !== 'undefined' &&
        typeof DeviceMotionEvent.requestPermission === 'function'
      ) {
        DeviceMotionEvent.requestPermission()
          .then(permissionState => {
            if (permissionState === 'granted') {
              window.addEventListener('devicemotion', handleMotion);
              // 向きセンサーも追加
              if (typeof DeviceOrientationEvent !== 'undefined' &&
                  typeof DeviceOrientationEvent.requestPermission === 'function') {
                DeviceOrientationEvent.requestPermission()
                  .then(orientationState => {
                    if (orientationState === 'granted') {
                      window.addEventListener('deviceorientation', handleOrientation);
                    }
                  });
              } else {
                window.addEventListener('deviceorientation', handleOrientation);
              }
              document.getElementById('output').innerText = 'センサーが有効になりました。デバイスを動かしてください。';
            } else {
              document.getElementById('output').innerText = '許可されませんでした';
            }
          })
          .catch(console.error);
      } else {
        // Androidなど
        window.addEventListener('devicemotion', handleMotion);
        window.addEventListener('deviceorientation', handleOrientation);
        document.getElementById('output').innerText = 'センサーが有効になりました。デバイスを動かしてください。';
      }
    }

    let currentMode = 'acceleration'; // 'acceleration' or 'orientation'
    let orientationData = { alpha: 0, beta: 0, gamma: 0 };

    function handleMotion(event) {
      // 純粋な加速度（重力を除去）
      const pureAcc = event.acceleration;
      // 重力を含む加速度
      const accWithGravity = event.accelerationIncludingGravity;

      // 利用可能なデータを使用
      const acc = pureAcc && pureAcc.x !== null ? pureAcc : accWithGravity;

      if (acc && acc.x !== null && acc.y !== null && acc.z !== null) {
        // 絶対値の最大値を記録
        const absX = Math.abs(acc.x);
        const absY = Math.abs(acc.y);
        const absZ = Math.abs(acc.z);

        if (absX > maxValues.x) maxValues.x = absX;
        if (absY > maxValues.y) maxValues.y = absY;
        if (absZ > maxValues.z) maxValues.z = absZ;

        if (currentMode === 'acceleration') {
          // 加速度の値を0-255の範囲にマッピング
          const normalize = (value, min = -10, max = 10) => {
            const normalized = ((value - min) / (max - min)) * 255;
            return Math.max(0, Math.min(255, Math.round(normalized)));
          };

          const red = normalize(acc.x);
          const green = normalize(acc.y);
          const blue = normalize(acc.z);

          // 背景色を更新
          document.body.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;

          // 表示を更新
          const sensorType = pureAcc && pureAcc.x !== null ? '純粋な加速度' : '重力込み加速度';
          document.getElementById('output').innerText =
            `${sensorType}センサー値:\nX: ${acc.x?.toFixed(2)} → 赤: ${red}\nY: ${acc.y?.toFixed(2)} → 緑: ${green}\nZ: ${acc.z?.toFixed(2)} → 青: ${blue}`;

          document.getElementById('colorInfo').innerText =
            `現在の背景色: rgb(${red}, ${green}, ${blue})`;

          document.getElementById('sensorInfo').innerText =
            `使用中: ${sensorType}センサー`;
        }

        // 最大値表示を更新
        updateMaxValuesDisplay();
      }
    }

    function handleOrientation(event) {
      orientationData.alpha = event.alpha || 0; // Z軸回転 (0-360度)
      orientationData.beta = event.beta || 0;   // X軸回転 (-180 to 180度)
      orientationData.gamma = event.gamma || 0; // Y軸回転 (-90 to 90度)

      if (currentMode === 'orientation') {
        // 角度を0-255の範囲にマッピング
        const normalizeAlpha = (value) => Math.round((value / 360) * 255);
        const normalizeBeta = (value) => Math.round(((value + 180) / 360) * 255);
        const normalizeGamma = (value) => Math.round(((value + 90) / 180) * 255);

        const red = normalizeAlpha(orientationData.alpha);
        const green = normalizeBeta(orientationData.beta);
        const blue = normalizeGamma(orientationData.gamma);

        // 背景色を更新
        document.body.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;

        // 表示を更新
        document.getElementById('output').innerText =
          `角度センサー値:\nα(Z軸): ${orientationData.alpha.toFixed(1)}° → 赤: ${red}\nβ(X軸): ${orientationData.beta.toFixed(1)}° → 緑: ${green}\nγ(Y軸): ${orientationData.gamma.toFixed(1)}° → 青: ${blue}`;

        document.getElementById('colorInfo').innerText =
          `現在の背景色: rgb(${red}, ${green}, ${blue})`;

        document.getElementById('sensorInfo').innerText =
          `使用中: 角度センサー (DeviceOrientation)`;
      }
    }

    function toggleSensorMode() {
      currentMode = currentMode === 'acceleration' ? 'orientation' : 'acceleration';
      document.getElementById('output').innerText =
        `モード切替: ${currentMode === 'acceleration' ? '加速度センサー' : '角度センサー'}`;
    }
  </script>
</body>
</html>