Spaces:

soiz1
/

about-blank

Running

App Files Files Community

soiz1 commited on 28 days ago

Commit

60a661f

verified ·

1 Parent(s): 95116ef

Update goo

Browse files

Files changed (1) hide show

goo +31 -106

goo CHANGED Viewed

@@ -3,22 +3,19 @@
 <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>
   <h1>HTML Viewer</h1>
   <label for="modeSelect">モードを選択：</label>
   <select id="modeSelect">
     <option value="html">HTML表示モード</option>
     <option value="url">URLのiframe表示モード</option>
-    <option value="pip">PiPウィンドウ表示モード</option>
   </select>
   <br>
   <label for="displayTarget">表示先を選択：</label>
   <select id="displayTarget">
     <option value="blob">blobURL</option>
@@ -27,7 +24,7 @@
   </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">
@@ -54,17 +51,13 @@
     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');
       }
     });
@@ -72,115 +65,47 @@
       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');
-            if (newWindow) {
-              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 = '';

 <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>
   <h1>HTML Viewer</h1>
   <label for="modeSelect">モードを選択：</label>
   <select id="modeSelect">
     <option value="html">HTML表示モード</option>
     <option value="url">URLのiframe表示モード</option>
   </select>
   <br>
   <label for="displayTarget">表示先を選択：</label>
   <select id="displayTarget">
     <option value="blob">blobURL</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">
     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 {
         htmlMode.classList.add('hidden');
         urlMode.classList.remove('hidden');
       }
     });
       errorMessage.textContent = '';
       const target = displayTarget.value;
+      let content = '';
+      if (modeSelect.value === 'html') {
+        content = document.getElementById('htmlInput').value.trim();
+        if (!content) {
           errorMessage.textContent = 'HTMLを入力してください。';
           return;
         }
+      } else {
+        const url = document.getElementById('urlInput').value.trim();
+        if (!url) {
           errorMessage.textContent = 'URLを入力してください。';
           return;
         }
+        content = `<!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([content], { type: 'text/html' });
+          const url = URL.createObjectURL(blob);
+          const newWindow = window.open(url);
+          if (!newWindow) throw new Error('ポップアップがブロックされています。');
+        } else if (target === 'blank') {
+          const newWindow = window.open('about:blank');
+          if (newWindow) {
+            newWindow.document.write(content);
+            newWindow.document.close();
+          } else throw new Error('ポップアップがブロックされています。');
+        } else if (target === 'pip') {
+          const pipWindow = await documentPictureInPicture.requestWindow();
+          pipWindow.document.body.innerHTML = content;
         }
+      } catch (e) {
+        errorMessage.textContent = 'エラーが発生しました: ' + e.message;
       }
     });
     clearButton.addEventListener('click', () => {
+      if (modeSelect.value === 'html') {
         document.getElementById('htmlInput').value = '';
+      } else {
         document.getElementById('urlInput').value = '';
       }
       errorMessage.textContent = '';