趣味ブログ

好きなことを書いていきます。 主にプログラミングなり、転職活動の体験談だったり、読んだ本の内容だったりです。

英語の勉強にYouTubeを使っています。
面白そうなチャンネルを英語で楽しみながら毎日勉強していますが、


字幕テキストを一式でダウンロードしておけたら
よりいっそう捗ると思うんです。

スクリーンショット_2021-02-04_22_36_30

以前、字幕を自動抽出するChrome拡張機能についてツイートしました。
今から紹介する方法は
Chromeさえあればできる簡単な方法となっています。

というわけで、さっそくご紹介していきます。

字幕を抽出する動画を開く

字幕を抽出したい動画を開きましょう。

今回は
日本の都市伝説を紹介している動画を例に説明していきます。


次に進む前に
字幕を事前にオフにしておきます。
スクリーンショット_2021-02-04_23_20_44

字幕ファイルのURLの取得

まずは字幕ファイルのURLを抽出するために
Chromeデベロッパーツールで操作をしていきます。

Chromeデベロッパーツールを開く

「画面を右クリック」→「検証」を進みます。
スクリーンショット_2021-02-04_23_05_07
こんな画面が開いたら次へ進みます。
スクリーンショット 2021-02-04 23.08.21

「Network」タブへ移動

メニューの「Network」をクリックします。
スクリーンショット_2021-02-04_23_08_21

字幕ファイルURLの検索

左上の「Filter」に「timedtext」と入力します。
DevTools_-_www_youtube_com_watch_v_saLcKOmPVlg2

画面の再読み込みと字幕の選択

この状態で画面を再読込します。
そして字幕を選択します。
_3__Top_10_Scary_British_Urban_Legends_-_YouTube
そうすると「timedtext?v=」から始まるURLが出て来ます
DevTools_-_www_youtube_com_watch_v_qERHIFVlZR0
これを「右クリック」→「Copy」→「Copy link address」の順に進みます。
スクリーンショット_2021-02-04_23_33_39
そうすることで字幕ファイルのURLが取得できました。
このURLにアクセスると字幕ファイルがテキストになっていますが、
必要なのは枠で囲ってあるテキストのみです。
スクリーンショット_2021-02-04_23_39_31
いちいちコピーするのも大変なので
次の手順からはこのテキストから
Javascriptを使って必要なテキストのみを抽出していきます。

字幕テキストの抽出

Javascriptを実行して必要な字幕のみ抽出します。

Javascriptの実行

Chromeディベロッパーツールの「Console」タブに移動します。
スクリーンショット 2021-02-04 23.48.31
この画面になっていることを確認したら次へいきます。
スクリーンショット 2021-02-04 23.58.43
ここに以下のコードを貼り付けます。
    /****************************/
    //「url」変数に取得したURLをペースト
    let url = ''
    /****************************/
    
    async function getSubtitleData(url) {
        let res = await fetch(url)
        return res.json()
    }
    getSubtitleData(url).then(d => {
        d.events.forEach(i => {
            let str = i.segs[0].utf8.replace(/\n/g, ' ')
            if (str.match(/[.?] *$/)) text += str + '\n\n'
            else text += str + ' '
        })
        console.log(text)
    })
    
DevTools_-_www_youtube_com_watch_v_OsNchQ3-HcY
URLをペーストイメージはこんな感じになります。
スクリーンショット_2021-02-05_0_04_40
そしたらEnterを押しましょう
すると字幕が一式表示されているので
コピーするなり何なんなりとお使いください
スクリーンショット 2021-02-05 0.04.54

Chrome拡張機能化

いちいちこんな作業をして酒幕抽出するのは面倒なので
Chrome拡張機能にしました。

字幕を選ぶと自動でクリップボードにコピーされます。

「字幕をクリック」→「ペースト」
の2ステップにまで簡素化
しています。


機会があればこのChrome拡張機能についても解説していきます。

Qiitaなんかの技術ブログみたいに
エディタ風のソースコードを表示させる方法をご紹介します。
3753817_m

完成形としてはこんな感じです。

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));


code-prettifyのダウンロード

Googleの開発したcode-prettifyをダウンロードします。
これをはっつけるだけで
かんたんにクールにソースコードを表示できます。
以下からダウンロードできます。

code-prettifyをダウンロードする

「Code」→「Download.zip」と進んでダウンロードします。
スクリーンショット 2021-02-04
            2.49.50
ダウンロードしたファウのうち以下の3つを使用し、
それぞれ自分のブログにコピーします。

ファイル名 移動場所
prettify.js jsフォルダ
lang-css.js jsフォルダ
prettify.css cssフォルダ

head内への記述

<link rel="stylesheet" href="/css/prettify.css">  
ライブドアブログの場合は
「ブログ設定」→「デザイン設定」→「カスタムJS」→「head内」
に記述します。
スクリーンショット 2021-02-04
            3.07.53

body要素最下部への記述

<script src="/js/prettify.js"></script>
<script src="/js/lang-css.js"></script>
<script>
  prettyPrint();
