CNN Student News - Archive - CNN.comを英語の学習に使っている人は多いはず
でも、Transcriptが見にくいと思った
個人的に
- ピリオドのあとに改行があると読みやすい
- セリフなのか話者を表しているのかを区別して欲しい
- 行間は広すぎない方が好き
というニーズがあったので、GreasemonkeyのUser Scriptとして実現した
作ったもの
Gistに置いた
https://gist.github.com/petitviolet/eb1836eef8d72e736404
ここをクリックするとインストール出来る
(function CnnStudentNewsStyle() {
console.log("modify style...");
var body = document.getElementsByClassName("cnnBodyText")[2];
var contents = body.innerHTML.replace(/\.\s/g, ".<br>");
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]);
}
}
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.
とかの略字でピリオド使ってるところでも壊れたりする
もともと何故こんなに汚いのか不思議だった