CNN StudentNewsのTranscriptを見やすくする
CNN Student News - Archive - CNN.comを英語の学習に使っている人は多いはず
でも、Transcriptが見にくいと思った
個人的に
- ピリオドのあとに改行があると読みやすい
- セリフなのか話者を表しているのかを区別して欲しい
- 行間は広すぎない方が好き
というニーズがあったので、GreasemonkeyのUser Scriptとして実現した
作ったもの
Gistに置いた
https://gist.github.com/petitviolet/eb1836eef8d72e736404
ここをクリックするとインストール出来る
// ==UserScript== // @name CNN_StudentNews_Style // @namespace petitviolet // @include http://transcripts.cnn.com/TRANSCRIPTS/**/* // @version 1 // @grant none // ==/UserScript== (function CnnStudentNewsStyle() { console.log("modify style..."); // body of transcript var body = document.getElementsByClassName("cnnBodyText")[2]; // start a new line after period(.) var contents = body.innerHTML.replace(/\.\s/g, ".<br>"); // extract speaker's name var regex = /^\s*(.+?):(.*)$/g; var brs = contents.split("<br>"); var result_texts = []; for (var i in brs) { var result = regex.exec(brs[i]) if (result != null) { var name = result[1]; var text = result[2]; name = "<br><span style='color:#944'>" + name + ":</span><br>"; result_texts.push(name + text); } else if (result != ""){ result_texts.push(brs[i]); } } // remove too much <br> tags body.innerHTML = result_texts.join("<br>").replace(/<br> <br>/g, "<br>"); console.log("end!"); })();
対象とするページのHTMLが少し変わるだけで死ぬ
比較
http://transcripts.cnn.com/TRANSCRIPTS/1502/11/sn.01.html
のやや下の方、"Oh"で始まる会話部分で比較してみる
Before
After
所感
雑に書いたので大して綺麗にはなってないが、個人的には見やすくなった
U.S.
とかの略字でピリオド使ってるところでも壊れたりする
もともと何故こんなに汚いのか不思議だった