Spaces:

soiz1
/

about-blank

Running

App Files Files Community

soiz1 commited on Jul 14

Commit

95116ef

verified ·

1 Parent(s): e524741

Update goo

Browse files

Files changed (1) hide show

goo +80 -82

goo CHANGED Viewed

@@ -3,11 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>HTML Viewer</title>
   <style>
-    .hidden {
-      display: none;
-    }
   </style>
 </head>
 <body>
@@ -17,7 +15,7 @@
   <select id="modeSelect">
     <option value="html">HTML表示モード</option>
     <option value="url">URLのiframe表示モード</option>
-    <option value="pip">PiP動画表示モード</option>
   </select>
   <br>
@@ -25,12 +23,11 @@
   <select id="displayTarget">
     <option value="blob">blobURL</option>
     <option value="blank">about:blank</option>
   </select>
   <div id="htmlMode">
-    <textarea id="htmlInput" placeholder="ここにHTMLを入力してください" rows="10" cols="50">
-<!DOCTYPE html><html lang="ja"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> </title><style>html,body{margin:0;padding:0;overflow:hidden;width:100vw;height:100vh}</style><iframe src="https://gooberdash.winterpixel.io/" style="width:100vw;height:100vh;border:none;display:block;margin:0;padding:0"></iframe>
-    </textarea><br>
   </div>
   <div id="urlMode" class="hidden">
@@ -43,10 +40,6 @@
     </datalist>
   </div>
-  <div id="pipMode" class="hidden">
-    <input id="videoUrlInput" type="text" placeholder="動画URL（MP4など）を入力してください" size="50">
-  </div>
   <button id="displayButton">表示</button>
   <button onclick="location.replace('index.html');">close</button>
   <button id="clearButton">クリア</button>
@@ -57,22 +50,21 @@
     const displayTarget = document.getElementById('displayTarget');
     const htmlMode = document.getElementById('htmlMode');
     const urlMode = document.getElementById('urlMode');
-    const pipMode = document.getElementById('pipMode');
     const displayButton = document.getElementById('displayButton');
     const clearButton = document.getElementById('clearButton');
     const errorMessage = document.getElementById('errorMessage');
     modeSelect.addEventListener('change', () => {
-      htmlMode.classList.add('hidden');
-      urlMode.classList.add('hidden');
-      pipMode.classList.add('hidden');
       if (modeSelect.value === 'html') {
         htmlMode.classList.remove('hidden');
       } else if (modeSelect.value === 'url') {
         urlMode.classList.remove('hidden');
-      } else if (modeSelect.value === 'pip') {
-        pipMode.classList.remove('hidden');
       }
     });
@@ -80,55 +72,93 @@
       errorMessage.textContent = '';
       const target = displayTarget.value;
-      if (modeSelect.value === 'html') {
         const htmlContent = document.getElementById('htmlInput').value;
         if (!htmlContent.trim()) {
           errorMessage.textContent = 'HTMLを入力してください。';
           return;
         }
-        try {
-          if (target === 'blob') {
-            const blob = new Blob([htmlContent], { type: 'text/html' });
-            const url = URL.createObjectURL(blob);
-            const newWindow = window.open(url);
-            if (!newWindow) {
-              errorMessage.textContent = '新しいタブを開けませんでした。';
-            }
-          } else if (target === 'blank') {
-            const newWindow = window.open('about:blank');
-            if (newWindow) {
-              newWindow.document.write(htmlContent);
-              newWindow.document.close();
-            } else {
-              errorMessage.textContent = '新しいタブを開けませんでした。';
             }
           }
-        } catch (e) {
-          errorMessage.textContent = 'エラーが発生しました: ' + e.message;
         }
       } else if (modeSelect.value === 'url') {
         const url = document.getElementById('urlInput').value;
         if (!url.trim()) {
           errorMessage.textContent = 'URLを入力してください。';
           return;
         }
-        const iframeHtml = `
-          <!DOCTYPE html><html lang="ja"><meta charset="UTF-8">
-          <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <title></title>
-          <style>html,body{margin:0;padding:0;overflow:hidden;width:100vw;height:100vh}</style>
-          <iframe src="${url}" style="width:100vw;height:100vh;border:none;"></iframe>
-          </html>`;
         try {
           if (target === 'blob') {
             const blob = new Blob([iframeHtml], { type: 'text/html' });
             const blobUrl = URL.createObjectURL(blob);
             const newWindow = window.open(blobUrl);
             if (!newWindow) {
-              errorMessage.textContent = '新しいタブを開けませんでした。';
             }
           } else if (target === 'blank') {
             const newWindow = window.open('about:blank');
@@ -136,54 +166,22 @@
               newWindow.document.write(iframeHtml);
               newWindow.document.close();
             } else {
-              errorMessage.textContent = '新しいタブを開けませんでした。';
             }
           }
         } catch (e) {
           errorMessage.textContent = 'エラーが発生しました: ' + e.message;
         }