</script>
ライブドアブログの場合は「body内」に記述します
スクリーンショット 2021-02-04
            3.07.05

使い方

<pre class="prettyprint">
<!-- ここにソースコードを貼り付ける -->
</pre>
基本はこれだけで使えます。

行数を表示させる場合

linenumsをクラスに追加します。
<pre class="prettyprint linenums">
<!-- ここにソースコードを貼り付ける -->
</pre>

最低限のカスタマイズ

行数表示の際にコードがはみ出る問題の改善

デフォルトのままで行数を表示させようとすると、
コードがはみ出てしまうのがきになると思います。
prettify.cssに以下の記述を追加します。
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
    list-style-position: outside;
    margin-left: 36px;
    padding-left: 16px;
    border-left: 1px solid #75715e;//縦線
  }

使用しているテーマ

私の以下のテーマを使用しています。

Google-prettify-monokai-themeをダウンロードする

ダウンロードしてprettify.cssを上書きするだけです。

その際に上記の行数表示修正のコードを
追記するもの忘れないようにアップロードし直しましょう。

以上となります。お疲れさまでした。

参考

参考にさせていただきました。

楽天ひかりで1年間無料キャンペーンやってるんで
それにたかろうした話です。
スクリーンショット 2021-02-03 20.42.22
スクリーンショット 2021-02-03 20.42.32
キャンペーン適応条件は
「楽天ひかりの開通」と「楽天モバイル申し込み」だけと
ハードルも低いのは魅力です。

ソフトバンク光から楽天ひかりに乗り換える上で
ちょいちょい注意点というか
アドバイス、ヒントを記載していますので

同じ環境で検討している方は参考にしてみてください。

前提情報

現在ソフトバンク光に契約しており
固定電話も光電話(N)になってて、。
毎月平均6,750円ほど払っています。

一方で、楽天モバイルの契約数が
220万を超え、もうすぐ300万に到達するとの情報を目にしました。

300万人に達すると1年間無料キャンペーンが終了してしまうので
急いで契約してみました。

さらに楽天のインターネットサービスである楽天モバイルと合わせて
「楽天ひかり」も1年間無料になるとのことで
ソフトバンク光→楽天ひかりへの乗り換えを決めました。

現在と乗り換え後はこんな感じになります。

インターネット契約 固定電話
現在 ソフトバンク光 光電話(N)
乗り換え後 楽天ひかり ひかり電話(NTTとの直接契約)

ソフトバンク光→楽天ひかりへの乗り換え手順

乗り換え手順はいたってシンプルです。

事業者許諾番号を入手

ソフトバンク光のサポートセンターへ電話をして
事業者許諾番号というものを発行してもらいます。
jigyousya_no
携帯電話を乗り換えるのに使うMNP番号のようなものです。
この11桁の英数字を教えてもらいます。
ソフトバンク光サポートセンターに電話すれば発行できます。

ソフトバンク光サポートセンター
0800-111-2009
受付時間10:00~19:00

参考:ご契約中のお客さまへ

伝えること
  • 「事業者許諾番号を発行してほしい」と伝える
  • 理由を聞かれるので「楽天ひかりへの乗り換えのため」と伝える

楽天ひかりへ申し込む

事業者許諾番号を入手を入手したら
楽天ひかりに申し込みます。

ルータを購入する

楽天ひかりを理由するにはルータを購入する必要があります。
スクリーンショット 2021-02-03 20.46.39
以下から楽天ひかりが対応しているルータ一覧が見れます。
参考:クロスパス対応ルーター一覧を見る

それぞれのルータの公式サイトからスペックを見て
以下の点を考慮しながら自分の環境にあったものを選んでみてください。
  • 利用人数
  • 接続機器台数
  • 間取り
  • 通信速度
例えばPA-WG1200HP4を例にすると公式サイトではこの様になっています。
スクリーンショット 2021-02-03 20.49.43
スピードはこんな感じ。
スクリーンショット 2021-02-03 20.51.45
価格も6000円前後と手頃で
スペックもそれなりなので手頃で妥当かなと思います。

機器返却

ソフトバンク光から光BBユニットをレンタルしている場合は
それを返却する必要があります。
softbank-bb-unit-4
注意点は
この場合はNTTロゴの入った機器は返却せず
この白いルータのみ返却するということです。
スクリーンショット 2021-02-03 21.03.50
機器を梱包して以下の宛先に返却して完了です。

<光BBユニット、Airターミナル、おうちのでんわ、ADSLモデムの返却先住所>
〒272-0001
千葉県市川市二俣678-55
ESR 市川ディストリビューションセンター 3階 北棟N8
ソフトバンク返品センター宛
※宛先の電話番号の記載は不要です

送料はこちら負担です。

返却の詳細は以下から確認できます。
解約後のお手続き

【重要】楽天ひかりへ乗り換える際の注意点

ここからが本題というか
一番伝えたいことです。

乗り換え後、通信速度をあげようとするのが大変【対策あり】

端的に言うと
ソフトバンク光の契約サービスを
「ファミリー・ギガスピード」に変更してから
楽天ひかりに乗り換えましょう。


