# [メタ情報]
# 識別子: vimeo埋め込みコード及びphp_シーク付き字幕使用可能_exe
# システム名: vimeo埋め込みコード及びphp_シーク付き字幕使用可能
# 技術種別: Misc
# 機能名: Misc
# 使用言語: カスタムhtml php
# 状態: 実行用 env終了
# [/メタ情報]
要約：
このテキストは、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 lines = [];
var detailsEl = target.querySelector(".dr-vimeo-sublist details");
var listContainer = target.querySelector(".dr-vimeo-sublist details > p");

function parseTs(ts){
  if(!ts) return null;
  ts = ts.trim();
  var m = ts.match(/^(\d{1,2}):([0-5]?\d)(?::([0-5]?\d))?$/);
  if(!m) {
    // mm:ss.ms などの別形式に対応
    var p = ts.split(":");
    if(p.length === 2) return parseInt(p[0],10)*60 + parseFloat(p[1]);
    if(p.length === 3) return parseInt(p[0],10)*3600 + parseInt(p[1],10)*60 + parseFloat(p[2]);
    return null;
  }
  var h = m[3] ? parseInt(m[1],10) : 0,
      mm = parseInt(m[3]?m[2]:m[1],10),
      ss = parseInt(m[3]?m[3]:m[2],10);
  return h * 3600 + mm * 60 + ss;
}

function formatLines() {
  if (!listContainer || listContainer.dataset.formatted === 'true') return;
  listContainer.dataset.formatted = 'true';
  var html = listContainer.innerHTML;
  
  // (00:00:00) などの時間タグを含んだテキスト行を1行ずつ span で梱包してインデックス化
  var re = /\((<a[^>]*data-seek="([^"]+)"[^>]*>[^<]+<\/a>)\)\s*([^<]+)<br>/gi;
  var formattedHtml = html.replace(re, function(match, aTag, ts, text){
    var sec = parseTs(ts);
    return '<span class="imk-line" data-sec="' + sec + '">' + match + '</span>';
  });
  listContainer.innerHTML = formattedHtml;
  lines = Array.prototype.slice.call(listContainer.querySelectorAll('.imk-line'));
}

// 読み込み時に details を強制展開し summary を補正
if (detailsEl) {
  detailsEl.open = true;
  var summaryEl = detailsEl.querySelector("summary");
  if (summaryEl) summaryEl.textContent = "字幕(シーン)はここをクリック";
}

// details内のAクリックでシーク
if (listContainer) {
  listContainer.addEventListener('click', function(e){
    var a = e.target.closest('a.imk-cue');
    if (!a) return;
    e.preventDefault();
    var sec = parseTs(a.getAttribute('data-seek'));
    if (sec !== null) {
      player.setCurrentTime(sec).then(function() {
        player.play().catch(function(){});
      });
    }
  });
}

