<?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>Chrome | imakat.com</title>
	<atom:link href="https://imakat.com/tag/chrome/feed/" rel="self" type="application/rss+xml" />
	<link>https://imakat.com</link>
	<description>工夫と改善で人生をちょっと豊かに</description>
	<lastBuildDate>Mon, 04 May 2026 11:36:42 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1</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>Chrome | 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>Macで「音声認識字幕ちゃん」を使いやすくする。</title>
		<link>https://imakat.com/2023/11/17/18463/</link>
		
		<dc:creator><![CDATA[imakat]]></dc:creator>
		<pubDate>Fri, 17 Nov 2023 09:00:00 +0000</pubDate>
				<category><![CDATA[デジタル]]></category>
		<category><![CDATA[ものづくり]]></category>
		<category><![CDATA[Mac mini]]></category>
		<category><![CDATA[STREAM DECK]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[OBS]]></category>
		<category><![CDATA[音声認識字幕ちゃん]]></category>
		<category><![CDATA[Window Resizer]]></category>
		<category><![CDATA[Mac]]></category>
		<guid isPermaLink="false">https://imakat.com/?p=18463</guid>

					<description><![CDATA[「音声認識字幕ちゃん」のサイズ調整 最近、ちまたでもスマホの翻訳アプリ、翻訳機器などを目にすることが多くなってきました。しかも同時翻訳までできてしまうのには驚きです。ただ、いざ使おうと思うと、最初はお試しで無料ですが、有 [&#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"/>



<h5 class="wp-block-heading">「音声認識字幕ちゃん」のサイズ調整</h5>


<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=26" 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=SZyJ0Iso.png" playsinline preload="none" style="width:100%;height:auto;">  <source src="https://imakat.com/rd.php?id=ffhDUfn3.mp4" type="video/mp4">  <track src="https://imakat.com/rd.php?id=uMEIIFOK.vtt" label="日本語" srclang="ja" kind="subtitles"></video></div><div class="dr5emd-sublist"><details><summary>字幕一覧(クリック)</summary> <p>
(<a href="#" class="imk-cue" data-seek="0:01">00:00:01</a>)  今回は「音声認識字幕ちゃん」のですね。<br>
(<a href="#" class="imk-cue" data-seek="0:10">00:00:10</a>)  サイズを調整する、というテーマでやっていきます。<br>
(<a href="#" class="imk-cue" data-seek="0:15">00:00:15</a>)  「音声認識字幕ちゃん」はですね。<br>
(<a href="#" class="imk-cue" data-seek="0:18">00:00:18</a>)  Google Chromeでしか起動できないのです！<br>
(<a href="#" class="imk-cue" data-seek="0:23">00:00:23</a>)  で、このhttps以下ここにある、<br>
(<a href="#" class="imk-cue" data-seek="0:30">00:00:30</a>)  これを入れて立ち上げるのですが、そうすると下のように、<br>
(<a href="#" class="imk-cue" data-seek="0:38">00:00:38</a>)  ホームページが出てくるのですが、<br>
(<a href="#" class="imk-cue" data-seek="0:41">00:00:41</a>)  この中で、Google Script API-KEYがありますが、<br>
(<a href="#" class="imk-cue" data-seek="0:46">00:00:46</a>)  ここに、API KEYを入れるんですね。<br>
(<a href="#" class="imk-cue" data-seek="0:52">00:00:52</a>)  それはちょっとまた別の場面で、ここのURLからですね、<br>
(<a href="#" class="imk-cue" data-seek="0:58">00:00:58</a>)  設定方法を見て、取得して入力してください。<br>
(<a href="#" class="imk-cue" data-seek="1:05">00:01:05</a>)  それは今回は説明しません。<br>
(<a href="#" class="imk-cue" data-seek="1:13">00:01:13</a>)  それで、まず、<br>
(<a href="#" class="imk-cue" data-seek="1:15">00:01:15</a>)  Google Chromeを、表示するのですけれども、<br>
(<a href="#" class="imk-cue" data-seek="1:20">00:01:20</a>)  Google Chromeから、<br>
(<a href="#" class="imk-cue" data-seek="1:22">00:01:22</a>)  「音声認識字幕ちゃん」を表示するのですけれども、<br>
(<a href="#" class="imk-cue" data-seek="1:27">00:01:27</a>)  それが、OBSの画面上のどの位置に配置するか、<br>
(<a href="#" class="imk-cue" data-seek="1:33">00:01:33</a>)  どの大きさで配置するか、というのは、<br>
(<a href="#" class="imk-cue" data-seek="1:36">00:01:36</a>)  人によって様々だと思いますので、<br>
(<a href="#" class="imk-cue" data-seek="1:42">00:01:42</a>)  それに合わせるために、<br>
(<a href="#" class="imk-cue" data-seek="1:45">00:01:45</a>)  ウィンドウサイズを、<br>
(<a href="#" class="imk-cue" data-seek="1:47">00:01:47</a>)  色々変えれるようにしておく必要があるんですね。<br>
(<a href="#" class="imk-cue" data-seek="1:51">00:01:51</a>)  それでこのプラグインを入れます。<br>
(<a href="#" class="imk-cue" data-seek="1:55">00:01:55</a>)  Window Resizerというものです。<br>
(<a href="#" class="imk-cue" data-seek="2:01">00:02:01</a>)  Chromeウェブストアから拡張機能を選んで、<br>
(<a href="#" class="imk-cue" data-seek="2:07">00:02:07</a>)  その中で検索のところに、<br>
(<a href="#" class="imk-cue" data-seek="2:11">00:02:11</a>)  Window Resizerと入れて、このアプリケションを探して、<br>
(<a href="#" class="imk-cue" data-seek="2:19">00:02:19</a>)  それでダウンロードしてください。<br>
(<a href="#" class="imk-cue" data-seek="2:26">00:02:26</a>)  で、次にWindow Resizerの設定をします。<br>
(<a href="#" class="imk-cue" data-seek="2:31">00:02:31</a>)  すでに既定値として、ご覧のように320以下ですね、<br>
(<a href="#" class="imk-cue" data-seek="2:38">00:02:38</a>)  この1920までが既定値としてあるのですけれども、<br>
(<a href="#" class="imk-cue" data-seek="2:43">00:02:43</a>)  サイズのですね、<br>
(<a href="#" class="imk-cue" data-seek="2:44">00:02:44</a>)  ところがやっぱり私としては、<br>
(<a href="#" class="imk-cue" data-seek="2:48">00:02:48</a>)  OBSの画面の右下のところに、翻訳が出るなら出したいので、<br>
(<a href="#" class="imk-cue" data-seek="2:54">00:02:54</a>)  もうちょっと小さいサイズのものを作りたいです。<br>
(<a href="#" class="imk-cue" data-seek="2:58">00:02:58</a>)  そこで819 x 614というものを作りたいと思うので、<br>
(<a href="#" class="imk-cue" data-seek="3:04">00:03:04</a>)  自分で作ります。<br>
(<a href="#" class="imk-cue" data-seek="3:07">00:03:07</a>)  このpresetsのところの、+のところを押して、<br>
(<a href="#" class="imk-cue" data-seek="3:12">00:03:12</a>)  そうすると別の画面に移行して設定ができます。<br>
(<a href="#" class="imk-cue" data-seek="3:16">00:03:16</a>)  で、それの設定が済みますと、<br>
(<a href="#" class="imk-cue" data-seek="3:19">00:03:19</a>)  このpresetsの一番上段のところに、<br>
(<a href="#" class="imk-cue" data-seek="3:23">00:03:23</a>)  今設定した新しいものが出てきます。<br>
(<a href="#" class="imk-cue" data-seek="3:34">00:03:34</a>)  Window Resizer設定のもう一つです。<br>
(<a href="#" class="imk-cue" data-seek="3:39">00:03:39</a>)  それは、hotkeysでpresetを設定します。<br>
(<a href="#" class="imk-cue" data-seek="3:46">00:03:46</a>)  presetの上から、<br>
(<a href="#" class="imk-cue" data-seek="3:49">00:03:49</a>)  presetが1,2,3,4,5...と順番が付いてますけども、<br>
(<a href="#" class="imk-cue" data-seek="3:54">00:03:54</a>)  これが先程のこの順番と対応してます。<br>
(<a href="#" class="imk-cue" data-seek="4:00">00:04:00</a>)  従って、<br>
(<a href="#" class="imk-cue" data-seek="4:01">00:04:01</a>)  今私が作った819 x 614は、<br>
(<a href="#" class="imk-cue" data-seek="4:07">00:04:07</a>)  この下の、Resize to preset 1 に対応しています。<br>
(<a href="#" class="imk-cue" data-seek="4:13">00:04:13</a>)  従って私はここに、登録しました。次に。<br>
(<a href="#" class="imk-cue" data-seek="4:25">00:04:25</a>)  もう一つ準備することがあります。<br>
(<a href="#" class="imk-cue" data-seek="4:29">00:04:29</a>)  Google Chromeで、<br>
(<a href="#" class="imk-cue" data-seek="4:31">00:04:31</a>)  「音声認識字幕ちゃん」を起動させるための、<br>
(<a href="#" class="imk-cue" data-seek="4:35">00:04:35</a>)  Appleスクリプトが必要になることです。<br>
(<a href="#" class="imk-cue" data-seek="4:40">00:04:40</a>)  それは既定ブラウザをChromeにしていない場合も多いためです。<br>
(<a href="#" class="imk-cue" data-seek="4:51">00:04:51</a>)  スクリプトは簡単です。<br>
(<a href="#" class="imk-cue" data-seek="4:54">00:04:54</a>)  tell application "Google Chrome"<br>
(<a href="#" class="imk-cue" data-seek="5:00">00:05:00</a>)  activate open location <br>
(<a href="#" class="imk-cue" data-seek="5:05">00:05:05</a>)  「音声認識字幕ちゃん」のURLを入れます。<br>
(<a href="#" class="imk-cue" data-seek="5:11">00:05:11</a>)  そして、end tell です。<br>
(<a href="#" class="imk-cue" data-seek="5:19">00:05:19</a>)  その設定したものを、Stream Deckへ登録します。<br>
(<a href="#" class="imk-cue" data-seek="5:26">00:05:26</a>)  Stream Deckで、マルチアクションという形で登録します。<br>
(<a href="#" class="imk-cue" data-seek="5:30">00:05:30</a>)  一つ目は、Chromeで、<br>
(<a href="#" class="imk-cue" data-seek="5:33">00:05:33</a>)  「音声認識字幕ちゃん」を開くAppleスクリプトです。<br>
(<a href="#" class="imk-cue" data-seek="5:40">00:05:40</a>)  二つ目は開いたChromeのサイズ合わせをします。<br>
(<a href="#" class="imk-cue" data-seek="5:48">00:05:48</a>)  先ほど設定したホットキーです。<br>
(<a href="#" class="imk-cue" data-seek="5:56">00:05:56</a>)  以上で設定は終わりです。<br>
(<a href="#" class="imk-cue" data-seek="6:00">00:06:00</a>)  で、Stream Deckからそのマルチアクションを起動します。<br>
(<a href="#" class="imk-cue" data-seek="6:05">00:06:05</a>)  そうすると下のようにですね、Chromeが立ち上がります。<br>
(<a href="#" class="imk-cue" data-seek="6:12">00:06:12</a>)  最初に立ち上げた時は、<br>
(<a href="#" class="imk-cue" data-seek="6:14">00:06:14</a>)  マイクの使用がまだ許可されてないと思いますので、<br>
(<a href="#" class="imk-cue" data-seek="6:18">00:06:18</a>)  それを許可します。<br>
(<a href="#" class="imk-cue" data-seek="6:21">00:06:21</a>)  そうすると以下のように表示されます。<br>
(<a href="#" class="imk-cue" data-seek="6:24">00:06:24</a>)  おはようございます<br>
(<a href="#" class="imk-cue" data-seek="6:26">00:06:26</a>)  Good morning、早上好。<br>
(<a href="#" class="imk-cue" data-seek="6:30">00:06:30</a>)  既にですね。第一翻訳語として英語、第二翻訳語として中国語を設定してあります。<br>
(<a href="#" class="imk-cue" data-seek="6:38">00:06:38</a>)  なのでこういうふうに出てきます。以上で準備が終わりまして、<br>
(<a href="#" class="imk-cue" data-seek="6:49">00:06:49</a>)  次のステップはこれをOBSへ取り込む、<br>
(<a href="#" class="imk-cue" data-seek="6:54">00:06:54</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">最近、ちまたでもスマホの翻訳アプリ、翻訳機器などを目にすることが多くなってきました。しかも同時翻訳までできてしまうのには驚きです。ただ、いざ使おうと思うと、最初はお試しで無料ですが、有料に誘われます。しかもこの翻訳系のサービスは、サブスクが殆どで、毎月料金が発生する形になります。しかもその提供会社はたいていは海外の会社でUSドルベースが多く、円支払いでは毎月3000~5000円などと高額になり、趣味の域を超えます。</p>



<p class="wp-block-paragraph">今回紹介する「音声認識字幕ちゃん」は、大学の教員をされている西村良太さんが個人で開発され一般に公開されている、<strong>「Webベースの、文字起こし＋同時翻訳アプリ」です。大変使いやすくしかも無料</strong>です。西村さんには感謝申し上げます。</p>



<p class="wp-block-paragraph">このサイトで提供されている起動用アプリですが、Windows用のbatファイルは直接に動作するので使いやすいですが、Macはそのままクリックしても動かずシェルスクリプトでアプリ化して動かすようにしました。</p>



<figure class="wp-block-image size-large"><a href="https://imakat.com/rd.php?id=6Tp6Gvsb.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=6Tp6Gvsb.png" alt=""/></a><figcaption class="wp-element-caption">MacのAutomatorを起動→アプリケーションを選択→シェルスクリプトを実行を選択→「音声認識字幕ちゃん」からダウンロードしたmac用起動ファイルjimakuChan_nonStop.commandをテキストエディタで開く→最初の#!/bin/shの部分を除いて、Automatorへペースト→xxxxxx.appを作成。</figcaption></figure>



<p class="wp-block-paragraph">Macは一手間増える感じもありますが、異なる設定条件の複数の字幕ちゃんを起動できるのは素晴らしいことです。</p>



<p class="wp-block-paragraph">但し、OBSに組み込んで使う時などは、都度、翻訳なしにしたり、言語を切り替えたりすることもありそうで、そうした自由度は、<strong>Webベースの中で、設定を変更できる方が、都合がいい</strong>と思い、今回は、Webをそのまま使うような流れを考えてみました。</p>



<p class="wp-block-paragraph">但し、日本語の認識、及び、翻訳のレベルは、それほど高いとは言えず、語学を勉強された方からすれば、不満でしょう。標準語でゆっくり話す必要があります。またネットワークの状況で認識の感度が振れます。補助的な用途としてであれば、使い物になるでしょう。</p>



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



<p class="wp-block-paragraph">ビデオを補足します。</p>



<h4 class="wp-block-heading">１　「音声認識字幕ちゃん」はGoogle Chromeで起動する。</h4>



<p class="wp-block-paragraph">同時翻訳を行う場合は、Google Script API-KEYが必要です。その取得については、</p>


<a rel="noopener" target="_blank" href="http://www.sayonari.com/trans_asr/index_asr.html" title="&#12522;&#12480;&#12452;&#12524;&#12463;&#12488;&#20013;... - &#38899;&#22768;&#35469;&#35672;&#23383;&#24149;&#12385;&#12419;&#12435;" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img fetchpriority="high" decoding="async" src="https://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.sayonari.com%2Ftrans_asr%2Findex_asr.html?w=320&#038;h=180" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">&#12522;&#12480;&#12452;&#12524;&#12463;&#12488;&#20013;&#8230; &#8211; &#38899;&#22768;&#35469;&#35672;&#23383;&#24149;&#12385;&#12419;&#12435;</div><div class="blogcard-snippet external-blogcard-snippet"></div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img decoding="async" src="https://www.google.com/s2/favicons?domain=http://www.sayonari.com/trans_asr/index_asr.html" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">www.sayonari.com</div></div></div></div></a>


<p class="wp-block-paragraph">の説明に従ってください。</p>



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



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



<h4 class="wp-block-heading">２　Google Chromeの起動時のウインドウサイズを固定できるようにする。</h4>



<p class="wp-block-paragraph">「音声認識字幕ちゃん」の緑色の字幕欄を、OBSでウインドウキャプチャーして、読み込むことを想定していますが、もともとブラウザは、自由にフニャフニャとウインドウサイズを動かすように出来ているため、それを固定させるのが起動用アプリのわけですが、設定変更の自由度が欲しいのとMacの場合の手間の多さから、ブラウザの中の緑色の字幕欄のサイズを固定させて、ブラウザの中で、フォントを変更するようにしたいわけです。</p>



<p class="wp-block-paragraph">そのために,ウィンドウサイズを自由に追加登録して、それをホットキーで選択できるプラグイン、Window Resizerを使います。</p>



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



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



<h4 class="wp-block-heading">３　「音声認識字幕ちゃん」を起動させるためのAppleスクリプトを作る。</h4>



<p class="wp-block-paragraph">私の場合は、既定ブラウザはSafariにしています。確かに、Safariでは、「音声認識字幕ちゃん」の文字起こし翻訳が起動しません。「音声認識字幕ちゃん」のURLはChromeと紐付けする必要があります。</p>



<p class="wp-block-paragraph">Appleスクリプトは簡単です。</p>



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



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



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



<h4 class="wp-block-heading">4　Stream Deckへマルチアクションとして登録する。</h4>



<p class="wp-block-paragraph">二つのアクションを登録します。一つ目は、Chromeで「音声認識字幕ちゃん」を開く、Appleスクリプトです。二つ目は、そのChromeのサイズを合わせるアクションです。私はStream Deckを使いますが、他にもホットキー、ショートカットを登録できるアプリがありますので、活用ください。</p>



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



<h4 class="wp-block-heading">５　Stream Deckからマルチアクションを起動する。</h4>



<p class="wp-block-paragraph">Webベースで起動すると、後から簡単に変更ができるので便利です。翻訳言語の変更削除、フォントの変更などがラクです。</p>



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



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



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



<p class="wp-block-paragraph">音声認識字幕ちゃん<br>Google Chrome<br>Window Resizer ( Chromeプラグイン)<br>Mac スクリプトエディタ<br>Stream Deck<br><br>Adobe Character Animator(スターター)<br>Final Cut Pro<br>Vrew(無料)<br>フリーボード<br>Mac mini M2<br>BGM: オリジナル音楽</p>



<p class="wp-block-paragraph">以上です。</p>
]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">18463</post-id>	</item>
		<item>
		<title>【小団体のIT】スマホから5つのSNSへ、アプリを開かないで送信する方法~AppSheet~</title>
		<link>https://imakat.com/2022/05/06/14993/</link>
		
		<dc:creator><![CDATA[imakat]]></dc:creator>
		<pubDate>Fri, 06 May 2022 07:35:14 +0000</pubDate>
				<category><![CDATA[デジタル]]></category>
		<category><![CDATA[ものづくり]]></category>
		<category><![CDATA[Push7]]></category>
		<category><![CDATA[Blogger]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[SNS]]></category>
		<category><![CDATA[ワンタッチ]]></category>
		<category><![CDATA[Twitter]]></category>
		<category><![CDATA[Gメール]]></category>
		<category><![CDATA[Googleスプレッドシート]]></category>
		<category><![CDATA[中途半端な規模]]></category>
		<category><![CDATA[GAS]]></category>
		<category><![CDATA[LINE]]></category>
		<category><![CDATA[API]]></category>
		<guid isPermaLink="false">https://imakat.com/?p=14993</guid>

					<description><![CDATA[2023.7.31：TwitterがXに移行。APIへの影響が不明。2023.2.16追記：TwitterAPIの有料化の発表がありましたが、投稿bot1500個までは無料化へ自動移行とのことで、多くの場合、問題なさそう [&#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">2023.7.31：TwitterがXに移行。APIへの影響が不明。<br>2023.2.16追記：TwitterAPIの有料化の発表がありましたが、投稿bot1500個までは無料化へ自動移行とのことで、多くの場合、問題なさそうです。<br>2022.5.13更新：Twitterを追加。無料使用に留める場合は、API v2を利用すること。</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">＜分散通知をスマホから実行する＞<br><span class="fz-12px"><a href="https://imakat.com/page-220506/" target="_blank">別ページで表示</a></span></p>



<img decoding="async" src="https://docs.google.com/drawings/d/e/2PACX-1vR8WAJSVQk0EV-LtoZdCv8V5n9CnwkUHGAVB1RmMiV05BKu9OWCDJoi8WOuEPfcwWKfEanrFwYxRqft/pub?w=1440&amp;h=1080">



<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">メールとブログを含めるとSNSよりソシアルメディア(Social Media)という方が正しいのでしょうが、単語として分かりにくいので、ここでは「情報を配信するツール」としてSNSと呼ばせてもらいます。</p>



<p class="wp-block-paragraph">さて、昨年5回に亘って、「分散通知の仕組みを作る」として、電子メール、LINE、Push7、Bloggerのそれぞれへ、<strong><span class="marker">アプリを開かないで送信する仕組み</span></strong>、を説明しました。</p>



<p class="wp-block-paragraph">しかし、スマホで操作すると、GoogleスプシをChromeのPCサイトから扱う、という方法は非常に扱いづらいことは分かっていました。</p>



<p class="wp-block-paragraph">今回、それを、かなり<strong><span class="marker">実用的に改善しました</span></strong>ので紹介します。</p>



<p class="wp-block-paragraph">実は、AppSheetとGASの連携については、Google内で開発が進んでいますので、半年先には、もっと簡単に色々できるようになっているかもしれません。</p>



<p class="wp-block-paragraph">しかし今回私が改善したいこと自体が、さほど、高度な技術を要求することでもありませんので、現状の技量でアプローチしてみます。</p>



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



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



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



<h4 class="wp-block-heading">＜1＞ 人の手作業は、文を作成修正する→送りたいSNSを選び送信する、ただそれだけ。</h4>



<p class="wp-block-paragraph">前回の通知方式では、SNSアプリ別にGoogleSSとGASを組み合わせて、GoogleSSを立ち上げて内容を確認して、送信ボタンを押す、これをSNSアプリ毎に行う方式でしたが、今回は、GoogleSSは一つのファイルにして、その中へ、GASを各アプリ別に組み込む、という方法にしました。</p>



<p class="wp-block-paragraph">その各アプリ別のGASは、前回の通知方式で作ったものを、ほぼそのまま流用しています。<br>作業手順は以下のようになります。</p>



<p class="wp-block-paragraph">＜作業手順＞<br><span class="fz-12px"><a href="https://imakat.com/page-220507/" target="_blank">別ページで表示</a></span></p>



<img decoding="async" src="https://docs.google.com/drawings/d/e/2PACX-1vQWnxlTE0kL7hQM7qSqi0qRi0U5C5GMRkO8XM-D5EdpkDVyPPPfuzfDKy5GulyJMi1QOOylwOqPxkoT/pub?w=1440&amp;h=1080">



<p class="wp-block-paragraph">前回は、各GoogleSSを立ち上げて、投稿ボタンを押す、これを繰り返すという手間がありました。それがAppSheetの以下の２つのメニューで完結するようにしました。なお、AppSheetについては、<a href="https://imakat.com/2022/02/27/14686/" target="_blank">こちらの投稿</a>の中で、概略触れています。解説している日本語の書物は殆ど見かけませんが、唯一<a rel="noopener" target="_blank" href="https://www.amazon.co.jp/Google-AppSheet-ではじめる-ノーコード開発入門-掌田津耶乃/dp/4899775199/ref=asc_df_4899775199/?tag=jpgo-22&amp;linkCode=df0&amp;hvadid=524423533651&amp;hvpos=&amp;hvnetw=g&amp;hvrand=18135569281701901134&amp;hvpone=&amp;hvptwo=&amp;hvqmt=&amp;hvdev=c&amp;hvdvcmdl=&amp;hvlocint=&amp;hvlocphy=1009446&amp;hvtargid=pla-1290663459033&amp;psc=1&amp;th=1&amp;psc=1">これ<span class="fa fa-external-link external-icon anchor-icon"></span></a>くらいです。使っているうちにだんだん慣れてくるとは思います。</p>



<p class="wp-block-paragraph">AppSheetアプリの実際の動きは、以下の動画をご覧ください。</p>



<div style="position:relative;">
<iframe src="https://player.vimeo.com/video/707215784?&#10;title=0&amp;&#10;byline=0&amp;&#10;muted=0&amp;&#10;portrait=0&amp;&#10;autopause=0" 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>
<p>このビデオは無音です。Twitterは組み込む前です。</p>



<p class="wp-block-paragraph">以上のような動きになりますが、その中で、通知の作成及び修正の画面が以下です。追加または修正した行が、通知の送信の対象となります。ですから、今現在適当なテスト内容になっていますが、例えば、「避難情報通知用」などテンプレートとして用意しておくのもいい方法です。</p>



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



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



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



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



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



<p class="wp-block-paragraph">上図を表示しているデータは、以下です。sheet1には順次新しい投稿が書き込まれて、それを更新日時でSORTしたものがsheet2へ入り、その最新行からsheet3をコピーしています。</p>



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



<figure class="wp-block-image size-large"><a href="https://imakat.com/rd.php?id=IoyR23xN.png" target="_blank"><img decoding="async" src="https://imakat.com/rd.php?id=IoyR23xN.png" alt=""/></a><figcaption class="wp-element-caption">Twitterについては、投稿の重複は拒否されるので、その点の工夫が必要。</figcaption></figure>



<p class="wp-block-paragraph">「拡張機能」→「Apps Script」の中に記述したスクリプトは、全部掲載します。</p>



<p class="wp-block-paragraph"><a href="https://imakat.com/page-220507-2/" target="_blank">複数SNSの送信GAS</a></p>



<h4 class="wp-block-heading">＜２＞　Twitterを使えるようにする。</h4>



<p class="wp-block-paragraph"><strong>Twitter</strong>ですが、災害発生時には最も実績のある情報発信ツールであることは、東日本大震災他大災害の時を振り返れば明らかです。ただ、利用者が多いからか、イタズラや不正利用を防止せねばならず、APIのような、外部からアクセスできるツールに対する許可は、敷居が高い印象がありました。</p>



<p class="wp-block-paragraph">しかし、申し込んでみると結構すんなりいけます。最近、APIが、APIv1.1からAPI v2にバージョンアップしました。どうもAPI v2から直接使う方法が分かりにくく、色々調べて、TwitterAPI v2をEssentialから<strong>Elevated(無料）</strong>へ引き上げる方法が良さそうです。</p>



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



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



<p class="wp-block-paragraph">引き上げる際に、許可が必要で、用途に関する質問に英語で返答する必要がありますが、簡単な英語で書いても大丈夫かと思います。数多く解説のブログが書かれていますが、例えば<a rel="noopener" target="_blank" href="http://pineplanter.moo.jp/non-it-salaryman/2021/07/17/gas-twitter/">このブログ<span class="fa fa-external-link external-icon anchor-icon"></span></a>は分かりやすいです。</p>



<p class="wp-block-paragraph"><br>引き上げておいて、<br>OAuth1.0aのみにチェック<br>OAUTH1.0A SETTINGS でRead and writeにチェック<br>CallbackURI/RedirectURL ,WebsiteURL,Terms of service,Privacy policyは、https://twitter.com<br>と設定します。</p>



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



<p class="wp-block-paragraph"><br>Twitterは、同一内容の複数投稿は拒否するようです。その辺りは、GoogleSSのカラムに前回の投稿内容をコピーして今回の投稿内容と比較して、同じ場合は、tweet.gs内でルーチンを通さないようにしました(上のGASを参照）。</p>



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



<h4 class="wp-block-heading">＜３＞　AppSheetで作ったアプリはプロの仕上がり感</h4>



<p class="wp-block-paragraph">AppSheetは、各SNSのロゴをイメージとして読み込んで表示するだけのことですが、上の図のように、プロが作ったようなアプリになります。そこが素晴らしい。</p>



<p class="wp-block-paragraph">課題点というか仕方ない点としては、各SNS別に送信履歴を残していない点です。これはまあ、各アプリ側では当然履歴として残っていますのでそれで十分でしょう。</p>



<p class="wp-block-paragraph">現状は、各SNS側の画面から通知文の修正は出来ないようになっています。しかし、基本となる通知文を作った後で、それを各アプリ側でコピーして、各アプリ側で修正して送信する、という流れの方が素直かも知れません。<br>このあたりは、AppSheetとGASの連携の開発が進むと、すぐに可能になりそうです。しかしながら、今回のものでも、特に不便は感じません。</p>



<h4 class="wp-block-heading">＜４＞頻繁にテスト出来ない悩み</h4>



<p class="wp-block-paragraph">この複数通知の仕組みを作って思う課題、課題というか悩みは、頻繁にテスト出来ないことです。なにしろ、緊急通知が目的ですから、滅多に通知なんか発信されるものではないです。テスト用にそれぞれIDやアドレスを作ったとしても、実用としては常に本番用のアドレスにしておかなければ意味がありません。そんなわけで、実際に全部テストできるのは、年に一度の「防災訓練の日」の活動の一環としてテスト送信させてもらう、ということになります。</p>



<p class="wp-block-paragraph">そこがちょっと不便なところ。</p>



<p class="wp-block-paragraph">でも多くの方は、そんな緊急発信のためではなく、いわゆる普通の「伝言板」「回覧板」的な使い方になると思いますので、十分、応用できると思います。</p>



<h4 class="wp-block-heading">＜５＞まとめ〜中途半端な規模の人たちのために〜懸念材料</h4>



<p class="wp-block-paragraph">地方自治体で多いのは、「LINEに加入してアプリを入れて活用してください」型です。正直言ってLINEを嫌いな人もいるはず。しかし最近、だんだん、LINEに限定させず複数のSNSの中から、ユーザーが選択できる形式も増えてきました。</p>



<p class="wp-block-paragraph">スタッフの充実した都市の役所や大規模組織なら色々そうした工夫ができるでしょう。逆に、本当に小さい規模なら電話一本、伝言でOKでしょう。しかし<strong>大多数は、そのどちらとも言えない中途半端な規模</strong>の自治会、中途半端な規模のNPO。公民館はあるが住み込みは置けない。電話もない。自治会としてインターネット契約をすることは結構面倒なので、個人に契約者になってもらおうとすると、その個人がいつまで肩代わりしてくれるか保証はない。そうなると、Googleなどのサービスも無料で使えるものが中心となります。そんな人たちのために、少しでもお役に立てば嬉しいです。</p>



<p class="wp-block-paragraph">懸念材料としては、Twitter Botに有料化の動きがあること。GASやAppSheetの連携が自動化処理と見做されると停止されるか有料化されることを懸念します。つまり無料で使えるインターネットサービスは、減少していく方向にあるでしょう。</p>



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


]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">14993</post-id>	</item>
	</channel>
</rss>
