# [メタ情報]
# 識別子: vimeo埋め込みコード及びphp_シーク付き字幕使用可能_exe
# システム名: vimeo埋め込みコード及びphp_シーク付き字幕使用可能
# 技術種別: Misc
# 機能名: Misc
# 使用言語: カスタムhtml php
# 状態: 実行用
# [/メタ情報]
要約：
このテキストは、Vimeo動画の埋め込み、インタラクティブな再生制御、字幕連携、および多言語翻訳機能を提供するWordPressカスタムテンプレート（PHP）とそのフロントエンド（HTML/JavaScript/CSS）の実装を示しています。
HTMLとJavaScriptは、Vimeo動画を埋め込み、APIを介して再生を制御します。「動画を別ページで表示」リンクをクリックすると、動画を一時停止してから新しいタブで開きます。字幕のタイムスタンプなどを示すリンク（`a.imk-cue`）をクリックすると、動画が該当する時間にシークして再生を開始。動画の再生中は、現在の時刻に連動して字幕リストの該当部分がハイライトされ、自動的にスクロールされます。Vimeoプレーヤー、字幕リストのサイズ、ハイライトスタイルはCSSで調整されています。
PHPテンプレートは、URLの`movid`パラメータから動画IDを取得し、JSONファイルから対応する埋め込みコードを検索して出力します。このPHPは、埋め込みコードから特定の不要リンクを削除し、Google翻訳機能を統合します。さらに、字幕リストの高さやハイライトのスタイルを調整するCSSを動的に出力し、動画コンテンツのラッパーに適用することで、シームレスな視聴体験と学習体験を提供します。


マイライブラリ→基礎情報→vimeo→埋め込みコード

