このOGPはSwiftUIで作られています

このサイトをリニューアルしました。
サイトを更新するための仕組み化ができていなかったこともあり、ブログも約一年止まっていました。
更新の手間を減らすための環境整備や、サイトの改善を行いました。

サイトの構成は以前と変わらず、Swift製のStatic Site GeneratorであるIgniteを使用しています。
Igniteの詳細や使い方は、別の記事を公開していますのでそちらをご確認ください。
[Ignite]SwiftUIでWebサイトを開発する

OGP

OGP画像が設定されるようになりました。
この記事にも、このようなOGP画像が設定されています。

OGPを設定するには、HTMLのheadタグ内にog:imageのmetaタグを記述してOGP画像のURLを指定する必要があり、Igniteにも同様の仕組みが用意されています。
どのページにも同じ画像を指定したい場合や、ページごとの画像を自分で指定したい場合はIgniteの仕組みだけで完結させることもできます。

今回は、記事のタイトルが入ったOGP画像をSwiftUIで生成する仕組みを作りました。
記事のタイトルを引数に受け取るSwiftUI Viewを定義してOGP画像のデザインをします。
そのViewをImageRendererで画像化しています。
Igniteは、サイトを生成するタイミングで任意の処理を走らせることができるため、ビルド時に各記事のOGP画像の生成とheadタグの指定をしています。

SwiftUIでOGP画像を作成するのはネタ的でもありますが、Previewを見ながらデザインを調整できたり、SwiftUIの強力なレイアウトシステムやmacOSの美しいフォントを利用できたりと利点も多いです。
何よりSwiftでWebサイトを作成したり、OGP画像を生成したりできるのは個人開発の醍醐味でもあります。

CI

冒頭でも触れた通り、このサイトはStatic Site Generatorを使用しています。
記事を書いただけではサイトを更新することはできず、ビルドをしてHTMLやCSSを生成する必要があります。

以前はローカルのMacでビルドを行い成果物をアップロードしていましたが、手元にMacがあるときしかサイトの更新作業ができないという問題がありました。
今回は、ソースコードと記事のMarkdownだけをGit管理して、ビルドはGitHub Actionsで実行しています。
生成された成果物は、このサイトのホスティング先であるCloudflare Workersにwrangler-actionを使用してデプロイしています。
記事をMarkdownで書いてGitHubにpushすれば公開できるため、iPhoneだけでもブログを更新できるようになりました。

おわりに

最近の個人開発ではこのサイトの作り直しをしていました。
いつものiOSアプリ開発とは異なる領域の知見が得られてとても楽しいです。

こちらの記事は大変参考になり、読み物としても興味深いものでした。
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦

また、過去記事に関しても公開できていない下書きがたくさんあるので、少しずつ公開していこうと思います。