3年かけてたどり着いた英語記事を読むための方法

<i>2023/07/03 要約ツールに｢[ChatGPTを利用する場合](#chatgptを利用する場合)｣を追加し、サンプルの生成結果を記載しました。</i>

---
以前は英語の記事の読み書きが苦手だったのを、このようにして克服した、という話を書きます。
成果を数値で測ってないですが、RSSフィードに登録している英語メディアの数が大幅に増えました。以前は全体の5%程度に対し、今は50%以上が英語メディアになっています。英語に対する心理的ハードルは大きく下がりました。

また、読む力を付けたことで自作のOSSのREADMEもほぼ自力で書けるようになりました。
https://github.com/goodwithtech/dockle/blob/master/README.md

では始めます。

# 全体像

<img width="743" alt="steps.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14275/bca6fe0e-d5bc-6734-1d67-d8ee4b3cf4ef.png">

僕の場合、1000文字以上の英文記事を読む場合、STEP1に含まれる内容は必ず行います。
STEP2に含まれるものは、辞書なしで読めないときだけ行います。
どの段階でもキーボードショートカットで利用できるようにしているので、めんどくさいとは思っていません。

また、今回の記事では、Chromeエクステンションを多用します。PDFファイルの場合、利用できなくなることが多いのですが、記事末尾に｢PDFファイルでもエクステンションを利用する｣ための方法を記載しています。

なお、今回紹介するChromeエクステンションのショートカットキーは [chrome://extensions/shortcuts](chrome://extensions/shortcuts) から設定できます。
![extensions-keyboards.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14275/94b5b508-a9e0-b4fb-f7e1-d0f66d46a831.png)


# STEP 1
## STEP 1-1. 読みやすくする

[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14275/4d5611f3-164e-f546-94f2-7f50fd4363a3.png" width="50px">DOM Distiller Reading Mode](https://chrome.google.com/webstore/detail/dom-distiller-reading-mod/oiembdaoobijmdmeobkalaehgifealpl)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14275/1b3a8291-7a31-97ab-719d-128af3d17d0c.png)

ChromiumのOSSを利用して、Reading Modeにしてくれるエクステンションです。以下のような状態になります。

- 記事の本文だけを表示 (広告/SNSリンク などが非表示)
- レイアウト/フォント/背景などを指定して読みやすい状態にする

Chrome自体でReading Modeを設定することも可能ですが、その場合多くのextensionが利用できなくなってしまいます。(`chrome-distill://xxxx` というプロトコルでページが開かれてしまうため)


## STEP 1-2. 文章の流れを最初につかむ

[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14275/696ebcff-3e98-df4d-f02c-28ff1d584a96.png" width="50px"> 要約ツール(Mac)](https://qiita.com/tomoyamachi/items/547dfc3e2bbb236497bc)
[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14275/b1dac8c0-d1f4-990e-e3b2-a13e9e9717af.png" width="200px"> SMMRY](https://smmry.com/)

最初に論旨を把握することで、誤読を防げます。不思議なもので英語の文章を読んでいると、どこか一文の意味を取り違えた結果、文章全体の意味を勘違いして受け取ることがありました。そのため、最初に要約をして論旨を把握するようにしています。
ただし、論文であれば大体最初と最後を読むほうが効率がいい(わかりやすい)です。

### 詳細

僕自身が使っているのは、Macの要約ツールと、[SMMRY](https://smmry.com/)というサイトです。
他にもいくつか試したのですが、機能/精度/速度/他ツールとの親和性を考えて、2つを使い分けています。

#### Macの要約ツールの場合
リーダーモードにすることで、余計な文章はページから消えています。ページを全選択してMacの純正要約ツールで要約します。僕はCmd+Shift+S で呼びだせるように設定しています。
ショートカットキーから呼び出す方法は、[別記事にまとめています](https://qiita.com/tomoyamachi/items/547dfc3e2bbb236497bc)。

![summary.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14275/f25d7e00-58ba-0350-0f33-9da965701828.png)


#### SMMRYを利用する場合
[SMMRY(サマリー)](https://smmry.com/)は無料の要約生成サイトです。URLを指定すると、コンテンツがある部分だけを対象に要約してくれます。ただアルゴリズムが文中に含まれるTF-IDFを元にされており、Macの要約ツールと比較すると、すこし精度が低いと感じています。

僕は以下のBookmarkletを登録しており、1クリックで要約できるようにしています。
以下の[Bookmarklet](javascript:window.open('https://smmry.com/'+location.href+'#&SM_LENGTH=10','_blank');)を実行すると、新しいタブを開き10行に要約してくれます。

```
javascript:window.open('https://smmry.com/'+location.href+'#&SM_LENGTH=10','_blank');
```

#### ChatGPTを利用する場合

2023年は読み書きともに、ChatGPTを利用しています。
https://chat.openai.com/

なお、他のサイトの情報をChatGPTに読み込ませるには、[プラグイン](https://openai.com/blog/chatgpt-plugins)が必要です。
プラグインの利用には、ChatGPT Plus($20/月)に登録する必要があります。
私が利用しているプラグインは、以下のとおりです。
- Webサイト用 : WebPilot
- PDF用 : AskYourPDF

なお、サイトのURLをコピーしたりするのが面倒なので、以下のような2つのブックマークを作ってます。これはPDFなどのページを要約する際も利用できます。

**1. 現在のサイト情報を持ったままChatGPTを開く**
GPT4を選択し、プラグインを有効にした状態で開きます。
```
javascript:window.open(`https://chat.openai.com/?model=gpt-4-plugins&from=${document.location.href}`,'_blank');
```

**2. 入力フォームに必要な情報を入力**
フォームに要約したいサイトの情報を入力します。
```
javascript:(function (){document.getElementById("prompt-textarea").value = `${new URLSearchParams(document.location.search).get('from')} Summarize it.`;})();
```

### ショートカットキー

| コマンド       |   |
|:-----------------|------------------:|
| Cmd + Shift + S| 要約ツールの呼び出し(選択範囲に対して) ※要設定              |
| Locationバーでbookmarklet呼び出し | SMMRYを開く(ページのコンテンツは自動で判別) |
| Locationバーでbookmarklet呼び出し(2種類) | ChatGPTを開く & 入力 |


### 要約ツールのPros/Cons
RESOOMERというサイトも以前利用していました。色々カスタマイズができて便利で、他のツールと違って、文章中の重要な部分だけ抜き出すという点で面白いのですが、文章が途切れると逆に分かりづらいという結果になりました。
~~基本はSMMRYを利用して、わかりづらければMacの要約ツールを利用するようにしています。~~
ChatGPTは文の抽出だけでなく、文章全体を構成しなおすので読みやすさのレベルが違います。
要約のサンプルは http://www.paulgraham.com/gba.html の記事を元にしています。


|  | 要約ツール(Mac) | SMMRY | RESOOMER | ChatGPT |
|:---:|:---:|:---:|:---:|:---:|
|料金| 無料 | 無料 |一部有料| 有料($20/月) |
|アルゴリズム| 不明 | TF-IDFの和が高い文章を抽出 |不明| GPT-4 |
|文字数制限| なし | なし |20,000文字(有料)| 8,000 tokens(単語) |
|他ツールとの親和性| - | +++ | + | +++ |
|要約形式| 一文を抽出 | 一文を抽出 | 文中から必要な部分のみ抽出 | 文章全体を構成しなおす |
|精度(感覚値)| +++ | + | + | +++++ |
|呼び出し方法| サービスから利用 | Bookmarklet | ChromeExtension | ChatGPTサイトのプロンプトから利用 |
|初回起動時間| +++ | + | - | +++ |
|要約変更時間| +++ | + | +++ | +++ |
|  | <details><summary>要約(11行)</summary><div>And then at the other extreme you have the hackers, who are trying to write interesting software, and for whom computers are just a medium of expression, as concrete is for architects or paint for painters.<br/>So instead of doing what they really want to do, which is to design beautiful software, hackers in universities and research labs feel they ought to be writing research papers.<br />All the time I was in graduate school I had an uncomfortable feeling in the back of my mind that I ought to know more theory, and that it was very remiss of me to have forgotten all that stuff within three weeks of the final exam.<br />If I had only looked over at the other makers, the painters or the architects, I would have realized that there was a name for what I was doing: sketching. <br />If universities and research labs keep hackers from doing the kind of work they want to do, perhaps the place for them is in companies. <br />So if you can figure out a way to get in a design war with a company big enough that its software is designed by product managers, they'll never be able to keep up with you. <br />When I say that the answer is for hackers to have day jobs, and work on beautiful software on the side, I'm not proposing this as a new idea. <br />Maybe it would be good for hackers to act more like painters, and regularly start over from scratch, instead of continuing to work for years on one project, and trying to incorporate all their later ideas as revisions.<br />Hackers, likewise, can learn to program by looking at good programs-- not just at what they do, but the source code too. <br />It's hard for such people to design great software [5], because they can't see things from the user's point of view.<br />But so many of the best hackers work on open-source projects now that the main effect of this policy may be to ensure that they won't be able to hire any first-rate programmers.</div></details> |<details><summary>SMMRYで要約(10行)</summary><div>Of all the different types of people I've known, hackers and painters are among the most alike.<br />What hackers and painters have in common is that they're both makers.<br />Along with composers, architects, and writers, what hackers and painters are trying to do is make good things.<br />Then at the other extreme you have the hackers, who are trying to write interesting software, and for whom computers are just a medium of expression, as concrete is for architects or paint for painters.<br />Hackers need to understand the theory of computation about as much as painters need to understand paint chemistry.<br />If hackers identified with other makers, like writers and painters, they wouldn't feel tempted to do this.<br />Most hackers don't learn to hack by taking college courses in programming.<br />Maybe it would be good for hackers to act more like painters, and regularly start over from scratch, instead of continuing to work for years on one project, and trying to incorporate all their later ideas as revisions.<br />Whereas hackers, from the start, are doing original work; it's just very bad. So hackers start original, and get good, and scientists start good, and get original.<br />As far as I know, when painters worked together on a painting, they never worked on the same parts.</div></details> | 文字数により要約不可 | <details><summary>ChatGPTで要約(10行)</summary><div>The article "Great Hackers" by Paul Graham explores the nature of hackers, their attitudes, and their importance in society. Here's a summary:<br /><br /><b>1. The Dual Meaning of 'Hacker'</b>: The term 'hacker' has two meanings. To the general public, it refers to someone who breaks into computers. However, among programmers, a hacker is a highly skilled programmer who can make a computer do what they want.<br /><b>2. The Connection Between Ugly and Brilliant Solutions</b>: The term 'hack' can refer to an ugly solution or a brilliant one that beats the system. Both types of hacks involve breaking rules, with a continuum between merely ugly hacks and brilliantly imaginative ones.<br /><b>3. Hacking Predates Computers</b>: The author points out that hacking predates computers, with examples like Richard Feynman breaking into safes during the Manhattan Project.<br /><b>4. The Disobedient Attitude of Hackers</b>: Hackers are often seen as disobedient, a trait that authorities find annoying. However, this disobedience is a byproduct of the qualities that make them good programmers.<br /><b>5. The Threat of Intellectual Property Laws</b>: Hackers are alarmed by aggressive measures to protect intellectual property, viewing them as a threat to the intellectual freedom they need to do their job. They believe that these laws hinder the development of new technology.<br /><b>6. The Importance of Civil Liberties</b>: The author argues that civil liberties make countries rich and that a society where people can do and say what they want is one where the most efficient solutions win.<br /><b>7. The Essence of Americanness</b>: The author suggests that the unruly nature of hackers is the essence of Americanness. He believes that it is no accident that Silicon Valley is in America, a place that provides a congenial atmosphere for the right sort of unruliness.<br /><b>8. The Impact of Recent Measures on America's Success</b>: The author warns that recent measures intended to protect national security and intellectual property could harm what makes America successful. He suggests that these measures, taken in an atmosphere of panic, could have the opposite of the intended effect.<br /><br />In conclusion, Paul Graham presents hackers as rule-breakers who are essential for technological progress and societal richness. He warns against the potential negative impact of restrictive intellectual property laws and emphasizes the importance of civil liberties.</div></details> |
|| <details><summary>要約(8行)</summary><div>To programmers, "hacker" connotes mastery in the most literal sense: someone who can make a computer do what he wants—whether the computer wants to or not.<br />In the past, a competitor might use patents to prevent you from selling a copy of something they made, but they couldn't prevent you from taking one apart to see how it worked.<br />If I were a legislator, I'd be interested in this mystery—for the same reason that, if I were a farmer and suddenly heard a lot of squawking coming from my hen house one night, I'd want to go out and investigate.<br />It is greatly to America's advantage that it is a congenial atmosphere for the right sort of unruliness—that it is a home not just for the smart, but for smart-alecks. <br />IBM was no doubt rather surprised by the consequences of the licensing deal for DOS, just as the hypothetical "adversary" must be when Michael Rabin solves a problem by redefining it as one that's easier to solve.<br />I think a society in which people can do and say what they want will also tend to be one in which the most efficient solutions win, rather than those sponsored by the most influential people. <br />It would be ironic if, as hackers fear, recent measures intended to protect national security and intellectual property turned out to be a missile aimed right at what makes America successful. <br />And if you want to know whether something will nurture or squash this quality, it would be hard to find a better focus group than hackers, because they come closest of any group I know to embodying it. </div></details> | <details><summary>要約(8行)</summary><div>To the popular press, "Hacker" means someone who breaks into computers.<br />To programmers, "Hacker" connotes mastery in the most literal sense: someone who can make a computer do what he wants-whether the computer wants to or not.<br />To add to the confusion, the noun "Hack" also has two senses.<br />It's called a hack when you do something in an ugly way.<br />When we were in grad school, a hacker friend of mine who spent too much time around MIT had his own lock picking kit.<br />Sometimes young programmers notice the eccentricities of eminent hackers and decide to adopt some of their own in order to seem smarter.<br />Show any hacker a lock and his first thought is how to pick it.<br />To hackers the recent contraction in civil liberties seems especially ominous.</div></details> | <details><summary>要約(20%)</summary><div>To the popular press, "hacker" means someone who breaks into computers. Among programmers it means a good programmer.<br />Believe it or not, the two senses of "hack" are also<br />that is brilliantly imaginative.<br />It is sometimes hard to explain to authorities why one would want to do such things.<br />Another friend of mine once got in trouble with the government for them.<br />They may laugh at the CEO when he talks in generic corporate<br />a certain problem can't be solved.<br />The fake version is not merely<br/>can actually slow the process of innovation.<br />They see increasingly aggressive measures to protect freedom they need to do their job.<br />But two guys who thought Multics excessively complex went off<br />was a joking reference to Multics: Unix.<br />The latest intellectual property laws impose<br />Ironically, hackers have brought this on themselves.<br />Increasingly, the brains of products is in software.<br />i.e. data. A song on an LP is physically stamped into the<br/>If I were a legislator, I'd be interested in this and unanimity is very rare in this world. perhaps there is something amiss. will actually harm it? Think about it. </div></details>| |

## STEP 1-3. 1つ1つの単語に集中する

[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14275/234413ca-6426-b401-99cb-310b5a823f1d.png" width="50px">SwiftReed](https://chrome.google.com/webstore/detail/spreed-speed-read-the-web/ipikiaejjblmdopojhpejjmbedhlibno?hl=en)
![screencast24.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14275/ed4b0f27-afbc-9c25-f04f-3b5556bd9802.gif)

文章をフラッシュカードのように単語をどんどん表示していくExtensionです。類似ツールもたくさんあります。
本来は速読トレーニングのためのツールですが、この方法だと1単語ずつ解釈でき、流し読みを防ぐことができました。

### ショートカットキー

| コマンド       |   |
|:-----------------|------------------:|
| Alt + V            | 選択範囲をSwiftReadで開く              |
| Alt + Shift + V           | ページのコンテンツを自動選択してSpreedで開く |

# 調べる

ここまでの段階は、単語の意味がある程度わかる前提でのステップでした。
ここからは、そもそも文章自体がわからない場合にどのようにしていくかを書きます。

# STEP 2
## STEP 2-1. 単語/熟語の意味を調べる

[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14275/1a9f91a7-5a15-d523-f973-1068138b1a1c.png" width="50px">Mouse Dictionary](https://chrome.google.com/webstore/detail/mouse-dictionary/dnclbikcihnpjohihfcmmldgkjnebgnj) 

![mouse-dictionary.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14275/2e6f1521-7e5b-45ec-c131-912e56ec7901.gif)
参照 : [Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary)](https://qiita.com/wtetsu/items/c43232c6c44918e977c9)
超高速辞書ツール。マウスホバーで単語/熟語の意味を表示。
追加の辞書として、英辞郎のデータを読み込むことで強化できます。[Boothからデータを購入してダウンロード + 設定ページから辞書データの読み込みで対応可能です](https://qiita.com/wtetsu/items/c43232c6c44918e977c9#%E8%8B%B1%E8%BE%9E%E9%83%8E)。

### ショートカットキー

| コマンド       |   |
|:-----------------|------------------:|
| Control + z            | Mouse Dictionaryを有効にする |

## STEP 2-2. 文章の意味を調べる

[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14275/0cc1b075-e1ab-bb03-0231-a5ee6c81c505.png" width="50px">Mate Translate](https://chrome.google.com/webstore/detail/mate-translate-%E2%80%93-translat/ihmgiclibbndffejedjimfjmfoabpcke)

単語の意味がわかっても、文章の内容が難しそうなら、翻訳ツールを使います。
ツールは色々あるので、何でもいいと思っています。もっといいツールがあれば教えてください。
選択した範囲をまとめて翻訳したいとき。1センテンス読んで、まったくわからないときに利用します。

### ショートカットキー

| コマンド       |   |
|:-----------------|------------------:|
| Cmd + Shift + T | 選択範囲を翻訳する |

# 補足 : PDFの場合

**2020年8月以降、PDFファイルでもMouse Dictionaryが利用できるようになりました**
**2021年7月の段階で、SwiftRead PRO(有料)を利用した場合、PDFファイルでもSwiftReadを利用することができます**

PDFの場合、基本的にChrome Extensionsが利用できません。
いくつか方法がありますが、私はDropboxに保存してDropboxの画面上で読むようにしています。
Dropboxの画面だとHTML化されて表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14275/6930c09f-9c00-8b74-316b-4207601e461f.png)

ダウンロードしたファイルを自動でDropboxにアップロードするために、ダウンロードしたpdfファイルの場合は、Dropboxの指定したフォルダに入るように設定しています。指定したフォルダに入ると、自動でDropboxへの同期がされるため、ダウンロードしてDropboxのウェブ版を開けばよい状態になります。

[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14275/341efa27-a4be-e35a-ef5b-6305e87c8e48.png" width="50px">RegExp Download Organizer](https://chrome.google.com/webstore/detail/regexp-download-organizer/oamembonjndgangicfphlckkdmagpjlg?hl=en)



なお、それ以外のファイルも日付ごとで保存フォルダを分けることもできます。
ダウンロード先の指定はブラウザの保存ディレクトリからの相対パスになるので、事前に [chrome://settings](chrome://settings) でまずChromeのダウンロード先をユーザのルートディレクトリに変更しておくと楽です。
![01-change-parent.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14275/cb69cb91-733e-8397-669c-01b0697c071b.png)
![02-change-rule.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14275/8340a1d3-6554-147a-590a-fc1e08432430.png)


# 最後に

以上のような手順で、英語の長文を読むようにしています。
このようにすることで、 自分のレベルに合わせて最低限のツールを組み合わせを作ることができます。

Reading Modeで読みやすくし、要約を理解したうえで記事を読みはじめることは効率的に読むための普遍的なテクニックです。

英文を書く時もいろいろ工夫はしてますが、文法は間違えてもまずは書いてみる、というのが一番大事だと思っています。