```
<div class="sc-vimeo-embed">
  <p style="font-size: 14px;" class="sc-link">
    <a href="@@gggg@@" target="_blank" rel="noopener" onclick="stopVimeoBeforeNavigate(event, this)">
      動画を別ページで表示(ここをクリック)
    </a>
  </p>

  <div class="iframe-wrapper">
    <iframe
      src="https://player.vimeo.com/video/@@eee@@?title=0&byline=0&portrait=0&controls=1&speed=1&texttrack=ja&dnt=1&loop=0"
      frameborder="0"
      allow="autoplay; fullscreen; picture-in-picture"
      allowfullscreen></iframe>
  </div>

  <div class="dr-vimeo-sublist">
    [dynamic_external_html url="@@ddd@@"]
  </div>

  <script src="https://player.vimeo.com/api/player.js"></script>

  <script>
  (function(){
    var me = document.currentScript;
    var wrapper = me ? me.closest('.sc-vimeo-embed') : null;

    var target = wrapper ? wrapper : document;
    var iframe = target.querySelector('iframe');
    if (!iframe || !window.Vimeo || !Vimeo.Player) return;

    var player = new Vimeo.Player(iframe);

    /* --- 1. 確実に一時停止してから別ページを開く処理 --- */
    window.stopVimeoBeforeNavigate = function(event, link) {
      event.preventDefault(); 
      player.pause().then(function() {
        setTimeout(function() {
           window.open(link.href, link.target);
        }, 50);
      }).catch(function() {
        window.open(link.href, link.target);
      });
    };

    /* --- 2. 字幕のON/OFF制御（Vimeo API仕様） --- */
    var currentMode = "hidden";
    
    function useNormalMode() {
        currentMode = "hidden";
        player.disableTextTrack().catch(function(e){});
    }
    
    function useSpecialMode() {
        currentMode = "showing";
        // 日本語の subtitles が無ければ captions を探す安全設計
        player.enableTextTrack('ja', 'subtitles').catch(function() {
            player.enableTextTrack('ja', 'captions').catch(function() {});
        });
    }

    // ロード直後は枠内字幕を非表示にする
    player.ready().then(function() {
        useNormalMode();
    });

    // Vimeoプレーヤーの全画面・PiPイベントを監視して字幕を切り替え
    player.on('fullscreenchange', function(data) {
        if (data.fullscreen) useSpecialMode();
        else useNormalMode();
    });
    player.on('enterpictureinpicture', function() {
        useSpecialMode();
    });
    player.on('leavepictureinpicture', function() {
        useNormalMode();
    });

    /* --- 3. 字幕リストの初期化（自動梱包とデフォルト展開） --- */
    var checks = 0;
    var initTimer = setInterval(function(){
        var listContainer = target.querySelector('details > p');
        if (listContainer) {
            initSubtitles(listContainer);
            clearInterval(initTimer);
        }
        checks++;
        if (checks > 20) clearInterval(initTimer); // 10秒経ったら監視終了
    }, 500);

    function initSubtitles(listContainer) {
        // デフォルトで開く
        var detailsEl = target.querySelector("details");
        if (detailsEl) {
            detailsEl.open = true; 
            var summaryEl = detailsEl.querySelector("summary");
            if (summaryEl) summaryEl.textContent = "字幕はここをクリックしてご覧ください。";
        }

        // 行ごとに見えない箱(span)で梱包
        if (!listContainer.dataset.formatted) {
            var html = listContainer.innerHTML;
            var lines = html.split(/<br\s*\/?>/i);
            var newHtml = "";
            for(var j=0; j<lines.length; j++) {
                if(lines[j].trim() === "") continue;
                newHtml += "<span class='imk-line'>" + lines[j] + "</span><br>";
            }
            listContainer.innerHTML = newHtml;
            listContainer.dataset.formatted = "true";
        }
    }

    /* --- 4. クリックシーク機能 --- */
    function parseTs(ts) {
      if (!ts) return null;
      var t = ts.trim();
      var parts = t.split(':').map(function(v){ return parseInt(v, 10); });
      if (parts.length === 2 && parts.every(Number.isFinite)) {
        return parts[0] * 60 + parts[1];
      } else if (parts.length === 3 && parts.every(Number.isFinite)) {
        return parts[0] * 3600 + parts[1] * 60 + parts[2];
      }
      return null;
    }

    target.addEventListener('click', function(e) {
      var a = e.target.closest('a.imk-cue');
      if (!a) return;
      e.preventDefault();
      var sec = null;
      if (a.dataset.seconds) {
        sec = Number(a.dataset.seconds);
      } else if (a.dataset.seek) {
        sec = parseTs(a.dataset.seek);
      }
      if (sec !== null && Number.isFinite(sec)) {
        player.setCurrentTime(sec).then(function(){ player.play(); }).catch(function(){});
      }
    });

    /* --- 5. 同期ハイライトと自動スクロール --- */
    player.on('timeupdate', function(data) {
      // Vimeoプレーヤーが勝手に字幕を出していたら隠す（最強ガード）
      player.getTextTracks().then(function(tracks) {
          var activeTrack = tracks.find(function(t){ return t.mode === 'showing'; });
          if (currentMode === "hidden" && activeTrack) {
              useNormalMode();
          }
      }).catch(function(){});

      var currentTime = data.seconds;
      var listContainer = target.querySelector('details > p');
      if (!listContainer) return;

      var cues = listContainer.querySelectorAll('a.imk-cue');
      if (cues.length === 0) return;

      var activeA = null;
      for (var i = 0; i < cues.length; i++) {
        var sec = null;
        if (cues[i].dataset.seconds) {
            sec = Number(cues[i].dataset.seconds);
        } else if (cues[i].dataset.seek) {
            sec = parseTs(cues[i].getAttribute('data-seek'));
        }
        if (sec !== null && currentTime >= sec - 0.5) {
          activeA = cues[i];
        } else if (sec > currentTime) {
          break;
        }
      }

      if (activeA) {
          var activeLine = activeA.closest(".imk-line");
          if (!activeLine) activeLine = activeA;

          if (activeLine.classList.contains("active-hl")) return;

          // 全行の色を徹底的にリセット
          var allLines = listContainer.querySelectorAll(".imk-line");
          for(var k=0; k<allLines.length; k++) {
              allLines[k].classList.remove("active-hl");
              allLines[k].removeAttribute("style");
          }
          var allLinks = listContainer.querySelectorAll("a");
          for(var m=0; m<allLinks.length; m++) {
              allLinks[m].classList.remove("active-hl");
              allLinks[m].removeAttribute("style");
          }

          // 新しい行に赤文字・黄色背景を直接塗る
          activeLine.classList.add("active-hl");
          activeLine.style.setProperty("background-color", "#ffff00", "important");
          activeLine.style.setProperty("color", "red", "important");
          activeLine.style.setProperty("font-weight", "normal", "important");
          
          var newLinks = activeLine.querySelectorAll("a");
          for(var n=0; n<newLinks.length; n++) {
              newLinks[n].style.setProperty("color", "red", "important");
              newLinks[n].style.setProperty("text-decoration", "none", "important");
          }

          // スクロール処理
          if (listContainer.offsetParent !== null) {
              var containerRect = listContainer.getBoundingClientRect();
              var activeRect = activeLine.getBoundingClientRect();
              var targetScroll = listContainer.scrollTop + (activeRect.top - containerRect.top) - (listContainer.clientHeight / 2) + (activeLine.clientHeight / 2);
              listContainer.scrollTo({
                  top: targetScroll,
                  behavior: "smooth"
              });
          }
      }
    });
  })();
  </script>

  <style>
  .sc-vimeo-embed .iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: visible;
  }
  .sc-vimeo-embed .iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* 行梱包時の基本スタイル（干渉防止のためクラス内で指定） */
  .sc-vimeo-embed .imk-line {
      display: inline-block;
      width: 100%;
      border-radius: 2px;
      transition: background-color 0.1s;
  }

  /* ▼ 字幕一覧（details）の見た目調整 */
  .sc-vimeo-embed details > p {
    font-size: 14px !important;
    line-height: 1.6;
    height: 200px !important; 
    overflow: auto;
    background-color: #EDF7FF;
    padding: 2px 6px;
    margin: 0;
    box-shadow: 3px 3px 4px black;
    position: relative; 
  }
  .sc-vimeo-embed details > summary {
    font-size: 14px !important;
    padding: 2px 6px;
    width: 100%;
    background-color: #ddd;
    border: none;
    box-shadow: 3px 3px 4px black;
    cursor: pointer;
    list-style: none;
  }
  </style>
</div>
```


