目的
pythonを使ったAPI Viewerの作成をしてみたかった。
最近流行の兆しを見せつつあるHeadless CMSにpythonで対応してみよーという単なる思いつき。
web frameworkはflaskを採用。小さいプロジェクトには使いやすいですからね。
環境
OS: macOS Catalina
python: Python 3.6.10 :: Anaconda
module: pathlib, flask, HTMLParser
何ができるのか
ソースコード
wmapst/wmap_wordpress_lib
Contribute to wmapst/wmap_wordpress_lib development by creating an account on GitHub.
使い方
git clone https://github.com/wmapst/wmap_wordpress_lib.git
cd wmap_wordpress_lib
cp env.py.sample env.py
vi env.py
python make_source.py
※そもそもAPIからデータを取得するにあたって、対象とするWordPressのAPIを使えるようにしてください。
env.py の編集内容については、env.py.sample に記載の通りです。
PER_PAGE = 10 # 取得する記事数です。上限値:100
DESCRIPTION_LIMIT = 200 # キャプションの文字数制限です。
HOST_URL = 'https://www.hogehoge.net' # URLの最後のスラッシュ[/]は含めないでください。
STATIC_FOLDER = 'html/static' # static ファイルの設置ディレクトリを指定してください。
TEMPLATE_FOLDER = 'html/templates' # template ファイルの設置ディレクトリを指定してください。
HTML_FILEPATH = 'wp-list.html' # レンダリングさせたいHTMLファイル名を入力してください。 * html/templates は省略
FAVICON_FILE = 'img/favicon.ico' # faviconとして設定したいファイルを入力してください。 * html/static/ 以降を入力してください。
レンダリングに用いるHTMLとCSSはhtmlに格納してあります。
一応部品ごとに分けたファイルにしてあり、以下のような感じです。
layout.html
<!doctype html>
<html lang="ja">
<head>
{% include "head.html" %}
</head>
<body>
{% include "header.html" %}
{%- block content %}{% endblock %}
{% include "footer.html" %}
</body>
</html>
head.html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="{{host_url}}static/css/style.css">
<title>wmap_wordpress_lib</title>
header.html
# 空ファイル
wp-list.html
{%- extends "layout.html" %}
{%- block content %}
<div class="wp-contents">
{% for contents in wp_contents %}
<a href="{{contents.wp_link}}" class="wp-link">
<article class="wp-article">
<figure class="wp-imagebox">
<img src="{{contents.wp_image}}" alt="{{contents.wp_title}}" class="wp-image" />
</figure>
<div class="wp-caption">
<h3 class="wp-title">{{contents.wp_title}}</h3>
<p class="wp-description">{{contents.wp_description}}</p>
<p class="wp-date">{{contents.wp_date}}</p>
</div>
</article>
</a>
{% endfor %}
</div>
{%- endblock %}
footer.html
# 空ファイル
style.css
@charset 'utf-8';
body {
background: #ffffff;
line-height: 1.8;
font-size: 18px;
}
figure {
margin: 0;
}
.wp-contents {
display: block;
max-width: 1000px;
height: auto;
}
.wp-link {
margin: 10px 0 10px 0;
display: block;
border: 1px solid #dddddd;
text-decoration: none;
color: #333;
padding: 1.5%;
}
.wp-article {
position: relative;
height: 100%;
display: inline-block;
}
.wp-imagebox {
width: 320px;
float: left;
}
.wp-image {
max-width: 100%;
border: 1px solid #dddddd;
height: auto;
}
.wp-caption {
margin-left: 330px;
}
.wp-title {
font-size: 18px;
margin: 0 0 5px 0;
line-height: 1.2;
font-weight: bold;
}
.wp-description {
font-size: .8em;
max-height: 7.8em;
line-height: 1.3;
}
.wp-date {
font-size: .8em;
}
@media screen and (max-width: 480px) {
.wp-description {
display: none;
}
.wp-imagebox {
float: unset;
width: 100%;
text-align: center;
}
.wp-caption {
margin-left: 0;
}
}
まとめ
とりあえず作ってみただけ、という感じなので、これからまだ改修を入れていく予定です。
そもそも、wordpressのコピーサイトをflaskで作ってみるというのも面白そうなので、そこまでやるかもしれません。
また、wordpressの新着記事一覧メルマガを自動生成させる機能なんかもニーズがありそうなので、それも作ろうかなーと考えています。