-      } else if (modeSelect.value === 'pip') {
-        const videoUrl = document.getElementById('videoUrlInput').value;
-        if (!videoUrl.trim()) {
-          errorMessage.textContent = '動画URLを入力してください。';
-          return;
-        }
-        try {
-          const pipHtml = `
-            <!DOCTYPE html><html lang="ja"><meta charset="UTF-8">
-            <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <title>PiP</title>
-            <body>
-              <video id="video" src="${videoUrl}" autoplay controls style="max-width: 100%; height: auto;"></video>
-              <script>
-                const video = document.getElementById('video');
-                video.addEventListener('loadedmetadata', () => {
-                  video.requestPictureInPicture().catch(err => alert("PiPエラー: " + err.message));
-                });
-              <\/script>
-            </body>
-            </html>`;
-          const blob = new Blob([pipHtml], { type: 'text/html' });
-          const blobUrl = URL.createObjectURL(blob);
-          const newWindow = window.open(blobUrl);
-          if (!newWindow) {
-            errorMessage.textContent = 'PiPウィンドウを開けませんでした。';
-          }
-        } catch (e) {
-          errorMessage.textContent = 'PiPエラー: ' + e.message;
-        }
       }
     });
     clearButton.addEventListener('click', () => {
-      if (modeSelect.value === 'html') {
         document.getElementById('htmlInput').value = '';
       } else if (modeSelect.value === 'url') {
         document.getElementById('urlInput').value = '';
-      } else if (modeSelect.value === 'pip') {
-        document.getElementById('videoUrlInput').value = '';
       }
       errorMessage.textContent = '';
     });

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HTML Viewer with PiP</title>
   <style>
+    .hidden { display: none; }
   </style>
 </head>
 <body>
   <select id="modeSelect">
     <option value="html">HTML表示モード</option>
     <option value="url">URLのiframe表示モード</option>
+    <option value="pip">PiPウィンドウ表示モード</option>
   </select>
   <br>
   <select id="displayTarget">
     <option value="blob">blobURL</option>
     <option value="blank">about:blank</option>
+    <option value="pip">PiPウィンドウ</option>
   </select>
   <div id="htmlMode">
+    <textarea id="htmlInput" placeholder="ここにHTMLを入力してください" rows="10" cols="50"><div style='font-size: 2rem; background: yellow; height: 100%; display: flex; align-items: center; justify-content: center;'>これはPiPウィンドウ表示用のHTMLです</div></textarea><br>
   </div>
   <div id="urlMode" class="hidden">
     </datalist>
   </div>
   <button id="displayButton">表示</button>
   <button onclick="location.replace('index.html');">close</button>
   <button id="clearButton">クリア</button>
     const displayTarget = document.getElementById('displayTarget');
     const htmlMode = document.getElementById('htmlMode');
     const urlMode = document.getElementById('urlMode');
     const displayButton = document.getElementById('displayButton');
     const clearButton = document.getElementById('clearButton');
     const errorMessage = document.getElementById('errorMessage');
+    // モード切り替え
     modeSelect.addEventListener('change', () => {
       if (modeSelect.value === 'html') {
         htmlMode.classList.remove('hidden');
+        urlMode.classList.add('hidden');
       } else if (modeSelect.value === 'url') {
+        htmlMode.classList.add('hidden');
         urlMode.classList.remove('hidden');
+      } else {
+        htmlMode.classList.remove('hidden');
+        urlMode.classList.add('hidden');
       }
     });
       errorMessage.textContent = '';
       const target = displayTarget.value;