対応条件：

{"gggg":"18","eee":"3","ddd":"12"}


vm5用php
vimeo-custom-template3.php

```
<?php
/*
Template Name: Vimeo Custom Template3
*/

// ★ 1. 鉄壁のスタッフルームから共通設定（司令塔）を読み込む
require_once('/home/XXXXXX/XXXXXX.com/_secure_settings/global_settings.php');

// ========== ユーティリティ ==========
function get_vimeo_video_id() {
    $movid = isset($_GET['movid']) ? sanitize_text_field($_GET['movid']) : '';
    return trim((string)$movid);
}

// JSONロード（/_secure/wp_json を最優先、なければ旧パスを順に試す）
function vm5_load_embed_json_array(&$debug_info = null) {
    $path_candidates = [
        $_SERVER['DOCUMENT_ROOT'] . '/_secure/wp_json/videoembed.json',                         // ★今回の実体
        $_SERVER['DOCUMENT_ROOT'] . '/wp-content/uploads/_secure/wp_json/videoembed.json',     // 以前の想定
        $_SERVER['DOCUMENT_ROOT'] . '/wp-content/uploads/gd_wp_data/videoembed.json',          // 旧構成
    ];

    $debug_info = ['path' => 'n/a', 'mtime' => 'n/a', 'entries' => 0, 'json_ok' => false];

    $raw = false;
    foreach ($path_candidates as $p) {
        if (is_readable($p)) {
            $raw = @file_get_contents($p);
            $debug_info['path'] = $p;
            break;
        }
    }
    if ($raw === false) {
        error_log('vm5: failed to read any json path');
        return false;
    }

    $mtime = @filemtime($debug_info['path']);
    if ($mtime) $debug_info['mtime'] = date('Y-m-d H:i:s', $mtime);

    $data = json_decode($raw, true);
    if ($data === null && json_last_error() !== JSON_ERROR_NONE) {
        error_log('vm5: json decode error - ' . json_last_error_msg());
        return false;
    }
    $debug_info['json_ok'] = true;
    $debug_info['entries'] = is_array($data) ? count($data) : 0;
    return is_array($data) ? $data : [];
}

// 厳密一致検索
function vm5_find_by_movid($data, $movid) {
    if (!is_array($data)) return null;
    $movid = trim((string)$movid);
    foreach ($data as $row) {
        $vid = isset($row['videoid']) ? trim((string)$row['videoid']) : '';
        if ($vid === $movid) return $row;
    }
    return null;
}

// 不要リンク削除（「動画を別ページで表示(ここをクリック)」）
function vm5_strip_unwanted_link($html) {
    $pattern = '/<a[^>]*>\s*動画を別ページで表示\(ここをクリック\)\s*<\/a>/u';
    return preg_replace($pattern, '', (string)$html);
}

// the_content 用フィルタ（※ remove_filter できるように “名前付き” で用意）
function vm5_filter_the_content($content) {
    return vm5_strip_unwanted_link($content);
}

// ========== 表示開始 ==========
get_header();

?>
<style>
/* Google翻訳のポップアップ（原文吹き出し）を隠す */
.goog-te-balloon-frame, 
.goog-tooltip, 
#goog-gt-tt {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* 翻訳箇所のハイライト（背景色・影）を消す */
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}
/* 翻訳ツールバー（上部の帯）を消す */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}
body {
    top: 0px !important;
}
</style>

<div id="gk-topbar-video" style="display:flex; gap:8px; align-items:center; justify-content:flex-start; width:100%; padding:6px 10px; background:#f9f9f9; border-bottom:1px solid #e5e5e5; box-sizing:border-box; font-family:sans-serif; position:relative; z-index:100;">
    <div id="google_translate_element_video"></div>
    <a href="<?php echo htmlspecialchars($global_gemini_url); ?>" target="_blank" rel="noopener noreferrer" style="margin-left:auto; text-decoration:none; line-height:0;">
        <img src="<?php echo htmlspecialchars($gemini_img_url); ?>" alt="Gemini Q&A" style="height:30px; width:auto; border-radius:4px;">
    </a>
</div>

<script>
function initVideoTranslate() {
    if (window.google && google.translate && google.translate.TranslateElement) {
        new google.translate.TranslateElement({
            pageLanguage: 'ja',
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
            autoDisplay: false,
            includedLanguages: 'ja,en,zh-CN,id,ko,hi,pt,es,de,fr,it,ru'
        }, 'google_translate_element_video');
    }
}
if (!window.google || !google.translate) {
    var gtScript = document.createElement('script');
    gtScript.src = 'https://translate.google.com/translate_a/element.js?cb=initVideoTranslate';
    gtScript.async = true;
    document.head.appendChild(gtScript);
} else { setTimeout(initVideoTranslate, 500); }
</script>
<?php

// ★vm5 側で「字幕一覧(details)の枠高さ」が効くように、ここでCSSを確実に出す
?>
<style>
/* vm5：字幕一覧(details)の本文ブロック(p)を「スクロール枠」として確定させる */
.vm5-wrapper details > p{
  display: block;
  min-height: 180px;
  max-height: 240px;      
  overflow-y: auto;

  /* 箱の見た目も p 側に寄せる（“枠が変わった”と体感しやすい） */
  background-color: #EDF7FF;
  padding: 6px 8px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
  border-radius: 0 0 5px 5px;
}

/* summary（見出し）はそのまま */
.vm5-wrapper details > summary{
  padding: 2px 6px;
  width: 100%;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
  list-style: none;
}

/* ★修正: 最新のハイライト仕様（赤文字・黄背景・下線なし）に強制上書き */
.vm5-wrapper .active-scroll-hl,
.vm5-wrapper .active-hl {
    background-color: #ffff00 !important; /* 黄色背景 */
    color: #ff0000 !important;            /* 赤文字 */
    border-bottom: none !important;       /* 下線を消す */
    text-decoration: none !important;     /* リンクの下線も消す */
    font-weight: normal !important;       /* 太字解除 */
    display: inline-block;
    border-radius: 2px;
}
</style>
<?php

$movid = get_vimeo_video_id();

// ★ 3. ここで魔法のIDすり替えを実行！（AppSheet用の &raw=1 もここで処理されます）
if ($movid !== '' && function_exists('get_alt_video_id')) {
    $movid = get_alt_video_id($movid);
}

if ($movid) {
    $dbg = [];
    $arr = vm5_load_embed_json_array($dbg);
    $video_info = vm5_find_by_movid($arr, $movid);

    // ?debug=1 で内部情報表示
    $debug = isset($_GET['debug']) && $_GET['debug'] == '1';
    if ($debug) {
        echo '<div style="font:12px/1.6 monospace; background:#f6f6f6; padding:8px; margin:10px 0;">';
        echo 'path=' . esc_html($dbg['path']) . '<br>';
        echo 'mtime=' . esc_html($dbg['mtime']) . '<br>';
        echo 'entries=' . esc_html($dbg['entries']) . '<br>';
        echo 'movid=' . esc_html($movid) . '<br>';
        echo 'hit=' . ($video_info ? ('videoid=' . esc_html($video_info['videoid'])) : 'none');
        echo '</div>';
    }

    if ($video_info && !empty($video_info['embedCode'])) {
        // embedCode をショートコード展開 → 不要リンク除去
        $embed = do_shortcode($video_info['embedCode']);
        $embed = vm5_strip_unwanted_link($embed);

        // ★CSS の適用範囲を限定するため、必ずラッパーで囲む
        echo '<div class="vm5-wrapper">';
        echo $embed;
        echo '</div>';

    } else {
        echo '<p>No data found for movid: ' . esc_html($movid) . '</p>';
    }
} else {
    echo '<p>No movid provided.</p>';
}

// the_content にも同様の除去をかけたい場合（※ remove_filter が確実に効く）
add_filter('the_content', 'vm5_filter_the_content', 9);

if (have_posts()) :
    while (have_posts()) : the_post();
        the_content();
    endwhile;
endif;

remove_filter('the_content', 'vm5_filter_the_content', 9);

get_footer();
?>
```