<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>vimeo | imakat.com</title>
	<atom:link href="https://imakat.com/tag/vimeo/feed/" rel="self" type="application/rss+xml" />
	<link>https://imakat.com</link>
	<description>工夫と改善で人生をちょっと豊かに</description>
	<lastBuildDate>Mon, 06 Jul 2026 11:04:38 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.2</generator>

<image>
	<url>https://i0.wp.com/imakat.com/wp-content/uploads/2023/07/cropped-80d64ecd340db4e2ca3224859b04caed.png?fit=32%2C32&#038;ssl=1</url>
	<title>vimeo | imakat.com</title>
	<link>https://imakat.com</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">160909258</site>	<item>
		<title>【脱Vimeo】Bunny CDNへ移行しました 〜ひと所に依存しない究極の自前配信システム〜</title>
		<link>https://imakat.com/2026/06/01/29030/</link>
		
		<dc:creator><![CDATA[imakat]]></dc:creator>
		<pubDate>Sun, 31 May 2026 20:50:48 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[デジタル]]></category>
		<category><![CDATA[ものづくり]]></category>
		<category><![CDATA[vimeo]]></category>
		<category><![CDATA[bunny]]></category>
		<category><![CDATA[cloudflare]]></category>
		<category><![CDATA[自動トランスコード]]></category>
		<guid isPermaLink="false">https://imakat.com/?p=29030</guid>

					<description><![CDATA[上の動画は、Bunny CDNを使っています。プレーヤーはWordPress備え付けをカスタマイズしています。 はじめに 今回は、少しマニアックな動画配信の裏側の話題です。 長年愛用してきたVimeoですが、3月頃に「P [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph"></p>


<div class="sc-dynamic-embed">
  <style>
  /* リンクの見た目を整える */
  .sc-dynamic-embed .sc-link-container { 
      display: flex; 
      margin-bottom: 10px; 
      flex-wrap: wrap; 
      align-items: center; 
  }
  .sc-dynamic-embed .sc-link { margin-bottom: 0; }
  .sc-dynamic-embed .sc-link a {
    font-size: 15px; 
    font-weight: normal;
    text-decoration: underline;
    color: #0073aa;
  }
  .sc-dynamic-embed .sc-link a:hover { text-decoration: none; color: #000; }
  
  @media (max-width: 500px) {
    .sc-dynamic-embed .sc-link a { font-size: 13px; }
  }

  .sc-dynamic-embed .imk-line {
      display: inline-block;
      width: 100%;
      border-radius: 2px;
      transition: background-color 0.1s;
  }

  .sc-dynamic-embed #subtitleOverlay,
  .sc-dynamic-embed #scSubtitleOverlay,
  .sc-dynamic-embed .overlay-cue,
  .sc-dynamic-embed .band {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
  }
  </style>

  <div class="sc-link-container">
    <p class="sc-link">
      <a href="https://imakat.com/ds62/?drid=83" target="_blank"
         onclick="return scStopAndGo(event, this);">
        👉低画質・枠外字幕はこちら
      </a>
    </p>
  </div>

  <style>
            :root{ --dr5emd-max: 1920px; }
            #subtitleOverlay, #scSubtitleOverlay, .overlay-cue, .band { display: none !important; opacity: 0 !important; }
            .imk-line { display: inline-block; width: 100%; border-radius: 2px; transition: background-color 0.1s; }
            .dr5emd-sublist details > p{ height:200px; overflow:auto; background-color:#EDF7FF; padding:2px 6px; margin:0; box-shadow:3px 3px 4px black; position: relative; }
            .dr5emd-sublist details > summary{ padding:2px 6px; width:100%; background-color:#ddd; border:none; box-shadow:3px 3px 4px black; cursor:pointer; list-style:none; }
            
                .video-wrap{position:relative;width:100%;margin:0 auto}
                #myVideo{width:100%;height:auto;min-height:200px;display:block;background:#000;}</style><div class="dr5emd-container"><div class="video-wrap"><video id="myVideo" controls poster="https://imakat.com/rd.php?id=kYlNhSTr.png" playsinline preload="none" style="width:100%;height:auto;">  <source src="https://imakat.com/rd.php?id=ngym69ui.mp4" type="video/mp4">  <track src="https://imakat.com/rd.php?id=jh8hMw5r.vtt" label="日本語" srclang="ja" kind="subtitles"></video></div><div class="dr5emd-sublist"><details translate="yes"><summary translate="yes">字幕一覧(クリック)</summary> <p translate="yes">
(<a href="#" class="imk-cue" data-seek="0:00" translate="no">00:00:00</a>) 〜vimeoからbunnyへの乗り換え〜<br>
(<a href="#" class="imk-cue" data-seek="0:05" translate="no">00:00:05</a>) 皆さんこんにちは。本日は私が長年愛用してきたVimeoから離れ、<br>
(<a href="#" class="imk-cue" data-seek="0:11" translate="no">00:00:11</a>) 特定のサービスに依存しない独自の動画配信システムを構築した理由と、その全貌についてお話しします。<br>
(<a href="#" class="imk-cue" data-seek="0:18" translate="no">00:00:18</a>) キーワードは「プラットフォームからの脱却」と、「完全自動のハンドメイド配信」です。<br>
(<a href="#" class="imk-cue" data-seek="0:25" translate="no">00:00:25</a>) 動画配信において、YouTubeやVimeoといった大手プラットフォームは非常に便利です。<br>
(<a href="#" class="imk-cue" data-seek="0:32" translate="no">00:00:32</a>) しかし、突然の規約変更や料金体系の改定に大きく振り回されるリスクを常に抱えています。<br>
(<a href="#" class="imk-cue" data-seek="0:40" translate="no">00:00:40</a>) また、機能面での限界もありました。例えば、Vimeoの専用プレーヤーでは、<br>
(<a href="#" class="imk-cue" data-seek="0:48" translate="no">00:00:48</a>) 字幕一覧から動画の特定のシーンへ連動してジャンプする、といった<br>
(<a href="#" class="imk-cue" data-seek="0:52" translate="no">00:00:52</a>) 私が理想とする自由な視聴体験を作ることができませんでした。<br>
(<a href="#" class="imk-cue" data-seek="0:55" translate="no">00:00:55</a>) プラットフォームの都合に縛られず、自分自身のメディアライブラリをコントロールしたい。<br>
(<a href="#" class="imk-cue" data-seek="1:00" translate="no">00:01:00</a>) これが自前インフラへの乗り換えを決断した最大の理由です。<br>
(<a href="#" class="imk-cue" data-seek="1:04" translate="no">00:01:04</a>) そこで、私が新しい配信インフラとして選んだのがBunny CDNです。<br>
(<a href="#" class="imk-cue" data-seek="1:10" translate="no">00:01:10</a>) このサービスの最大の魅力は、視聴者の環境に合わせて画質を調整する全自動トランスコード機能を持ちながら、<br>
(<a href="#" class="imk-cue" data-seek="1:18" translate="no">00:01:18</a>) ストリーミング配信用の.m3u8ファイルのダイレクトURL、つまり直リンクを解放してくれる点にあります。<br>
(<a href="#" class="imk-cue" data-seek="1:28" translate="no">00:01:28</a>) これにより、大手の専用プレーヤーを強制されることなく、自作のテンプレート、dr52.phpなどを使って、<br>
(<a href="#" class="imk-cue" data-seek="1:34" translate="no">00:01:34</a>) 動画の再生時間に合わせて字幕がハイライトし、クリックでそのシーンへジャンプできる、<br>
(<a href="#" class="imk-cue" data-seek="1:40" translate="no">00:01:40</a>) 完全に自由でインタラクティブな視聴体験を実現できるようになりました。<br>
(<a href="#" class="imk-cue" data-seek="1:48" translate="no">00:01:48</a>) ではなぜ、同じような機能を持つ強力なライバルであるCloudflare Streamではなく、Bunny CDNを選んだのでしょうか。<br>
(<a href="#" class="imk-cue" data-seek="1:58" translate="no">00:01:58</a>) その理由は、圧倒的なコストパフォーマンスの違いにあります。<br>
(<a href="#" class="imk-cue" data-seek="2:03" translate="no">00:02:03</a>) Cloudflareは動画の再生時間に対して課金されますが、Bunny CDNはデータ転送量に対する課金です。<br>
(<a href="#" class="imk-cue" data-seek="2:11" translate="no">00:02:11</a>) つまり、視聴者が途中で動画を止めたり、スマホなどの小さな画面で低画質モードで再生したりした場合、<br>
(<a href="#" class="imk-cue" data-seek="2:19" translate="no">00:02:19</a>) Bunny CDNなら消費データ量が減るため、インフラ費用を劇的に安く抑えることができます。<br>
(<a href="#" class="imk-cue" data-seek="2:25" translate="no">00:02:25</a>) 個人開発者にとって、このコストの安さは右に出るものがありません。<br>
(<a href="#" class="imk-cue" data-seek="2:30" translate="no">00:02:30</a>) そして最後に、運用を支える裏側のシステムです。複雑な作業は一切必要ありません。<br>
(<a href="#" class="imk-cue" data-seek="2:38" translate="no">00:02:38</a>) ユーザーは手元のスマホやPCからAppSheetを開き、青ボタンを押して、動画のステータスを「処理待ち」に変更するだけです。<br>
(<a href="#" class="imk-cue" data-seek="2:46" translate="no">00:02:46</a>) あとはMacのバックグラウンドで待機しているPythonスクリプト、f1_bunny_factory.pyが1分ごとに自動検知し、<br>
(<a href="#" class="imk-cue" data-seek="2:54" translate="no">00:02:54</a>) Bunny CDNへのアップロードを実行します。<br>
(<a href="#" class="imk-cue" data-seek="2:59" translate="no">00:02:59</a>) 新しいストリーミングURLが生成されると自動的にスプレッドシートが書き換えられ、古いデータは自動で削除されます。<br>
(<a href="#" class="imk-cue" data-seek="3:07" translate="no">00:03:07</a>) 人間の判断と裏側の自動化が完璧に連携した、まさに究極のハンドメイド配信システムの完成です。<br>
(<a href="#" class="imk-cue" data-seek="3:16" translate="no">00:03:16</a>) 特定のプラットフォームへの依存をなくし、視聴者には最高の体験を提供し、なおかつインフラ費用を極限まで安く抑える。<br>
(<a href="#" class="imk-cue" data-seek="3:25" translate="no">00:03:25</a>) Vimeoからの乗り換えは、動画の管理から視聴者の体験まで、すべてを自分自身でデザインできる自由を手に入れるための最高の決断でした。<br>
(<a href="#" class="imk-cue" data-seek="3:34" translate="no">00:03:34</a>) 皆さんもぜひ、ご自身のライブラリ構築に挑戦してみてはいかがでしょうか。ご視聴ありがとうございました。<br>
</p> </details>
<style>
details { font: 16px "Open Sans", Calibri, sans-serif; width: 100%; }
details > summary { padding: 2px 6px; width: 100%; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; }
details > p { font: 14px "Open Sans", Calibri, sans-serif; height:150px; overflow: scroll; background-color: #EDF7FF; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; }
</style>
</div></div>            <script>
            document.addEventListener("DOMContentLoaded", function(){
                var video = document.getElementById("myVideo");
                if(!video) return;

                            });
            </script>
            

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

    function protectVideo() {
      var target = wrapper ? wrapper : document;
      var mediaEls = target.querySelectorAll('video, audio');
      mediaEls.forEach(function(v){
        if(v.dataset.protected === 'true') return;
        v.dataset.protected = 'true';
        v.setAttribute('controlsList', 'nodownload');
        v.oncontextmenu = function() { return false; };
        v.addEventListener('contextmenu', function(e){ e.preventDefault(); return false; }, false);
      });
    }

    function initSubtitles() {
      var target = wrapper ? wrapper : document;
      var video = target.querySelector('video, audio');
      var listContainer = target.querySelector('details > p');
      
      if (!video) return false; 
      
      if (video.dataset.subInit === 'true') return true; 
      video.dataset.subInit = 'true';

      var oldOverlay = target.querySelector('#subtitleOverlay') || target.querySelector('#scSubtitleOverlay');
      if (oldOverlay) {
          oldOverlay.style.setProperty('display', 'none', 'important');
          oldOverlay.innerHTML = ''; 
      }

      function isSpecialMode() {
        var isFs = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
        var isPiP = !!(document.pictureInPictureElement && document.pictureInPictureElement === video) || (video.webkitPresentationMode === "picture-in-picture");
        var isIOSFs = !!video.webkitDisplayingFullscreen; 
        return isFs || isPiP || isIOSFs;
      }

      // 初期状態のセット（リストがなければ最初から showing に）
      try {
        if(video.textTracks && video.textTracks.length > 0){
          for(var i=0; i<video.textTracks.length; i++){
             if(video.textTracks[i].kind === 'subtitles' || video.textTracks[i].kind === 'captions'){
                 video.textTracks[i].mode = (!listContainer) ? "showing" : "hidden";
             }
          }
        }
      } catch(e){}

      // 字幕一覧が存在する場合のみ、リストのフォーマット処理を行う
      if (listContainer) {
          var detailsEl = target.querySelector("details");
          if (detailsEl) {
              detailsEl.open = true; 
              var summaryEl = detailsEl.querySelector("summary");
              if (summaryEl) summaryEl.textContent = "字幕(シーン)はここをクリック";
          }

          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";
          }

          var rootSublist = target.querySelector(".dr5-sublist") || listContainer.parentElement;
          if (rootSublist) {
            rootSublist.addEventListener("click", function(e){
              var a = e.target.closest && e.target.closest("a.imk-cue[data-seek]");
              if(!a) return;
              e.preventDefault();
              var ts = a.getAttribute("data-seek");
              if(!ts) return;
              var p = ts.trim().split(":").map(function(x){return parseInt(x,10)||0;});
              var sec = (p.length===2) ? p[0]*60+p[1] : (p.length===3 ? p[0]*3600+p[1]*60+p[2] : null);
              if(sec==null) return;
              try{ video.currentTime = sec; if(video.paused) video.play(); }catch(_){}
            });
          }
      }

      // ★ dr52.php と全く同じ「常時監視」のロジック
      // これにより、Safariが読み込み遅延を起こしても確実にONになります
      video.addEventListener("timeupdate", function(){
        var hasList = (listContainer !== null);
        var desiredMode = (isSpecialMode() || !hasList) ? "showing" : "hidden";
        
        try {
            if(video.textTracks && video.textTracks.length > 0){
                for(var i=0; i<video.textTracks.length; i++){
                    if((video.textTracks[i].kind === 'subtitles' || video.textTracks[i].kind === 'captions') && video.textTracks[i].mode !== desiredMode) {
                        video.textTracks[i].mode = desiredMode;
                    }
                }
            }
        } catch(e){}

        // リストがない場合はこれ以降のハイライト処理をスキップ
        if (!hasList) return;

        var cues = listContainer.querySelectorAll("a.imk-cue");
        if(cues.length === 0) return;
        var cur = video.currentTime;
        var activeA = null;

        for(var i=0; i<cues.length; i++){
            var ts = cues[i].getAttribute("data-seek");
            if(!ts) continue;
            var p = ts.trim().split(":").map(function(x){return parseInt(x,10)||0;});
            var t = (p.length===2) ? p[0]*60+p[1] : (p.length===3 ? p[0]*3600+p[1]*60+p[2] : null);
            if(t !== null && cur >= t - 0.5){ activeA = cues[i]; } 
            else if(t > cur){ 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" });
            }
        }
      });

      return true;
    }

    var checks = 0;
    var checkTimer = setInterval(function(){
      protectVideo();
      var success = initSubtitles();
      checks++;
      if (success || checks > 20) { 
        clearInterval(checkTimer);
      }
    }, 500); 

    if (!window.scStopAndGo) {
      window.scStopAndGo = function(event, link){
        try{
          var mediaEls = document.querySelectorAll('video, audio');
          mediaEls.forEach(function(m){
            try{
              if (!m.paused) m.pause();
              if (document.pictureInPictureElement === m && document.exitPictureInPicture) {
                document.exitPictureInPicture().catch(function(){});
              }
            }catch(e){}
          });
        }finally{
          event.preventDefault();
          setTimeout(function(){
            if (link.target === '_blank') {
              window.open(link.href, '_blank');
            } else {
              window.location.href = link.href;
            }
          }, 50);
        }
        return false;
      };
    }
  })();
  </script>
</div>



<div class="wp-block-cocoon-blocks-toggle-box-1 toggle-wrap toggle-box block-box not-nested-style cocoon-block-toggle"><input id="toggle-checkbox-202607031350260" class="toggle-checkbox" type="checkbox"/><label class="toggle-button" for="toggle-checkbox-202607031350260"><strong><span class="marker">コードと要約</span><span class="marker">(クリック)</span></strong></label><div class="toggle-content">
<figure class="wp-block-flexible-table-block-table"><table class="has-fixed-layout"><tbody><tr><td>要約：本システムは、AppSheetとPythonスクリプトが連携し、Googleスプレッドシート上のメタデータに基づき動画・音楽ファイルをBunny CDNへ自動アップロード・管理する。 AppSheet側では、動画ファイル（mp4等）で「bn低画質動画単独生成=TRUE」かつ「bnステータス=処理待ち」の条件を満たすと、「Bunnyファイル生成更新」アクションが起動する。 MacのLaunchAgent (`com.XXXXXX.bunny_factory.plist`) により60秒ごとに実行されるPythonスクリプト`f1_bunny_factory.py`は、スプレッドシートを監視。システム設定のマスターSWが「ON」の場合に、「処理待ち」のレコードを検出する。 検出されたファイルは拡張子に応じ処理される。動画ファイルはBunny Streamへアップロードされ、動画IDとストリーミングURL（高画質・低画質）を生成。音楽ファイルはBunny Storageへアップロードされ、エンコードされたファイル名と直接アクセスURLを生成する。 アップロード後、スプレッドシートは新しいURLなどで更新され、「処理待ち」ステータスが「完了」となる。同時に、スプレッドシートに残る古い動画IDやファイル名が存在すれば、Bunny CDNからそれらを削除し、ログに記録する。これにより、Bunny CDN上のコンテンツが自動で最新に保たれる。</td></tr><tr><td><a href="https://imakat.com/script_list/?pubtxt=bunny%E6%9B%B4%E6%96%B0%E3%83%91%E3%82%A4%E3%83%97%E3%83%A9%E3%82%A4%E3%83%B3_pub.txt" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=zrU95MiY.png" alt="" style="width:120px; height:auto;"></a></td></tr><tr><td>公開スクリプトに関するお問い合わせは以下へ↓</td></tr><tr><td><a rel="noopener" target="_blank" href="https://notebooklm.google.com/notebook/aa64cc3d-0160-4433-b934-ecc5ab902287"><img decoding="async" src="https://imakat.com/rd.php?id=NgFHFYXH.png" alt="" style="width:120px; height:auto;"></a></td></tr></tbody></table></figure>
</div></div>



<p class="wp-block-paragraph">上の動画は、<a rel="noopener" target="_blank" href="https://bunny.net">Bunny CDN<span class="fa fa-external-link external-icon anchor-icon"></span></a>を使っています。プレーヤーはWordPress備え付けをカスタマイズしています。</p>



<p class="wp-block-paragraph"></p>



<h3 class="wp-block-heading"><strong>はじめに</strong></h3>



<p class="wp-block-paragraph">今回は、少しマニアックな動画配信の裏側の話題です。 長年愛用してきたVimeoですが、3月頃に「Plusプランが廃止の方向」という記事を目にしました。それに伴い、現在月額750円程度の料金が、1,200円程度に値上がりする方向だそうです。私の動画配信の利用レベルからすると、これは明らかな無駄遣いになってしまいます。 「いよいよVimeoの代替を探す時が来た」と決断し、日頃から頼りにしているGeminiなどのAIと相談しながら、今回の移行作業を進めてきました。</p>



<h3 class="wp-block-heading">１　コスパ最強のCDN選び：Bunny vs Cloudflare</h3>



<p class="wp-block-paragraph">移行先を検討する上で、最終的な候補に残ったのは「Bunny CDN（Bunny Stream）」と「Cloudflare Stream」の2つでした。両者のコストパフォーマンスを比較した結果、私はBunny CDNを選択しました。</p>



<p class="wp-block-paragraph">Bunny CDNの最大の魅力は、月額の最低料金がたったの1ドル（約150円）であることです。 支払いの仕組みは「デポジット制」を採用しており、自動チャージと手動チャージが選べます。感覚としては交通系ICカードのSuicaと同じです。私は手動チャージにしてあります。デポジット残高が少なくなると通知が来るはずです。 これによって、Vimeoをこのまま放置していれば月額1,200円かかるところを、Bunny CDNなら月額150〜300円程度にまで節約できそうです。小規模な個人運営にとって、このコスト差は圧倒的です。</p>



<h3 class="wp-block-heading">２　料金だけじゃない！「自動トランスコード」と「直リンク」の解放</h3>



<p class="wp-block-paragraph">Bunny CDNを選んだ理由は、単に安いからだけではありません。 Vimeoの大きなメリットであった「視聴者の環境に合わせて画質を調整する自動トランスコード機能」を、Bunny CDNもしっかりと備えています。</p>



<p class="wp-block-paragraph">さらに決定的な違いが、ストリーミング配信用（.m3u8）の「直リンクURL（ダイレクトURL）」がそのまま使える点です。 Vimeoのような大手サービスでは、専用のプレーヤーを通すことが強制され、カスタマイズが困難でした（例えば、字幕一覧から特定のシーンへジャンプするなど）。しかし、直リンクが解放されているBunny CDNなら、自作のテンプレート（dr52.phpなど）を使って、オリジナルの自由な配信の仕組みを完全にコントロールすることができます。</p>



<h3 class="wp-block-heading">３　英語の壁は「AIのサポート」で乗り越える</h3>



<p class="wp-block-paragraph">Bunny CDNを導入する上での唯一の難点は、サービス画面やマニュアルがすべて「英語」であることです。 しかし、今の時代、GeminiやChatGPTといった生成AIにサポートしてもらえば、英語はまったくハンデになりません。設定で分からないことがあればAIに聞き、PythonやAppSheetのシステム構築もAIと二人三脚で進めることができます。この強力なサポートがあれば、高齢者であっても最先端のインフラを構築することは十分に可能です。</p>



<h3 class="wp-block-heading">４　複数の配信所を切り替える「マイライブラリ」の完成</h3>



<p class="wp-block-paragraph">今回の移行以前からですが、私が構築した「マイライブラリ」システムは、状況に応じて複数の配信サーバーを即座に切り替えられるようになっています。</p>



<p class="wp-block-paragraph">それぞれのサーバーには特徴的な役割があります。</p>



<ul class="wp-block-list">
<li><strong>Dropbox(1)</strong>：動画の製造工場からの「産直（ダイレクト配信）」。</li>



<li><strong>Bunny(2)</strong>：今回追加、自動トランスコード付きの配信所。</li>



<li><strong>Xserver(3)</strong>：安全で安定したWordPressの「メインのホスティングサーバー」であり、配信を振り分けるルーティングの中枢。</li>



<li><strong>pCloud(4)</strong>：買い切りプランを活かした「保存倉庫」。</li>
</ul>



<p class="wp-block-paragraph">もし配信にトラブルが起きても、Xserver、pCloud、Dropboxへ速やかに切り替えることができます。 ここに、強力なCDN配信所として「Bunny CDN」が加わった形になります。このような柔軟で自立したエコシステムが完成した今、私がVimeoなどの大手プラットフォームに依存し続けるメリットは殆どなくなりました。</p>



<figure class="wp-block-image size-large"><a href="https://imakat.com/rd.php?id=mWKZ7s1W.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=mWKZ7s1W.png" alt=""/></a></figure>



<h3 class="wp-block-heading">５　逆転の発想〜再生数が多過ぎたら、その動画をYouTubeへ隔離する。</h3>



<p class="wp-block-paragraph">そんなことはないとは思いますが、もし動画に過度に人気や関心が集まり再生数が増大してしまい、Bunnyの料金負担が重いと感じるようになってしまったとします。具体的には月2$(300円)を超えるような場合です。その場合は、その動画を特定して（Bunnyのダッシュボードの左サイドバー→Monitoring→Logs→Report→Video Libraryから自分のライブラリを選択→Top10 URLs by Traffic）、その動画をYouTubeへ隔離するようにしたいと思います、残念ながら広告が入るかも知れませんが。その動画とて、公共の道具であるインターネットを通じて公開してきているわけですので、観たい聴きたいというニーズに対しては、応えていく必要はあると思います。</p>



<figure class="wp-block-image size-large is-resized"><a href="https://imakat.com/rd.php?id=3C6jITcb.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=3C6jITcb.png" alt="" style="aspect-ratio:1.6631418895569838;width:345px;height:auto"/></a></figure>



<p class="wp-block-paragraph">また、BunnyのStreamとして保存したGB数の上限を自分で決めて、それを超えた場合は、古いものについては、Bunnyから除去して、ファイル選択もBunnyを外して、標準の拡張子別の再生に切り替えるようにすることも考えています。</p>



<p class="wp-block-paragraph">このようにマイライブラリを使うことにより、出費をコントロールしながら、自由自在に、動画の配信所の選択ができるわけです。</p>



<h3 class="wp-block-heading"><strong>おわりに：世界情勢が物語る「脱・依存」の重要性</strong></h3>



<p class="wp-block-paragraph">特定のプラットフォームにすべてを預けてしまうと、規約変更や大幅な値上げ、あるいはサービス終了の際に、自分のメディアが人質に取られたような状態になってしまいます。最近の世界情勢が物語っているように、何か一つの場所やサービスに過度に依存しないことは、情報発信においても非常に重要です。</p>



<p class="wp-block-paragraph">Vimeoからの卒業は、まさに自分の資産を自分自身でコントロールする自由を手に入れるための、最良の決断でした。これからも色々工夫して、このブログの、無料かつ非営利の配信を堅持していきます。</p>



<figure class="wp-block-image size-large is-resized"><a href="https://imakat.com/rd.php?id=9nVGc96J.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=9nVGc96J.png" alt="" style="aspect-ratio:1.5367977270644304;width:239px;height:auto"/></a></figure>



<p class="wp-block-paragraph"></p>
]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">29030</post-id>	</item>
		<item>
		<title>【Mac】QuickTimePlayerとテキストエディット〜昔からある小道具を忘るべからず</title>
		<link>https://imakat.com/2024/08/08/22970/</link>
		
		<dc:creator><![CDATA[imakat]]></dc:creator>
		<pubDate>Thu, 08 Aug 2024 02:00:00 +0000</pubDate>
				<category><![CDATA[字幕作成]]></category>
		<category><![CDATA[デジタル]]></category>
		<category><![CDATA[ものづくり]]></category>
		<category><![CDATA[vimeo]]></category>
		<category><![CDATA[FinalCutPro]]></category>
		<category><![CDATA[テキストエディット]]></category>
		<category><![CDATA[字幕工房]]></category>
		<category><![CDATA[QuickTimePlayer]]></category>
		<guid isPermaLink="false">https://imakat.com/?p=22970</guid>

					<description><![CDATA[純正のQuickTimePlayerとテキストエディットだけで、かなりのことができる YouTube,SNSといった庶民による動画配信が拡大したことにより、動画作成や字幕作成、翻訳などについてのアプリやサービスは、百花繚 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<h3 class="wp-block-heading">純正のQuickTimePlayerとテキストエディットだけで、かなりのことができる</h3>



<p class="wp-block-paragraph">YouTube,SNSといった庶民による動画配信が拡大したことにより、動画作成や字幕作成、翻訳などについてのアプリやサービスは、百花繚乱といった状況です。</p>



<p class="wp-block-paragraph">アプリやサービスを、取り替えては楽しむ。それは若い人は、それでいいのでしょうが、私なんかは、手作業で地味にコツコツできないものか、とすぐに考えてしまいます。</p>



<p class="wp-block-paragraph"><strong>QuickTimePlayerとテキストエディットは</strong>、Macを買えば、最初から入っています。<strong>いわば大工のノミとカンナのような小道具</strong>です。今回、感じたのは、新しいものの吸収も大事だが、古くからある道具にコツコツ慣れることも大事だろう、と思えることです。</p>



<p class="wp-block-paragraph">下のイメージ図は、動画と字幕作りのワークフローです。結局、作られたものは必ずといっていいほど、作り直しが発生するわけです。その時に、本格的に動画アプリでその修正を行うか、または、ノミ、カンナなどDIYショップで買えるような小道具で行うか。そこの選択ですが、私は、まずはDIYを選ぶ。ダメなら動画アプリなどを選ぶ。そのような順番で考えます。</p>



<a rel="noopener" target="_blank" href="https://docs.google.com/drawings/d/1bR0LVfw4O6ug_sEluP5RW557a-TceQ3OonCKBpbLKzg/edit?usp=sharing">
<img decoding="async" src="https://docs.google.com/drawings/d/e/2PACX-1vSroUBmQKujQ4nJ2AGV8dgEYFgcqllRF4x-lrOPsVPM_xtnvPV9i6WA2MorthHHHQZR366oeW66KWkK/pub?w=960&amp;h=720">
</a>



<p class="wp-block-paragraph"></p>



<div class="wp-block-cocoon-blocks-toggle-box-1 toggle-wrap toggle-box block-box not-nested-style cocoon-block-toggle"><input id="toggle-checkbox-202604150430090" class="toggle-checkbox" type="checkbox"/><label class="toggle-button" for="toggle-checkbox-202604150430090"><span class="fz-18px"> <strong><span class="marker">関係するオリジナルスクリプト一覧表(ここをクリック)</span></strong></span></label><div class="toggle-content">
<figure class="wp-block-flexible-table-block-table is-scroll-on-pc is-scroll-on-mobile"><table class="is-stacked-on-mobile" style="max-width:100%;width:auto;min-width:50%"><tbody><tr><td style="background-color:#fff7cc;width:25%"><strong>スクリプトのリンク</strong></td><td style="background-color:#f3fafe;width:50%"><strong>説明</strong></td></tr><tr><td style="background-color:#fff7cc;width:50%"><a href="https://imakat.com/?pubtxt=srtからvttを生成するworkflow_pub.txt" target="_blank">srtからvttを生成する</a>(AppleScriptクイックアクション)</td><td><a href="https://imakat.com/ds5/?drid=2">動画&#x1f3a5;(無音)</a><br>新たに作ったVTTファイルに対して、 <br> (1) 先頭行に文字列&#8221;WEBVTT&#8221;を含む行を挿入する。 <br>(2) 2行目に空白の行を挿入する。 <br>(3) 3行目以降から、読み込んだデータを書き込む。 <br> (4) &#8220;&#8211;&gt;&#8221; がある行は、行の中の&#8221;,&#8221;を&#8221;.&#8221;に置き換える。<br>※元のファイルを残します。</td></tr><tr><td style="background-color:#fff7cc"><a href="https://imakat.com/?pubtxt=vttからsrtを生成する兼srtの連番を付け直すworkflow_pub.txt" target="_blank">vttからsrtを生成する兼srtの連番を付け直す</a>(renumbered.srt)(AppleScriptクイックアクション)</td><td><a href="https://imakat.com/ds5/?drid=24" target="_blank">動画&#x1f3a5;(無音)</a><br>vttからsrtを生成します。また、新たに作ったSRTファイルに対して、<br>(1) 文字列”WEBVTT”のある行は削除する。<br>(2) &#8220;&#8211;&gt;&#8221; がある行は、行の中の&#8221;.&#8221;を&#8221;,&#8221;に置き換える。<br>(3)連番を1から振り直す。<br>※元のファイルを残します。新しいファイル名は、&#8221;元のファイル名_renumbered.srt&#8221;となります。</td></tr><tr><td style="background-color:#fff7cc"><a href="https://imakat.com/?pubtxt=字幕文章に時刻を挿入するworkflow_pub.txt" target="_blank">字幕文章に時刻を挿入するvtt</a>(timeadded.vtt)(AppleScriptクイックアクション)</td><td><a href="https://imakat.com/ds5?drid=4">動画&#x1f3a5;(無音</a><a href="https://imakat.com/ds?drid=4">)</a><br>文字列の先頭に、開始時刻(00:01:23)を追記する。私はカモメ→(00:01:23)私はカモメ※元のファイルを残します。_timeadded.vttが新しく作られます。この字幕文章の先頭に時刻情報を入れる目的は、翻訳された外国語の示す動画の位置を分かりやすくするためです。</td></tr><tr><td style="background-color:#fff7cc"><a href="https://imakat.com/?pubtxt=字幕文章の時刻を削除するworkflow_pub.txt" target="_blank">字幕文章の時刻を削除する</a>(timeremoved.vtt)(AppleScriptクイックアクション)</td><td><a href="https://imakat.com/ds5/?drid=23" target="_blank">動画(&#x1f3a5;無音)</a><br>上の「字幕文章に時刻を挿入する」を取り消しにします。※元のファイル_timeadded.vttは残します。新しいファイルは、_timeadded_timeremoved .vttになります。</td></tr><tr><td style="background-color:#fff7cc"><a href="https://imakat.com/?pubtxt=字幕文章に番号を挿入するworkflow_pub.txt" target="_blank">字幕文章に番号を挿入する</a>(numadded.vtt)(AppleScriptクイックアクション)</td><td>文字列の先頭に、番号1)を追記する。私はカモメ→1)私はカモメ※元のファイルを残します。_numadded.vttが新しく作られます。この字幕文章の先頭に番号を入れる目的は、翻訳された外国語の示す動画の位置を分かりやすくするためです。</td></tr><tr><td style="background-color:#fff7cc"><a href="https://imakat.com/?pubtxt=字幕文章の番号を削除するworkflow_pub.txt" target="_blank">字幕文章の番号を削除する</a>(numremoved.vtt)(AppleScriptクイックアクション)</td><td>上の「字幕文章に番号を挿入する」を取り消しにします。※元のファイル_numadded.vttは残します。新しいファイルは、_numadded_numremoved .vttになります。</td></tr><tr><td style="background-color:#fff7cc"><a href="https://imakat.com/?pubtxt=字幕空白詰め_vimeo_auto_generated_captions_vttの修正_pub.txt" target="_blank">vimeo_auto_generated_captions.vttの修正をする</a>(AppleScriptクイックアクション)</td><td><a href="https://imakat.com/ds5/?drid=22" target="_blank">動画&#x1f3a5;(無音)</a><br>Vimeoの字幕自動生成からダウンロードしたファイルの、文字列の空白を削除する。vttのまま。※直接上書き更新します。何度でもダウンロードできるため。</td></tr><tr><td style="background-color:#fff7cc"><a href="https://imakat.com/?pubtxt=字幕時刻の秒ずらしを行うworkflow_pub.txt" target="_blank">vttの字幕時刻の秒ずらしを行う。</a>(timeshifted.vtt)(AppleScriptクイックアクション)</td><td><a href="https://imakat.com/ds5/?drid=25" target="_blank">動画&#x1f3a5;(無音)</a><br>動画の途中で、挿入や削除を行うと、字幕ファイルの時刻にズレが生じます。挿入や削除を行った以降の動画をコピーして、その分の秒ずらしを行うことができます。<span class="bold-red">但し、文章の頭に時刻情報を入れてある(_timeadded.vtt)については、エラーになります。一度、上の「字幕文章の時刻を削除する」を実行した後で、ここを実行してください</span>。<br>※元のファイルを残します。新しいファイル名は&#8221;元のファイル名_timeshited.vtt&#8221;となります。</td></tr></tbody></table></figure>
</div></div>



<p class="wp-block-paragraph"><strong>＜クイックアクション＞</strong></p>



<figure class="wp-block-image size-large"><a href="https://imakat.com/rd.php?id=jUjjxyz1.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=jUjjxyz1.png" alt=""/></a></figure>



<h3 class="wp-block-heading">ポイント解説</h3>



<h4 class="wp-block-heading">１　「字幕工房」の利用</h4>



<a rel="noopener" target="_blank" href="https://www.tranquillitybase.jp/SubtitleFactory/SubtitleFactory.html">
<img decoding="async" src="https://imakat.com/rd.php?id=zZhRueuH.png
"
></a>



<p class="wp-block-paragraph">動画や字幕を修正する小道具は、ノミやカンナのようなものと言いましたが、小道具側に入れるが、ちょっと高級なもの、電動ノコギリのようなものが「字幕工房」です。<br>ナレーションを文字起こしするような場合は、Vimeo、Vrew、Filmoraなどの機能を使って字幕ファイルが自動生成されますが、内容を文字で説明する場合は、説明文を自分で打ち込むことになります。そのような場合に、「字幕工房」は向いています。</p>



<p class="wp-block-paragraph">「字幕工房」は、動画(mp4 mov)の上で、右クリック-&gt;このアプリケーションで開く-&gt;「字幕工房.app」で開けるのが非常に便利です。</p>



<figure class="wp-block-image size-large"><a href="https://imakat.com/rd.php?id=FjQdEj2y.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=FjQdEj2y.png" alt=""/></a></figure>



<p class="wp-block-paragraph">この「字幕工房」は字幕をQuickTimeプレーヤーおよびSafariと紐付けするようになっています。その紐付け状態でWordPressプレーヤーで再生させると字幕が二重になったり扱いが面倒になります。従って、私としては、動画は動画として独立、字幕は字幕として独立して作成して、配信するときに、紐付けて動作させるやり方にします。</p>



<p class="wp-block-paragraph"><br>その方法ですが、2つ注意点があります。<span class="bold">1つ目は、作成した字幕を忘れずに書き出すこと</span>。ファイル-&gt;SRT-&gt;書き出す-&gt;日本語、とすると同じフォルダにSRTが書き出されます。これを忘れると、終了の時、字幕が何も残らない結果（何も修正されない結果)になってしまいます。<strong>SRTで書き出すことが字幕の保存という意味です</strong>。<strong>作業を後日続けたい時は、「読み込む&#8230;」で行います</strong>。その上にある保存、別名で保存は、mp4.mov動画の保存であり、私の場合は使いません。</p>



<figure class="wp-block-image size-large"><a href="https://imakat.com/rd.php?id=6FIiyDGV.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=6FIiyDGV.png" alt=""/></a></figure>



<p class="wp-block-paragraph"><span class="bold">2つ目は、終了する時</span>、「動画に加えた変更を保存しますか？」と聞かれますが、動画のイメージ自体には何も変更はありませんが動画と字幕を紐付けすることは、動画にとっての変更となるでしょう。動画には何の変更もされたくありませんので<span class="bold">「保存しない」を選びます。</span></p>



<figure class="wp-block-image size-large"><a href="https://imakat.com/rd.php?id=chte8F3G.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=chte8F3G.png" alt=""/></a></figure>



<p class="wp-block-paragraph">上のスクリプトの説明表の中の動画は、「字幕工房」QuickTimePlayerで作成しています。</p>



<p class="wp-block-paragraph">※「字幕工房」：Mac App Storeで購入できます。買い切りで約1000円。</p>



<figure class="wp-block-image size-large is-resized"><a href="https://imakat.com/rd.php?id=3B1f4XtZ.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=3B1f4XtZ.png" alt="" style="width:167px;height:auto"/></a></figure>



<h4 class="wp-block-heading">２　Appleスクリプトによる字幕ファイルのかんたん作成</h4>



<p class="wp-block-paragraph">「字幕工房」よりもっと、かんたんな作成方法です。QuickTimePlayerで動画を表示しながら、止めた位置に、字幕テキストを書き込んでいく簡単なアプリを作成しました。そこそこ実用になります。→<a href="https://imakat.com/2025/08/28/27063/" target="_blank">「字幕かんたん作成」</a></p>



<h4 class="wp-block-heading">３　字幕文章の時刻情報(00:00:00)の挿入と削除について</h4>



<p class="wp-block-paragraph">上の表にあるように、字幕文章の先頭に秒未満をカットした時刻情報(00:00:00)を、挿入したり削除したりできます。一応、その都度、ファイル名に、timeadded、timeremovedが追記されます。なぜ、このようなものを用意しているかですが、<strong>動画内の字幕が翻訳できない場合の補助として、その字幕の位置を示すため</strong>です。例えば、Vimeoなど動画内に表示される字幕を翻訳できる場合と、WordPressのように動画内では翻訳できない場合があります。字幕一覧は翻訳されます。<br>時刻情報が文章に入っている例：<br>下は、Dropboxの動画をWordPressプレーヤーで配信している例です。ページ左上の「言語を選択」から適当な言語を選んで表示してみてください。(1)はリアルタイムで翻訳されますが、動画の外枠へ表示します。(2)は動画内の字幕は日本語ですが、字幕一覧は翻訳されます(長い動画の時は翻訳の改行が不安定になりますが)ので、時刻情報をキーとして内容を把握できます。<br><a href="https://imakat.com/ds5/?drid=10" target="_blank">(1)メールを全受信に表示しない方法＜字幕一覧なし＞ 33秒(動画&#x1f3a5;Dropbox)</a><br><a href="https://imakat.com/dr5/?drid=10" target="_blank">(2)メールを全受信に表示しない方法＜字幕一覧あり＞ 33秒(動画&#x1f3a5;Dropbox)</a></p>



<p class="wp-block-paragraph">必要に応じて、文章頭に時刻情報を入れることが可能、と捉えてください。<br></p>



<h4 class="wp-block-heading">４　その他</h4>



<p class="wp-block-paragraph">動画作成の作業を便利にするものとして、今回は、QuickTimePlayer、テキストエディット、字幕工房を具体的に取り上げましたが、網羅するならば、上に掲載したクイックアクション、それから、下にあるStream Deckの各設定が、全体像になります。</p>



<figure class="wp-block-image size-large"><a href="https://imakat.com/rd.php?id=mnpp7LoX.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=mnpp7LoX.png" alt=""/></a></figure>



<p class="wp-block-paragraph">Stream Deckに関しては、また別に取り上げます。</p>



<p class="wp-block-paragraph">以上。</p>



<figure class="wp-block-image size-large is-resized"><a href="https://imakat.com/rd.php?id=s0omPPEw.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=s0omPPEw.png" alt="" style="width:110px;height:auto"/></a></figure>



<p class="wp-block-paragraph"></p>
]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">22970</post-id>	</item>
		<item>
		<title>字幕一覧(字幕リスト)は、古いようで一番先進の動画構成方法！</title>
		<link>https://imakat.com/2024/02/11/20002/</link>
		
		<dc:creator><![CDATA[imakat]]></dc:creator>
		<pubDate>Sat, 10 Feb 2024 19:42:46 +0000</pubDate>
				<category><![CDATA[字幕作成]]></category>
		<category><![CDATA[デジタル]]></category>
		<category><![CDATA[ものづくり]]></category>
		<category><![CDATA[Dropbox]]></category>
		<category><![CDATA[vimeo]]></category>
		<category><![CDATA[Appleスクリプト]]></category>
		<category><![CDATA[srt]]></category>
		<category><![CDATA[vtt]]></category>
		<category><![CDATA[タイムコード]]></category>
		<category><![CDATA[Apple翻訳]]></category>
		<category><![CDATA[Windows翻訳]]></category>
		<category><![CDATA[Google翻訳]]></category>
		<guid isPermaLink="false">https://imakat.com/?p=20002</guid>

					<description><![CDATA[現状では、世界のどこかの人が何かのデバイスで、このブログを見て、その中の動画を視聴した時に、言葉がわからないという問題にぶつかります。ですから、そのブログの中に、言葉をわかるようにする「手掛かり」を配置しておきたいと思い [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image size-large is-resized"><a href="https://imakat.com/rd.php?id=GjFF2Rw0.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=GjFF2Rw0.png" alt="" style="width:222px;height:auto"/></a><figcaption class="wp-element-caption">「字幕一覧」は本屋の立ち読み</figcaption></figure>



<p class="wp-block-paragraph">現状では、世界のどこかの人が何かのデバイスで、このブログを見て、その中の動画を視聴した時に、言葉がわからないという問題にぶつかります。ですから、そのブログの中に、<strong>言葉をわかるようにする「手掛かり」を配置</strong>しておきたいと思います。</p>



<p class="wp-block-paragraph">ただその「手掛かり」と言っても、なかなか簡単ではありません。<br>条件が複雑過ぎるからです。</p>



<p class="wp-block-paragraph">現在、条件がどうマチマチであるか眺めてみます。まず、デバイスとしてポピュラーなものをピックアップすると、WindowsPC,Mac,iPhone,iPad,Android携帯、Androidタブレット、以上になるでしょうし、OSでポピュラーなものは、Windows,Mac,iPad/iPhone,Androidになるでしょうし、ブラウザでポピュラーなものは、Chrome,Edge,Safariになるでしょうし、さらに動画の配信側は、YouTube,Vimeo,WordPress,Dropboxなどクラウドサービス、自宅サーバーなど。。<br>こんな複雑な条件の中で、今、こうしたブログさらにその中の動画などが配信されているわけですね。ですから、全てのユーザーに、「言葉がわかるようにする」のは無理と言っていいでしょう。</p>



<p class="wp-block-paragraph">結論が遅れました。</p>



<p class="wp-block-paragraph">それほど、手の込んだ工夫ではありません。</p>



<p class="wp-block-paragraph"><strong><span class="fz-18px"><span class="marker">動画の下に、タイムコードあるいは番号が付いた「字幕一覧」を配置すべし。<br>具体的には以下です。</span></span></strong><br></p>



<details>
  <summary>字幕情報を表示します。</summary>
  <p>
<!-- 以下から書き出し -->
〜「Final Cut Proの起動時のGPU確認入力を省略する方法」〜<br>
1. Final Cut Proを起動した時、毎回、警告が出るようになりました。<br>
2. 「新しいGPUに切り替わりますが、いいですか？」と毎回聞かれるようになりました。<br>
3. これを自動的にOKになるようにしたいと思います。<br>
4. 症状を再現します。Final Cut Proを起動します。<br>
5. 選択したGPUは使用できません。選択したGPUは電源が入っていないか、使用できなくなりました。デフォルトのGPUが使用されます。<br>
6. 私としては、その通りOKで何ら問題ありません。<br>
7. Final Cut Proを起動する時、毎回、OKを押さなければなりません。<br>
8. 以前私は、Intel Mac miniを使っていました。その時、動画編集のために、外付けのeGPUを使っていました。最近、新たに、M2 Mac miniへ移行しました。<br>
9. その時に、Time Machineを使って、そのまま移行しました。<br>
10. eGPUがあるものとして引き継がれました。そのためこの現象が生じています。これをリセットする方法がなかなか見当たらず、仕方なく。。。<br>
11. それでは、対処をしていきます。<br>
12. STREAM DECKを使ってみます。<br>
13. 「マルチアクション」を使います。<br>
14. 「開く」を挿入します。<br>
15. 開くアプリケーションにFinal Cut Proを選択します。<br>
16. Final Cut Proが起動したあと、OKにするのは、Enterキーを入力します。<br>
17. 「ホットキー」を挿入します。<br>
18. ホットキーの項目をクリックすると、キーストロークを監視中になります。→enterを押します。<br>
19. 実行してみます。<br>
20. 反応が早すぎるので、OKの手前で止まってしまいます。<br>
21. ゆっくり動作するように遅延させるようにします。<br>
22. 「遅延」を、「開く」と「ホットキー」の間に挟み込みます。<br>
23. 再度、実行を試してみます。<br>
24. 正常に動作しました。<br>
25. 一応、完成しましたが、アイコンを作っておきます。<br>
26. Final Cut Proのアイコンを挿入します。<br>
27. タイトルを、Final Cutとして上段に表示するようにします。<br>
28. こんな感じに出来上がりました。<br>
29E. 「STREAM DECKを利用して、Final Cut Proをスムーズに起動させよう！」でした。<br>
<!-- 以上まで書き出し -->
</p>
</details>

<style>
details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 100%;
}

details > summary {
  padding: 2px 6px;
 width: 100%; 
 border-radius: 5px 5px 5px 5px;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
  list-style: none;
}

details > p {
  font: 14px "Open Sans", Calibri, sans-serif;
  height:200px;
  overflow: scroll;
 border-radius: 5px 5px 5px 5px;
  background-color: #EDF7FF;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}
</style>


Error 404: Target ID not found in JSON. requested_id=1Wz9dr2F.txt
(Checked: /home/imakat/imakat.com/public_html/_secure/wp_json/dropbox_wp_library.json)



<p class="wp-block-paragraph">このような折りたたみの字幕一覧を用意しておくと、ブログの翻訳をすれば、この部分も翻訳されます。(1)(2)などの番号でもいいですが、動画の中の位置が分かりません。タイムコードなら動画のバーを近くに持っていけます。YouTubeなどで字幕の自動翻訳もありますが、<strong>速く進み過ぎて目が追いつけません</strong>。だから、自分のペースで追いたいです。逆に、<strong>急いでいるので動画の要点をサラッと知りたい</strong>ということもあります。<strong>いわば「本屋の立ち読み」です。音声の早送りより、はるかに生産性は高いです。10分の動画でも字幕一覧をみれば30秒で概略がわかります</strong>。</p>



<p class="wp-block-paragraph">AIの解読力ですが、動画を理解することもできるようになってきてはいます。しかし多大なリソース消費の問題もあり正確性も今一歩のところがあります。Geminiに質問してみましたが、動画に字幕ファイルが別添されている形が、AIとすると一番ありがたい形式、と言う返答でした。</p>



<p class="wp-block-paragraph">いずれにせよ字幕一覧形式は非常に優れています。翻訳した字幕一覧を自分のメモに貼り付けることも出来ます。字幕が邪魔なら、動画の字幕を非表示にして、この字幕一覧を折り畳めばいいです。</p>



<p class="wp-block-paragraph"><br>ちなみに、<strong>上の折りたたみ字幕一覧を、左上のGoogle翻訳で試してみてください。翻訳の途中から改行がされない現象が生ずる場合があります。これはChromeからChromeの翻訳機能を使っても同じ現象になるでしょう。<br>次に、AppleやWindowsの翻訳を試してみてください。ブラウザから利用できると思います。それを使うと、正しく改行されるはずです</strong>。</p>



<p class="wp-block-paragraph">Macで使う場合、Vimeoの動画に表示される字幕の翻訳は、Google翻訳では翻訳不可ですが、Apple翻訳ではVimeoの動画に表示される字幕を翻訳してくれます(<a href="https://imakat.com/vm/?movid=913935684">動画無音</a>)。iPad,iPhoneではそれが難しいのでWordPress固定ページに字幕一覧を読み込んで工夫することにします(<a href="https://imakat.com/vm/?movid=914144217">動画有音</a>)。</p>



<p class="wp-block-paragraph">Apple翻訳で気づいた欠点の一つは、WordPress動画プレーヤーで表示される字幕について翻訳しようとする時パカパカと点滅状態になるため(<a href="https://imakat.com/ds5/?drid=1">動画無音</a>)字幕は非表示にせざるを得ない点があります（2024.2月現在)。</p>



<p class="wp-block-paragraph">なお、WindowsのEdgeにより、vimeoのプレーヤーを直接に呼び出す場合ですが、AppleのSafariと同じく、字幕は直接に翻訳されます(<a href="https://imakat.com/vm?movid=914067338">動画無音</a>)。</p>



<p class="wp-block-paragraph">総じて、各社の字幕や翻訳の対応は、まだまだバラバラな状況と言っていいです。そこへ群がるように、各社がAI生成画像、音楽などのサービスをくっつけてきているというのが現状です。</p>



<p class="wp-block-paragraph">そこで、<strong><span class="marker">振り回されないように、字幕一覧を配置して、Apple/Windows翻訳とGoogle翻訳の両方を使い分けるようにしよう</span></strong>。というのが、この投稿の主張です。</p>



<figure class="wp-block-image size-large is-resized"><a href="https://imakat.com/rd.php?id=bKOzGEon.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=bKOzGEon.png" alt="" style="aspect-ratio:0.5021524788223858;width:130px;height:auto"/></a></figure>



<hr class="wp-block-separator has-text-color has-key-color-color has-alpha-channel-opacity has-key-color-background-color has-background is-style-wide"/>



<p class="wp-block-paragraph"></p>



<p class="wp-block-paragraph"><strong><span class="fz-16px"><span class="fz-18px"><span class="marker">＜字幕作成に関するオリジナルスクリプト一覧表＞</span></span></span></strong></p>



<figure class="wp-block-flexible-table-block-table is-scroll-on-pc is-scroll-on-mobile"><table class="" style="width:740px;max-width:740px"><tbody><tr><td style="background-color:#f3fafe"><strong>スクリプト名</strong></td><td style="background-color:#f3fafe"><strong>説明</strong></td><td style="background-color:#f3fafe"><strong>補足</strong></td></tr><tr><td><a href="https://imakat.com/wp-content/pmedia/scripts_pub/srtからvttを生成するworkflow_pub.txt" target="_blank">srtからvttを生成する</a></td><td><a href="https://imakat.com/ds5/?drid=2">動画(無音)</a><br>新たに作ったVTTファイルに対して、 <br> (1) 先頭行に文字列&#8221;WEBVTT&#8221;を含む行を挿入する。 <br>(2) 2行目に空白の行を挿入する。 <br>(3) 3行目以降から、読み込んだデータを書き込む。 <br> (4) &#8220;&#8211;&gt;&#8221; がある行は、行の中の&#8221;,&#8221;を&#8221;.&#8221;に置き換える。<br>※元のファイルを残します。</td><td>AppleScriptクイックアクション</td></tr><tr><td><a href="https://imakat.com/wp-content/pmedia/scripts_pub/vttからsrtを生成する兼srtの連番を付け直すworkflow_pub.txt" target="_blank">vttからsrtを生成する兼srtの連番を付け直す</a>(renumbered.srt)</td><td><a href="https://imakat.com/ds5?drid=3">動画(無音</a>)<br>新たに作ったSRTファイルに対して、<br>(1) 文字列”WEBVTT”のある行は削除する。<br>(2) &#8220;&#8211;&gt;&#8221; がある行は、行の中の&#8221;.&#8221;を&#8221;,&#8221;に置き換える。<br>(3)連番を1から振り直す。<br>※元のファイルを残します。新しいファイル名は、&#8221;元のファイル名_renumbered.srt&#8221;となります。</td><td>AppleScriptクイックアクション</td></tr><tr><td><a href="https://imakat.com/wp-content/pmedia/scripts_pub/字幕文章に時刻を挿入するworkflow_pub.txt" target="_blank">字幕文章に時刻を挿入する</a>(timeadded.vtt)</td><td><a href="https://imakat.com/ds5?drid=4">動画(無音</a><a href="https://imakat.com/ds?drid=4">)</a><br>文字列の先頭に、開始時刻(00:01:23)を追記する。私はカモメ→(00:01:23)私はカモメ※元のファイルを残します。_timeadded.vttが新しく作られます。この字幕文章の先頭に時刻情報を入れる目的は、翻訳された外国語の示す動画の位置を分かりやすくするためです。</td><td>AppleScriptクイックアクション</td></tr><tr><td><a href="https://imakat.com/wp-content/pmedia/scripts_pub/字幕文章の時刻を削除するworkflow_pub.txt" target="_blank">字幕文章の時刻を削除する</a>(timeremoved.vtt)</td><td>上の「vttからタイムありvttを生成する」を取り消しにします。※元のファイル_timeadded.vttは残します。新しいファイルは、_timeadded_timeremoved .vttになります。</td><td>AppleScriptクイックアクション</td></tr><tr><td><a href="https://imakat.com/wp-content/pmedia/scripts_pub/vttから字幕一覧用txtを生成workflow_pub.txt" target="_blank">字幕vttから字幕一覧txtを生成する</a></td><td>動画内の字幕は、多くの場合、翻訳されないか動作不安定になるが、字幕一覧txtが動画の下にあれば、翻訳が可能になります。タイムコードの位置にジャンプする_listJ.txtおよびジャンプしない_list.txtを生成します。※元のファイルは残します。新しいファイルは、_list.txtになります。なお既存の場合は上書きします。</td><td>AppleScriptクイックアクション</td></tr><tr><td><a href="#link2"><s>vttから字幕一覧用txtを生成する</s></a></td><td><a href="https://imakat.com/ds5?drid=5">動画(無音)</a><br>字幕一覧用txtは、動画の外側に配置するので、Google翻訳される。<strong>→「字幕vttから字幕一覧txtを生成する」へ集約</strong>。</td><td>AppleScriptクイックアクション</td></tr><tr><td><a href="https://imakat.com/2024/01/22/18942#link1"><s>DropboxリンクをWordPress用に変換する(クリップボード保存)</s></a></td><td><a href="https://imakat.com/ds5?drid=6">動画(無音)</a><br>Dropboxのメディアを外部リンクするために、URLに指定された変更を加える。URLの記述の中の &#8220;www.dropbox.com&#8221;は、そのまま使うようにとりあえず判断した。</td><td>AppleScriptクイックアクション</td></tr><tr><td><a href="https://imakat.com/2024/01/22/18942/#link2"><s>★WordPress動画貼り付けコード生成(クリップボード保存)</s></a></td><td><a href="https://imakat.com/ds5?drid=7">動画(無音)</a><br>WordPressのカスタムhtmlへ貼り付ける。初期画面用画像、動画本体、字幕のファイルを予め用意。→マイライブラリの運用に切り替え。</td><td><span class="red">AppleScriptアプリケーション</span></td></tr><tr><td><a href="#link1">★<s>字幕一覧用txtからカスタムhtmlを生成(クリップボード保存)</s></a></td><td><a href="https://imakat.com/ds5?drid=8">動画(無音</a><a href="https://imakat.com/ds?drid=8">)</a> <a href="https://imakat.com/ds5/?drid=9">動画(無音</a><a href="https://imakat.com/ds/?drid=9">)</a><br>字幕一覧用txtを表示するボックスレイアウトを作る。Google翻訳の表示にて改行がうまくいかない状態がある<strong>。→「字幕vttから字幕一覧txtを生成する」へ集約</strong>。</td><td>AppleScriptクイックアクション</td></tr><tr><td><a href="https://imakat.com/wp-content/pmedia/scripts_pub/字幕空白詰め_vimeo_auto_generated_captions_vttの修正_pub.txt" target="_blank">vimeo_auto_generated_captions.vttの修正をする</a></td><td>Vimeoの字幕自動生成からダウンロードしたファイルの、文字列の空白を削除する。vttのまま。※直接上書きします。何度でもダウンロードできるため。</td><td>AppleScriptクイックアクション</td></tr><tr><td><a href="https://imakat.com/2019/12/14/8731/"><s>★Vimeo登録用htmlコード生成</s></a></td><td>方法１：WordPressで、カスタムhtmlブロックへ登録して、パターンを作成しておく。<br>方法２：Stream deckなどで文字列として登録しておく。<br>方法３：Appleクイックアクションで登録しておく。など。→マイライブラリの運用に切り替え。</td><td>字幕作成とは直接に関係ありませんが、迷子にならないように。</td></tr><tr><td><a href="https://imakat.com/wp-content/pmedia/scripts_pub/字幕時刻の秒ずらしを行うworkflow_pub.txt" target="_blank">vttの字幕時刻の秒ずらしを行う。</a>(timeshifted.vtt)</td><td><a href="https://imakat.com/ds5?drid=25" target="_blank">動画(無音)</a><br>動画の途中で、挿入や削除を行うと、字幕ファイルの時刻にズレが生じます。挿入や削除を行った以降の動画をコピーして、その分の秒ずらしを行うことができます。<span class="bold-red">但し、文章の頭に時刻情報を入れてある(_timeadded.vtt)については、エラーになります。一度、上の「字幕文章の時刻を削除する」を実行した後で、ここを実行してください</span>。<br>※元のファイルを残します。新しいファイル名は&#8221;元のファイル名_timeshited.vtt&#8221;となります。</td><td>AppleScriptクイックアクション</td></tr></tbody></table></figure>



<h3 class="wp-block-heading">ポイント解説</h3>



<h4 class="wp-block-heading">１　その他</h4>



<p class="wp-block-paragraph">WindowsPCでのこのブログにリンクした動画の再生についてです。Dropboxの動画についてですが、Dropboxの動画は、ブログに貼り付けた場合は、そのまま素直にストリーミング再生されます。しかし、URLをリンクで再生しようとした場合、ダウンロードしてからの再生を求められます。それはとても面倒なこと。その点も勘案して、Google翻訳アイコン、動画、字幕一覧の各場所をテンプレートにして、動画については、Vimeo、Dropbox、WordPressサーバー、YouTubeなどを貼り付けられるようにして、WordPressの固定ページで動画ライブラリーとしてひとまとめにするように改善中です。</p>



<p class="wp-block-paragraph">以上</p>



<figure class="wp-block-image size-large is-resized"><a href="https://imakat.com/rd.php?id=ZrH7yK6Q.jpeg" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=ZrH7yK6Q.jpeg" alt="" style="width:146px;height:auto"/></a></figure>



<p class="wp-block-paragraph"></p>
]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">20002</post-id>	</item>
		<item>
		<title>Dropboxの動画をWordPressへ貼り付ける方法</title>
		<link>https://imakat.com/2024/01/22/18942/</link>
		
		<dc:creator><![CDATA[imakat]]></dc:creator>
		<pubDate>Mon, 22 Jan 2024 01:19:00 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[デジタル]]></category>
		<category><![CDATA[ものづくり]]></category>
		<category><![CDATA[Mac]]></category>
		<category><![CDATA[Dropbox]]></category>
		<category><![CDATA[vimeo]]></category>
		<category><![CDATA[自宅サーバー]]></category>
		<category><![CDATA[AppleScript]]></category>
		<category><![CDATA[ChatGPT]]></category>
		<guid isPermaLink="false">https://imakat.com/?p=18942</guid>

					<description><![CDATA[2024.5.20変更：www.dropbox.comはそのままで、dl=0→raw=1へ変更しました。2024.5.5変更：Dropboxリンクの書き換え方法を、www.dropbox.com→dl.dropbox.c [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">2024.5.20変更：www.dropbox.comはそのままで、dl=0→raw=1へ変更しました。<br>2024.5.5変更：<br>Dropboxリンクの書き換え方法を、www.dropbox.com→dl.dropbox.com、dl=0→raw=1へ変更しました。</p>



<hr class="wp-block-separator has-text-color has-cyan-bluish-gray-color has-alpha-channel-opacity has-cyan-bluish-gray-background-color has-background is-style-wide"/>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p class="wp-block-paragraph">改めて、災害時の損失を抑え復旧を速やかに行うことが大切と感じています。自宅サーバーを今すぐ撤去するつもりはありませんが、自宅サーバーに依存しない方向、自宅サーバーは選択肢の一つにする方向、そちらへ舵を切りたいと思います。動画再生方法のいくつかの選択肢をテストする中で、その選択肢を更に使いやすくする方法を作ってみます。なお、Google単独は、GoogleドライブからWordPressプレーヤーへ動画と字幕を同期させて引き込む方法は、基本的には困難なようですので、対象から除きました。</p>



<h6 class="wp-block-heading">No1　Vimeo単独</h6>



<p class="wp-block-paragraph">VimeoはYouTubeと同様にトランスコードされてストリーミング再生されるので、停滞が非常に少ないです。<strong>Vimeoは、動画の、まるごと差し替えがOK、何回でも上書きアップロードができます</strong>。</p>



<figure class="wp-block-flexible-table-block-table is-content-justification-left is-scroll-on-pc is-scroll-on-mobile"><table class=""><tbody><tr><td></td><td style="text-align:center">動画ファイル</td><td style="text-align:center">字幕ファイル</td><td style="text-align:center">初期画面ファイル</td></tr><tr><td>Vimeo</td><td style="text-align:center">◎</td><td style="text-align:center">◎<br>(Vimeoサイトに<br>アップロードする)</td><td style="text-align:center">◎<br>(動画からショットするか、<br>Vimeoにアップロードする)</td></tr><tr><td>Dropbox</td><td style="text-align:center"></td><td style="text-align:center"></td><td style="text-align:center"></td></tr><tr><td>Google</td><td style="text-align:center"></td><td style="text-align:center"></td><td style="text-align:center"></td></tr><tr><td>自宅サーバー</td><td style="text-align:center"></td><td style="text-align:center"></td><td style="text-align:center"></td></tr><tr><td>外部サーバー<br>(Xserver)</td><td style="text-align:center"></td><td style="text-align:center"></td><td style="text-align:center"></td></tr></tbody></table></figure>



<p class="wp-block-paragraph"><span class="red"><s>注：動画の中で、書き換え方法を、dl=0→raw=1としていますが、www.dropbox.com→dl.dropbox.com dl=0→raw＝1へ変更しています。</s></span></p>



<p style="font-size: 14px;">
  <a href="https://imakat.com/vm5?movid=905195687" target="_blank">
   動画を別ページで表示します(ここをクリック)。
  </a>
<div style="position:relative;"><iframe src="https://player.vimeo.com/video/905195687?
texttrack=ja&#038;loop=0&#038;title=0&#038;byline=0&#038;muted=0&#038;pip=1&#038;portrait=0&#038;autopause=0&#038;" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay;fullscreen" allowfullscreen=""></iframe></div><script src="https://player.vimeo.com/api/player.js"></script><details><summary>字幕一覧(クリック)</summary> <p>
1) Dropboxの動画をWordPressに貼り付ける<br>
2) はい。それでは今からDropboxにある動画を、WordPress へ貼り付ける方法について紹介します。<br>
3) まず結論からですが、Vimeoの代用にDropboxを使うことにします。　<br>
4) 私の場合は元ネタの動画だとか写真はですね、ほぼ全部Dropboxの中にありますので、<br>
5) それを、簡単に加工して送信できればいいわけです。<br>
6) 2つ目に、Dropboxですけれども、そのスピードはもちろん、その動画配信サービスの、<br>
7) YouTubeだとかVimeoには劣りますけども、<br>
8) 自宅サーバーよりは速いです。<br>
9) 3番目に、同じクラウドサービスに、Google ドライブがあります。<br>
10) Googleドライブを使う方法を調べたが、<br>
11) 字幕ファイルの同期の方法がよくわかりません。<br>
12) GoogleとしてはYouTubeを利用すればいいと考えているのかなと感じます。　<br>
13) そういった意味で、私にとってはですね、<br>
14) このDropbox対Googleについては、<br>
15) Dropboxが使いやすそうです。<br>
16) それでは、使うための準備を進めます。<br>
17) まず、Dropboxリンクは、そのままWordPressへ貼り付けても動かないです。<br>
18) 手直しする必要があります。<br>
19) Dropboxリンクですけれども、<br>
20) この以下のこの長いURLになってます。<br>
21) 2023年ですね、12月からですね、この、rlkeyというものが加わってとても長くなりました。<br>
22) この2行目からのこの部分ですね、<br>
23) まあ、過剰な負荷だとか、安全対策が強化されたようです。<br>
24) これに伴って、2023年12月以降は、WordPress用の貼り付けコードも変わってきています。<br>
25) 残念ながらこのままでは、WordPressは再生できません。<br>
26) この赤い部分ですね、dl=0の部分を、raw=1で置き換えます。<br>
27) すなわち、以下のような形です。<br>
28) これを作成します。<br>
29) これをですね、マウスの操作だけで行うクイックアクションを作成します。AppleScriptを使います。<br>
30) 以下のように作るのですが、<br>
31) このスクリプトについては、ブログへ添付しますのでご覧ください。<br>
32) このスクリプトについては、ブログへ添付しますのでご覧ください。<br>
33) それで、作ったクイックアクションを実行して、置き換えが正しいかどうか確認します。<br>
34) 動きをご覧ください。<br>
35) 確認するテスト画像ですね、これです。<br>
36) その上で右クリックをして、Dropboxリンクをコピーします。<br>
37) それをメモにペーストします。<br>
38) ペースト、<br>
39) でその上で、左クリックを3回、<br>
40) で、右クリックをして、<br>
41) サービスの中から、DropboxリンクをWordPress用に変換する、を選びます。<br>
42) コピーされます。OK。<br>
43) でそれを、<br>
44) メモにペーストします。<br>
45) こういった出来上がりになります。<br>
46) 変えられた部分は、dl=0が、<br>
47) raw=1に変わっています。<br>
48) それではこの出来上がったものをクリックして確認してみましょう。<br>
49) 確かに画像が出ます。<br>
50) これだけでも、ですね、<br>
51) このクイックアクション、汎用に使えるんですけれども、<br>
52) もう一つAppleScriptのアプリケーションを組み合わせて、WordPressへの動画貼り付けコードを生成したいと思います。<br>
53) 3番目、<br>
54) WordPressへの動画貼り付けコードを生成します。<br>
55) これはまた同じく、AppleScriptのスクリプトですけれども、スクリプトエディターで作ります。<br>
56) 以下のような内容です。この内容もブログへ添付しますので、<br>
57) コピーしてお使いください。<br>
58) その結果のですね、<br>
59) アプリケーションの実行の様子をご覧ください。<br>
60) 最初にアプリケーションを起動させます。<br>
61) それで、<br>
62) 開始画面の画像URLを入れてください、ということで、最初にその画像ファイル、<br>
63) を選び、その上で右クリックして、Dropboxリンクをコピーします。<br>
64) それを、ダイアログボックスのところにペーストします。<br>
65) その上で、左クリック3回、右クリック、サービスから、<br>
66) 変換アクション、<br>
67) コピーがされたらそれを、<br>
68) ボックスに貼り付けます。<br>
69) OK。<br>
70) 次に、<br>
71) 動画本体のURLを、<br>
72) 変換します。<br>
73) 目的の、<br>
74) ファイルを選びます。<br>
75) どれだ、<br>
76) はい、右クリックして、Dropboxリンクのコピーして、<br>
77) それを、ダイアログボックスにペーストして、<br>
78) 左クリック3回、<br>
79) 右クリック、<br>
80) サービスの中からアクションを選び、変換したものを、<br>
81) 置き換えます。<br>
82) OK。<br>
83) 次に、字幕ファイルのURLです。<br>
84) 探します。<br>
85) vttファイルです。<br>
86) 右クリックして、<br>
87) リンクをコピーして、<br>
88) ダイアログボックスにペーストします。左クリック3回、右クリック、<br>
89) サービスの中からアクションを起動して、<br>
90) 出来上がったコードを、<br>
91) 貼り付けます。<br>
92) OK。<br>
93) 最後に動画の説明を記入します。<br>
94) 何入れてもいいんですが、先頭の文字に小文字の不等号カッコ、これはダメです。<br>
95) で、出来上がったものがこういった形でですね、コードが出来上がります。<br>
96) OK。<br>
97) クリップボードにコピーされますのでそれをWordPressへペーストします。<br>
98) カスタムHTMLコードへ、<br>
99) ペーストします。プレビューを押します。<br>
100) 起動してみます。<br>
101) ちゃんと動いてますね、<br>
102) はい、正しくできています。<br>
103) それでは以上で、Dropboxにある動画を、WordPressへ貼り付ける方法の説明を終わります。<br>
104) ありがとうございました。<br>
</p> </details> <style>details { font: 16px "Open Sans", Calibri, sans-serif; width: 100%; } details > summary { padding: 2px 6px; width: 100%; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; } details > p { font: 14px "Open Sans", Calibri, sans-serif; height:150px; overflow: scroll; background-color: #EDF7FF; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } </style>




<h6 class="wp-block-heading">No2　Dropbox単独</h6>



<p class="wp-block-paragraph">Dropboxは、ブログを補足するための短い簡潔なビデオが適しています。ニッチに役立つことが目的なので、集中アクセスは殆どないと想定しますが、一般向けの内容の場合はVimeoを使います。Dropboxの再生のスムーズさは、WiFi環境であれば、少々待ち時間はありますが、問題なく視聴できると思います。但しスマホで4Gセルラーでの視聴は、時間帯によっては困難かも知れません。特に昼休み。仕事場でWiFiや有線LANでパソコンを使っていた人が、昼休みになると一斉にスマホを使い出すので、昼休みは困難かも知れません。この動画は476MBと大きいサイズです。<strong style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); white-space: normal;">更新方法は、MacにあるDropboxにリンクしたローカルファイルを上書き保存するだけです</strong><span style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: -webkit-standard; font-size: medium; white-space: normal;">。</span></p>



