ブラウザの機能を使ってHTMLソースコードを表示する方法

今回はブラウザの機能を使ってHTMLソースコードを入手する。
注意
HTMLソースコードは著作物です。HTMLソースコードを利用する際は著作権法に則る必要があります。

目次

HTMLとは

HTMLはプログラミング言語。
HTMLで書かれたコンテンツはブラウザを使って見ることができる。
多くのWebページはHTMLで書かれている。

WebページのHTMLソースコードを見る方法

Google Chromeの機能を使って見る方法

HTMLソースコード（以下HTMLコード）はブラウザの機能を使って見ることができる。
手順は次のとおり。

まず、対象のWebページをGoogle Chromeで表示する。

Google Chrome画面右上のメニューをクリックする。




開いたメニューから「その他のツール」をクリックする。




更に開いたメニューから「デベロッパーツール」をクリックする。




デベロッパーツール画面のメニューバーからSourcesを選択する。
左側のメニューからドキュメントのアイコンを選択する。




デベロッパーツール画面右上のメニューから表示形式が選べるので見やすい形を選ぶ。




これでHTMLコードが表示される。

上のやり方で2017年、ボート（レガッタ）全日本軽量級選手権、男子シングルスカル種目のHTMLコードを表示する。
表示できたら、そのHTMLコードをコピーして、テキストエディタの新規ファイルに貼り付け、html_source.txtという名前で保存する。

これでレース結果のデータが入手できた。
注意
HTMLソースコードは著作物です。HTMLソースコードを利用する際は著作権法に則る必要があります。

今回の動作確認環境

Ruby 2.4.3p205

macOS 10.13.4
ターミナル
Google Chrome 65.0(macOS 10)

Windows10
Windows PowerShell
Google Chrome 66.0(Windows10)