+      if (modeSelect.value === 'html' || modeSelect.value === 'pip') {
         const htmlContent = document.getElementById('htmlInput').value;
         if (!htmlContent.trim()) {
           errorMessage.textContent = 'HTMLを入力してください。';
           return;
         }
+        if (target === 'pip') {
+          try {
+            const video = document.createElement('video');
+            video.setAttribute('autoplay', '');
+            video.setAttribute('muted', '');
+            video.setAttribute('playsinline', '');
+            video.style.display = 'none';
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            canvas.width = 640;
+            canvas.height = 360;
+            const htmlContainer = document.createElement('div');
+            htmlContainer.style.width = '640px';
+            htmlContainer.style.height = '360px';
+            htmlContainer.innerHTML = htmlContent;
+            document.body.appendChild(video); // 必須: 動画がDOMにないとPiPは許可されない
+            document.body.appendChild(htmlContainer);
+            htmlContainer.style.position = 'absolute';
+            htmlContainer.style.left = '-9999px'; // 画面に表示させない
+            const stream = canvas.captureStream();
+            video.srcObject = stream;
+            video.play();
+            // 描画ループ
+            const draw = () => {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              ctx.drawImage(htmlContainer, 0, 0, canvas.width, canvas.height);
+              requestAnimationFrame(draw);
+            };
+            draw();
+            await video.requestPictureInPicture();
+          } catch (e) {
+            errorMessage.textContent = 'PiP表示に失敗しました: ' + e.message;
+          }
+        } else {
+          try {
+            if (target === 'blob') {
+              const blob = new Blob([htmlContent], { type: 'text/html' });
+              const url = URL.createObjectURL(blob);
+              const newWindow = window.open(url);
+              if (!newWindow) {
+                errorMessage.textContent = '新しいタブを開けませんでした。ポップアップがブロックされている可能性があります。';
+              }
+            } else if (target === 'blank') {
+              const newWindow = window.open('about:blank');
+              if (newWindow) {
+                newWindow.document.write(htmlContent);
+                newWindow.document.close();
+              } else {
+                errorMessage.textContent = '新しいタブを開けませんでした。ポップアップがブロックされている可能性があります。';
+              }
             }
+          } catch (e) {
+            errorMessage.textContent = 'エラーが発生しました: ' + e.message;
           }
         }
       } else if (modeSelect.value === 'url') {
         const url = document.getElementById('urlInput').value;
         if (!url.trim()) {
           errorMessage.textContent = 'URLを入力してください。';
           return;
         }
+        const iframeHtml = `<!DOCTYPE html><html lang="ja"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> </title><style>html,body{margin:0;padding:0;overflow:hidden;width:100vw;height:100vh}</style><iframe src="${url}" style="width:100vw;height:100vh;border:none;display:block;margin:0;padding:0"></iframe></html>`;
         try {
           if (target === 'blob') {
             const blob = new Blob([iframeHtml], { type: 'text/html' });
             const blobUrl = URL.createObjectURL(blob);
             const newWindow = window.open(blobUrl);
             if (!newWindow) {
+              errorMessage.textContent = '新しいタブを開けませんでした。ポップアップがブロックされている可能性があります。';
             }
           } else if (target === 'blank') {
             const newWindow = window.open('about:blank');
               newWindow.document.write(iframeHtml);
               newWindow.document.close();
             } else {
+              errorMessage.textContent = '新しいタブを開けませんでした。ポップアップがブロックされている可能性があります。';
             }
+          } else if (target === 'pip') {
+            errorMessage.textContent = 'URLモードではPiP表示はサポートされていません。';
           }
         } catch (e) {
           errorMessage.textContent = 'エラーが発生しました: ' + e.message;
         }
       }
     });
     clearButton.addEventListener('click', () => {
+      if (modeSelect.value === 'html' || modeSelect.value === 'pip') {
         document.getElementById('htmlInput').value = '';
       } else if (modeSelect.value === 'url') {
         document.getElementById('urlInput').value = '';
       }
       errorMessage.textContent = '';
     });