<figure class="wp-block-flexible-table-block-table is-content-justification-left is-scroll-on-pc is-scroll-on-mobile"><table class=""><tbody><tr><td></td><td style="text-align:center">動画ファイル</td><td style="text-align:center">字幕ファイル</td><td style="text-align:center">初期画面ファイル</td></tr><tr><td>Vimeo</td><td style="text-align:center"></td><td style="text-align:center"></td><td style="text-align:center"></td></tr><tr><td>Dropbox</td><td style="text-align:center">○<br><span class="red"><span class="fz-12px">dl=0 → raw=1</span><br><span class="fz-12px"><s>www.dropbox.com →dl.dropbox.com</s></span></span></td><td style="text-align:center"></td><td style="text-align:center">◎<br><span class="red"><span class="fz-12px">dl=0 → raw=1</span><br><span class="fz-12px"><s>www.dropbox.com →dl.dropbox.com</s></span></span></td></tr><tr><td>Google</td><td style="text-align:center"></td><td style="text-align:center"></td><td style="text-align:center"></td></tr><tr><td>自宅サーバー</td><td style="text-align:center"></td><td style="text-align:center"></td><td style="text-align:center"></td></tr><tr><td>外部サーバー(Xserver)</td><td style="text-align:center"></td><td style="text-align:center">◎<br><span class="fz-12px">直接アップロード</span></td><td style="text-align:center"></td></tr></tbody></table><figcaption>字幕ファイルは、WordPressブログを発信しているサーバー内に置く。</figcaption></figure>



