次は、『Web技術入門編02 : HTMLを理解しよう (全10回)』を受講してみよう。
01:HTMLを理解しよう
- HTML:HyperText Markup Language
- ハイパーテキストとは、複数の文書を相互に関連付ける仕組み
02:HTMLを構成するパーツを理解しよう
- HTMLの要素
- <h1>コンテント</h1>
- <p>内容<strong>強調</strong></p>
- <img src='(url)/neko.gif'>←空要素
- <a href='https://paiza.jp'>paiza</a>
03:HTMLの構造を理解しよう
- ↓基本的な構造
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>Welcome to paiza</title> <link rel='stylesheet' href='style.css'> </head> <body> <h1>世界の皆さん、こんにちは</h1> <p>ようこそ、<strong>paiza</strong>へ</p> <img src='neko.gif'> <p><a href='https://paiza.jp' >paizaに移動</a></p> </body> </html> |
04:class属性とid属性で要素を選択しよう
- class属性:要素に役割や種類を記述する
- h2.resume {プロパティ: 値;}
- id属性:要素を特定するために記述する
- #works {プロパティ: 値;}
05:HTMLを取得しよう - Ruby編
- RubyによるHTMLページの読み込み
- ターミナルでの実行:Ruby getPage.rb
require 'open-uri' uri = 'https://(url)/paiza.html' html = open(uri) puts html.read |
- Webページのタイトルのみを取得
require 'open-uri' require 'nokogiri' uri = 'https://(url)/paiza.html' html = open(uri) #puts html.read doc = Nokogiri::HTML(html) puts doc.title |
- h2タグのみを取得
require 'open-uri' require 'nokogiri' uri = 'https://(url)/paiza.html' html = open(uri) #puts html.read doc = Nokogiri::HTML(html) #puts doc.title doc.css('h2').each do |element| puts element end |
- 特定の属性を取り出す
doc.css('h2.resume').each do |element| puts element['id'] end |
06:HTMLを取得しよう - Ruby実践編
- パイジョのバックナンバーを取り出す
require 'open-uri' require 'nokogiri' url = 'https://paiza.jp/paijo' html = URI.open(url) # puts html.read doc = Nokogiri::HTML(html) # puts doc.title doc.css('.p-paijo__old-backnumber__link').css('a').each do |element| puts element['href'] end |
↑多分、クラス名が違っているので修正。
07:HTMLを取得しよう - Python編
- PythonによるHTMLページの読み込み
- ターミナルでの実行:python3 getPage.py
# coding: utf-8 import requests uri = 'https://(url)/paiza.html' html = requests.get(uri) print(html.text) |
- タイトル要素を取り出す
- sudo pip3 install beautifulsoup4
# coding: utf-8 import requests from bs4 import BeautifulSoup uri = 'https://(url)/paiza.html' html = requests.get(uri) #print(html.text) soup = BeautifulSoup(html.text, 'html.parser') print(soup.find('title').string) |
- 指定タグの要素を取り出す
# coding: utf-8 import requests from bs4 import BeautifulSoup uri = 'https://(url)/paiza.html' html = requests.get(uri) #print(html.text) soup = BeautifulSoup(html.text, 'html.parser') #print(soup.find('title').string) for element in soup.find_all('h2'): print(element) |
- 指定の属性の要素を取り出す
for element in soup.find_all('h2', class_='resume'): print(element) |
- 指定の属性の値を取り出す
for element in soup.find_all('h2', class_='resume'): print(element['id']) |
08:HTMLを取得しよう - Python実践編
- パイジョのバックナンバーを取り出す
# coding: utf-8 import requests from bs4 import BeautifulSoup uri = 'https://paiza.jp/paijo' html = requests.get(uri) # print(html.text) soup = BeautifulSoup(html.text, 'html.parser') # print(soup.find('title').string) backnumber = soup.find('div', class_='p-paijo__old-backnumber p-paijo__old-backnumber--summary') #print(backnumber) for element in backnumber.find_all('a'): print(element['href']) backnumber = soup.find('div', class_='p-paijo__old-backnumber p-paijo__old-backnumber--remain') #print(backnumber) for element in backnumber.find_all('a'): print(element['href']) |
09:HTMLを取得しよう - PHP編
- PHPによるHTMLページの読み込み
- ターミナルでの実行:php getPage.php
<?php $uri ='https://(url)/paiza.html'; $html = file_get_contents($uri); echo $html; |
- タイトル要素を取り出す
- phpqueryのインストール
$ composer init -q
$ composer require electrolinux/phpquery
$ composer dumpautoload
- phpqueryのインストール
<?php require_once 'vendor/autoload.php'; $uri = 'https://(url)/paiza.html'; $html = file_get_contents($uri); // echo $html; $doc = phpQuery::newDocument($html); echo $doc['title']; |
- 指定タグの要素を取り出す
<?php require_once 'vendor/autoload.php'; $uri = 'https://(url)/paiza.html'; $html = file_get_contents($uri); // echo $html; $doc = phpQuery::newDocument($html); echo $doc['h2']; |
- 次のようにも書ける。
$doc = phpQuery::newDocument($html)->find('h2'); echo $doc; |
- 指定の属性の要素を取り出す
$doc = phpQuery::newDocument($html)->find('h2.resume'); echo $doc; |
- 指定の属性の値を取り出す
foreach ($doc as $element) { echo pq($element)->attr('id') . PHP_EOL; } |
10:HTMLを取得しよう - PHP実践編
- パイジョのバックナンバーを取り出す
<?php require_once 'vendor/autoload.php'; $uri = 'https://paiza.jp/paijo'; $html = file_get_contents($uri); // echo $html; $doc = phpQuery::newDocument($html)->find('.p-paijo__old-backnumber a'); // echo $doc; foreach ($doc as $element) { echo pq($element)->attr('href') . PHP_EOL; } |
感想
HTMLの基礎を学び、Ruby、Python、PHPでWebページの情報を取得する方法を学んだ。
結局、修了証取得まで2日間かかってしまった。
各言語でのWebページの取得は、同じ内容を各言語で実装するので、やや冗長であると感じた。
1本の動画を3分程度にするには、多少冗長になっても、逆に細切れにしないと収まらないのであろう。