ウェブサイトを作るシンプルな方法

ウェブはもっとシンプルであるべきです。
まず、作品とそれを作るツールは相互干渉的に作られていくのがよいです。
音楽にしても、ある曲の楽器編成や形式、素材、全体を統一するシステムやアルゴリズムは、その曲ごとに考えられるべきです。
同じように、ウェブサイトもその内容に応じて作成するツールを生み出していくべきです。

そうすると、作品とツール、つまり作られるものと作るものがお互いにフィードバックの関係になります。
作るものが作られるものであり、その逆もまた然り、という関係です。
こうなると作品はツールであり、ツールは作品でもあります。
このような状態になったとき、作り方が作品の一部となり、より興味深い作品の奥行が生まれると考えています。

基本原則

このウェブサイトを作るにあたって、以下の基本原則を定めました。

軽量であること

ウェブサイトはできるだけ軽量であるべきです。
画像や動画、JavaScriptなどのリッチコンテンツは必要最低限に抑え、ページの読み込み速度を最適化します。

コンテンツが常にWork in progressの状態にあること

このウェブサイトのコンテンツは全て常にWork in progressの状態にあります。
この点が出版物とウェブコンテンツの大きな違いだと考えています。
ウェブコンテンツは本質的に変更が容易であり、常に更新され続ける性質があります。

1つのHTMLファイルは1つの文書

1つのHTMLファイルが何を表すかについてHTML Living Standardでは明確な定義がありません。
いまのところ、1つのHTMLファイルが1つの文書であるように書かれているべきであると考えています。

HTML標準に則ったマークアップと最低限のcss

このウェブサイトの基本指針として、HTML仕様に則ったマークアップを行います。
そして、十分にマークアップされていればcssによる装飾は必要最低限でよいと考えています。
HTMLの仕様をハックするような複雑なウェブページはよくありません。

ヘッダーフッターの共通化

まずはHeader・Footerを切り出し、Articleと共通パーツを分離。
そしてそれぞれをHTMLテンプレートにインクルードする関数を作りました。

    
def full_html(title_text, header, main_content, footer):
    return f''' 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta robots="noindex,nofollow">
        <link rel="stylesheet" href="style.css">
        <title>{title_text}</title>
    </head>
    <body>
        {header}
        {main_content}
        {footer}
    </body>
</html>
        '''

titleタグの自動生成

full_html関数のtitle_text引数にtitle_textを渡すことで、titleタグを自動生成します。
title_textはArticleのh1タグから抽出します。
ここでh1タグが1つしかページに存在しないという前提を置いています。

        
def title(html):
    # <h1> と </h1> の間の文字列をすべて抽出
    titleText = re.findall(r'<h1>(.*?)</h1>', html)
    
    return titleText[0]