<p class="wp-block-paragraph"><span class="red"><s>注：動画の中で、書き換え方法を、dl=0→raw=1としていますが、www.dropbox.com→dl.dropbox.com dl=0→raw＝1へ変更しています。</s></span></p>



<figure class="wp-block-video aligncenter">
<video controls 
poster="https://www.dropbox.com/scl/fi/4isbb7bfnk7w9vnczilcu/240122_Dropbox.png?rlkey=rxkgwu4apmg07dmkc0h5vptn8&#038;raw=1"
src="https://www.dropbox.com/scl/fi/oewlvtdcqeqp7d9w777t9/2401221_Dropbox-WordPress.mp4?rlkey=7mstp5fm6rgrtrgsvlun0vex5&#038;raw=1" 
playsinline="">
<track default=""
src="https://imakat.com/wp-content/uploads/gd_wp_data/vttdata/15_240122_dropbox_timeadded.vtt" 
label="日本語" srclang="ja" kind="subtitles">
</video>
<figcaption>
</figcaption>
</figure>



<details translate="yes"><summary translate="yes">字幕一覧(クリック)</summary> <p translate="yes">
(00:00:00) Dropboxの動画をWordPressに貼り付ける<br>
(00:00:04) はい。それでは今からDropboxにある動画を、WordPress へ貼り付ける方法について紹介します。<br>
(00:00:17) まず結論からですが、Vimeoの代用にDropboxを使うことにします。　<br>
(00:00:26) 私の場合は元ネタの動画だとか写真はですね、 ほぼ全部Dropboxの中にありますので、<br>
(00:00:35) それを、簡単に加工して送信できればいいわけです。<br>
(00:00:43) 2つ目に、Dropboxですけれども、そのスピードはもちろん、その動画配信サービスの、 <br>
(00:00:50) YouTubeだとかVimeoには劣りますけども、<br>
(00:00:55) 自宅サーバーよりは速いです。<br>
(00:01:01) 3番目に、同じクラウドサービスに、Google ドライブがあります。<br>
(00:01:07) Googleドライブを使う方法を調べたが、<br>
(00:01:13) 字幕ファイルの同期の方法がよくわかりません。<br>
(00:01:17) GoogleとしてはYouTubeを利用すればいいと考えているのかなと感じます。　<br>
(00:01:26) そういった意味で、私にとってはですね、<br>
(00:01:30) このDropbox対Googleについては、<br>
(00:01:36) Dropboxが使いやすそうです。<br>
(00:01:41) それでは、使うための準備を進めます。<br>
(00:01:50) まず、Dropboxリンクは、そのままWordPressへ貼り付けても動かないです。 <br>
(00:01:59) 手直しする必要があります。<br>
(00:02:08) Dropboxリンクですけれども、<br>
(00:02:13) この以下のこの長いURLになってます。<br>
(00:02:19) 2023年ですね、12月からですね、この、rlkeyというものが加わってとても長くなりました。<br>
(00:02:29) この2行目からのこの部分ですね、<br>
(00:02:36) まあ、過剰な負荷だとか、安全対策が強化されたようです。<br>
(00:02:43) これに伴って、2023年12月以降は、WordPress用の貼り付けコードも変わってきています。<br>
(00:02:54) 残念ながらこのままでは、WordPressは再生できません。<br>
(00:03:01) この赤い部分ですね、dl=0の部分を、raw=1で置き換えます。<br>
(00:03:14) すなわち、以下のような形です。<br>
(00:03:22) これを作成します。<br>
(00:03:31) これをですね、マウスの操作だけで行うクイックアクションを作成します。AppleScriptを使います。<br>
(00:03:43) 以下のように作るのですが、<br>
(00:03:46) このスクリプトについては、ブログへ添付しますのでご覧ください。<br>
(00:03:52) このスクリプトについては、ブログへ添付しますのでご覧ください。<br>
(00:04:00) それで、作ったクイックアクションを実行して、置き換えが正しいかどうか確認します。<br>
(00:04:09) 動きをご覧ください。<br>
(00:04:16) 確認するテスト画像ですね、これです。<br>
(00:04:22) その上で右クリックをして、Dropboxリンクをコピーします。<br>
(00:04:31) それをメモにペーストします。 <br>
(00:04:36) ペースト、<br>
(00:04:38) でその上で、左クリックを3回、<br>
(00:04:44) で、右クリックをして、<br>
(00:04:48) サービスの中から、DropboxリンクをWordPress用に変換する、を選びます。<br>
(00:04:59) コピーされます。OK。<br>
(00:05:05) でそれを、<br>
(00:05:07) メモにペーストします。<br>
(00:05:10) こういった出来上がりになります。<br>
(00:05:14) 変えられた部分は、dl=0が、<br>
(00:05:23) raw=1に変わっています。<br>
(00:05:29) それではこの出来上がったものをクリックして確認してみましょう。<br>
(00:05:39) 確かに画像が出ます。<br>
(00:05:48) これだけでも、ですね、<br>
(00:05:53) このクイックアクション、汎用に使えるんですけれども、<br>
(00:05:57) もう一つAppleScriptのアプリケーションを組み合わせて、WordPressへの動画貼り付けコードを生成したいと思います。<br>
(00:06:12) 3番目、<br>
(00:06:14) WordPressへの動画貼り付けコードを生成します。<br>
(00:06:20) これはまた同じく、AppleScriptのスクリプトですけれども、スクリプトエディターで作ります。<br>
(00:06:29) 以下のような内容です。この内容もブログへ添付しますので、<br>
(00:06:40) コピーしてお使いください。<br>
(00:06:44) その結果のですね、<br>
(00:06:47) アプリケーションの実行の様子をご覧ください。<br>
(00:06:55) 最初にアプリケーションを起動させます。<br>
(00:07:11) それで、<br>
(00:07:15) 開始画面の画像URLを入れてください、ということで、最初にその画像ファイル、<br>
(00:07:26) を選び、その上で右クリックして、Dropboxリンクをコピーします。<br>
(00:07:33) それを、ダイアログボックスのところにペーストします。<br>
(00:07:40) その上で、左クリック3回、右クリック、サービスから、<br>
(00:07:48) 変換アクション、<br>
(00:07:53) コピーがされたらそれを、<br>
(00:07:57) ボックスに貼り付けます。<br>
(00:08:00) OK。<br>
(00:08:03) 次に、<br>
(00:08:06) 動画本体のURLを、<br>
(00:08:10) 変換します。<br>
(00:08:14) 目的の、<br>
(00:08:19) ファイルを選びます。<br>
(00:08:23) どれだ、<br>
(00:08:31) はい、右クリックして、Dropboxリンクのコピーして、<br>
(00:08:39) それを、ダイアログボックスにペーストして、<br>
(00:08:46) 左クリック3回、<br>
(00:08:51) 右クリック、<br>
(00:08:53) サービスの中からアクションを選び、変換したものを、<br>
(00:09:02) 置き換えます。<br>
(00:09:05) OK。<br>
(00:09:09) 次に、字幕ファイルのURLです。<br>
(00:09:14) 探します。<br>
(00:09:18) vttファイルです。 <br>
(00:09:23) 右クリックして、<br>
(00:09:26) リンクをコピーして、<br>
(00:09:29) ダイアログボックスにペーストします。左クリック3回、右クリック、<br>
(00:09:38) サービスの中からアクションを起動して、<br>
(00:09:42) 出来上がったコードを、<br>
(00:09:46) 貼り付けます。<br>
(00:09:48) OK。<br>
(00:09:51) 最後に動画の説明を記入します。<br>
(00:09:55) 何入れてもいいんですが、先頭の文字に小文字の不等号カッコ、これはダメです。<br>
(00:10:05) で、出来上がったものがこういった形でですね、コードが出来上がります。<br>
(00:10:23) OK。<br>
(00:10:25) クリップボードにコピーされますのでそれをWordPressへペーストします。<br>
(00:10:33) カスタムHTMLコードへ、<br>
(00:10:37) ペーストします。プレビューを押します。<br>
(00:10:47) 起動してみます。<br>
(00:10:55) ちゃんと動いてますね、<br>
(00:11:14) はい、正しくできています。<br>
(00:11:19) それでは以上で、Dropboxにある動画を、WordPressへ貼り付ける方法の説明を終わります。<br>
(00:11:29) ありがとうございました。<br>
</p> </details>
<style>
details { font: 16px "Open Sans", Calibri, sans-serif; width: 100%; }
details > summary { padding: 2px 6px; width: 100%; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; }
details > p { font: 14px "Open Sans", Calibri, sans-serif; height:150px; overflow: scroll; background-color: #EDF7FF; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; }
</style>




<h6 class="wp-block-heading">No3　自宅単独</h6>



<figure class="wp-block-flexible-table-block-table is-content-justification-left is-scroll-on-pc is-scroll-on-mobile"><table class=""><tbody><tr><td></td><td style="text-align:center">動画ファイル</td><td style="text-align:center">字幕ファイル</td><td style="text-align:center">初期画面ファイル</td></tr><tr><td>Vimeo</td><td style="text-align:center"></td><td style="text-align:center"></td><td style="text-align:center"></td></tr><tr><td>Dropbox</td><td style="text-align:center"></td><td style="text-align:center"></td><td style="text-align:center"></td></tr><tr><td>Google</td><td style="text-align:center"></td><td style="text-align:center"></td><td style="text-align:center"></td></tr><tr><td>自宅サーバー</td><td style="text-align:center">○</td><td style="text-align:center"></td><td style="text-align:center">◎</td></tr><tr><td>外部サーバー<br>(Xserver)</td><td style="text-align:center"></td><td style="text-align:center">◎<br><span class="fz-12px">直接アップロード</span></td><td style="text-align:center"></td></tr></tbody></table><figcaption>字幕ファイルは、WordPressブログを発信しているサーバー内に置く。</figcaption></figure>



<p class="wp-block-paragraph">Dropboxより非力です。過去の投稿で紹介してきた通り、一般には、476MBという大きい動画を扱うのは無理クリですが、あえて掲載しました。WiFi環境で、高速度なら、視聴できるかも知れません。場合によってはDropboxよりサクサク動くこともあります。<strong>更新方法は、MacにあるDropboxにリンクしたローカルファイル(実はWordPressフォルダとも同期させている)を上書き保存するだけです</strong>。</p>



<p class="wp-block-paragraph"><span class="red"><s>注：動画の中で、書き換え方法を、dl=0→raw=1としていますが、www.dropbox.com→dl.dropbox.com dl=0→raw＝1へ変更しています。</s></span></p>



<figure class="wp-block-video aligncenter">
<video controls
poster="https://imakat.synology.me/wp-content/pmedia/240122_Dropbox貼り付け.png"
src="https://imakat.synology.me/wp-content/mmedia/2401221_Dropboxの動画をWordPressへ貼り付ける.mp4" 
playsinline="">
<track default="" 
src="https://imakat.com/wp-content/uploads/gd_wp_data/vttdata/15_240122_dropbox_timeadded.vtt" 
label="日本語" srclang="ja" kind="subtitles">
</video>
<figcaption>
</figcaption>
</figure>



<details translate="yes"><summary translate="yes">字幕一覧(クリック)</summary> <p translate="yes">
(00:00:00) Dropboxの動画をWordPressに貼り付ける<br>
(00:00:04) はい。それでは今からDropboxにある動画を、WordPress へ貼り付ける方法について紹介します。<br>
(00:00:17) まず結論からですが、Vimeoの代用にDropboxを使うことにします。　<br>
(00:00:26) 私の場合は元ネタの動画だとか写真はですね、 ほぼ全部Dropboxの中にありますので、<br>
(00:00:35) それを、簡単に加工して送信できればいいわけです。<br>
(00:00:43) 2つ目に、Dropboxですけれども、そのスピードはもちろん、その動画配信サービスの、 <br>
(00:00:50) YouTubeだとかVimeoには劣りますけども、<br>
(00:00:55) 自宅サーバーよりは速いです。<br>
(00:01:01) 3番目に、同じクラウドサービスに、Google ドライブがあります。<br>
(00:01:07) Googleドライブを使う方法を調べたが、<br>
(00:01:13) 字幕ファイルの同期の方法がよくわかりません。<br>
(00:01:17) GoogleとしてはYouTubeを利用すればいいと考えているのかなと感じます。　<br>
(00:01:26) そういった意味で、私にとってはですね、<br>
(00:01:30) このDropbox対Googleについては、<br>
(00:01:36) Dropboxが使いやすそうです。<br>
(00:01:41) それでは、使うための準備を進めます。<br>
(00:01:50) まず、Dropboxリンクは、そのままWordPressへ貼り付けても動かないです。 <br>
(00:01:59) 手直しする必要があります。<br>
(00:02:08) Dropboxリンクですけれども、<br>
(00:02:13) この以下のこの長いURLになってます。<br>
(00:02:19) 2023年ですね、12月からですね、この、rlkeyというものが加わってとても長くなりました。<br>
(00:02:29) この2行目からのこの部分ですね、<br>
(00:02:36) まあ、過剰な負荷だとか、安全対策が強化されたようです。<br>
(00:02:43) これに伴って、2023年12月以降は、WordPress用の貼り付けコードも変わってきています。<br>
(00:02:54) 残念ながらこのままでは、WordPressは再生できません。<br>
(00:03:01) この赤い部分ですね、dl=0の部分を、raw=1で置き換えます。<br>
(00:03:14) すなわち、以下のような形です。<br>
(00:03:22) これを作成します。<br>
(00:03:31) これをですね、マウスの操作だけで行うクイックアクションを作成します。AppleScriptを使います。<br>
(00:03:43) 以下のように作るのですが、<br>
(00:03:46) このスクリプトについては、ブログへ添付しますのでご覧ください。<br>
(00:03:52) このスクリプトについては、ブログへ添付しますのでご覧ください。<br>
(00:04:00) それで、作ったクイックアクションを実行して、置き換えが正しいかどうか確認します。<br>
(00:04:09) 動きをご覧ください。<br>
(00:04:16) 確認するテスト画像ですね、これです。<br>
(00:04:22) その上で右クリックをして、Dropboxリンクをコピーします。<br>
(00:04:31) それをメモにペーストします。 <br>
(00:04:36) ペースト、<br>
(00:04:38) でその上で、左クリックを3回、<br>
(00:04:44) で、右クリックをして、<br>
(00:04:48) サービスの中から、DropboxリンクをWordPress用に変換する、を選びます。<br>
(00:04:59) コピーされます。OK。<br>
(00:05:05) でそれを、<br>
(00:05:07) メモにペーストします。<br>
(00:05:10) こういった出来上がりになります。<br>
(00:05:14) 変えられた部分は、dl=0が、<br>
(00:05:23) raw=1に変わっています。<br>
(00:05:29) それではこの出来上がったものをクリックして確認してみましょう。<br>
(00:05:39) 確かに画像が出ます。<br>
(00:05:48) これだけでも、ですね、<br>
(00:05:53) このクイックアクション、汎用に使えるんですけれども、<br>
(00:05:57) もう一つAppleScriptのアプリケーションを組み合わせて、WordPressへの動画貼り付けコードを生成したいと思います。<br>
(00:06:12) 3番目、<br>
(00:06:14) WordPressへの動画貼り付けコードを生成します。<br>
(00:06:20) これはまた同じく、AppleScriptのスクリプトですけれども、スクリプトエディターで作ります。<br>
(00:06:29) 以下のような内容です。この内容もブログへ添付しますので、<br>
(00:06:40) コピーしてお使いください。<br>
(00:06:44) その結果のですね、<br>
(00:06:47) アプリケーションの実行の様子をご覧ください。<br>
(00:06:55) 最初にアプリケーションを起動させます。<br>
(00:07:11) それで、<br>
(00:07:15) 開始画面の画像URLを入れてください、ということで、最初にその画像ファイル、<br>
(00:07:26) を選び、その上で右クリックして、Dropboxリンクをコピーします。<br>
(00:07:33) それを、ダイアログボックスのところにペーストします。<br>
(00:07:40) その上で、左クリック3回、右クリック、サービスから、<br>
(00:07:48) 変換アクション、<br>
(00:07:53) コピーがされたらそれを、<br>
(00:07:57) ボックスに貼り付けます。<br>
(00:08:00) OK。<br>
(00:08:03) 次に、<br>
(00:08:06) 動画本体のURLを、<br>
(00:08:10) 変換します。<br>
(00:08:14) 目的の、<br>
(00:08:19) ファイルを選びます。<br>
(00:08:23) どれだ、<br>
(00:08:31) はい、右クリックして、Dropboxリンクのコピーして、<br>
(00:08:39) それを、ダイアログボックスにペーストして、<br>
(00:08:46) 左クリック3回、<br>
(00:08:51) 右クリック、<br>
(00:08:53) サービスの中からアクションを選び、変換したものを、<br>
(00:09:02) 置き換えます。<br>
(00:09:05) OK。<br>
(00:09:09) 次に、字幕ファイルのURLです。<br>
(00:09:14) 探します。<br>
(00:09:18) vttファイルです。 <br>
(00:09:23) 右クリックして、<br>
(00:09:26) リンクをコピーして、<br>
(00:09:29) ダイアログボックスにペーストします。左クリック3回、右クリック、<br>
(00:09:38) サービスの中からアクションを起動して、<br>
(00:09:42) 出来上がったコードを、<br>
(00:09:46) 貼り付けます。<br>
(00:09:48) OK。<br>
(00:09:51) 最後に動画の説明を記入します。<br>
(00:09:55) 何入れてもいいんですが、先頭の文字に小文字の不等号カッコ、これはダメです。<br>
(00:10:05) で、出来上がったものがこういった形でですね、コードが出来上がります。<br>
(00:10:23) OK。<br>
(00:10:25) クリップボードにコピーされますのでそれをWordPressへペーストします。<br>
(00:10:33) カスタムHTMLコードへ、<br>
(00:10:37) ペーストします。プレビューを押します。<br>
(00:10:47) 起動してみます。<br>
(00:10:55) ちゃんと動いてますね、<br>
(00:11:14) はい、正しくできています。<br>
(00:11:19) それでは以上で、Dropboxにある動画を、WordPressへ貼り付ける方法の説明を終わります。<br>
(00:11:29) ありがとうございました。<br>
</p> </details>
<style>
details { font: 16px "Open Sans", Calibri, sans-serif; width: 100%; }
details > summary { padding: 2px 6px; width: 100%; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; }
details > p { font: 14px "Open Sans", Calibri, sans-serif; height:150px; overflow: scroll; background-color: #EDF7FF; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; }
</style>




<p class="wp-block-paragraph">No1~No3と比較してきましたが、現在、安定度に優れるのはNo1のVimeoが第１位、No2のDropbox単独が第2位です。扱い易さは、圧倒的にNo3の自宅単独です。実はこの3つ以外にも、Dropbox(動画、字幕) と自宅(初期画面)、Dropbox(動画、字幕) とGoogleフォト(初期画面)、Dropbox(動画、字幕) と外部(初期画面)についてテストをしましたが、今一つ不安定なことと操作が複雑になることから割愛しました。<br>しかし、今回、改めて考察するキッカケになった災害リスク。これを考えると、自宅のWebサーバーに比重を置くのは問題といえるでしょう。</p>



<p class="wp-block-paragraph">従って、今回、<strong><span class="marker">「No2 Dropbox単独を採用</span></strong>していきます。10分未満の簡単編集でマニアックなものはDropbox、ファイルが重そうな10分以上あるいは一般向け配信のものはVimeoという使い分けをイメージしています。さあどうかな。</p>



<a href="https://imakat.com/ds5?drid=15" target="_blank">
    <img decoding="async" src="https://docs.google.com/drawings/d/e/2PACX-1vSYLNcifORpgWlD9fvrov_8o5NoHmlSoIiXejp8tHOdNiLL-OT8ld2iUsaCSfC_KHCo2fsa7aVvN-JH/pub?w=960&amp;h=720" alt="Google図形描画">
</a>



<h3 class="wp-block-heading">ポイント解説</h3>



<h4 class="wp-block-heading">１　動画の中に登場するAppleScriptの紹介</h4>



<p class="wp-block-paragraph">（１）Dropboxの共有リンクをWordPress貼り付け用に変換するクイックアクションのAppleScriptは、以下です。</p>



<p class="wp-block-paragraph">コード変換の方法は、<br><strong><br><span class="fz-18px"><span class="marker-red">URLの記述の中の </span></span></strong></p>



<p class="wp-block-paragraph"><strong><span class="fz-18px"><span class="marker-red"><s>&#8220;www.dropbox.com&#8221; を&#8221;dl.dropbox.com&#8221;へ置き換える。</s></span></span></strong></p>



<p class="wp-block-paragraph"><strong><span class="fz-18px"><span class="marker-red">&#8220;dl=0&#8221; を&#8221;raw=1&#8243;へ置き換える。</span></span></strong></p>



<p class="wp-block-paragraph">を使っています。なお、拡張子に関係なく扱えています。</p>



<p class="wp-block-paragraph" id="link1"> <strong><span class="marker">DropboxのURLを変換するAppleスクリプト</span></strong></p>



<p class="wp-block-paragraph">「AppleScriptを実行」を挿入</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>-- DropboxのURLを変換するスクリプト

-- ３−１　ベースとなるDropboxの共有URLを一時的に保管する。
set baseURL to the clipboard
set tempURL to &quot;&quot;

-- 共有URLが存在するか確認
if baseURL is not equal to &quot;&quot; then
	
	-- ３−1　クリップボードの結果をtempURLへ置き換える。
	set tempURL to baseURL
	
	-- ３−２　URLの記述の中の &quot;www.dropbox.com&quot; を &quot;dl.dropbox.com&quot; へ置き換える。
	-- set tempURL to replaceText(&quot;www.dropbox.com&quot;, &quot;dl.dropbox.com&quot;, baseURL)
	
	-- ３−３　URLの記述の中の &quot;dl=0&quot; を&quot;raw=1&quot;へ置き換える。
	set tempURL to replaceText(&quot;dl=0&quot;, &quot;raw=1&quot;, tempURL)
	
	-- ３−４　クリップボードに保管する。「クリップボードにWordPress貼り付け用URLをコピーしました。」と表示する。
	set the clipboard to tempURL
	display dialog &quot;クリップボードにWordPress貼り付け用URLをコピーしました。&quot;
else
	display dialog &quot;共有URLが見つかりません。&quot;
end if

-- 文字列中の指定されたテキストを置き換える関数
on replaceText(find, replace, sourceText)
	set text item delimiters to find
	set sourceText to text items of sourceText
	set text item delimiters to replace
	set sourceText to sourceText as text
	set text item delimiters to &quot;&quot;
	return sourceText
end replaceText</code></pre></div>



<p class="wp-block-paragraph" id="link2">（２）<span class="marker"><strong>WordPress動画貼り付けコード生成用アプリ</strong></span>のAppleScriptは以下です。</p>



<pre class="wp-block-code"><code>-- スクリプトのテンプレート
set scriptTemplate to "&lt;figure class=\"wp-block-video aligncenter\"&gt;
&lt;video controls
poster=\"%poster%\"
src=\"%video%\" 
playsinline=\"\"&gt;
&lt;track default=\"\" 
src=\"%subtitles%\" 
label=\"日本語\" srclang=\"ja\" kind=\"subtitles\"&gt;
&lt;/video&gt;
&lt;figcaption&gt;%videoDescription%
&lt;/figcaption&gt;
&lt;/figure&gt;
&#091;dynamic_external_html url=\"%subtitle_list%\"]"

-- ダイアログでユーザーに入力を求める
set posterURL to text returned of (display dialog "&lt;WordPress動画貼り付けコードを生成&gt; 開始画面の画像のURLを入力してください(省略可)。" default answer "")
set videoURL to text returned of (display dialog "&lt;WordPress動画貼り付けコードを生成&gt; 動画本体のURLを入力してください(省略可)。" default answer "")
set subtitlesURL to text returned of (display dialog "&lt;WordPress動画貼り付けコードを生成&gt; 字幕ファイルのURLを入力してください(省略可)。" default answer "")
set videoDescription to text returned of (display dialog "&lt;WordPress動画貼り付けコードを生成&gt; 動画の説明を記入ください(省略可)。※先頭の文字に小文字の&lt; &gt;は不可。" default answer "")
set subtitleListURL to text returned of (display dialog "&lt;WordPress動画貼り付けコードを生成&gt; 字幕一覧のURLを入力してください(省略可)。" default answer "")

-- スクリプトのテンプレートをユーザーの入力で置き換える
set customHTML to scriptTemplate
set customHTML to my replaceText(customHTML, "%poster%", posterURL)
set customHTML to my replaceText(customHTML, "%video%", videoURL)
set customHTML to my replaceText(customHTML, "%subtitles%", subtitlesURL)
set customHTML to my replaceText(customHTML, "%videoDescription%", videoDescription)
set customHTML to my replaceText(customHTML, "%subtitle_list%", subtitleListURL)

-- 置換用の関数
on replaceText(originalText, searchString, replacementString)
	set AppleScript's text item delimiters to searchString
	set textItems to text items of originalText
	set AppleScript's text item delimiters to replacementString
	set replacedText to textItems as text
	set AppleScript's text item delimiters to ""
	return replacedText
end replaceText

-- 結果を表示
display dialog customHTML

-- 結果をクリップボードにコピー
set the clipboard to customHTML
display dialog "この内容をクリップボードにコピーしました。"</code></pre>



<p class="wp-block-paragraph">なお、後日、字幕一覧のデータの投稿内引き込みを追加しました。WordPressのfunction.phpへ以下を追加ください。</p>



<pre class="wp-block-code"><code>&lt;?php
// 外部テキストを取得する関数
function fetch_dynamic_external_html_content($atts) {
    // ショートコードの引数を定義
    $attributes = shortcode_atts(array(
        'url' =&gt; '' // URLを指定する
    ), $atts);

    $url = $attributes&#091;'url'];
    
    // URLが指定されていない場合の処理
    if (empty($url)) {
        return 'URLが指定されていません。';
    }

    // 外部URLからデータを取得
    $response = wp_remote_get($url);

    // エラーチェック
    if (is_wp_error($response)) {
        return 'テキストの読み込みに失敗しました。';
    }

    // 取得したデータの処理
    $body = wp_remote_retrieve_body($response);
    return $body; // HTMLとしてそのまま返す
}

// ショートコードを作成
function display_dynamic_external_html($atts) {
    return fetch_dynamic_external_html_content($atts);
}
add_shortcode('dynamic_external_html', 'display_dynamic_external_html');

?&gt;</code></pre>



<p class="wp-block-paragraph">上の２つのAppleScriptは、汎用性があります。</p>



<p class="wp-block-paragraph">例えば、自宅サーバー用のWordPressのカスタムhtml記述については、URLはランダムな文字列を埋め込むことなく、素直なディレクトリの記述になっているので、（２）だけ使います。</p>



<p class="wp-block-paragraph"></p>



<h4 class="wp-block-heading">２　ChatGPTの活用</h4>



<p class="wp-block-paragraph">上のAppleScriptですが、実は、ChatGPT（無料版の利用）の力を借りています。私は、「指示書を書いて、結果を検証して、間違いを指摘して訂正を求める」だけです。ChatGPTは、プログラミングは得意な分野だと思います。私は、特に活用法をどこかで学んだことはありませんが、質疑応答を、「解決して欲しい問題を書く、何を使って、どのような手順で（手順１　手順２　、、）、プログラミング記述して欲しいかを書く」という流れで繰り返すことができます。但し、即座に正しい解法になることはまずありません。出てきたエラーをそのまま伝えて、訂正を依頼する、それを、５〜６回繰り返して、辿り着く感じです。隘路に入ったためスタートに戻ることも、ままあります。</p>



<h4 class="wp-block-heading">３　マウスの左を３回クリック</h4>



<p class="wp-block-paragraph">動画の中で登場する、マウスの左３回クリック、トリプルクリックは、このブログをご覧の方はご存知のことと思いますが、紹介します。</p>



<figure class="wp-block-video aligncenter">
<video controls
poster="https://www.dropbox.com/scl/fi/bxifz34udntupuho4jm9y/3-poster.png?rlkey=4dts2a2cmdjtxsynnxgksxdfr&#038;raw=1"
src="https://dl.dropboxusercontent.com/scl/fi/cw3iijw40y6thbop2310o/240117_-3.mp4?rlkey=g6mrd4yjfo81dyr9qioz49vai" 
playsinline="">
<track default="" 
src="https://dl.dropboxusercontent.com/scl/fi/xevdt3zrkbq0bcfueek2a/240118_-3-_.vtt?rlkey=emxpzxgr6cilqitdt8035rdif" 
label="日本語" srclang="ja" kind="subtitles">
</video>
<figcaption>＜マウスの左を３回クリック＞
</figcaption>
</figure>



<h4 class="wp-block-heading">４　2023年12月にDropboxリンクの構造が変更。個々のコンテンツ単位で制限管理ができる仕組みへ移行。</h4>



<p class="wp-block-paragraph">DropboxリンクのURLですが、以前は&#8221;https://&#8230;&#8230;..？&#8221;まででした。2023年12月にrlkey=以降が追加になっています。トラッキング追跡のためか何らかの異常回避、情報収集のためでしょうか。ファイル単位でアクセス制限ができるようになるのかも知れません。いずれにしても、何らかの安全対策だと思います。　自宅サーバーは、サーバー単位か、そこまで細かく出来ていないので、Dropboxは一歩も二歩も進んでいます。</p>



<p class="wp-block-paragraph"><a rel="noopener" target="_blank" href="https://help.dropbox.com/ja-jp/share/force-download">Dropboxヘルプセンターにrlkeyを導入すること及び利用方法(レンダリングの強制 )の説明<span class="fa fa-external-link external-icon anchor-icon"></span></a>があります。この中で、ブラウザで直接画像を表示するには、つまりWordPressなどでリンク表示する場合は、<strong>raw=1を使ってリダイレクトをさせて使用する</strong>ように指示が書かれています。まだ移行が完了したとはしていないので、今後とも何らかの仕様の変更があるかも知れません。ウオッチする必要があります。</p>



<h4 class="wp-block-heading">５　Dropboxリンクを使うならファイル名は英数字で作るのが基本。</h4>



<p class="wp-block-paragraph">Dropboxリンクは、ファイル名を変えても、フォルダを移動しても、変わりません。&#8221;<strong>https://ランダムな文字列/ファイル名?rlkey=ランダムな文字列</strong>&#8220;となっています。この<strong>ファイル名のところですが、日本語の部分が削除されます</strong>。ですから、ファイル名は、英数字だけでユニークな文字列をまず書いて、私は年月日プラス連番がいいと思いますが、そこに少しだけ短く日本語を加える書き方がよさそうです。</p>



<h4 class="wp-block-heading">６　ダウンロードを要求される問題。</h4>



<p class="wp-block-paragraph">Dropboxリンクの末尾をraw=1に置き換えたURLを、WordPressの投稿中の文字列にリンクして再生しようとすると、ダウンロードを要求される場合があります。Dropboxはクラウドストレージが本業であって、データを受け渡すのが本業。だから、動画や画像も、ビジネス上のファイルのやり取りと同様に、利用者が一度自分のフォルダへダウンロードして、その後で、そのファイルを再生する。それが基本だろうと思います。しかしながら私のように、個人のWeb配信に使う場合は、ダウンロードを要求されるなら、それは不便過ぎて利用できないです。そこで、そのような個人的な小規模の発信者に対して、ランダム生成した非常に長いURLアドレスへリダイレクトするなら利用を可能にする、アクセスが集中するようなら視聴制限を加える、そうした条件の下で利用を許可しているということになります。</p>



<p class="wp-block-paragraph">ともかく、間違いないのは、Dropbox動画ごとに、それを貼り付けた独立ページ（固定ページ）を自分で作ることです。そしてその独立ページをWordPressの文字列にリンク。そうすればWindows/Macほかでもダウンロードを要求されないでしょう。</p>



<h4 class="wp-block-heading">７　動的トグル</h4>



<p class="wp-block-paragraph">小さな工夫の紹介ですが、上のスクリプトのところで、「字幕一覧のデータの投稿内引き込みを追加した&#8230;.」と記述しましたが、これの具体例が、以下のトグルです。</p>



<details translate="yes"><summary translate="yes">字幕一覧(クリック)</summary> <p translate="yes">
(00:00:00) Dropboxの動画をWordPressに貼り付ける<br>
(00:00:04) はい。それでは今からDropboxにある動画を、WordPress へ貼り付ける方法について紹介します。<br>
(00:00:17) まず結論からですが、Vimeoの代用にDropboxを使うことにします。　<br>
(00:00:26) 私の場合は元ネタの動画だとか写真はですね、 ほぼ全部Dropboxの中にありますので、<br>
(00:00:35) それを、簡単に加工して送信できればいいわけです。<br>
(00:00:43) 2つ目に、Dropboxですけれども、そのスピードはもちろん、その動画配信サービスの、 <br>
(00:00:50) YouTubeだとかVimeoには劣りますけども、<br>
(00:00:55) 自宅サーバーよりは速いです。<br>
(00:01:01) 3番目に、同じクラウドサービスに、Google ドライブがあります。<br>
(00:01:07) Googleドライブを使う方法を調べたが、<br>
(00:01:13) 字幕ファイルの同期の方法がよくわかりません。<br>
(00:01:17) GoogleとしてはYouTubeを利用すればいいと考えているのかなと感じます。　<br>
(00:01:26) そういった意味で、私にとってはですね、<br>
(00:01:30) このDropbox対Googleについては、<br>
(00:01:36) Dropboxが使いやすそうです。<br>
(00:01:41) それでは、使うための準備を進めます。<br>
(00:01:50) まず、Dropboxリンクは、そのままWordPressへ貼り付けても動かないです。 <br>
(00:01:59) 手直しする必要があります。<br>
(00:02:08) Dropboxリンクですけれども、<br>
(00:02:13) この以下のこの長いURLになってます。<br>
(00:02:19) 2023年ですね、12月からですね、この、rlkeyというものが加わってとても長くなりました。<br>
(00:02:29) この2行目からのこの部分ですね、<br>
(00:02:36) まあ、過剰な負荷だとか、安全対策が強化されたようです。<br>
(00:02:43) これに伴って、2023年12月以降は、WordPress用の貼り付けコードも変わってきています。<br>
(00:02:54) 残念ながらこのままでは、WordPressは再生できません。<br>
(00:03:01) この赤い部分ですね、dl=0の部分を、raw=1で置き換えます。<br>
(00:03:14) すなわち、以下のような形です。<br>
(00:03:22) これを作成します。<br>
(00:03:31) これをですね、マウスの操作だけで行うクイックアクションを作成します。AppleScriptを使います。<br>
(00:03:43) 以下のように作るのですが、<br>
(00:03:46) このスクリプトについては、ブログへ添付しますのでご覧ください。<br>
(00:03:52) このスクリプトについては、ブログへ添付しますのでご覧ください。<br>
(00:04:00) それで、作ったクイックアクションを実行して、置き換えが正しいかどうか確認します。<br>
(00:04:09) 動きをご覧ください。<br>
(00:04:16) 確認するテスト画像ですね、これです。<br>
(00:04:22) その上で右クリックをして、Dropboxリンクをコピーします。<br>
(00:04:31) それをメモにペーストします。 <br>
(00:04:36) ペースト、<br>
(00:04:38) でその上で、左クリックを3回、<br>
(00:04:44) で、右クリックをして、<br>
(00:04:48) サービスの中から、DropboxリンクをWordPress用に変換する、を選びます。<br>
(00:04:59) コピーされます。OK。<br>
(00:05:05) でそれを、<br>
(00:05:07) メモにペーストします。<br>
(00:05:10) こういった出来上がりになります。<br>
(00:05:14) 変えられた部分は、dl=0が、<br>
(00:05:23) raw=1に変わっています。<br>
(00:05:29) それではこの出来上がったものをクリックして確認してみましょう。<br>
(00:05:39) 確かに画像が出ます。<br>
(00:05:48) これだけでも、ですね、<br>
(00:05:53) このクイックアクション、汎用に使えるんですけれども、<br>
(00:05:57) もう一つAppleScriptのアプリケーションを組み合わせて、WordPressへの動画貼り付けコードを生成したいと思います。<br>
(00:06:12) 3番目、<br>
(00:06:14) WordPressへの動画貼り付けコードを生成します。<br>
(00:06:20) これはまた同じく、AppleScriptのスクリプトですけれども、スクリプトエディターで作ります。<br>
(00:06:29) 以下のような内容です。この内容もブログへ添付しますので、<br>
(00:06:40) コピーしてお使いください。<br>
(00:06:44) その結果のですね、<br>
(00:06:47) アプリケーションの実行の様子をご覧ください。<br>
(00:06:55) 最初にアプリケーションを起動させます。<br>
(00:07:11) それで、<br>
(00:07:15) 開始画面の画像URLを入れてください、ということで、最初にその画像ファイル、<br>
(00:07:26) を選び、その上で右クリックして、Dropboxリンクをコピーします。<br>
(00:07:33) それを、ダイアログボックスのところにペーストします。<br>
(00:07:40) その上で、左クリック3回、右クリック、サービスから、<br>
(00:07:48) 変換アクション、<br>
(00:07:53) コピーがされたらそれを、<br>
(00:07:57) ボックスに貼り付けます。<br>
(00:08:00) OK。<br>
(00:08:03) 次に、<br>
(00:08:06) 動画本体のURLを、<br>
(00:08:10) 変換します。<br>
(00:08:14) 目的の、<br>
(00:08:19) ファイルを選びます。<br>
(00:08:23) どれだ、<br>
(00:08:31) はい、右クリックして、Dropboxリンクのコピーして、<br>
(00:08:39) それを、ダイアログボックスにペーストして、<br>
(00:08:46) 左クリック3回、<br>
(00:08:51) 右クリック、<br>
(00:08:53) サービスの中からアクションを選び、変換したものを、<br>
(00:09:02) 置き換えます。<br>
(00:09:05) OK。<br>
(00:09:09) 次に、字幕ファイルのURLです。<br>
(00:09:14) 探します。<br>
(00:09:18) vttファイルです。 <br>
(00:09:23) 右クリックして、<br>
(00:09:26) リンクをコピーして、<br>
(00:09:29) ダイアログボックスにペーストします。左クリック3回、右クリック、<br>
(00:09:38) サービスの中からアクションを起動して、<br>
(00:09:42) 出来上がったコードを、<br>
(00:09:46) 貼り付けます。<br>
(00:09:48) OK。<br>
(00:09:51) 最後に動画の説明を記入します。<br>
(00:09:55) 何入れてもいいんですが、先頭の文字に小文字の不等号カッコ、これはダメです。<br>
(00:10:05) で、出来上がったものがこういった形でですね、コードが出来上がります。<br>
(00:10:23) OK。<br>
(00:10:25) クリップボードにコピーされますのでそれをWordPressへペーストします。<br>
(00:10:33) カスタムHTMLコードへ、<br>
(00:10:37) ペーストします。プレビューを押します。<br>
(00:10:47) 起動してみます。<br>
(00:10:55) ちゃんと動いてますね、<br>
(00:11:14) はい、正しくできています。<br>
(00:11:19) それでは以上で、Dropboxにある動画を、WordPressへ貼り付ける方法の説明を終わります。<br>
(00:11:29) ありがとうございました。<br>
</p> </details>
<style>
details { font: 16px "Open Sans", Calibri, sans-serif; width: 100%; }
details > summary { padding: 2px 6px; width: 100%; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; }
details > p { font: 14px "Open Sans", Calibri, sans-serif; height:150px; overflow: scroll; background-color: #EDF7FF; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; }
</style>




<p class="wp-block-paragraph">上の3つの動画の下部に挿入した字幕一覧のトグルと同じものです。このtxtファイルは、Dropboxの中にあります。上に掲載のfunction.phpをコピペしたあと、</p>



<pre class="wp-block-code"><code>&#091;dynamic_external_html url=""]</code></pre>



<p class="wp-block-paragraph">上をカスタムhtmlに記述して、url=&#8221;&#8221;のところに当記事で説明した方法で変更したDropboxリンクを挿入します。Dropboxにあるこのtxtファイルを変更すると、全てのこの字幕一覧の表示が変更されます。当たり前といえばそうなのですが、なかなか便利です。動的トグルと呼んでおきます。</p>



<p class="wp-block-paragraph"></p>



<h4 class="wp-block-heading">８　直接リンクには3つのサーバーがあるが、不安定であり、モニタリング要。</h4>



<p class="wp-block-paragraph">Dropboxから画像を直接リンクする方法は、正直、不安定です。以下に、同じ画像を、DropboxのURLをwww.dropbox.com（変更なし)の場合、dl.dropbox.comの場合、dl.dropboxusercontent.comの場合、を並べます。数日様子を見ていますが、www.dropbox.com(変更なし)がほぼ常に表示されています。これの特徴は、別のトークンURLに書き換えられて表示されるという２段階になっています。状況をウオッチしていきます。<br><span class="red"><s>2024.5.5時点で、www.dropbox.com raw=1は表示不可、dl.dropbox.com raw=1は表示可能となっています。</s></span><br></p>



<figure class="wp-block-image size-large is-resized"><a rel="noopener" target="_blank" href="https://dl.dropbox.com/scl/fi/vqp3klbp7ii4io0bzt8pq/240119_test.JPG?rlkey=p2redrolq8klhrovdpk3c1wa5&amp;raw=1"><img decoding="async" src="https://dl.dropbox.com/scl/fi/vqp3klbp7ii4io0bzt8pq/240119_test.JPG?rlkey=p2redrolq8klhrovdpk3c1wa5&amp;raw=1" alt="" style="width:840px;height:auto"/></a><figcaption class="wp-element-caption"><a rel="noopener" target="_blank" href="https://dl.dropbox.com/scl/fi/vqp3klbp7ii4io0bzt8pq/240119_test.JPG?rlkey=p2redrolq8klhrovdpk3c1wa5&amp;raw=1">https://dl.dropbox.com/scl/fi/vqp3klbp7ii4io0bzt8pq/240119_test.JPG?rlkey=p2redrolq8klhrovdpk3c1wa5&amp;raw=1<span class="fa fa-external-link external-icon anchor-icon"></span></a></figcaption></figure>



<figure class="wp-block-image size-large is-resized"><a rel="noopener" target="_blank" href="https://i0.wp.com/dl.dropboxusercontent.com/scl/fi/vqp3klbp7ii4io0bzt8pq/240119_test.JPG?ssl=1"><img data-recalc-dims="1" decoding="async" src="https://i0.wp.com/dl.dropboxusercontent.com/scl/fi/vqp3klbp7ii4io0bzt8pq/240119_test.JPG?w=1256&#038;ssl=1" alt="" style="width:840px;height:auto"/></a><figcaption class="wp-element-caption"><a rel="noopener" target="_blank" href="https://dl.dropboxusercontent.com/scl/fi/vqp3klbp7ii4io0bzt8pq/240119_test.JPG?rlkey=p2redrolq8klhrovdpk3c1wa5&amp;raw=1">https://dl.dropboxusercontent.com/scl/fi/vqp3klbp7ii4io0bzt8pq/240119_test.JPG?rlkey=p2redrolq8klhrovdpk3c1wa5&amp;raw=1<span class="fa fa-external-link external-icon anchor-icon"></span></a></figcaption></figure>



<figure class="wp-block-image size-large is-resized"><a rel="noopener" target="_blank" href="https://www.dropbox.com/scl/fi/vqp3klbp7ii4io0bzt8pq/240119_test.JPG?rlkey=p2redrolq8klhrovdpk3c1wa5&amp;raw=1"><img decoding="async" src="https://www.dropbox.com/scl/fi/vqp3klbp7ii4io0bzt8pq/240119_test.JPG?rlkey=p2redrolq8klhrovdpk3c1wa5&amp;raw=1" alt="" style="aspect-ratio:1;width:840px;height:auto"/></a><figcaption class="wp-element-caption"><a rel="noopener" target="_blank" href="https://www.dropbox.com/scl/fi/vqp3klbp7ii4io0bzt8pq/240119_test.JPG?rlkey=p2redrolq8klhrovdpk3c1wa5&amp;raw=1">https://www.dropbox.com/scl/fi/vqp3klbp7ii4io0bzt8pq/240119_test.JPG?rlkey=p2redrolq8klhrovdpk3c1wa5&amp;raw=1<span class="fa fa-external-link external-icon anchor-icon"></span></a></figcaption></figure>
]]></content:encoded>
					
		
		<enclosure url="https://dl.dropboxusercontent.com/scl/fi/cw3iijw40y6thbop2310o/240117_-3.mp4?rlkey=g6mrd4yjfo81dyr9qioz49vai" length="0" type="video/mp4" />