// タイムアップデートで同期ハイライトスクロール
player.on('timeupdate', function(data) {
  var time = data.seconds;
  formatLines();
  if (!lines.length) return;
  
  var activeLine = null;
  for (var i = 0; i < lines.length; i++) {
    var currentSec = parseFloat(lines[i].getAttribute('data-sec'));
    var nextSec = (i < lines.length - 1) ? parseFloat(lines[i+1].getAttribute('data-sec')) : 999999;
    if (time >= currentSec && time < nextSec) {
      activeLine = lines[i];
      break;
    }
  }
  
  lines.forEach(function(l) {
    l.style.backgroundColor = '';
    l.style.fontWeight = 'normal';
  });
  
  if (activeLine) {
    activeLine.style.backgroundColor = '#FFF1A8';
    activeLine.style.fontWeight = 'bold';
    
    // スクリューボックスの自動スクロール
    var rect = activeLine.getBoundingClientRect();
    var contRect = listContainer.getBoundingClientRect();
    if (rect.top < contRect.top || rect.bottom > contRect.bottom) {
      var targetScroll = activeLine.offsetTop - listContainer.offsetTop - (contRect.height / 2) + (rect.height / 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;
}
/* 古い枠内字幕ボックスを強制消去 */
.sc-vimeo-embed #subtitleOverlay,
.sc-vimeo-embed #scSubtitleOverlay,
.sc-vimeo-embed .overlay-cue,
.sc-vimeo-embed .band {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.dr-vimeo-sublist details > summary {
  padding: 4px 8px;
  width: 100%;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
  list-style: none;
  font-weight: bold;
}
</style>

</div>
```


対応条件：

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


vm5用php
vimeo-custom-template3.php

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

// ★ 1. 鉄壁のスタッフルームから共通設定（司令塔）を読み込む
// 【環境非依存への修正】ドメインやユーザー固有パス（/home/XXXXXX/）に依存せず、ABSPATHベースで自動的に金庫を読み込みます
if (defined('ABSPATH')) {
    $global_settings_path = dirname(ABSPATH) . '/_secure_settings/global_settings.php';
    if (file_exists($global_settings_path)) {
        require_once($global_settings_path);
    }
}

// ========== ユーティリティ ==========
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];
    foreach ($path_candidates as $p) {
        if (file_exists($p)) {
            $raw = file_get_contents($p);
            if ($raw !== false) {
                $arr = json_decode($raw, true);
                if (is_array($arr)) {
                    $debug_info = [
                        'path' => str_replace($_SERVER['DOCUMENT_ROOT'], '', $p),
                        'mtime' => date('Y-m-d H:i:s', filemtime($p)),
                        'entries' => count($arr),
                        'json_ok' => true
                    ];
                    return $arr;
                }
            }
        }
    }
    return [];
}

function vm5_find_by_movid(array $rows, string $movid): ?array {
    foreach ($rows as $r) {
        if (is_array($r) && (string)($r['videoid'] ?? '') === $movid) return $r;
    }
    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;
}
/* トップバーレイアウト調整 */
#google_translate_element_video {
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
}
#google_translate_element_video .goog-te-gadget {
    height: 28px !important;
    line-height: 28px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}
#google_translate_element_video .goog-te-combo {
    margin: 0 !important;
    height: 22px !important;
    font-size: 11px !important;
    padding: 0 !important;
}
.goog-te-banner-frame {
    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',
            includedLanguages: 'ja,en,zh-CN,id,ko,hi,pt,es,de,fr,it,ru',
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
            autoDisplay: false
        }, '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;
}
/* 青背景の details-summary */
.vm5-wrapper details > summary {
    padding: 4px 8px;
    width: 100%;
    background-color: #0073aa;
    color: #fff;
    border: none;
    box-shadow: 3px 3px 4px black;
    cursor: pointer;
    list-style: none;
    border-radius: 5px 5px 0 0;
    font-weight: bold;
}
.vm5-wrapper details {
    border: none !important;
    margin-bottom: 20px;
}
/* 言語メニューとロゴの被り干渉を防止 */
.gt_menu, .gt-menu {
    top: 28px !important;
    bottom: auto !important;
    z-index: 999999 !important;
}
.goog-te-menu-value {
    display: none !important;
}
/* 翻訳時に巨大太字になるのを防ぐ */
.vm5-wrapper font {
    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="background:#fff;border:1px solid #ccc;padding:10px;margin:20px 0;font-family:monospace;font-size:12px;">';
        echo '<h3>[VM5 Debug Info]</h3>';
        echo 'Requested movid: ' . esc_html($movid) . '<br>';
        echo 'Loaded file: ' . esc_html($dbg['path']) . '<br>';
        echo 'File mtime: ' . esc_html($dbg['mtime']) . '<br>';
        echo 'JSON parse ok: ' . ($dbg['json_ok'] ? 'YES' : 'NO') . '<br>';
        echo 'Total JSON rows: ' . esc_html($dbg['entries']) . '<br>';
        if ($video_info) {
            echo 'Found in JSON: YES<br>';
            echo 'Title: ' . esc_html($video_info['title'] ?? 'n/a') . '<br>';
            echo 'Play URL: ' . esc_html($video_info['playUrl'] ?? 'n/a') . '<br>';
        } else {
            echo 'Found in JSON: <span style="color:red;font-weight:bold;">NO</span><br>';
        }
        echo '</div>';
    }
    
    if ($video_info) {
        // 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', 11);

if (have_posts()) : while (have_posts()) : the_post();
    echo '<div class="entry-content">';
    the_content();
    echo '</div>';
endwhile; endif;

get_footer();
?>
```