ソフトバンク光→楽天ひかりへの乗り換え後に
通信速度をあげる場合手順が複雑になる可能性
があります。

楽天光に乗り換えたあとで回線速度をあげようとすると
インターネット回線、ひかり電話で別々に手続きをする必要があるので
手間が増えてしまいます。

対策として、
楽天ひかりに乗り換える前に、
ソフトバンク光のほうで回線タイプの変更手続きと工事を済ませてから
楽天ひかりに申し込みをしましょう。

ソフトバンク光の方でインターネット回線、固定電話での回線タイプの
手続きや工事を行ってくれて
その状態がそのまま楽天ひかりに適応されるからです。

まずはご自身のご契約サービス(回線タイプ)確認してみましょう。

契約サービスを確認する

以下からご自身の契約サービスを確認してみましょう。
会員ページログイン

ログインしたら
メニューの「お客さま情報」→「SoftBank光 ご契約内容」
という項目から確認できます。
スクリーンショット 2021-02-03 21.31.12

ソフトバンク光 サポートセンターに電話する

ご契約サービスがファミリーギガスピードになっていない方は
ファミリーギガスピードに変更してから楽天ひかりへ乗り換えましょう。
スクリーンショット 2021-02-03 21.34.29
参考:SoftBank 光]通信速度について教えてください。
参考:SoftBank 光(光回線) 料金(月額費用・初期費用)

事業者番号承諾を問い合わせたのと同じ番号にかければ
対応してくれるので、番号取得の前に事前に確認しておきましょう。
ソフトバンク光サポートセンター
0800-111-2009
受付時間10:00~19:00

参考:ご契約中のお客さまへ

工事費用

契約サービスを「ファミリー・ギガスピード」に変更する場合
工事費用が発生する可能性があります。

費用は2千円〜2万円台です。

費用がいくらになるかは工事する前に事前にはがきが来るので、
2万円台となってしまう場合で「やっぱりいいいや」と思ったときには
先のサポートセンターに連絡すれば工事を中止することができます。

解約手数料など

ソフトバンク光が買いやすくになるのでいくつか手数料が取られます。
事務手数料は必ず発生する費用で
自動更新の種類により解除料が異なります。

費用名 金額
自動更新ありプラン(5年) 16500円
自動更新ありプラン(2年) 10450円
事務手数料 3300円

参考:SoftBank 光]解約時に解除料はかかりますか?
参考:[SoftBank光]転用/事業者変更する時にかかる品目変更の手数料・工事費はいくらですか?

どれくらい安くなるのか

楽天光にすれば1年間無料になりますが、

手数料やルータ費用などを考慮しても安いのか、

2年後はどうなるのかを見ていきます。

前提条件

ソフトバンク光の毎月の費用は
以下のように計算しています。

費用名 金額
基本使用料 5,720円
オプションサービス 990円
ユニバーサルサービス料 4円
合計 6,714円

また初期費用は
ファミリーギガスピード変更時にかかる工事費用、
ルータ購入費
除外して計算しています。

なので、
後ほどそれらの金額を引けば
年間の節約額のおおよそを求めることができます。

費用名 金額
自動更新ありプラン(2年) 10,450円
事務手数料 3,300円
初期登録費 1,980円
合計 45,430円

1年目

ソフトバンク光 楽天ひかり
1月 ¥6,714 ¥45,430
2月 ¥6,714 ¥0
3月 ¥6,714 ¥0
4月 ¥6,714 ¥0
5月 ¥6,714 ¥0
6月 ¥6,714 ¥0
7月 ¥6,714 ¥0
8月 ¥6,714 ¥0
9月 ¥6,714 ¥0
10月 ¥6,714 ¥0
11月 ¥6,714 ¥0
12月 ¥6,714 ¥0
合計 ¥80,568 ¥45,430
差額 ¥35,138
この¥35,138から
工事費用とルータ購入費を引いた金額が
年間の節約額
になります。

2年目以降

楽天ひかりの公式シミュレーションに乗っと手計算します。
スクリーンショット 2021-02-03 22.59.18
ソフトバンク光 楽天ひかり
1月 ¥6,714 ¥5,280
2月 ¥6,714 ¥5,280
3月 ¥6,714 ¥5,280
4月 ¥6,714 ¥5,280
5月 ¥6,714 ¥5,280
6月 ¥6,714 ¥5,280
7月 ¥6,714 ¥5,280
8月 ¥6,714 ¥5,280
9月 ¥6,714 ¥5,280
10月 ¥6,714 ¥5,280
11月 ¥6,714 ¥5,280
12月 ¥6,714 ¥5,280
合計 ¥80,568 ¥63,360
差額 ¥17,208
単純計算で年間17,208円の節約、月でいうと1,434円の節約になるという計算ですが、
オプションサービスもつけるとなると変動するので目安として考えてください。

まとめ

携帯料金、インターネット料金が
1年間無料とかお得すぎるので、ぜひ検討してみてください。

↑このページのトップヘ