목차

1. 환경 구축【docker-compose로 Nginx+Gunicorn+Flask+MariaDB+phpMyAdmin】
2. Flask+RoboBrowser로 스크래핑한 결과를 bootstrap(honoka)로 표시 ※본 기사
3. flask-sqlalchemy 사용 (MariaDB와 연결)
4. flask-login 사용 (로그인 기능 구현)

내용

목차 1에서 구축한 docker-compose 환경을 기반으로 하는 북마크 기술의 인기 엔트리를
WEB 스크래핑으로 취득해 table로 표시한다고 하는 것입니다.
API를 사용하지 않고 robobrowser를 사용하여 가져옵니다.
업무에서 API가 제공되지 않는 서비스로부터 정보 취득이 필요하게 되었기 때문에 그 연습입니다.
robobrowser로 로그인 처리는 실시하지 않습니다.
그런 다음 테이블은 bootstrap의 honoka에서 멋지게 보입니다.
html 템플리트는 base.html을 작성하고 여기에 Bootstrap 로딩을 설명합니다.

참고 기사

· RoboBrowser를 사용하여 웹 페이지에 로그인하고 크롤링
※RoboBrowser의 요소의 지정이 참고가 되었습니다.

· Bootstrap4에 준비되어 있는 클래스【table편】
※table의 디자인시에 필요한 것을 카피하였습니다.

완성형

웹 브라우저에서 [호스트 IP] : 8889/list에 액세스하면 뒷면에서 scrap.py가 실행되어 필요한 정보를 가져옵니다. 그 정보를 flask의 render_template에서 list.html에 표시하는 흐름입니다.



데이터를 검색할 수 없는 경우

출처

디렉토리 구성

.
├── README.md
├── db
│   ├── Dockerfile
│   ├── backup
│   │   └── init.sql
│   └── conf.env
├── docker-compose.yml
├── nginx
│   ├── Dockerfile
│   ├── default.conf
│   ├── log
│   │   ├── access.log
│   │   └── error.log
│   └── nginx.conf
├── phpmyadmin
│   ├── Dockerfile
│   └── conf.env
└── web
    ├── Dockerfile
    ├── application
    │   ├── __init__.py
    │   ├── scrap.py   #はてなブックマークよりリストを取得するスクリプト
    │   ├── static   #honoka4.3.1よりアップロード
    │   │   ├── css
    │   │   │   ├── bootstrap.css
    │   │   │   └── bootstrap.min.css
    │   │   └── js
    │   │       ├── bootstrap.bundle.js
    │   │       ├── bootstrap.bundle.min.js
    │   │       ├── bootstrap.js
    │   │       ├── bootstrap.min.js
    │   │       └── jquery-3.4.1.min.js
    │   ├── templates
    │   │   ├── base
    │   │   │   └── base.html   #index.html, list.htmlの共通部分を記載
    │   │   ├── index.html   #honokaのサンプルを利用して作成
    │   │   └── list.html   #scrap.pyの結果を表示
    │   └── views.py
    ├── requirements.txt
    └── startup.py

requirements.txt

Flask==1.1.1
Flask-SQLAlchemy==2.4.0
gunicorn==19.9.0
PyMySQL==0.9.3
SQLAlchemy==1.3.5
robobrowser==0.5.3 #追加

sc 등 p. py

로그인등의 폼 조작이 없기 때문에 「 RoboBrowser를 사용하여 웹 페이지에 로그인하고 크롤링 」를 참조하면 특히 어려운 부분은 없었습니다.

scrap.py

from robobrowser import RoboBrowser


def get_hatena_entries(target_url):
    results = []
    robo = RoboBrowser(
        parser='html.parser',  # Beautiful Soupで使用するパーサーを指定
        timeout=5  #応答の遅いサイトではこの値を変更
    )
    robo.open(target_url)
    target_class = 'div.entrylist-contents-main'  #エントリーの一番大枠のクラスを指定
    for data in (robo.select(target_class)):
        title = data.select('a.js-keyboard-openable')
        users = data.select('span.entrylist-contents-users')
        posted_date = data.select('li.entrylist-contents-date')
        link = data.find('a').get('href')   #<a href=''>のURLを取得するにはgetを使用
        line = []  # 1件ですがリストで帰ってくるので取り出す
        line.append(title[0].text)
        line.append(posted_date[0].text)
        line.append(users[0].text)
        line.append(link)
        results.append(line)
    return(results)

비에ws. py

views.py

from flask import url_for, render_template

from application import app      
from application import scrap    #scrape.pyをインポートする


@app.route('/')
def top_page():
    title = 'ようこそ日本語!!'
    msg = 'TEST 一覧ページ'
    return render_template('index.html', title = title, msg = msg)

@app.route('/list')
def show_list():
    title = "はてな人気リスト"
    results = scrap.get_hatena_entries('https://b.hatena.ne.jp/hotentry/it') 
    # URLを変更すれば別ジャンルも取得できます。
    # results = scrap.get_hatena_entries('https://b.hatena.ne.jp/hotentry/life') 
    return render_template('list.html', title = title, results = results)

list.html

list.html

{% extends "base/base.html" %}    #base.htmlを読み込む
{% block content %}
        <h2 class="mt-3">{{ title }}</h2>
        {% if results %}　　#scrape.pyで取得した結果が入ってくる
            <table class="table table-hover table-striped table-sm mt-5">
                <thead class="thead-dark">
                    <tr>
                        <th>タイトル</th>
                        <th>日付</th>
                        <th>ブックマーク数</th>
                    </tr>
                </thead>
                <tbody>
                    {% for result in results %}
                        <tr>
                            <td><a href="{{ result[3] }}">{{ result[0] }}</a></td>
                            <td>{{ result[1] }}</td>
                            <td>{{ result[2] }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}　　#scrape.pyで取得に失敗した場合の処理
            <h3 class="pt-3">データを取得できませんでした。</h3>
        {% endif %}
{% endblock %} 

보충 honoka

위의 소스 js, css는 honoka js, css를 적용했습니다.
일본어 표시가 예쁜 Bootstrap 【 Honoka 사이트 】
github 부터 js, css 다운로드

※index.html는 honoka의 샘플의 table를 이용하였습니다.