不惑にしてまだ何者でもない者のブログ

Arduino関連、Raspberry Pi関連、プログラミング学習

paizaラーニング『Web技術入門編02 : HTMLを理解しよう (全10回) 』を受講してみた

2020-10-10 23:39:27 | paiza
次は、『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
<?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分程度にするには、多少冗長になっても、逆に細切れにしないと収まらないのであろう。


最新の画像［もっと見る］

コメントを投稿