Swiftで個人サイトを作る

実際のサイトには細かなテキストがある#

Raptorのタイポグラフィには、次の役割が用意されています。

• body
• title1 … title6
• codeBlock

しかし、サイトには本文と見出し以外にも、投稿日や著者、ナビゲーション、タグ、カテゴリー、ボタン、リンクといったテキストがあります。

HugoやHexo、通常のHTMLテンプレートなら、classを付けてCSSを書けば終わる話です。

1
<span class="post-meta">April 20</span>
2
<a class="nav-label">Archive</a>

1
.post-meta {
2
  font-size: 12px;
3
  color: gray;
4
}
5
.nav-label {
6
  font-weight: bold;
7
}

一方、Raptorには次のような組み込みの役割はありません。

1
.postMeta
2
.navLabel

そこで最初は、独自のテキストロールを追加しようと考えました。

Themeを拡張してみる#

目指したAPIは次のようなものです。

1
Text("April 20").textRole(.postMeta)

Theme側でロールごとの設定を書きます。

1
.fontSize(12, for: .postMeta)
2
.fontWeight(.medium, for: .postMeta)

そこからCSSを生成し、

1
.text-role-post-meta {
2
  font-size: 12px;
3
  font-weight: 500;
4
}

最終的なHTMLにclassを付与します。

1
<p class="text-role-post-meta">April 20</p>

フレームワークを調べながら、テーマ設定、CSS生成、レンダリング処理に手を入れました。実装自体は動きました。独自ロールがテーマ機構を通り、ライト・ダークモードに対応し、CSSが自動生成され、HTMLにも反映されるようになりました。

ただし、設計には違和感が残りました。

まず、テキストを表す方法が二つに分かれます。

1
.font(.title1)        // built-in
2
.textRole(.postMeta)  // custom

しかも、この二つは責務が同じではありません。Raptorの

1
.font(.title1)

は、<h1>のようなHTMLタグを決めると同時にスタイルも適用します。それに対して、追加した

1
.textRole(.navLabel)

が変えるのはスタイルだけです。HTMLの構造と見た目は別の関心事なのに、その区別を整理しないまま新しいタイポグラフィAPIを足してしまいました。

結局、コードは次のようになります。

1
.tag(.h1)
2
.textRole(.navLabel)

表しているものは、ほぼこれと同じです。

1
<h1 class="nav-label"></h1>

型安全なAPIで複雑さを減らすはずが、手順を増やしてHTMLを作り直しているだけでした。

すでにあったStyleという答え#

ほかの静的サイトジェネレーターも確認しました。たとえばHugoは、この問題をフレームワークの役割として抽象化せず、

1
<p class="post-meta"></p>

と書いて、残りをCSSに任せます。

この比較をきっかけにRaptorの設計とソースコードを読み直すと、役割分担が見えてきました。Themeはタイポグラフィ、色、余白などのグローバルなデザイントークンを定義するものです。「記事メタデータ」のような意味を持つスタイルを、Themeの新しいテキストロールにする必要はありません。

Raptorには、そのためのStyleがすでに用意されていました。

1
struct PostMetaStyle: Style {
2
    func style(content: Content, environment: EnvironmentConditions) -> Content {
3
        content
4
            .font(.caption)
5
            .foregroundStyle(.secondary)
6
    }
7
}

コンテンツには次のように適用できます。

1
Text("April 20")
2
    .style(PostMetaStyle())

役割としては、

1
<p class="post-meta">April 20</p>

と同じですが、Swiftのまま再利用、合成でき、型安全性も保てます。

さらにStyleは、ライト・ダークモード、現在のテーマ、コントラスト設定、レイアウト条件などの環境情報を参照できます。意味を持つスタイルをテーマのロールに追加しなくても、環境に応じた見た目を定義できます。

1
struct PostMetaStyle: Style {
2
    func style(content: Content, environment: EnvironmentConditions) -> Content {
3
        if environment.colorScheme == .dark {
4
            content.foregroundStyle(.gray)
5
        } else {
6
            content.foregroundStyle(.secondary)
7
        }
8
    }
9
}

見落としていた境界は単純でした。Themeはグローバルなデザイントークンを定義し、Styleは再利用できる意味的なスタイルをまとめます。欲しかった機能は最初からRaptorにあり、探す場所を間違えていただけでした。