<enclosure url="https://imakat.synology.me/wp-content/mmedia/2401221_Dropboxの動画をWordPressへ貼り付ける.mp4" length="476711955" type="video/mp4" />
<enclosure url="https://www.dropbox.com/scl/fi/oewlvtdcqeqp7d9w777t9/2401221_Dropbox-WordPress.mp4?rlkey=7mstp5fm6rgrtrgsvlun0vex5&#038;raw=1" length="0" type="video/mp4" />

		<post-id xmlns="com-wordpress:feed-additions:1">18942</post-id>	</item>
		<item>
		<title>【Mac】Vimeoの日本語自動生成を修正利用する。</title>
		<link>https://imakat.com/2023/11/18/18638/</link>
		
		<dc:creator><![CDATA[imakat]]></dc:creator>
		<pubDate>Sat, 18 Nov 2023 08:01:49 +0000</pubDate>
				<category><![CDATA[字幕作成]]></category>
		<category><![CDATA[デジタル]]></category>
		<category><![CDATA[ものづくり]]></category>
		<category><![CDATA[Mac]]></category>
		<category><![CDATA[vimeo]]></category>
		<category><![CDATA[Automator]]></category>
		<category><![CDATA[Appleスクリプト]]></category>
		<category><![CDATA[クイックアクション]]></category>
		<category><![CDATA[字幕生成]]></category>
		<category><![CDATA[文字起こし]]></category>
		<guid isPermaLink="false">https://imakat.com/?p=18638</guid>

					<description><![CDATA[私の場合、Vimeoの一番安いクラスPlusの会員、700円/月、250GBになっています。現在はもうPlusの募集は無く、新体系でStarterが登場し1,200円/月、2TBということになっています。Vimeoの有料 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<hr class="wp-block-separator has-text-color has-key-color-color has-alpha-channel-opacity has-key-color-background-color has-background is-style-wide"/>



<p class="wp-block-paragraph">私の場合、Vimeoの一番安いクラスPlusの会員、700円/月、250GBになっています。現在はもうPlusの募集は無く、<a rel="noopener" target="_blank" href="https://www.digital-farm.com/staffblog/13841">新体系<span class="fa fa-external-link external-icon anchor-icon"></span></a>でStarterが登場し1,200円/月、2TBということになっています。Vimeoの有料会員のサービスに、日本語字幕の自動生成が含まれるようになりました。これを使うのが経済的です。最近、自動生成される文字起こしも、使い物になってきていると感じます。このやり方の何がいいかというと、自分でテキストエディタなどで修正を行なって即反映できること。実は字幕データの修正は、つまり文字の移動や時刻の移動などは、アプリやWeb上で行うより、使い慣れたテキストエディタで行う方がラクです。Vimeoはそうした形での利用に向いています。例えばVimeoの自動字幕起こしを元に作った例は、こんな感じです。</p>



<p class="wp-block-paragraph"><a href="https://imakat.com/vm5/?movid=984143974" target="_blank">自動字幕起こしにvimeoを使った例_OBS~音声の設定 9分(動画&#x1f3a5;)</a></p>



<p class="wp-block-paragraph"><strong>字幕起こしについては、色々触ってみましたが、今一番コスパがいいと思うのは、Vimeoです</strong>。動画をアップロード→自動字幕起こし→srtをダウンロード→下記の文字修正→テキストエディタ上で文字直し→必要ならFinalCutProへ読み込んで尺の調整→完成アップロード、となります。<strong>Vimeoの翻訳レベルは割と高い、句読点、。が入っている点も好みです。</strong></p>



<p class="wp-block-paragraph">さらに、Vimeoは動画配信をそのまま、差し替え自由、広告なしでやってくれる点を忘れてはなりません。</p>



<p class="wp-block-paragraph">修正作業を効率化するフロー及びツールを作りましたので、以下にご紹介します。</p>



<h3 class="wp-block-heading">ポイント解説</h3>



<h4 class="wp-block-heading">１　<strong>Vimeoの日本語(自動生成）を利用しダウンロードします。</strong>ところが。</h4>



<figure class="wp-block-image size-large"><a href="https://imakat.com/rd.php?id=My3YekCk.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=My3YekCk.png" alt=""/></a></figure>



<p class="wp-block-paragraph">ところが、<strong>自動生成したものは、下のように、文字と文字の間に、不規則に、空白が入っており、このまま使いたくありません</strong>。それから、<strong>auto_generated_captions.vttとしてダウンロードされます。つまりvttファイルです。それと連番が０から始まっています。srtは連番は1から始まる必要があり、Final Cut Proで使うためには変換が必要になります</strong>。これも全体の流れを複雑にしている理由でもありますが。</p>



<figure class="wp-block-image size-large is-resized"><a href="https://imakat.com/rd.php?id=Cxl7plBd.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=Cxl7plBd.png" alt="" style="width:820px;height:auto"/></a><figcaption class="wp-element-caption">Vimeoで最初に自動生成されるvttファイル( auto_generated_captions.vtt )は、上のようにかなり低品質。これを活用するか、別の文字起こしアプリを使うか迷うところだが。。</figcaption></figure>



<h4 class="wp-block-heading">２　<strong>MacのAutomatorを使い、Appleスクリプトを</strong>記述します。</h4>



<p class="wp-block-paragraph"><strong>（１）文字と文字の空白を削除する。</strong></p>



<p class="wp-block-paragraph"><strong>（２）&#8221;&#8211;&gt;&#8221;の前後の空白も削除されてしまうので、&#8221; &#8211;&gt; &#8220;に置き換える。</strong></p>



<p class="wp-block-paragraph"><strong>（３）先頭行を&#8221;WEBVTT &#8220;だけにして、２行目に空白行を挿入する。</strong></p>



<p class="wp-block-paragraph" id="link1"><strong>&nbsp;<span class="marker">Vimeo修正用　Appleスクリプト</span></strong>：コピーしてご利用ください。</p>



<p class="wp-block-paragraph" id="link1">「 AppleScriptを実行」を挿入</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>on run {input, parameters}
	set filePath to POSIX path of input
	
	-- Remove all spaces from the file
	do shell script &quot;sed -i &#39;&#39; -e &#39;s/ //g&#39; &quot; & quoted form of filePath
	
	-- Ensure the arrow has spaces on both sides
	do shell script &quot;sed -i &#39;&#39; -e &#39;s/--&gt;/ --&gt; /g&#39; &quot; & quoted form of filePath
	
	-- Ensure the first line is exactly &quot;WEBVTT&quot;
	do shell script &quot;sed -i &#39;&#39; -e &#39;1s/.*/WEBVTT/&#39; &quot; & quoted form of filePath
	
	return input
end run</code></pre></div>



<h4 class="wp-block-heading">３　<strong>クイックアクションで、vttファイルを修正します。</strong></h4>



<p class="wp-block-paragraph">コピーしたvttファイルの上で右クリック→クイックアクション→vimeoのvttの修正、を起動します。</p>



<figure class="wp-block-image size-large"><a href="https://imakat.com/rd.php?id=7s89DUsN.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=7s89DUsN.png" alt=""/></a></figure>



<p class="wp-block-paragraph">すると、以下のように、修正されます。</p>



<figure class="wp-block-image size-large"><a href="https://imakat.com/rd.php?id=X8STQYLt.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=X8STQYLt.png" alt=""/></a></figure>



<p class="wp-block-paragraph">これを元に、テキストエディットで更に手直しを行い、vttファイルを完成します。それをvimeoの字幕へアップロードします。</p>



<p class="wp-block-paragraph">上記説明とは直接には関係ありませんが、この際、あると便利なものを作っておきます。</p>



<p class="wp-block-paragraph">vttからsrt生成、srtからvtt生成についても、あちこちで変換ツールが提供されていますが、Macとして一番使いやすいのは、Finderから対象ファイルの上で右クリックで操作できるのが一番ラクです。そのためのAppleスクリプトは以下です。ご利用ください。</p>



<figure class="wp-block-image size-large"><a href="https://imakat.com/rd.php?id=3efP5rvs.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=3efP5rvs.png" alt=""/></a></figure>



<p class="wp-block-paragraph" id="link2"><span class="marker"><strong>vttからsrt生成兼連番付け直しスクリプト</strong></span></p>



<p class="wp-block-paragraph">vttからsrtを作成するときは、連番が0からではなく、1から始まるようにする必要があります。vttファイル上で作業するときに、いくつかの文章行をまとめたり削除したりしますと、当然、連番は変わっていきます。連番の付け直しの作業も行います。つまり、このスクリプトは、vttからsrtを生成するときとsrtの内容を手直しして連番を正しくしたいときに使います。_renumbered.srtが新しくできます。<br>（１）「 AppleScriptを実行」を挿入</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>-- 手順１　内容を複製した新たなSRTファイルを作成する。
on run {input, parameters}
	set srtFilePath to POSIX path of (first item of input)
	
	-- 新しいファイル名を作成
	set fileName to do shell script &quot;basename &quot; & quoted form of srtFilePath
	set baseName to text 1 thru ((offset of &quot;.&quot; in fileName) - 1) of fileName
	set newFileName to baseName & &quot;_renumbered.srt&quot;
	set newFilePath to (text 1 thru -((count fileName) + 1) of srtFilePath) & newFileName
	
	-- ファイルをコピーして新しいファイルを作成する
	do shell script &quot;cp &quot; & quoted form of srtFilePath & &quot; &quot; & quoted form of newFilePath
	
	-- 次の処理に新しいファイルのパスを渡す
	return {newFilePath}
end run</code></pre></div>



<p class="wp-block-paragraph">（２）「 AppleScriptを実行」を挿入</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>-- 手順２　新しいSRTファイルの内容を更新する。
on run {input, parameters}
	set newFilePath to POSIX path of (first item of input)
	
	-- SRTファイルの内容を読み込む
	set fileContent to read newFilePath as «class utf8»
	set fileLines to paragraphs of fileContent
	
	-- 新しい内容を生成
	set newContent to &quot;&quot;
	set counter to 1
	set lineCount to count of fileLines
	
	repeat with i from 1 to lineCount
		if (item i of fileLines) contains &quot;--&gt;&quot; then
			-- 連番を追加
			set newContent to newContent & (counter as string) & linefeed
			-- 時刻行
			set newContent to newContent & (item i of fileLines) & linefeed
			-- 文章情報行
			if i + 1 ≤ lineCount then
				set newContent to newContent & (item (i + 1) of fileLines) & linefeed
			end if
			-- 空白行
			set newContent to newContent & linefeed
			-- 連番カウンターを増加
			set counter to counter + 1
		end if
	end repeat
	
	-- ファイルに新しい内容を書き込む
	set fileHandle to open for access newFilePath with write permission
	set eof of fileHandle to 0
	write newContent to fileHandle as «class utf8»
	close access fileHandle
	
	return input
end run</code></pre></div>



<p class="wp-block-paragraph" id="link3"><strong><span class="marker">srtからvtt生成用Appleスクリプト</span></strong></p>



<p class="wp-block-paragraph">（１）「 AppleScriptを実行」を挿入</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>-- 手順１　内容を複製した新たなvttファイルを作成する。
on run {input, parameters}
	set srtFilePath to POSIX path of input
	
	-- 拡張子をVTTに置き換える
	set newFilePath to replaceExtension(srtFilePath, &quot;vtt&quot;)
	
	-- ファイル名を作成する
	set fileName to do shell script &quot;basename &quot; & quoted form of srtFilePath
	set baseName to text 1 thru ((offset of &quot;.&quot; in fileName) - 1) of fileName
	set newFileName to baseName & &quot;.vtt&quot;
	
	-- 新しいファイルのパスを生成する
	set newFilePath to (text 1 thru -((count fileName) + 1) of srtFilePath) & newFileName
	
	-- ファイルをコピーして新しいファイルを作成する
	do shell script &quot;cp &quot; & quoted form of srtFilePath & &quot; &quot; & quoted form of newFilePath
	
	-- 手順２に新しいファイルのパスを渡す
	return {newFilePath}
end run

-- 拡張子を置き換える補助関数
on replaceExtension(filePath, newExtension)
	set AppleScript&#39;s text item delimiters to &quot;.&quot;
	set pathItems to text items of filePath
	set lastItem to last item of pathItems
	set last item of pathItems to newExtension
	set AppleScript&#39;s text item delimiters to &quot;.&quot;
	set newPath to pathItems as text
	return newPath
end replaceExtension</code></pre></div>



<p class="wp-block-paragraph">（２）「 AppleScriptを実行」を挿入</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>-- 手順２   次に、手順１で新たに作ったVTTファイルに対して、
-- (1) 先頭行に文字列&quot;WEBVTT&quot;を含む行を挿入する。
-- (2) 2行目に空白の行を挿入する。
-- (3) 3行目以降から、読み込んだデータを書き込む。
-- (4) &quot;--&gt;&quot; がある行は、行の中の&quot;,&quot;を&quot;.&quot;に置き換える。

on run {input, parameters}
	set newFilePath to POSIX path of (first item of input)
	
	-- ファイル内容を読み込む
	set fileContent to read newFilePath as «class utf8»
	set fileLines to paragraphs of fileContent
	
	set newContent to &quot;WEBVTT&quot; & linefeed & linefeed
	
	-- 条件に基づいてファイル内容を更新
	repeat with i from 1 to count fileLines
		set lineText to item i of fileLines
		
		if i &gt; 1 then -- 読み込みデータの2行目以降
			if lineText contains &quot;--&gt;&quot; then -- (4)
				set lineText to textReplace(lineText, &quot;,&quot;, &quot;.&quot;)
			end if
		end if
		
		set newContent to newContent & lineText & linefeed
	end repeat
	
	-- ファイルに新しい内容を書き込む
	set fileHandle to open for access newFilePath with write permission
	set eof of fileHandle to 0
	write newContent to fileHandle as «class utf8»
	close access fileHandle
	
	return input
end run

-- 文字列中の特定の文字を置き換える
on textReplace(inputText, findText, replaceText)
	set AppleScript&#39;s text item delimiters to findText
	set textItems to text items of inputText
	set AppleScript&#39;s text item delimiters to replaceText
	set newText to textItems as text
	set AppleScript&#39;s text item delimiters to &quot;&quot;
	return newText
end textReplace</code></pre></div>



<h4 class="wp-block-heading">４　まとめ</h4>



<p class="wp-block-paragraph">補足しますが、Vimeoの<a href="https://imakat.com/rd.php?id=2ql7TIgX.png" target="_blank">自動生成は音声がある場合、作動します</a>。</p>



<p class="wp-block-paragraph">Vimeoの自動生成を使うのは、動画の尺は変えない段階まで来てから、字幕だけ付けるという場合、有効でしょう。あるいはもしFinal Cut Proで動画編集をしているなら、Final Cut Proの字幕ファイル読み込みはsrtファイルだけなので、<a href="https://imakat.com/rd.php?id=58JfqRXw.png" target="_blank">先に述べてきた通りAppleスクリプトでvtt→srtを生成して、srtを読み込みFinal Cut Proで編集する方法があります。</a></p>



<p class="wp-block-paragraph">字幕起こしアプリVrewも、Filmoraも代替方法とします。</p>



<p class="wp-block-paragraph">ただ、Vimeoの自動生成をテキストエディタで修正したものを、srtとvttを変換しながらFinal Cut Proで修正するのが、そこそこ分かりやすい方法ですが、いかんせん、何回も変換するのは面倒。</p>



<h4 class="wp-block-heading"><span class="marker">使い慣れたテキストエディタが、一番使いやすい！</span></h4>



<p class="wp-block-paragraph">さて、説明してきたように、Vimeoの自動生成ファイルはvttファイルです。それを手直ししながら全部済むなら一番ラクです。</p>



<p class="wp-block-paragraph">誰にでも操作できるツールは、Windows、Mac問わず、<strong>テキストエディタ</strong>です。正直言って、字幕起こしアプリの中で、文字を直したり、移動したり、時刻を変更する作業は、どれを使ったとしても、私には、更新に不安定さを感じますし、作業方法があれこれ変えられてしまうアプリ会社の都合も入ってきます。ところが、テキストエディタは、昔から殆ど変わりません。メニューバーも１行程度しかありません。ですから、やることは、</p>



<p class="wp-block-paragraph"><strong>「Vimeo他の自動字幕起こしを行ったら、すぐに自分のテキストエディタへダウンロードをする。<br>動画を適当なプレーヤーで表示しながら、各字幕の開始時刻、終了時刻、文字の修正を、テキストエディタへ直接書き込む。」</strong></p>



<p class="wp-block-paragraph">以上のことだけで十分です。</p>



<p class="wp-block-paragraph">さらにあると便利だと感じるのは、<strong>「時刻情報をxxx分xxx秒(いやxxx秒だけの方がわかりやすいかも)、だけズラせ」というスクリプトを動作できるようにすれば、それはさらに便利でしょう。</strong>この改善（<a rel="noopener" target="_blank" href="https://docs.google.com/document/d/1j5edxQOuu99Azs1aguE9Httft3EvzNb8KVNsOuLsgfg/edit?usp=sharing">スクリプトは完成しています。<span class="fa fa-external-link external-icon anchor-icon"></span></a>）は後日、ブログで投稿したいと思います。</p>



<p class="wp-block-paragraph">結論的に言うならば、</p>



<p class="wp-block-paragraph">簡単な字幕の修正なら、vttファイルのままで、時刻ずらしスクリプトなどを使ってテキストエディタで処理する、複雑な修正なら、連番の付け直しをしてsrtファイルに変換して、Final Cut Proに読み込んで、動画との紐付きを視覚的に確認しながら処理する、と言うことになります。</p>



<p class="wp-block-paragraph"></p>



<p class="wp-block-paragraph">器材記録：</p>



<p class="wp-block-paragraph">Vimeo(PLUS会員)<br>Automator<br>テキストエディット<br>Mac mini M2 Ventura<br>BGM:オリジナル音楽</p>



<p class="wp-block-paragraph">以上です。</p>
]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">18638</post-id>	</item>
		<item>
		<title>Mac OBSの日時表示の珍現象</title>
		<link>https://imakat.com/2023/09/21/18109/</link>
		
		<dc:creator><![CDATA[imakat]]></dc:creator>
		<pubDate>Thu, 21 Sep 2023 07:47:05 +0000</pubDate>
				<category><![CDATA[デジタル]]></category>
		<category><![CDATA[ものづくり]]></category>
		<category><![CDATA[vimeo]]></category>
		<category><![CDATA[スティーブ・ジョブズ]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[iPad]]></category>
		<category><![CDATA[OBS]]></category>
		<guid isPermaLink="false">https://imakat.com/?p=18109</guid>

					<description><![CDATA[上のビデオをご覧ください。 何ぞやムー的、オカルト的な雰囲気を醸し出していますが、それほどでもない、気楽な内容です。 今回は、ちょっと変わった話題、珍現象を紹介します。 Macで、OBSという動画の配信録画アプリを、ぼち [&#8230;]]]></description>
										<content:encoded><![CDATA[
<hr class="wp-block-separator has-text-color has-key-color-color has-alpha-channel-opacity has-key-color-background-color has-background is-style-wide"/>


<div class="sc-dynamic-embed">
  <style>
  /* リンクの見た目を整える */
  .sc-dynamic-embed .sc-link-container { 
      display: flex; 
      margin-bottom: 10px; 
      flex-wrap: wrap; 
      align-items: center; 
  }
  .sc-dynamic-embed .sc-link { margin-bottom: 0; }
  .sc-dynamic-embed .sc-link a {
    font-size: 15px; 
    font-weight: normal;
    text-decoration: underline;
    color: #0073aa;
  }
  .sc-dynamic-embed .sc-link a:hover { text-decoration: none; color: #000; }
  
  @media (max-width: 500px) {
    .sc-dynamic-embed .sc-link a { font-size: 13px; }
  }

  .sc-dynamic-embed .imk-line {
      display: inline-block;
      width: 100%;
      border-radius: 2px;
      transition: background-color 0.1s;
  }

  .sc-dynamic-embed #subtitleOverlay,
  .sc-dynamic-embed #scSubtitleOverlay,
  .sc-dynamic-embed .overlay-cue,
  .sc-dynamic-embed .band {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
  }
  </style>

  <div class="sc-link-container">
    <p class="sc-link">
      <a href="https://imakat.com/ds62/?drid=97" target="_blank"
         onclick="return scStopAndGo(event, this);">
        👉低画質・枠外字幕はこちら
      </a>
    </p>
  </div>

  <style>
            :root{ --dr5emd-max: 1920px; }
            #subtitleOverlay, #scSubtitleOverlay, .overlay-cue, .band { display: none !important; opacity: 0 !important; }
            .imk-line { display: inline-block; width: 100%; border-radius: 2px; transition: background-color 0.1s; }
            .dr5emd-sublist details > p{ height:200px; overflow:auto; background-color:#EDF7FF; padding:2px 6px; margin:0; box-shadow:3px 3px 4px black; position: relative; }
            .dr5emd-sublist details > summary{ padding:2px 6px; width:100%; background-color:#ddd; border:none; box-shadow:3px 3px 4px black; cursor:pointer; list-style:none; }
            
                .video-wrap{position:relative;width:100%;margin:0 auto}
                #myVideo{width:100%;height:auto;min-height:200px;display:block;background:#000;}</style><div class="dr5emd-container"><div class="video-wrap"><video id="myVideo" controls poster="https://imakat.com/rd.php?id=YYla4mCm.png" playsinline preload="none" style="width:100%;height:auto;">  <source src="https://imakat.com/rd.php?id=XUx2OaaK.mp4" type="video/mp4"></video></div></div>            <script>
            document.addEventListener("DOMContentLoaded", function(){
                var video = document.getElementById("myVideo");
                if(!video) return;

                            });
            </script>
            

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

    function protectVideo() {
      var target = wrapper ? wrapper : document;
      var mediaEls = target.querySelectorAll('video, audio');
      mediaEls.forEach(function(v){
        if(v.dataset.protected === 'true') return;
        v.dataset.protected = 'true';
        v.setAttribute('controlsList', 'nodownload');
        v.oncontextmenu = function() { return false; };
        v.addEventListener('contextmenu', function(e){ e.preventDefault(); return false; }, false);
      });
    }

    function initSubtitles() {
      var target = wrapper ? wrapper : document;
      var video = target.querySelector('video, audio');
      var listContainer = target.querySelector('details > p');
      
      if (!video) return false; 
      
      if (video.dataset.subInit === 'true') return true; 
      video.dataset.subInit = 'true';

      var oldOverlay = target.querySelector('#subtitleOverlay') || target.querySelector('#scSubtitleOverlay');
      if (oldOverlay) {
          oldOverlay.style.setProperty('display', 'none', 'important');
          oldOverlay.innerHTML = ''; 
      }

      function isSpecialMode() {
        var isFs = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
        var isPiP = !!(document.pictureInPictureElement && document.pictureInPictureElement === video) || (video.webkitPresentationMode === "picture-in-picture");
        var isIOSFs = !!video.webkitDisplayingFullscreen; 
        return isFs || isPiP || isIOSFs;
      }

      // 初期状態のセット（リストがなければ最初から showing に）
      try {
        if(video.textTracks && video.textTracks.length > 0){
          for(var i=0; i<video.textTracks.length; i++){
             if(video.textTracks[i].kind === 'subtitles' || video.textTracks[i].kind === 'captions'){
                 video.textTracks[i].mode = (!listContainer) ? "showing" : "hidden";
             }
          }
        }
      } catch(e){}

      // 字幕一覧が存在する場合のみ、リストのフォーマット処理を行う
      if (listContainer) {
          var detailsEl = target.querySelector("details");
          if (detailsEl) {
              detailsEl.open = true; 
              var summaryEl = detailsEl.querySelector("summary");
              if (summaryEl) summaryEl.textContent = "字幕(シーン)はここをクリック";
          }

          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";
          }

          var rootSublist = target.querySelector(".dr5-sublist") || listContainer.parentElement;
          if (rootSublist) {
            rootSublist.addEventListener("click", function(e){
              var a = e.target.closest && e.target.closest("a.imk-cue[data-seek]");
              if(!a) return;
              e.preventDefault();
              var ts = a.getAttribute("data-seek");
              if(!ts) return;
              var p = ts.trim().split(":").map(function(x){return parseInt(x,10)||0;});
              var sec = (p.length===2) ? p[0]*60+p[1] : (p.length===3 ? p[0]*3600+p[1]*60+p[2] : null);
              if(sec==null) return;
              try{ video.currentTime = sec; if(video.paused) video.play(); }catch(_){}
            });
          }
      }

      // ★ dr52.php と全く同じ「常時監視」のロジック
      // これにより、Safariが読み込み遅延を起こしても確実にONになります
      video.addEventListener("timeupdate", function(){
        var hasList = (listContainer !== null);
        var desiredMode = (isSpecialMode() || !hasList) ? "showing" : "hidden";
        
        try {
            if(video.textTracks && video.textTracks.length > 0){
                for(var i=0; i<video.textTracks.length; i++){
                    if((video.textTracks[i].kind === 'subtitles' || video.textTracks[i].kind === 'captions') && video.textTracks[i].mode !== desiredMode) {
                        video.textTracks[i].mode = desiredMode;
                    }
                }
            }
        } catch(e){}

        // リストがない場合はこれ以降のハイライト処理をスキップ
        if (!hasList) return;

        var cues = listContainer.querySelectorAll("a.imk-cue");
        if(cues.length === 0) return;
        var cur = video.currentTime;
        var activeA = null;

        for(var i=0; i<cues.length; i++){
            var ts = cues[i].getAttribute("data-seek");
            if(!ts) continue;
            var p = ts.trim().split(":").map(function(x){return parseInt(x,10)||0;});
            var t = (p.length===2) ? p[0]*60+p[1] : (p.length===3 ? p[0]*3600+p[1]*60+p[2] : null);
            if(t !== null && cur >= t - 0.5){ activeA = cues[i]; } 
            else if(t > cur){ 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" });
            }
        }
      });

      return true;
    }

    var checks = 0;
    var checkTimer = setInterval(function(){
      protectVideo();
      var success = initSubtitles();
      checks++;
      if (success || checks > 20) { 
        clearInterval(checkTimer);
      }
    }, 500); 

    if (!window.scStopAndGo) {
      window.scStopAndGo = function(event, link){
        try{
          var mediaEls = document.querySelectorAll('video, audio');
          mediaEls.forEach(function(m){
            try{
              if (!m.paused) m.pause();
              if (document.pictureInPictureElement === m && document.exitPictureInPicture) {
                document.exitPictureInPicture().catch(function(){});
              }
            }catch(e){}
          });
        }finally{
          event.preventDefault();
          setTimeout(function(){
            if (link.target === '_blank') {
              window.open(link.href, '_blank');
            } else {
              window.location.href = link.href;
            }
          }, 50);
        }
        return false;
      };
    }
  })();
  </script>
</div>



<hr class="wp-block-separator has-text-color has-key-color-color has-alpha-channel-opacity has-key-color-background-color has-background is-style-dots"/>



<p class="wp-block-paragraph">上のビデオをご覧ください。</p>



<p class="wp-block-paragraph">何ぞやムー的、オカルト的な雰囲気を醸し出していますが、それほどでもない、気楽な内容です。</p>



<p class="wp-block-paragraph">今回は、ちょっと変わった話題、珍現象を紹介します。</p>



<p class="wp-block-paragraph">Macで、OBSという動画の配信録画アプリを、ぼちぼちと使っています。録画録音の目的で使うつもりです。OBSのスクリーンの左側にiPadの画面、右下にiPhoneの画面をミラーリングしています。iPad、iPhoneとMacの接続は、安定させるために、無線ではなくUSBケーブルで行っています。</p>



<figure class="wp-block-image size-large"><a href="https://imakat.com/rd.php?id=blJOpG0m.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=blJOpG0m.png" alt=""/></a><figcaption class="wp-element-caption">Macの画面：OBSアプリの中に、iPad、iPhone、Webカメラ、メディアソースがあり、デスクトップ音声に、音楽制作アプリ、他音楽再生アプリがある。</figcaption></figure>



<p class="wp-block-paragraph">動画を目にして、カンの良い方ですと、すぐに気づかれたかも知れませんが、iPad、iPhoneの日時表示が、既に数分経っているのに、9:41のまま動いていない。変だなと。</p>



<p class="wp-block-paragraph">「1月9日火曜日9:41」となっていますが、現日付は全然違うのですね。この動画を撮影しているのは、9月21日木曜日です。</p>



<p class="wp-block-paragraph">OBSに表示された日時と、iPad本体、iPhone本体に表示された日時が違うのか、確認したら、本体側の日時も「1月9日火曜日9:41」で一致していました。</p>



<p class="wp-block-paragraph">ただし、この日付時刻の表示部分は、私が動画作成するときに特に弊害にはならないので、ほっといて問題ないとは思います。</p>



<p class="wp-block-paragraph">ただ、来年2024年の1月9日は火曜日。何か気になるな。</p>



<p class="wp-block-paragraph">そこでアップル社に、問い合わせをしました。</p>



<p class="wp-block-paragraph">最初、聞いたことのない現象だとコメントされた後、すぐに、</p>



<p class="wp-block-paragraph">「2007年の1月9日火曜日９:41は、<strong><span class="marker">スティーブ・ジョブズが初代iPhoneを発表した記念すべき日時</span></strong>です。」と説明されました。OBS側でデバイスから得た情報を表示しているということで、それ以上のことは分からないとのことでした。（<a rel="noopener" target="_blank" href="https://iphone-mania.jp/news-271399/" data-type="link" data-id="https://iphone-mania.jp/news-271399/">初代iPhone発表を語る記事<span class="fa fa-external-link external-icon anchor-icon"></span></a>）</p>



<p class="wp-block-paragraph">アップル社が掌握しているようなハッキングやウイルスとは違うようですので、アップル社らしい遊び心だと、気持ちが愉快になりました。</p>



<p class="wp-block-paragraph">iPad,iPhoneのUSBケーブルを外すと、すぐに、正しい日付時刻表示に戻りますので、外した後、iPad,iPhoneはふだん通り問題なく使用できます。</p>



<p class="wp-block-paragraph">そもそもは、MacのOBSにおける複数デバイスの扱い、複数音声トラックの設定についてのブログを書こうとしていましたが、面白いものを発見してしまい、寄り道の記事となりました。</p>



<p class="wp-block-paragraph">あと、いずれ書きたいと思いますが、私は、MacかWindowsのどちらかを使うのではなく、MacもWindowsも使うです。制作関係はMac、事務処理はWindowsですね。また、まだまだWindowsでしか使えない、Windowsの方が快適なサービスもあります。</p>



<p class="wp-block-paragraph">以上です。</p>
]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">18109</post-id>	</item>
		<item>
		<title>Synology NASのHDD「お下がり」交換リレー</title>
		<link>https://imakat.com/2023/09/05/17965/</link>
		
		<dc:creator><![CDATA[imakat]]></dc:creator>
		<pubDate>Tue, 05 Sep 2023 11:41:07 +0000</pubDate>
				<category><![CDATA[デジタル]]></category>
		<category><![CDATA[ものづくり]]></category>
		<category><![CDATA[SHR]]></category>
		<category><![CDATA[ホットスワップ]]></category>
		<category><![CDATA[データの大容量化]]></category>
		<category><![CDATA[クラウド]]></category>
		<category><![CDATA[vimeo]]></category>
		<category><![CDATA[FinalCutPro]]></category>
		<category><![CDATA[Synology]]></category>
		<category><![CDATA[NAS]]></category>
		<category><![CDATA[DS218+]]></category>
		<category><![CDATA[DS220+]]></category>
		<category><![CDATA[Alxum]]></category>
		<guid isPermaLink="false">https://imakat.com/?p=17965</guid>

					<description><![CDATA[2025.7.9追記：SynologyがサードパーティのHDDを使用不可にする打ち出しについては、検証をクリアしたベンダーについては、互換性リストに追加して使用可能にするとのことです。Western Digital、Se [&#8230;]]]></description>
										<content:encoded><![CDATA[
<hr class="wp-block-separator has-text-color has-key-color-color has-alpha-channel-opacity has-key-color-background-color has-background is-style-wide"/>



<p class="wp-block-paragraph">2025.7.9追記：SynologyがサードパーティのHDDを使用不可にする打ち出しについては、検証をクリアしたベンダーについては、互換性リストに追加して使用可能にするとのことです。Western Digital、Seagate、東芝は追加されることはほぼ確実のようです(<a rel="noopener" target="_blank" href="https://gigazine.net/news/20250623-synology-nas-storage/">記事<span class="fa fa-external-link external-icon anchor-icon"></span></a>)。</p>



<p class="wp-block-paragraph">2024.9.追記：SATAスタンドは、ミラーリングを行うようにしました。</p>


<div class="sc-dynamic-embed">
  <style>
  /* リンクの見た目を整える */
  .sc-dynamic-embed .sc-link-container { 
      display: flex; 
      margin-bottom: 10px; 
      flex-wrap: wrap; 
      align-items: center; 
  }
  .sc-dynamic-embed .sc-link { margin-bottom: 0; }
  .sc-dynamic-embed .sc-link a {
    font-size: 15px; 
    font-weight: normal;
    text-decoration: underline;
    color: #0073aa;
  }
  .sc-dynamic-embed .sc-link a:hover { text-decoration: none; color: #000; }
  
  @media (max-width: 500px) {
    .sc-dynamic-embed .sc-link a { font-size: 13px; }
  }

  .sc-dynamic-embed .imk-line {
      display: inline-block;
      width: 100%;
      border-radius: 2px;
      transition: background-color 0.1s;
  }

  .sc-dynamic-embed #subtitleOverlay,
  .sc-dynamic-embed #scSubtitleOverlay,
  .sc-dynamic-embed .overlay-cue,
  .sc-dynamic-embed .band {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
  }
  </style>

  <div class="sc-link-container">
    <p class="sc-link">
      <a href="https://imakat.com/ds62/?drid=28" target="_blank"
         onclick="return scStopAndGo(event, this);">
        👉低画質・枠外字幕はこちら
      </a>
    </p>
  </div>

  <style>
            :root{ --dr5emd-max: 1920px; }
            #subtitleOverlay, #scSubtitleOverlay, .overlay-cue, .band { display: none !important; opacity: 0 !important; }
            .imk-line { display: inline-block; width: 100%; border-radius: 2px; transition: background-color 0.1s; }
            .dr5emd-sublist details > p{ height:200px; overflow:auto; background-color:#EDF7FF; padding:2px 6px; margin:0; box-shadow:3px 3px 4px black; position: relative; }
            .dr5emd-sublist details > summary{ padding:2px 6px; width:100%; background-color:#ddd; border:none; box-shadow:3px 3px 4px black; cursor:pointer; list-style:none; }
            
                .video-wrap{position:relative;width:100%;margin:0 auto}
                #myVideo{width:100%;height:auto;min-height:200px;display:block;background:#000;}</style><div class="dr5emd-container"><div class="video-wrap"><video id="myVideo" controls poster="https://imakat.com/rd.php?id=AWGsA7WG.png" playsinline preload="none" style="width:100%;height:auto;">  <source src="https://imakat.com/rd.php?id=WLISfxH7.mp4" type="video/mp4">  <track src="https://imakat.com/rd.php?id=QBzEiJtv.vtt" label="日本語" srclang="ja" kind="subtitles"></video></div><div class="dr5emd-sublist"><details translate="yes"><summary translate="yes">字幕一覧(クリック)</summary> <p translate="yes">
(<a href="#" class="imk-cue" data-seek="0:00" translate="no">00:00:00</a>)  Synology NAS HDD「お下がり」交換リレー<br>
(<a href="#" class="imk-cue" data-seek="0:11" translate="no">00:00:11</a>)  これが自宅にあるNASとWebサーバーです。<br>
(<a href="#" class="imk-cue" data-seek="0:23" translate="no">00:00:23</a>)  DS220+ですけどね、最近容量不足ということで困ってました。<br>
(<a href="#" class="imk-cue" data-seek="0:30" translate="no">00:00:30</a>)  そこで大容量に変えることにしました。<br>
(<a href="#" class="imk-cue" data-seek="0:34" translate="no">00:00:34</a>)  ストレージマネージャーにこういう警告が出ています。<br>
(<a href="#" class="imk-cue" data-seek="0:39" translate="no">00:00:39</a>)  二巡すると全部が入れ替わるようになります。<br>
(<a href="#" class="imk-cue" data-seek="0:46" translate="no">00:00:46</a>)  事前にハードディスクとSATAスタンドを買っておきました。<br>
(<a href="#" class="imk-cue" data-seek="0:53" translate="no">00:00:53</a>)  それでは作業を具体的に見ていきましょう。NASの蓋を外します。<br>
(<a href="#" class="imk-cue" data-seek="1:04" translate="no">00:01:04</a>)  ディスク1とディスク2がありますが、同じ容量なんで2から抜くことにします。<br>
(<a href="#" class="imk-cue" data-seek="1:14" translate="no">00:01:14</a>)  引き抜きます。<br>
(<a href="#" class="imk-cue" data-seek="1:21" translate="no">00:01:21</a>)  Seagateの6TBです。<br>
(<a href="#" class="imk-cue" data-seek="1:39" translate="no">00:01:39</a>)  引き抜いたあと警告音が鳴ります。<br>
(<a href="#" class="imk-cue" data-seek="1:51" translate="no">00:01:51</a>)  右側が今外した6TBです。左が12TBの新品です。<br>
(<a href="#" class="imk-cue" data-seek="2:05" translate="no">00:02:05</a>)  ハードディスク取り付けパーツを付け替えます。<br>
(<a href="#" class="imk-cue" data-seek="2:21" translate="no">00:02:21</a>)  まあ滅多にやらない作業なんで手際が悪いです。<br>
(<a href="#" class="imk-cue" data-seek="2:45" translate="no">00:02:45</a>)  12TBの方にはめます。<br>
(<a href="#" class="imk-cue" data-seek="3:42" translate="no">00:03:42</a>)  やっとできました。私が不器用なだけです。誰でも簡単にできます。<br>
(<a href="#" class="imk-cue" data-seek="3:58" translate="no">00:03:58</a>)  差し込みます。<br>
(<a href="#" class="imk-cue" data-seek="4:30" translate="no">00:04:30</a>)  ディスク2のライトが点灯しました。装着まではOKです。<br>
(<a href="#" class="imk-cue" data-seek="4:39" translate="no">00:04:39</a>)  「劣化」と表示されています。新しいドライブを装着済みなので、今すぐ修復をクリックします。<br>
(<a href="#" class="imk-cue" data-seek="4:54" translate="no">00:04:54</a>)  修復中となります。最初に初期化されます。<br>
(<a href="#" class="imk-cue" data-seek="5:03" translate="no">00:05:03</a>)  それでは3番目の作業で、Webサーバーの3TBの入れ替えをします。<br>
(<a href="#" class="imk-cue" data-seek="5:25" translate="no">00:05:25</a>)  Webサーバーの蓋を外します。<br>
(<a href="#" class="imk-cue" data-seek="5:31" translate="no">00:05:31</a>)  ここにディスク1とディスク2があります。同じ容量なのでどちらから抜いても構いません。<br>
(<a href="#" class="imk-cue" data-seek="5:40" translate="no">00:05:40</a>)  2から抜いてみます。<br>
(<a href="#" class="imk-cue" data-seek="5:53" translate="no">00:05:53</a>)  ホットスワップ機能がついているもんですから、ハードディスクを抜いてもサーバーは中断しないです。そのまま動作します。<br>
(<a href="#" class="imk-cue" data-seek="6:18" translate="no">00:06:18</a>)  ハードディスク取り付けパーツを、お下がりの6TBへ付け替えます。<br>
(<a href="#" class="imk-cue" data-seek="6:38" translate="no">00:06:38</a>)  どうも不器用です。<br>
(<a href="#" class="imk-cue" data-seek="7:01" translate="no">00:07:01</a>)  6TBの方へ付けます。<br>
(<a href="#" class="imk-cue" data-seek="7:11" translate="no">00:07:11</a>)  どうも手元の小さいものがよく見えなくなってきてますね、年のせいで。<br>
(<a href="#" class="imk-cue" data-seek="8:06" translate="no">00:08:06</a>)  はい、できました。<br>
(<a href="#" class="imk-cue" data-seek="8:23" translate="no">00:08:23</a>)  6TBを差し込みます。<br>
(<a href="#" class="imk-cue" data-seek="8:47" translate="no">00:08:47</a>)  ディスク2が点灯しました。<br>
(<a href="#" class="imk-cue" data-seek="8:57" translate="no">00:08:57</a>)  お下がりの6TBは差し込み済みなので、今すぐ修復を選びます。<br>
(<a href="#" class="imk-cue" data-seek="9:06" translate="no">00:09:06</a>)  ディスク2を選びます。<br>
(<a href="#" class="imk-cue" data-seek="9:13" translate="no">00:09:13</a>)  お下がりなのでデータは入ってるんですね。まあ消していいか聞いてきますので、「いいえ」ではなく「はい」を選びます。<br>
(<a href="#" class="imk-cue" data-seek="9:33" translate="no">00:09:33</a>)  修復中になります。<br>
(<a href="#" class="imk-cue" data-seek="9:41" translate="no">00:09:41</a>)  一巡目の最後の作業ですね。お下がりの3TBをSATAスタンドに取り付けます。<br>
(<a href="#" class="imk-cue" data-seek="9:55" translate="no">00:09:55</a>)  私が買ったのはAlxumというスタンドです。<br>
(<a href="#" class="imk-cue" data-seek="10:20" translate="no">00:10:20</a>)  それではAのソケットに差し込みます。<br>
(<a href="#" class="imk-cue" data-seek="11:06" translate="no">00:11:06</a>)  Bも空いています。<br>
(<a href="#" class="imk-cue" data-seek="11:23" translate="no">00:11:23</a>)  まあ、硬いですな。<br>
(<a href="#" class="imk-cue" data-seek="11:33" translate="no">00:11:33</a>)  SATAスタンドのハードディスクはexFATでフォーマットします。<br>
(<a href="#" class="imk-cue" data-seek="11:41" translate="no">00:11:41</a>)  これで一巡目は終わりですけど、NASサーバー、Webサーバーともに修復順調に進んでます。<br>
(<a href="#" class="imk-cue" data-seek="11:53" translate="no">00:11:53</a>)  TimeMachineの設定については割愛しますね。<br>
(<a href="#" class="imk-cue" data-seek="11:58" translate="no">00:11:58</a>)  まあちょっと気分転換です。<br>
(<a href="#" class="imk-cue" data-seek="12:04" translate="no">00:12:04</a>)  家の近くにですね、タヌキが出ていました。<br>
(<a href="#" class="imk-cue" data-seek="12:10" translate="no">00:12:10</a>)  まあ本当に犬ですね。犬そっくりです。走り方も犬。<br>
(<a href="#" class="imk-cue" data-seek="12:20" translate="no">00:12:20</a>)  二巡目ですけど、やることは一巡目と同じです。<br>
(<a href="#" class="imk-cue" data-seek="12:29" translate="no">00:12:29</a>)  もう結果からお見せします。SATAスタンドに2個のハードディスクが刺さってます。<br>
(<a href="#" class="imk-cue" data-seek="12:43" translate="no">00:12:43</a>)  最後にマネージャーを確認しますと、NAS、Webサーバーともに修復中、進んでます。<br>
(<a href="#" class="imk-cue" data-seek="12:53" translate="no">00:12:53</a>)  以上ですね、一通りハードディスク交換リレー終わりました。ありがとうございます。<br>
</p> </details>
<style>
details { font: 16px "Open Sans", Calibri, sans-serif; width: 100%; }
details > summary { padding: 2px 6px; width: 100%; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; }
details > p { font: 14px "Open Sans", Calibri, sans-serif; height:150px; overflow: scroll; background-color: #EDF7FF; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; }
</style>
</div></div>            <script>
            document.addEventListener("DOMContentLoaded", function(){
                var video = document.getElementById("myVideo");
                if(!video) return;

                            });
            </script>
            

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

    function protectVideo() {
      var target = wrapper ? wrapper : document;
      var mediaEls = target.querySelectorAll('video, audio');
      mediaEls.forEach(function(v){
        if(v.dataset.protected === 'true') return;
        v.dataset.protected = 'true';
        v.setAttribute('controlsList', 'nodownload');
        v.oncontextmenu = function() { return false; };
        v.addEventListener('contextmenu', function(e){ e.preventDefault(); return false; }, false);
      });
    }

    function initSubtitles() {
      var target = wrapper ? wrapper : document;
      var video = target.querySelector('video, audio');
      var listContainer = target.querySelector('details > p');
      
      if (!video) return false; 
      
      if (video.dataset.subInit === 'true') return true; 
      video.dataset.subInit = 'true';

      var oldOverlay = target.querySelector('#subtitleOverlay') || target.querySelector('#scSubtitleOverlay');
      if (oldOverlay) {
          oldOverlay.style.setProperty('display', 'none', 'important');
          oldOverlay.innerHTML = ''; 
      }

      function isSpecialMode() {
        var isFs = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
        var isPiP = !!(document.pictureInPictureElement && document.pictureInPictureElement === video) || (video.webkitPresentationMode === "picture-in-picture");
        var isIOSFs = !!video.webkitDisplayingFullscreen; 
        return isFs || isPiP || isIOSFs;
      }

      // 初期状態のセット（リストがなければ最初から showing に）
      try {
        if(video.textTracks && video.textTracks.length > 0){
          for(var i=0; i<video.textTracks.length; i++){
             if(video.textTracks[i].kind === 'subtitles' || video.textTracks[i].kind === 'captions'){
                 video.textTracks[i].mode = (!listContainer) ? "showing" : "hidden";
             }
          }
        }
      } catch(e){}

      // 字幕一覧が存在する場合のみ、リストのフォーマット処理を行う
      if (listContainer) {
          var detailsEl = target.querySelector("details");
          if (detailsEl) {
              detailsEl.open = true; 
              var summaryEl = detailsEl.querySelector("summary");
              if (summaryEl) summaryEl.textContent = "字幕(シーン)はここをクリック";
          }

          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";
          }

          var rootSublist = target.querySelector(".dr5-sublist") || listContainer.parentElement;
          if (rootSublist) {
            rootSublist.addEventListener("click", function(e){
              var a = e.target.closest && e.target.closest("a.imk-cue[data-seek]");
              if(!a) return;
              e.preventDefault();
              var ts = a.getAttribute("data-seek");
              if(!ts) return;
              var p = ts.trim().split(":").map(function(x){return parseInt(x,10)||0;});
              var sec = (p.length===2) ? p[0]*60+p[1] : (p.length===3 ? p[0]*3600+p[1]*60+p[2] : null);
              if(sec==null) return;
              try{ video.currentTime = sec; if(video.paused) video.play(); }catch(_){}
            });
          }
      }

      // ★ dr52.php と全く同じ「常時監視」のロジック
      // これにより、Safariが読み込み遅延を起こしても確実にONになります
      video.addEventListener("timeupdate", function(){
        var hasList = (listContainer !== null);
        var desiredMode = (isSpecialMode() || !hasList) ? "showing" : "hidden";
        
        try {
            if(video.textTracks && video.textTracks.length > 0){
                for(var i=0; i<video.textTracks.length; i++){
                    if((video.textTracks[i].kind === 'subtitles' || video.textTracks[i].kind === 'captions') && video.textTracks[i].mode !== desiredMode) {
                        video.textTracks[i].mode = desiredMode;
                    }
                }
            }
        } catch(e){}

        // リストがない場合はこれ以降のハイライト処理をスキップ
        if (!hasList) return;

        var cues = listContainer.querySelectorAll("a.imk-cue");
        if(cues.length === 0) return;
        var cur = video.currentTime;
        var activeA = null;

        for(var i=0; i<cues.length; i++){
            var ts = cues[i].getAttribute("data-seek");
            if(!ts) continue;
            var p = ts.trim().split(":").map(function(x){return parseInt(x,10)||0;});
            var t = (p.length===2) ? p[0]*60+p[1] : (p.length===3 ? p[0]*3600+p[1]*60+p[2] : null);
            if(t !== null && cur >= t - 0.5){ activeA = cues[i]; } 
            else if(t > cur){ 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" });
            }
        }
      });

      return true;
    }

    var checks = 0;
    var checkTimer = setInterval(function(){
      protectVideo();
      var success = initSubtitles();
      checks++;
      if (success || checks > 20) { 
        clearInterval(checkTimer);
      }
    }, 500); 

    if (!window.scStopAndGo) {
      window.scStopAndGo = function(event, link){
        try{
          var mediaEls = document.querySelectorAll('video, audio');
          mediaEls.forEach(function(m){
            try{
              if (!m.paused) m.pause();
              if (document.pictureInPictureElement === m && document.exitPictureInPicture) {
                document.exitPictureInPicture().catch(function(){});
              }
            }catch(e){}
          });
        }finally{
          event.preventDefault();
          setTimeout(function(){
            if (link.target === '_blank') {
              window.open(link.href, '_blank');
            } else {
              window.location.href = link.href;
            }
          }, 50);
        }
        return false;
      };
    }
  })();
  </script>
</div>



<hr class="wp-block-separator has-text-color has-key-color-color has-alpha-channel-opacity has-key-color-background-color has-background is-style-dots"/>



<p class="wp-block-paragraph">上のビデオをご覧ください。</p>



<p class="wp-block-paragraph">マニアックなようでもあり、よくありそうな話題です。</p>



<p class="wp-block-paragraph">人の嗜好には、色々ありますが、モノを買う時、「何でも入っている方がいい」という人と「それぞれ別々の方がいい」に分かれると思います。ただどうでしょう。今でも量販店のパソコンコーナーへ行って、「そのまま何でも全部入ってて、後からあれ買えこれ買えって言ってこないやつ。それで安いやつ。」と店員を困らせ、まあ、ある意味店員を喜ばせ、買う人の方が多いですかね。まだDVDドライブ付きが売ってますね。オールインワンってやつ。</p>



<p class="wp-block-paragraph">今回、NASが容量不足で、内装されたHDDを大容量に交換する。というテーマですが、もしオールインワン嗜好の人のパソコンに例えると、パソコンに内蔵されたHDDを換装する、ということを意味します。これを自分でやると結構大変。まず外付けのHDDにデータを全部コピーする。HDDとパソコンの指示書通りに、パソコンのネジを外して、HDDを交換する。外付けHDDから新HDDへコピーする。様々な確認を通って、完了。その作業の間は、当然、パソコンは使えません。</p>



<p class="wp-block-paragraph"><strong>パソコンでは内蔵されていて、そう簡単には取り出せないHDDを、そもそも最初から、外に取り出してしまったもの。別々にしたもの。それがNAS</strong>です（ただしNASは、それだけが目的ではありません。）</p>



<p class="wp-block-paragraph">そしてNASは、たいてい、2個以上のHDDを持って、データを常に、二つ以上持っています。片方のエンジンが故障しても飛行できるようになっています。</p>



<p class="wp-block-paragraph">ですから、今回の、HDDを大容量に交換する時でも、パソコンの停止は不要です。</p>



<p class="wp-block-paragraph">なお、「お下がり」交換リレーと称したのは、<strong>新品HDD→DS220+→既存を抜いて→DS218+→既存を抜いて→SATAスタンドと「お古」をお下がりした</strong>からです。</p>



<h4 class="wp-block-heading">実行前→完成</h4>



<figure class="wp-block-image size-large is-resized has-custom-border"><a href="https://imakat.com/rd.php?id=jCwkhKPO.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=jCwkhKPO.png" alt="" class="has-border-color has-grey-border-color" style="border-width:5px;border-radius:15px;aspect-ratio:1.7796208530805686;width:839px;height:auto"/></a></figure>



<p class="wp-block-paragraph">今回、開始から完成まで、約２日かかりましたが、振り返ってみると、難しい作業は、ありませんでした。もちろん、慎重に行う必要はあります。</p>



<p class="wp-block-paragraph">殆ど同じ仕様である、DS220+とDS218+を使ったことが、さらに、一連の作業をスムーズにさせました。2台x2巡ですから、4回同じ作業をしたわけです。</p>



<p class="wp-block-paragraph"></p>



<hr class="wp-block-separator has-text-color has-key-color-color has-alpha-channel-opacity has-key-color-background-color has-background is-style-wide"/>



<h3 class="wp-block-heading">ポイント解説</h3>



<h4 class="wp-block-heading"><strong>1 　</strong>まるでマジック。パソコンの作業を止めることなく、NASやWebサーバーも止めることなく、HDDの容量が増えている。</h4>



<p class="wp-block-paragraph">DS218+およびDS220+ともに2個のHDDを収容しています。SHRまたはRAID1を使用した場合、最大使用量は小さい方になってしまいます。例えば、異なる容量の既存6TBと新12TBという組み合わせで稼働すること自体はできます。新12TBに既存6TBのデータが書き込まれます。ただし、このままにすると、新12TBの方の6TB分が未使用になってしまいます。このままではやってることが無意味です。ですので一巡目の修復が完了後に、二巡目として、既存6TBを抜いて新12TBを入れて、先の12TBから新12TBにデータを書き込みます。これにより、元のデータを維持した上で、12TBが使用可能領域になります。<strong>パソコンの作業を止めさせることなく、裏側で、HDDを総入れ替えするという、まるでマジック</strong>です。これをDS218+とDS220+の2台同時に行ったわけです。こういったトリック的なやり方は、企業の情報システム部では、ふつうに行われていることかと思いますが、家庭でも、割と簡単に実行できるのは、大いなる進歩です。</p>



<p class="wp-block-paragraph">余談ですが、NAS(DS220+)とWebサーバー(DS218+)は、別のプロバイダ、別のネットワークにして、隔離しています。</p>



<p class="wp-block-paragraph"><a rel="noopener" target="_blank" href="https://www.synology.com/ja-jp/support/RAID_calculator?hdds=">Synology RAID計算機<span class="fa fa-external-link external-icon anchor-icon"></span></a>というサイトでは、</p>



<figure class="wp-block-image aligncenter size-large is-resized"><a href="https://imakat.com/rd.php?id=0PLcgUrU.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=0PLcgUrU.png" alt="" style="aspect-ratio:0.5827814569536424;width:318px;height:auto"/></a></figure>



<p class="wp-block-paragraph">HDDの組み合わせにより、使用可能な容量を算出してくれます。</p>



<h4 class="wp-block-heading"><strong>２　SATAスタンドのHDDフォーマットはexFAT。</strong></h4>



<p class="wp-block-paragraph">SATAスタンドは、HDDを挿し込むだけで、SynologyNAS側では、別の2個のUSBディスクと認識されます。(3TB+3TB)x0.9= 5.4TB 使用できます。HDDのフォーマットはexFATにしました。exFATであれば、SATAスタンドのUSBケーブルを抜き挿しして、<strong>WindowsでもMacでも読み書きが出来ます</strong>。</p>



<figure class="wp-block-image size-large"><a href="https://imakat.com/rd.php?id=0DxWoFch.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=0DxWoFch.png" alt=""/></a></figure>



<p class="wp-block-paragraph">この外付けHDD2個でRAIDを組むことはできませんが、シェルスクリプトとスケジューラを使って、ミラーリングの形、常に同じものを2つ持つ形の定期バックアップを行っています（<a rel="noopener" target="_blank" href="https://docs.google.com/document/d/1UVE1WvxvuN7JAe0Xi-flcUvravX7upYZhEK52bzSvdc/edit?usp=sharing">rsyncを使ってUSBHDD１からUSBHDD２へ定期バックアップ<span class="fa fa-external-link external-icon anchor-icon"></span></a>)。</p>



<a rel="noopener" target="_blank" href="https://docs.google.com/drawings/d/10-dgJGt4Y4sB31O5aj126ORL7_jsQ5RzVeBX13p4XlQ/edit?usp=sharing">
<img decoding="async" src="https://docs.google.com/drawings/d/10-dgJGt4Y4sB31O5aj126ORL7_jsQ5RzVeBX13p4XlQ/pub?w=960&#038;h=720"
></a>



<h4 class="wp-block-heading">３　動画がどんどん大容量化。だから、NASに注目が集まりそう。</h4>



<p class="wp-block-paragraph">つくづく思いますが、動画などの大容量のデータを、どこへ、どのように保存するかは、非常に大きな問題です。どんどん大容量化していきます。クラウドだけに頼っていたら、お金が続かない。クラウドの主な役割は、災害後に復旧させたい重要な情報を預ける、とした場合、そこまで重要ではないが、日常生活の充実のために手元に残しておきたいデータは、どうすればいいか。</p>



<p class="wp-block-paragraph">NASは、その一つの答えです。</p>



<p class="wp-block-paragraph">以上</p>
]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">17965</post-id>	</item>
		<item>
		<title>【IT】Macの両面印刷の設定はどこに隠されているのか。</title>
		<link>https://imakat.com/2022/09/10/16325/</link>
		
		<dc:creator><![CDATA[imakat]]></dc:creator>
		<pubDate>Sat, 10 Sep 2022 11:28:48 +0000</pubDate>
				<category><![CDATA[デジタル]]></category>
		<category><![CDATA[ものづくり]]></category>
		<category><![CDATA[Macmini]]></category>
		<category><![CDATA[両面印刷]]></category>
		<category><![CDATA[Windows]]></category>
		<category><![CDATA[vimeo]]></category>
		<guid isPermaLink="false">https://imakat.com/?p=16325</guid>

					<description><![CDATA[2022.12.27追記：MacOSをVenturaに更新。プリントのポップアップウインドウの形が更に変更されました。両面印刷は、以前より更に、奥まったところになりました。 結局、両面印刷については、Windowsでは、 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<hr class="wp-block-separator has-text-color has-key-color-color has-alpha-channel-opacity has-key-color-background-color has-background is-style-wide"/>



<p class="wp-block-paragraph">2022.12.27追記：MacOSをVenturaに更新。プリントのポップアップウインドウの形が更に変更されました。両面印刷は、以前より更に、<a rel="noopener" target="_blank" href="https://imakat.synology.me/wp-content/pmedia/スクリーンショット_2023-04-19_14.55.26.png">奥まったところになりました。<span class="fa fa-external-link external-icon anchor-icon"></span></a></p>



<hr class="wp-block-separator has-text-color has-key-color-color has-css-opacity has-key-color-background-color has-background is-style-wide"/>



<p class="has-text-align-center wp-block-paragraph"></p>



<div style="position:relative;"><iframe src="https://player.vimeo.com/video/748260831?
texttrack=ja&#038;loop=0&#038;title=0&#038;byline=0&#038;muted=0&#038;pip=1&#038;portrait=0&#038;autopause=0&#038;" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay;fullscreen" allowfullscreen=""></iframe></div><script src="https://player.vimeo.com/api/player.js"></script><details><summary>字幕一覧(クリック)</summary> <p>
~Macの両面印刷の設定はどこに隠されているのか~<br>
(1)例として、Safariの記事の両面印刷を行ってみます。<br>
(2)Safariのメニューバーの「ファイル」→「プリント」と選ぶとポップアップウインドウが開きます。<br>
(3)ところが。。。詳細を表示するようにしても、両面印刷の設定箇所が見当たりません。<br>
(4)よくよく調べてみて、見つけました。<br>
(5)秘密のボタンは、この「Safari」のところです。<br>
(6)それで、「自動両面印刷」から→例えば、「長辺とじ」を選択します。文書タイプは3つありますが、「テキスト/イラスト」でいいでしょう。<br>
(7)さて、これでプリントして閉じると、また同じことをしなければなりません。今の状態を保存しておきます。<br>
(8)「現在の設定をプリセットとして保存」します。例えば名前を「両面印刷長辺とじ」として保存します。<br>
E(9)以上で設定は完了です。<br>
</p> </details> <style>details { font: 16px "Open Sans", Calibri, sans-serif; width: 100%; } details > summary { padding: 2px 6px; width: 100%; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; } details > p { font: 14px "Open Sans", Calibri, sans-serif; height:150px; overflow: scroll; background-color: #EDF7FF; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } </style>




<p class="wp-block-paragraph"></p>



<hr class="wp-block-separator has-text-color has-key-color-color has-alpha-channel-opacity has-key-color-background-color has-background is-style-dots"/>



<p class="wp-block-paragraph">結局、両面印刷については、Windowsでは、下イメージのように、最初の画面に選択ボタンがあります。これは優れているな、と感じますね。</p>



<figure class="wp-block-image size-large"><a href="https://imakat.com/rd.php?id=uIXH8J3R.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=uIXH8J3R.png" alt=""/></a></figure>



<p class="wp-block-paragraph"></p>



<hr class="wp-block-separator has-text-color has-key-color-color has-alpha-channel-opacity has-key-color-background-color has-background is-style-wide"/>



<h3 class="wp-block-heading">ポイント解説</h3>



<h4 class="wp-block-heading">1 　最近、めっきり減った紙の印刷</h4>



<p class="wp-block-paragraph">ポイント解説というより、周辺の出来事という感じですが、2022年1月から電子帳票保存法が改正されて、会計帳簿について、一定の仕組みを導入すれば、紙ではなく電子データで保存すればそれでいいことになりました。会計以外でも、どんどんペーパーレスは進むと思います。</p>



<p class="wp-block-paragraph">しかし、紙の読みやすさは、優れています。紙は、高齢者のサービスのために残っていくと思いますが、ある種、コストの掛かった贅沢な方法、と見做されていくことでしょう。</p>



<p class="wp-block-paragraph">以上　</p>
]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">16325</post-id>	</item>
		<item>
		<title>【IT】Macの画面とBGMを操る方法</title>
		<link>https://imakat.com/2022/08/04/15583/</link>
		
		<dc:creator><![CDATA[imakat]]></dc:creator>
		<pubDate>Thu, 04 Aug 2022 00:40:34 +0000</pubDate>
				<category><![CDATA[デジタル]]></category>
		<category><![CDATA[ものづくり]]></category>
		<category><![CDATA[vimeo]]></category>
		<category><![CDATA[Macmini]]></category>
		<category><![CDATA[LadioCast]]></category>
		<category><![CDATA[Background Music]]></category>
		<category><![CDATA[SteinbergUR24C]]></category>
		<guid isPermaLink="false">https://imakat.com/?p=15583</guid>

					<description><![CDATA[2022.12.29更新　Macを新OS Venturaに更新したら、仮想スピーカーアプリ(Background Music他)が不安定になりました。私が不勉強なのかも知れませんが。対策として、外付けしてあるオーディオイ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<hr class="wp-block-separator has-text-color has-key-color-color has-alpha-channel-opacity has-key-color-background-color has-background is-style-wide"/>



<p class="wp-block-paragraph">2022.12.29更新　Macを新OS Venturaに更新したら、仮想スピーカーアプリ(Background Music他)が不安定になりました。私が不勉強なのかも知れませんが。対策として、外付けしてあるオーディオインターフェースUR24Cのループバック機能を使うことにしました（→<a href="#追記1">追記1</a>)。</p>



<hr class="wp-block-separator has-text-color has-key-color-color has-css-opacity has-key-color-background-color has-background is-style-wide"/>



<h4 class="wp-block-heading">追記</h4>



<a id="追記1"></a>



<p class="wp-block-paragraph"><strong>追記1</strong>：2022.12.29 現在、Mac mini(Intel)と周辺機器類は、ドッキングステーションとThunderbolt3ケーブル1本で接続しています。OSをVenturaに更新した後、仮想スピーカーアプリ（Sunflower Background Music,Loopbackいずれも)からUR24Cを認識できなくなりました。再セットしてもMacを再起動すると再び認識できなくなる。Mac miniとUR24Cを直結すれば、認識するのだが、ケーブル１本でなくなりシャク。そこで、オーソドックスに、UR24Cに装備されているループバック機能を使うことにしました。じゃ、なぜそれを敬遠してきたかと言うと、UR24Cは机の下に置いていまして、MASTERツマミを手探りで操作するのは難しい、と感じたからです。しかし、今回、「<span style="text-decoration: underline;">ヘッドホンジャックを刺したままにして、そのジャックのすぐ左側のツマミ</span>」と指先で覚えれば、手探りで操作できると解りました。従って、今回、仮想スピーカーは何も使わないでも、UR24Cだけで解決しました。</p>



<p class="wp-block-paragraph">＜Macの画面とBGMを操る方法＞</p>


<div class="sc-dynamic-embed">
  <style>
  /* リンクの見た目を整える */
  .sc-dynamic-embed .sc-link-container { 
      display: flex; 
      margin-bottom: 10px; 
      flex-wrap: wrap; 
      align-items: center; 
  }
  .sc-dynamic-embed .sc-link { margin-bottom: 0; }
  .sc-dynamic-embed .sc-link a {
    font-size: 15px; 
    font-weight: normal;
    text-decoration: underline;
    color: #0073aa;
  }
  .sc-dynamic-embed .sc-link a:hover { text-decoration: none; color: #000; }
  
  @media (max-width: 500px) {
    .sc-dynamic-embed .sc-link a { font-size: 13px; }
  }

  .sc-dynamic-embed .imk-line {
      display: inline-block;
      width: 100%;
      border-radius: 2px;
      transition: background-color 0.1s;
  }

  .sc-dynamic-embed #subtitleOverlay,
  .sc-dynamic-embed #scSubtitleOverlay,
  .sc-dynamic-embed .overlay-cue,
  .sc-dynamic-embed .band {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
  }
  </style>

  <div class="sc-link-container">
    <p class="sc-link">
      <a href="https://imakat.com/ds62/?drid=102" target="_blank"
         onclick="return scStopAndGo(event, this);">
        👉低画質・枠外字幕はこちら
      </a>
    </p>
  </div>

  <style>
            :root{ --dr5emd-max: 1920px; }
            #subtitleOverlay, #scSubtitleOverlay, .overlay-cue, .band { display: none !important; opacity: 0 !important; }
            .imk-line { display: inline-block; width: 100%; border-radius: 2px; transition: background-color 0.1s; }
            .dr5emd-sublist details > p{ height:200px; overflow:auto; background-color:#EDF7FF; padding:2px 6px; margin:0; box-shadow:3px 3px 4px black; position: relative; }
            .dr5emd-sublist details > summary{ padding:2px 6px; width:100%; background-color:#ddd; border:none; box-shadow:3px 3px 4px black; cursor:pointer; list-style:none; }
            
                .video-wrap{position:relative;width:100%;margin:0 auto}
                #myVideo{width:100%;height:auto;min-height:200px;display:block;background:#000;}</style><div class="dr5emd-container"><div class="video-wrap"><video id="myVideo" controls poster="https://imakat.com/rd.php?id=ZgBdVvSD.png" playsinline preload="none" style="width:100%;height:auto;">  <source src="https://imakat.com/rd.php?id=DiUEAszW.mp4" type="video/mp4">  <track src="https://imakat.com/rd.php?id=4mPSoVKI.vtt" label="日本語" srclang="ja" kind="subtitles"></video></div><div class="dr5emd-sublist"><details translate="yes"><summary translate="yes">字幕一覧(クリック)</summary> <p translate="yes">
(<a href="#" class="imk-cue" data-seek="0:00" translate="no">00:00:00</a>) 今日はですね、Macの画面の解説をBGM付きで行う方法について解説します。<br>
(<a href="#" class="imk-cue" data-seek="0:14" translate="no">00:00:14</a>) ご覧の、そのためにはまず2つの準備が必要で、2つのアプリケーションのダウンロードが必要です。<br>
(<a href="#" class="imk-cue" data-seek="0:23" translate="no">00:00:23</a>) 1つはこの、LadioCastという、ルーティングのためのアプリケーション。<br>
(<a href="#" class="imk-cue" data-seek="0:35" translate="no">00:00:35</a>) それと、この、あと1つは、ここにありますけれども、Background Musicというアプリケーション。<br>
(<a href="#" class="imk-cue" data-seek="0:46" translate="no">00:00:46</a>) これは、仮想スピーカー、仮想スピーカーと言っていいのかな、そういうものでして。<br>
(<a href="#" class="imk-cue" data-seek="0:57" translate="no">00:00:57</a>) すみません、このLadioCastとBackground Musicについては、サイトを探してみてダウンロードしてください。LadioCastはAppStoreにあります。BackgroundMusic:<a rel="noopener" target="_blank" href="https://github.com/kyleneideck/BackgroundMusic"><img decoding="async" src="https://imakat.com/rd.php?id=zrU95MiY.png" alt="" style="width:120px; height:auto;"></a><br>
(<a href="#" class="imk-cue" data-seek="1:14" translate="no">00:01:14</a>) そのうちまず最初にですね、このミキサーの設定について説明します。<br>
(<a href="#" class="imk-cue" data-seek="1:25" translate="no">00:01:25</a>) ミキサーはですね、ミキサーというかこれ、LadioCastの画面です。<br>
(<a href="#" class="imk-cue" data-seek="1:35" translate="no">00:01:35</a>) LadioCastをクリックしますと、この中にミキサーって表示があるんですね。これです、このミキサーっていうのですね。<br>
(<a href="#" class="imk-cue" data-seek="1:52" translate="no">00:01:52</a>) それがここに出ています。それではこの設定ですが、まず「入力1」のところにBackground Musicを入れます。<br>
(<a href="#" class="imk-cue" data-seek="2:07" translate="no">00:02:07</a>) それで、1チャンL、2チャンRです。それで、音圧ですけれども、7.5ぐらいのところに止めてあります。<br>
(<a href="#" class="imk-cue" data-seek="2:25" translate="no">00:02:25</a>) で、+12dB（デシベル）。メインです、出力メイン。<br>
(<a href="#" class="imk-cue" data-seek="2:35" translate="no">00:02:35</a>) 次に「入力2」ですが、Steinberg UR24Cで、1チャンL、1チャンR。<br>
(<a href="#" class="imk-cue" data-seek="2:50" translate="no">00:02:50</a>) つまりモノラル扱いしますよということです。で、音圧は、9のところにあって、+18dBです。<br>
(<a href="#" class="imk-cue" data-seek="3:02" translate="no">00:03:02</a>) で、これはAux（オックス）のところをハイライトしてます、Aux 1を選択してます。<br>
(<a href="#" class="imk-cue" data-seek="3:10" translate="no">00:03:10</a>) 出力メインはSteinberg UR24C。それで、レバー類は全部右に振り切りです。<br>
(<a href="#" class="imk-cue" data-seek="3:24" translate="no">00:03:24</a>) で、次に出力Aux 1はBackground Music、同じくレバー右に全部振り切りです。そういう形です。<br>
(<a href="#" class="imk-cue" data-seek="3:36" translate="no">00:03:36</a>) それで大体セッティング、基本的な大きなことはそこがあります。<br>
(<a href="#" class="imk-cue" data-seek="3:43" translate="no">00:03:43</a>) 次に、このサウンド出力、Macのサウンド出力のところですが、これはBackground Musicですね。これを選んでください。<br>
(<a href="#" class="imk-cue" data-seek="3:59" translate="no">00:03:59</a>) Background Musicを選ぶということです。それからですね、このスクリーンショットで今撮ってるんですが。<br>
(<a href="#" class="imk-cue" data-seek="4:13" translate="no">00:04:13</a>) このスクリーンショットの、実はここのオプションという中に、今見えないんですが、出力というのを選ぶとこがありまして。<br>
(<a href="#" class="imk-cue" data-seek="4:29" translate="no">00:04:29</a>) その出力の中でもBackground Musicを選んでください。以上ですね。そうすると、基本的なセッティングが出来上がります。<br>
(<a href="#" class="imk-cue" data-seek="4:40" translate="no">00:04:40</a>) はい、それではですね、少し、これからちょっと再現したいYouTube類をちょっと用意しておきましょうか。<br>
(<a href="#" class="imk-cue" data-seek="4:56" translate="no">00:04:56</a>) YouTube、何にしておきましょうかね。あまり、これにしようかな、はい。<br>
(<a href="#" class="imk-cue" data-seek="5:14" translate="no">00:05:14</a>) この、はい。それと、アベマ。アベマTV。はい。<br>
(<a href="#" class="imk-cue" data-seek="5:30" translate="no">00:05:30</a>) ニュースにしておきましょうか、ニュース。はい。<br>
(<a href="#" class="imk-cue" data-seek="5:41" translate="no">00:05:41</a>) はい、じゃあこれで準備はいいです。まず初めにですね、音楽。マージして、混合させてます。<br>
(<a href="#" class="imk-cue" data-seek="5:52" translate="no">00:05:52</a>) ステレオで入ってると思います。BGMとして、こういうふうに置いておくといいですね。これを、話すわけなんで、もっと小さい音で。<br>
(<a href="#" class="imk-cue" data-seek="6:08" translate="no">00:06:08</a>) これくらいですと抵抗ないですかね。はい、これちょっと一旦止めます。はい、次にですね、これはYouTube。<br>
(<a href="#" class="imk-cue" data-seek="6:19" translate="no">00:06:19</a>) です、YouTubeの音を混ぜるとこんな感じになります。いいですね、これ。<br>
(<a href="#" class="imk-cue" data-seek="6:34" translate="no">00:06:34</a>) これも、今のとこはライブ配信のアベマの説明、配信してますね。で、次に今度はアベマです。アベマのこのニュース。<br>
(<a href="#" class="imk-cue" data-seek="6:49" translate="no">00:06:49</a>) ミキシングに入ってます。それではですね、今度はこれ両方重ねてみましょう。<br>
(<a href="#" class="imk-cue" data-seek="7:04" translate="no">00:07:04</a>) それにさらに、この。<br>
(<a href="#" class="imk-cue" data-seek="7:11" translate="no">00:07:11</a>) 音楽。<br>
(<a href="#" class="imk-cue" data-seek="7:18" translate="no">00:07:18</a>) を消します。<br>
(<a href="#" class="imk-cue" data-seek="7:24" translate="no">00:07:24</a>) これも消します。で、私の声だけが残ってるっていう状態ですね。これで一通り音声の合成というか、マージが出来上がってるはずです。以上です。<br>
</p> </details>
<style>
details { font: 16px "Open Sans", Calibri, sans-serif; width: 100%; }
details > summary { padding: 2px 6px; width: 100%; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; }
details > p { font: 14px "Open Sans", Calibri, sans-serif; height:150px; overflow: scroll; background-color: #EDF7FF; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; }
</style>
</div></div>            <script>
            document.addEventListener("DOMContentLoaded", function(){
                var video = document.getElementById("myVideo");
                if(!video) return;

                            });
            </script>
            

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

    function protectVideo() {
      var target = wrapper ? wrapper : document;
      var mediaEls = target.querySelectorAll('video, audio');
      mediaEls.forEach(function(v){
        if(v.dataset.protected === 'true') return;
        v.dataset.protected = 'true';
        v.setAttribute('controlsList', 'nodownload');
        v.oncontextmenu = function() { return false; };
        v.addEventListener('contextmenu', function(e){ e.preventDefault(); return false; }, false);
      });
    }

    function initSubtitles() {
      var target = wrapper ? wrapper : document;
      var video = target.querySelector('video, audio');
      var listContainer = target.querySelector('details > p');
      
      if (!video) return false; 
      
      if (video.dataset.subInit === 'true') return true; 
      video.dataset.subInit = 'true';

      var oldOverlay = target.querySelector('#subtitleOverlay') || target.querySelector('#scSubtitleOverlay');
      if (oldOverlay) {
          oldOverlay.style.setProperty('display', 'none', 'important');
          oldOverlay.innerHTML = ''; 
      }

      function isSpecialMode() {
        var isFs = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
        var isPiP = !!(document.pictureInPictureElement && document.pictureInPictureElement === video) || (video.webkitPresentationMode === "picture-in-picture");
        var isIOSFs = !!video.webkitDisplayingFullscreen; 
        return isFs || isPiP || isIOSFs;
      }

      // 初期状態のセット（リストがなければ最初から showing に）
      try {
        if(video.textTracks && video.textTracks.length > 0){
          for(var i=0; i<video.textTracks.length; i++){
             if(video.textTracks[i].kind === 'subtitles' || video.textTracks[i].kind === 'captions'){
                 video.textTracks[i].mode = (!listContainer) ? "showing" : "hidden";
             }
          }
        }
      } catch(e){}

      // 字幕一覧が存在する場合のみ、リストのフォーマット処理を行う
      if (listContainer) {
          var detailsEl = target.querySelector("details");
          if (detailsEl) {
              detailsEl.open = true; 
              var summaryEl = detailsEl.querySelector("summary");
              if (summaryEl) summaryEl.textContent = "字幕(シーン)はここをクリック";
          }

          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";
          }

          var rootSublist = target.querySelector(".dr5-sublist") || listContainer.parentElement;
          if (rootSublist) {
            rootSublist.addEventListener("click", function(e){
              var a = e.target.closest && e.target.closest("a.imk-cue[data-seek]");
              if(!a) return;
              e.preventDefault();
              var ts = a.getAttribute("data-seek");
              if(!ts) return;
              var p = ts.trim().split(":").map(function(x){return parseInt(x,10)||0;});
              var sec = (p.length===2) ? p[0]*60+p[1] : (p.length===3 ? p[0]*3600+p[1]*60+p[2] : null);
              if(sec==null) return;
              try{ video.currentTime = sec; if(video.paused) video.play(); }catch(_){}
            });
          }
      }

      // ★ dr52.php と全く同じ「常時監視」のロジック
      // これにより、Safariが読み込み遅延を起こしても確実にONになります
      video.addEventListener("timeupdate", function(){
        var hasList = (listContainer !== null);
        var desiredMode = (isSpecialMode() || !hasList) ? "showing" : "hidden";
        
        try {
            if(video.textTracks && video.textTracks.length > 0){
                for(var i=0; i<video.textTracks.length; i++){
                    if((video.textTracks[i].kind === 'subtitles' || video.textTracks[i].kind === 'captions') && video.textTracks[i].mode !== desiredMode) {
                        video.textTracks[i].mode = desiredMode;
                    }
                }
            }
        } catch(e){}

        // リストがない場合はこれ以降のハイライト処理をスキップ
        if (!hasList) return;

        var cues = listContainer.querySelectorAll("a.imk-cue");
        if(cues.length === 0) return;
        var cur = video.currentTime;
        var activeA = null;

        for(var i=0; i<cues.length; i++){
            var ts = cues[i].getAttribute("data-seek");
            if(!ts) continue;
            var p = ts.trim().split(":").map(function(x){return parseInt(x,10)||0;});
            var t = (p.length===2) ? p[0]*60+p[1] : (p.length===3 ? p[0]*3600+p[1]*60+p[2] : null);
            if(t !== null && cur >= t - 0.5){ activeA = cues[i]; } 
            else if(t > cur){ 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" });
            }
        }
      });

      return true;
    }

    var checks = 0;
    var checkTimer = setInterval(function(){
      protectVideo();
      var success = initSubtitles();
      checks++;
      if (success || checks > 20) { 
        clearInterval(checkTimer);
      }
    }, 500); 

    if (!window.scStopAndGo) {
      window.scStopAndGo = function(event, link){
        try{
          var mediaEls = document.querySelectorAll('video, audio');
          mediaEls.forEach(function(m){
            try{
              if (!m.paused) m.pause();
              if (document.pictureInPictureElement === m && document.exitPictureInPicture) {
                document.exitPictureInPicture().catch(function(){});
              }
            }catch(e){}
          });
        }finally{
          event.preventDefault();
          setTimeout(function(){
            if (link.target === '_blank') {
              window.open(link.href, '_blank');
            } else {
              window.location.href = link.href;
            }
          }, 50);
        }
        return false;
      };
    }
  })();
  </script>
</div>



<h3 class="wp-block-heading">ポイント解説</h3>



<h4 class="wp-block-heading">１　Macのサウンド設定について</h4>



<p class="wp-block-paragraph">初期投稿時に説明した、2 ＜Macのサウンド出力の設定＞は、Steinberg UR24Cへ変更します。<br>3 ＜「スクリーンショット」のマイクの設定＞も、Steinberg UR24Cへ変更します。</p>



<p class="wp-block-paragraph">以上</p>



<hr class="wp-block-separator has-text-color has-key-color-color has-alpha-channel-opacity has-key-color-background-color has-background is-style-wide"/>



<h4 class="wp-block-heading">以下は初期投稿時</h4>


<div class="sc-dynamic-embed">
  <style>
  /* リンクの見た目を整える */
  .sc-dynamic-embed .sc-link-container { 
      display: flex; 
      margin-bottom: 10px; 
      flex-wrap: wrap; 
      align-items: center; 
  }
  .sc-dynamic-embed .sc-link { margin-bottom: 0; }
  .sc-dynamic-embed .sc-link a {
    font-size: 15px; 
    font-weight: normal;
    text-decoration: underline;
    color: #0073aa;
  }
  .sc-dynamic-embed .sc-link a:hover { text-decoration: none; color: #000; }
  
  @media (max-width: 500px) {
    .sc-dynamic-embed .sc-link a { font-size: 13px; }
  }

  .sc-dynamic-embed .imk-line {
      display: inline-block;
      width: 100%;
      border-radius: 2px;
      transition: background-color 0.1s;
  }

  .sc-dynamic-embed #subtitleOverlay,
  .sc-dynamic-embed #scSubtitleOverlay,
  .sc-dynamic-embed .overlay-cue,
  .sc-dynamic-embed .band {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
  }
  </style>

  <div class="sc-link-container">
    <p class="sc-link">
      <a href="https://imakat.com/ds62/?drid=101" target="_blank"
         onclick="return scStopAndGo(event, this);">
        👉低画質・枠外字幕はこちら
      </a>
    </p>
  </div>

  <style>
            :root{ --dr5emd-max: 1920px; }
            #subtitleOverlay, #scSubtitleOverlay, .overlay-cue, .band { display: none !important; opacity: 0 !important; }
            .imk-line { display: inline-block; width: 100%; border-radius: 2px; transition: background-color 0.1s; }
            .dr5emd-sublist details > p{ height:200px; overflow:auto; background-color:#EDF7FF; padding:2px 6px; margin:0; box-shadow:3px 3px 4px black; position: relative; }
            .dr5emd-sublist details > summary{ padding:2px 6px; width:100%; background-color:#ddd; border:none; box-shadow:3px 3px 4px black; cursor:pointer; list-style:none; }
            
                .video-wrap{position:relative;width:100%;margin:0 auto}
                #myVideo{width:100%;height:auto;min-height:200px;display:block;background:#000;}</style><div class="dr5emd-container"><div class="video-wrap"><video id="myVideo" controls poster="https://imakat.com/rd.php?id=wK3cjxc4.png" playsinline preload="none" style="width:100%;height:auto;">  <source src="https://imakat.com/rd.php?id=lTgKtnwX.mp4" type="video/mp4">  <track src="https://imakat.com/rd.php?id=Z6FfDRFP.vtt" label="日本語" srclang="ja" kind="subtitles"></video></div><div class="dr5emd-sublist"><details translate="yes"><summary translate="yes">字幕一覧(クリック)</summary> <p translate="yes">
(<a href="#" class="imk-cue" data-seek="0:00" translate="no">00:00:00</a>) オーディオインターフェースのループバック機能を使って、画面の動画を作っていく方法を説明したいと思います。<br>
(<a href="#" class="imk-cue" data-seek="0:16" translate="no">00:00:16</a>) オーディオインターフェースは、一応ヤマハのUR24C、SteinbergのUR24Cを使っています。<br>
(<a href="#" class="imk-cue" data-seek="0:29" translate="no">00:00:29</a>) そのUR24Cに付属するアプリで、ヤマハのDSPアプリがありまして、これがこのようなアプリなんですが、それの設定をします。<br>
(<a href="#" class="imk-cue" data-seek="0:44" translate="no">00:00:44</a>) インプット1、インプット2、ここにはマイクが刺さってるんですが、これは結合して使うか、それとも左右それぞれモノで入れるか、この辺は音のお好みだと思いますので、私は今とりあえずバラバラにしてあります。<br>
(<a href="#" class="imk-cue" data-seek="1:03" translate="no">00:01:03</a>) それから次に、このMASTERというところですね。これはLIVE CASTを選びます。それで、マスターつまみは最初は中央にセットしておきます。<br>
(<a href="#" class="imk-cue" data-seek="1:19" translate="no">00:01:19</a>) で、例えば、ここにちょうど動画の例がありますので、動画を例えば1つ動かします。<br>
(<a href="#" class="imk-cue" data-seek="1:45" translate="no">00:01:45</a>) ちょっとすいません、びっくりしたかもしれませんが、こういう風に、声の音と、動画だとか、そういうところから出てくる音のバランスを取るんですね、これ。<br>
(<a href="#" class="imk-cue" data-seek="2:07" translate="no">00:02:07</a>) こんなような感じですね。これはたまたまVimeoに入ってる動画ですけども、こんなような形で調整できます。<br>
(<a href="#" class="imk-cue" data-seek="2:20" translate="no">00:02:20</a>) もう1つの例。次はこれガラポンテレビですね。ガラポンテレビの、をちょっと見てみましょう。<br>
(<a href="#" class="imk-cue" data-seek="2:33" translate="no">00:02:33</a>) これは声小さい、すいません、最初は、すいません。これがノーマルの大きさですね。<br>
(<a href="#" class="imk-cue" data-seek="2:44" translate="no">00:02:44</a>) こんな風になってます。で、ここに自分の声を乗せるために、このように下げていきます。これくらいですかね。こんな形で調整すると。<br>
(<a href="#" class="imk-cue" data-seek="3:07" translate="no">00:03:07</a>) 3つ目いきましょうか。3つ目は単なる音楽ですね。ここにありますが、例えば、<br>
(<a href="#" class="imk-cue" data-seek="3:20" translate="no">00:03:20</a>) これもこういう風に、下げていきます。こういう下げた状態で、どの辺がいいかなっていうのを合わせて、いけるというものです。<br>
(<a href="#" class="imk-cue" data-seek="3:40" translate="no">00:03:40</a>) それで最後のエンディングの時に、もう一度上げると。<br>
</p> </details>
<style>
details { font: 16px "Open Sans", Calibri, sans-serif; width: 100%; }
details > summary { padding: 2px 6px; width: 100%; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; }
details > p { font: 14px "Open Sans", Calibri, sans-serif; height:150px; overflow: scroll; background-color: #EDF7FF; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; }
</style>
</div></div>            <script>
            document.addEventListener("DOMContentLoaded", function(){
                var video = document.getElementById("myVideo");
                if(!video) return;

                            });
            </script>
            

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

    function protectVideo() {
      var target = wrapper ? wrapper : document;
      var mediaEls = target.querySelectorAll('video, audio');
      mediaEls.forEach(function(v){
        if(v.dataset.protected === 'true') return;
        v.dataset.protected = 'true';
        v.setAttribute('controlsList', 'nodownload');
        v.oncontextmenu = function() { return false; };
        v.addEventListener('contextmenu', function(e){ e.preventDefault(); return false; }, false);
      });
    }

    function initSubtitles() {
      var target = wrapper ? wrapper : document;
      var video = target.querySelector('video, audio');
      var listContainer = target.querySelector('details > p');
      
      if (!video) return false; 
      
      if (video.dataset.subInit === 'true') return true; 
      video.dataset.subInit = 'true';

      var oldOverlay = target.querySelector('#subtitleOverlay') || target.querySelector('#scSubtitleOverlay');
      if (oldOverlay) {
          oldOverlay.style.setProperty('display', 'none', 'important');
          oldOverlay.innerHTML = ''; 
      }

      function isSpecialMode() {
        var isFs = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
        var isPiP = !!(document.pictureInPictureElement && document.pictureInPictureElement === video) || (video.webkitPresentationMode === "picture-in-picture");
        var isIOSFs = !!video.webkitDisplayingFullscreen; 
        return isFs || isPiP || isIOSFs;
      }

      // 初期状態のセット（リストがなければ最初から showing に）
      try {
        if(video.textTracks && video.textTracks.length > 0){
          for(var i=0; i<video.textTracks.length; i++){
             if(video.textTracks[i].kind === 'subtitles' || video.textTracks[i].kind === 'captions'){
                 video.textTracks[i].mode = (!listContainer) ? "showing" : "hidden";
             }
          }
        }
      } catch(e){}

      // 字幕一覧が存在する場合のみ、リストのフォーマット処理を行う
      if (listContainer) {
          var detailsEl = target.querySelector("details");
          if (detailsEl) {
              detailsEl.open = true; 
              var summaryEl = detailsEl.querySelector("summary");
              if (summaryEl) summaryEl.textContent = "字幕(シーン)はここをクリック";
          }

          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";
          }

          var rootSublist = target.querySelector(".dr5-sublist") || listContainer.parentElement;
          if (rootSublist) {
            rootSublist.addEventListener("click", function(e){
              var a = e.target.closest && e.target.closest("a.imk-cue[data-seek]");
              if(!a) return;
              e.preventDefault();
              var ts = a.getAttribute("data-seek");
              if(!ts) return;
              var p = ts.trim().split(":").map(function(x){return parseInt(x,10)||0;});
              var sec = (p.length===2) ? p[0]*60+p[1] : (p.length===3 ? p[0]*3600+p[1]*60+p[2] : null);
              if(sec==null) return;
              try{ video.currentTime = sec; if(video.paused) video.play(); }catch(_){}
            });
          }
      }

      // ★ dr52.php と全く同じ「常時監視」のロジック
      // これにより、Safariが読み込み遅延を起こしても確実にONになります
      video.addEventListener("timeupdate", function(){
        var hasList = (listContainer !== null);
        var desiredMode = (isSpecialMode() || !hasList) ? "showing" : "hidden";
        
        try {
            if(video.textTracks && video.textTracks.length > 0){
                for(var i=0; i<video.textTracks.length; i++){
                    if((video.textTracks[i].kind === 'subtitles' || video.textTracks[i].kind === 'captions') && video.textTracks[i].mode !== desiredMode) {
                        video.textTracks[i].mode = desiredMode;
                    }
                }
            }
        } catch(e){}

        // リストがない場合はこれ以降のハイライト処理をスキップ
        if (!hasList) return;

        var cues = listContainer.querySelectorAll("a.imk-cue");
        if(cues.length === 0) return;
        var cur = video.currentTime;
        var activeA = null;

        for(var i=0; i<cues.length; i++){
            var ts = cues[i].getAttribute("data-seek");
            if(!ts) continue;
            var p = ts.trim().split(":").map(function(x){return parseInt(x,10)||0;});
            var t = (p.length===2) ? p[0]*60+p[1] : (p.length===3 ? p[0]*3600+p[1]*60+p[2] : null);
            if(t !== null && cur >= t - 0.5){ activeA = cues[i]; } 
            else if(t > cur){ 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" });
            }
        }
      });

      return true;
    }

    var checks = 0;
    var checkTimer = setInterval(function(){
      protectVideo();
      var success = initSubtitles();
      checks++;
      if (success || checks > 20) { 
        clearInterval(checkTimer);
      }
    }, 500); 

    if (!window.scStopAndGo) {
      window.scStopAndGo = function(event, link){
        try{
          var mediaEls = document.querySelectorAll('video, audio');
          mediaEls.forEach(function(m){
            try{
              if (!m.paused) m.pause();
              if (document.pictureInPictureElement === m && document.exitPictureInPicture) {
                document.exitPictureInPicture().catch(function(){});
              }
            }catch(e){}
          });
        }finally{
          event.preventDefault();
          setTimeout(function(){
            if (link.target === '_blank') {
              window.open(link.href, '_blank');
            } else {
              window.location.href = link.href;
            }
          }, 50);
        }
        return false;
      };
    }
  })();
  </script>
</div>



<hr class="wp-block-separator has-text-color has-key-color-color has-alpha-channel-opacity has-key-color-background-color has-background is-style-dots"/>



<p class="wp-block-paragraph">いきなり本題から外れますが、上の解説ビデオで使っているVimeoは非常に使いやすいです。Vimeoの利点は（１）差し替えが自由に出来る（動画も字幕(※1)も）。（２）広告がない。（３）「いいね」「再生数」など解説ビデオとしては不要なものを外せる。などYouTubeとは異なるサービス方針になっており、特に、解説教育ビデオは、一つのビデオを頻繁に更新したい、訂正したい、そういったニーズが高いのですが、そこに応えてくれます。</p>



<p class="wp-block-paragraph">※1：<a href="https://imakat.com/2019/12/14/8731/#anker_9" target="_blank">Vimeoでデフォルトで字幕が表示されるようにする方法。</a></p>



<p class="wp-block-paragraph">さて、本題ですが、Macで内部音声、例えば音楽、YouTubeなどを貼り付けて、そこへ外部マイクを重ねて収録するのは、結構難しいと説明されている記事が散見されます。Appleは著作権の管理が厳しいので、プロの音楽を簡単にキャプチャー出来ないようにしているのでしょうか実の所良くわかりません。それで自分で、試してみました。</p>



<p class="wp-block-paragraph">結論としては、こんなもんか、という感じです。実は、音楽制作をされる方、運動会学芸会の設営をされる学校の先生方は経験されるトラブルだと思いますが、例えば、外部マイク音と音楽制作アプリDAWなど内部からの音をミキシングしたいのだが、モニタリングはできるが録音出来ない、あるいはその逆、モノラルになってしまう、左しか出ない。。などなど。ルーティング設定（音の経路設定）のトラブルです。根気よくコツコツやれば道はひらけます。諦めないことですね。</p>



<p class="wp-block-paragraph">大事なのは、成功した設定を記録に残す、例えばこうしたビデオブログに残すことだろうと思います。</p>



<p class="wp-block-paragraph">まずはビデオを見ていただき、下の「ポイント解説」でおさらいしてください。</p>



<p class="wp-block-paragraph"></p>



<hr class="wp-block-separator has-text-color has-key-color-color has-alpha-channel-opacity has-key-color-background-color has-background is-style-wide"/>



<h3 class="wp-block-heading">ポイント解説</h3>



<h4 class="wp-block-heading">1 ＜LadioCastの設定の補足＞</h4>



<p class="wp-block-paragraph">LadioCastアプリは、Mac App Storeで無料でダウンロードできます。このルーティング設定では、ステレオのBGM内部音声に、マイクからのモノラル音声を重ねる、という流れにしてありますが、そうではなくて、マイクからのモノラル音声に、ステレオのBGM内部音声を重ねる、とすることも可能かも知れませんが試してはいません。</p>



<p class="wp-block-paragraph">なお、オーディオインターフェースでマイクを使う方は経験があると思いますが、Steinberg製を例にすると、ルーティング設定を行うdspMixFx_UR-C.appというアプリにて、左右チャンネルに同じ音を流すか又はモノラルに変えようとしても、CubaseなどDAW側で加工するならそれは可能ですが、今回のようにMacの内部マイクへ繋げようとした場合、左側しか聞こえない、という問題が生じます。そこで、Background Musicを使うことで解決しています。SoundFlower(2ch)という仮想マイク・スピーカーでも同じ働きをしますが、私の環境ではプチノイズが多発するために使えません。</p>



<figure class="wp-block-image aligncenter size-large is-resized"><a href="https://imakat.com/rd.php?id=PrSvuKkL.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=PrSvuKkL.png" alt="" style="width:774px;height:735px"/></a><figcaption class="wp-element-caption">LadioCastの「ミキサー」の設定</figcaption></figure>



<p class="wp-block-paragraph"></p>



<h4 class="wp-block-heading">2 ＜Macのサウンド出力の設定＞</h4>



<p class="wp-block-paragraph">Macのサウンド出力によりBackground Musicへ、つまり④へ出力された後で、LadioCastのルーティング設定で、→④→Background Music→⑤→SteinbergUR24C→⑥→、と渡され、SteinbergUR24Cに接続されたモニタースピーカーやヘッドホンから聴くことができます。私は、常時、下の設定のまま使用しています。</p>



<figure class="wp-block-image aligncenter size-large is-resized"><a href="https://imakat.com/rd.php?id=rhz79xzI.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=rhz79xzI.png" alt="" style="width:364px;height:500px"/></a><figcaption class="wp-element-caption">Macのサウンド出力は、「Background Music」を選択する。</figcaption></figure>



<p class="wp-block-paragraph"></p>



<h4 class="wp-block-heading">3 ＜「スクリーンショット」のマイクの設定＞</h4>



<p class="wp-block-paragraph">「スクリーンショット」での収録は、QuickTime Playerでの収録と、中身としてはほぼ同じです。「スクリーンショット」では、保存先が「スクリーンショット」フォルダがデフォルトとなっており、私はそれが使いやすいので、「スクリーンショット」を選択しています。この時、収録するマイクは「Background Music」を選びます。⑤の段階で録音されます。間違って「SteinbergUR24C」を選ぶと、マイクの音が左側にだけ録音される結果となります。</p>



<figure class="wp-block-image aligncenter size-large is-resized"><a href="https://imakat.com/rd.php?id=5lwC9w4a.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=5lwC9w4a.png" alt="" style="width:403px;height:436px"/></a><figcaption class="wp-element-caption">アプリ「スクリーンショット」</figcaption></figure>



<p class="wp-block-paragraph">画像音声収録アプリには、ScreenFlowという人気アプリもありますが、有料で一番安いものでも149US$となります。ScreenFlowは、収録アプリと簡単な動画編集アプリを合体させたものです。</p>



<p class="wp-block-paragraph">私は既に、有料アプリとしては動画加工用の「Final Cut Pro」「Compressor」、字幕作成アプリ「字幕工房」を持っていますので、有料のScreenFlowまでは不要だと思っています。</p>



<h4 class="wp-block-heading">4 ＜「Background Music」をログイン項目に設定＞</h4>



<p class="wp-block-paragraph">LadioCastをログイン項目に設定して、普段使いとして、Background Musicを起動させて使うことも多いと思われます。その場合、Macの起動時に音が出ないことがあります。その場合、ログイン項目に、Background Music.appを追加して試してみてください。</p>



<figure class="wp-block-image size-large"><a href="https://imakat.com/rd.php?id=ZfGF8TXI.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=ZfGF8TXI.png" alt=""/></a></figure>



<h4 class="wp-block-heading">5 ＜まとめ＞</h4>



<p class="wp-block-paragraph">今回、触れていない、動画収録後の、「字幕工房」利用による字幕作成など、後日掲載します。</p>



<p class="wp-block-paragraph">以上です。</p>
]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">15583</post-id>	</item>
		<item>
		<title>【BGM FittingTest 】〜 Fruits Street 〜</title>
		<link>https://imakat.com/2021/02/25/12100/</link>
		
		<dc:creator><![CDATA[imakat]]></dc:creator>
		<pubDate>Thu, 25 Feb 2021 00:35:52 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[デジタル]]></category>
		<category><![CDATA[音楽制作]]></category>
		<category><![CDATA[vimeo]]></category>
		<category><![CDATA[BGM]]></category>
		<guid isPermaLink="false">https://imakat.com/?p=12100</guid>

					<description><![CDATA[下の、BGM Fitting TestのボタンとVimeoのボタンをクリックして、ご視聴ください。※スマホの「タップして消音を解除」のボタンが邪魔の時は、一度タップして下のアイコンでミュートして下さい。※BGMは繰り返し [&#8230;]]]></description>
										<content:encoded><![CDATA[
<hr class="wp-block-separator has-text-color has-key-color-color has-css-opacity has-key-color-background-color has-background is-style-wide"/>



<p class="wp-block-paragraph">下の、BGM Fitting TestのボタンとVimeoのボタンをクリックして、ご視聴ください。<br><span class="fz-12px"><span class="red">※スマホの「タップして消音を解除」のボタンが邪魔の時は、一度タップして下のアイコンでミュートして下さい。※BGMは繰り返します。</span></span></p>



<p style="display: inline">BGM Fitting Test:</p><div class="compact_audio_player_wrapper"><div class="sc_player_container1"><input type="button" id="btnplay_6a5f4173617e23.53153789" class="myButton_play" onClick="play_mp3('play','6a5f4173617e23.53153789','https://imakat.com/rd.php?id=S3SYuTeX.mp3','80','true');show_hide('play','6a5f4173617e23.53153789');" /><input type="button"  id="btnstop_6a5f4173617e23.53153789" style="display:none" class="myButton_stop" onClick="play_mp3('stop','6a5f4173617e23.53153789','','80','true');show_hide('stop','6a5f4173617e23.53153789');" /><div id="sm2-container"><!-- flash movie ends up here --></div></div></div>



<hr class="wp-block-separator has-css-opacity is-style-wide"/>



<div style="position:relative;">
<iframe src="https://player.vimeo.com/video/16395864?&#10;control=1&amp;&#10;title=1&amp;&#10;byline=1&amp;&#10;muted=1&amp;&#10;playsinline=1&amp;pip=1&amp;&#10;portrait=1&amp;&#10;autopause=0" style="position:absolute;top:0;
left:0;
width:100%;
height:100%;
" frameborder="0" allow="autoplay;
fullscreen" allowfullscreen="">
</iframe></div>



<p class="has-text-align-center wp-block-paragraph"></p>



<p class="has-text-align-center wp-block-paragraph"><span class="fz-12px">Vimeo: Millefeuille Fruits rouges/ Griottes<br>BGM : Fruits Street / imakat</span></p>



<hr class="wp-block-separator has-text-color has-key-color-color has-css-opacity has-key-color-background-color has-background is-style-wide"/>



<p class="wp-block-paragraph">赤いサクランボを使ったミルフィーユの作り方を紹介したGriottesさんのビデオです。このビデオの音楽も、陽気でいい感じの曲で、似合っていると思います。</p>



<p class="wp-block-paragraph">しかし今回は、自作のヨーロッパ風の曲が、似合うかどうか。テストします。<br>動画の方が先に終わってしまいますが、まあまあ、オシャレだと思います。</p>



<p class="wp-block-paragraph">いかがでしょう。</p>



<p class="wp-block-paragraph">※なお、このようにBGMとVimeoをブログへ組み込む方法は、<a href="https://imakat.com/2019/12/14/8731/" target="_blank">こちらの&lt;7&gt;</a>をご参照ください。</p>
]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">12100</post-id>	</item>
	</channel>
</rss>
