最初のカードを作る
エピソードカードのレイアウトを1つ作り、3種類の内容でレンダリングします。その後、タイトルを変えて自分用のカードを作ってみましょう。
1. quickthumbをインストールする
Python 3.11以降が必要です。Python環境で次を実行します。
環境の準備から始める場合は、インストールの手順を終えてから戻ってください。この例で使うのは基本パッケージと内蔵フォントだけです。インストール後にフォントや写真をダウンロードしたり、追加のレンダラーを用意したりする必要はありません。
2. レイアウトを保存して実行する
quickthumbのチェックアウトとは別の作業ディレクトリに、次のコードをepisode_cards.pyとして保存します。
from quickthumb import Canvas, Stroke
INK = "#111111"
WHITE = "#FFFFFF"
def episode_card(episode, title, accent):
return (
Canvas(1280, 720)
.background(color=INK)
.shape("rectangle", position=(0, 0), width=1280, height=360, color=accent)
# The numeral stands on the band and crops at the top edge.
.text(
str(episode),
size=540,
color=INK,
# A stroke in the text color thickens the regular-weight built-in font.
effects=[Stroke(width=8, color=INK)],
position=(1240, 360),
align=("right", "bottom"),
letter_spacing=-10,
)
.text(
"THE BUILDER'S\nNOTEBOOK",
size=26,
color=INK,
effects=[Stroke(width=1, color=INK)],
position=(48, 44),
letter_spacing=1,
)
.text(
"EPISODE",
size=26,
color=INK,
effects=[Stroke(width=1, color=INK)],
position=(48, 330),
align=("left", "bottom"),
letter_spacing=1,
)
.text(
title,
size=136,
color=WHITE,
effects=[Stroke(width=2, color=WHITE)],
position=(48, 688),
align=("left", "bottom"),
max_width=1184,
max_height=290,
auto_scale=True,
balance_lines=True,
line_height=1.04,
)
)
episodes = [
(12, "Ship your first release", "#FF4B1F"),
(13, "Make room for better work", "#FFD400"),
(14, "Build less. Finish more.", "#4D8DFF"),
]
for episode, title, accent in episodes:
episode_card(episode, title, accent).render(f"episode-{episode}.png")
そのディレクトリで実行します。
同じディレクトリにあるepisode-12.png、episode-13.png、episode-14.pngを開いてください。いずれも1280 × 720の画像です。スクリプトは毎回同じファイル名で保存するため、同名のファイルがあれば上書きします。
3. 次のカードを作る
関数はそのままにして、episodesへ1行追加します。
再び実行し、episode-15.pngを開きます。同じレイアウトを使い、エピソード番号、タイトル、色だけを変更できました。
タイトルはmax_widthの範囲内で折り返します。auto_scale=Trueを指定すると、設定した幅と高さに収まるまで文字が小さくなります。まとめてカードを作る前に、実際に使う最も長いタイトルで確認してください。
デザインを調整する
episode_card()内の色、数字やタイトルのサイズ、位置を一度変更すると、すべてのカードに反映されます。レイヤーは追加した順に描画されます。好みの書体を使うには、各.text()にfont="/path/to/your-font.ttf"のようなローカルフォントのパスを追加します。フォント自体が十分に太ければStrokeエフェクトを外してください。
レイアウトを拡張するときは、canvas.diagnose()でキャンバスからはみ出したレイヤーや低いコントラストなどを確認します。この例では数字を意図的に切り取っているため、off-canvasが1件報告されます。検査項目と制限は診断を参照してください。指摘がなくても、見た目のよいデザインであることを保証するものではありません。