スイッチの選択を改善
前ページの「ver. 0.1」は、❷「 」のアイコンをこのツールの起動ボタンにしましたが、そのせいで少しややこしい事をしています。
「字幕設定」は ❷ボタンから始まりますが、❷を押すと同時に、ツールがメニューの自動操作をし始めます。 しかしそれでは、❷で始める他の「アノテーション」「再生速度」「画質」のメニューは、ユーザーが操作できません。 そこで、「日本語設定」が完了したら、このツール自体が働かない様にするコードが必要になりました。
しかし問題はそれだけではありません。 動画を1つだけ閲覧する場合は無問題ですが、あるチャンネルの動画を複数閲覧する様な場合は、動画ページ内でコンテンツの差換えをする仕組みの様です。 この場合、「JP-Subtitles」は2個目以降を「日本語設定」出来なくなります。 YouTubeページ自体をリロードすれば、スクリプトが再起動されて「日本語設定」が可能ですが、これでは不便です。
ツールが何度も「日本語設定」できる様に、しかも「日本語設定」が完了した後は、メニューを支配しなくする必要があり、ここは難儀しました。 そもそも、ツールの常駐で勝手に日本語字幕が出る様にせず、わざわざスイッチを押す方式にしたのは、このコントロールの問題があったからです。
もっとスマートな方法に改善
なんとか使える「ver. 0.1」が出来たのですが、一晩考えてもっとスマートな方法に気付きました。 ❶の「字幕」スイッチは、字幕のON/OFFのみを行うので、これをツールの起動スイッチにすれば、❷の他のメニューは普通に使えます。 後から考えると何を考えて ❷をスイッチに選んだのかという話ですが。
で、❶をスイッチにすると操作が大変判り易くなりました。 スクリプトのコード構成もシンプルに出来ました。 これは恥ずかしくない操作性です。
日本語字幕に変更する操作（ver. 0.2 の操作方法）
◎ ❶「字幕」のスイッチをクリックして赤いアンダーラインが付ける事ができれば、自動的に「日本語字幕」が表示されます。
▪「字幕」をONに出来ない動画の場合は、このツールも無効です。
◎ ❶「字幕」のスイッチをクリックして赤いアンダーラインを消すと、「日本語字幕」は非表示になります。
◎ YouTubeの設定で「自動生成された字幕を含める」を「ON」にしている場合は、最初から赤いアンダーラインが表示され、この場合は ❶を2度クリックします。
▪「ver. 0.1」の説明で「自動生成された字幕を含める」を「ON」にされた方が居られましたら、申し訳ありません◞(..)◟ もう一度以下のリンク先で、「自動生成された字幕を含める」の方は「OFF」にしてください。
「JP-Subtitles」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 ツールは常駐タイプで常時にONにしておくと、YouTube動画ページでのみ機能します。 また、ページ埋込みされた YouTube動画でも、この機能は有効です。
以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 JP-Subtitles 〕 ver. 0.2
// ==UserScript==
// @name JP Subtitles
// @namespace http://tampermonkey.net/
// @version 0.2
// @description YouTube動画の日本語字幕をワンタッチで表示する
// @author everyone
// @match https://www.youtube.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant none
// ==/UserScript==
let able_flag;
let target=document.querySelector('head');
let monitor=new MutationObserver(main);
monitor.observe(target, { childList: true });
main();
function main(){
let h_v_p_p_m=document.querySelector('.html5-video-player.playing-mode');
let y_sb_b=document.querySelector('.ytp-subtitles-button');
if(y_sb_b && h_v_p_p_m){
y_sb_b.onclick=function(){
able();
if(able_flag==1){
push_0();
setTimeout(()=>{
push_1(); }, 20);
setTimeout(()=>{
push_2();
hide(); }, 40);
setTimeout(()=>{
push_3();
hide(); }, 200);
end(); }
}}}
function able(){
let y_sb_b=document.querySelector('.ytp-subtitles-button');
if(y_sb_b){
if(y_sb_b.getAttribute('aria-pressed')=='true'){
able_flag=1; }
else{
able_flag=0; }}}
function hide(){
let y_s_m=document.querySelector('.ytp-settings-menu');
if(y_s_m){
y_s_m.style.display='none'; }}
function push_0(){
let y_st_b=document.querySelector('.ytp-settings-button');
if(y_st_b){
y_st_b.click(); }}
function push_1(){
let y_menu=document.querySelectorAll('.ytp-menuitem');
for(let k=0; k<y_menu.length; k++){
if(y_menu[k].querySelector('.ytp-menuitem-icon')){
if(y_menu[k].textContent.includes('字幕')
&& y_menu[k].querySelector('.ytp-menuitem-label-count')){
if(able_flag==1){
y_menu[k].click(); }}}}}
function push_2(){
let y_m=document.querySelectorAll('.ytp-menuitem');
for(let k=0; k<y_m.length; k++){
if(y_m[k].textContent.includes('自動翻訳')){
if(able_flag==1){
y_m[k].click(); }}}}
function push_3(){
let y_m=document.querySelectorAll('.ytp-menuitem');
for(let k=0; k<y_m.length; k++){
if(y_m[k].textContent.includes('日本語')){
if(able_flag==1){
y_m[k].click(); }}}}
function end(){
let y_m_c=document.querySelectorAll('.ytp-menuitem-content');
for(let k=0; k<y_m_c.length; k++){
if(y_m_c[k].textContent.includes('>> 日本語')){
able_flag=0;
let y_s_m=document.querySelector('.ytp-settings-menu');
if(y_s_m){
y_s_m.style.display='inherit'; }}}}
「JP-Subtitles」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「JP-Subtitles」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
