DWB

ブログ全体の配色を変えて心機一転することにした。

https://data.herohoro.com

↓

イメージとしては「骨と皮」的な感じ。
もしかするともっとさっぱりさせるかもしれない。
心境がそんな感じなのだ。

ちょいちょい現れるサーモンピンクは、心臓…というといよいよシュールになってきそう。

単純に前からサーモンピンクが好きで、いい感じに佇まってほしいと思って配置したようなもん。
あまり深い意味はない。

デザインはほとんど本家から変えていない。元々このブログは色の調合を実験したくて作っただけだったので極力いじらないようにしてきた。

それにしても少し滑稽だ。

一番手間をかけてたブログを閉鎖して、一番雑にしていたブログを継続するとは。。。

閉鎖しようとしているHEROブログの色をそのまま使っている部分もある。デザイン的な部分も少しばかり取り入れてみようかなとは思っている。

記事末尾のシェアボタンは無くしてスッキリさせたい。
あったらいいけどなくてもいい機能は極力作らないつもり。

ブログを気軽に書いて気分転換したり、コードをいじって嗜んだりできる場所にしたいと思っている。

日常的にはアナログで、ノートや手帳に必要なことを書き綴っているんだけど、やっぱwebに出したくなることがある。

web上の庭を作っていくイメージで露出することはないけど、見えないわけでもない微妙な場所で作っていければいいかな♫

今月はもうCopilotがオーバーしそうなので、続きの改造は３月。

でも、まあ、５日間でここまでリニューアルできたんだからいいっしょって思ってる。

以下、Dynamic Og Imageの格闘ログ：

• NetlifyはNode20以上にしないといけなくなった
  • Nodeのバージョンを上げたら依存関係が激怒となり、鬼修正
  • その中でもEdge runtimeが通らないことが判明し、Nodejs runtimeに変えた
• Dynamic Og Imageをリニューアルさせようと現状確認する
  • 動いていないことが判明
• 原因はruntimeをNodejsに変えたことだった
  • ImageResponse の代わりに [satori] で JSX→SVG を生成し、[@resvg/resvg-js] で SVG→PNG へ変換して Response を返す。Edge 不要で Netlify（Node）上で動作するのでは？
  • Copilotに従ってやってみるが複雑になりすぎてエラーも増える自体に。
• NetlifyはもうDynamic Og Imageを見捨てたのか？
  • そんなわけはないと考え、Netlifyのドキュメントから手がかりを探る
  • 公式の説明を元に解決策を選んだ
    • Netlify の最新の Next.js サポートでは、Edge runtime 指定のルートも内部的には Node 20 の Functions で動かすが、機能としての Edge Runtime API は提供されると明記されている
  • runtimeの記述の仕方が変わっていることが気になり根拠を調べてみた
    • 新export const runtime = 'edge'
    • 旧export const config = { runtime: 'edge' }
    • Nex.js 13.3.1 前後で書き方が変わっていたことが分かった

    https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/docs/examples.md

  • runtimeの書き方を新しい書き方にしてpush
• デプロイ先で出るエラーを直す
  • ESLintとTypeScriptでのエラーが出た
  • 特にib/notion/client.ts のエラーが嵐だった
  • Copilotに委ねてエラーを解消したが、自力では無理だった

毎回戸惑うDynamic Og Imageを開発環境で確認する方法はエンドポイントを開けば一発解決。

http://localhost:3000/api/og-image?slug=test1

test1の部分を差し替える

あと、このDynamicとやらはSSRだよね！？と思い込んでたわけなんだけど、AIに聞いたら厳密には違うと教えてもらった。

• SSRとDynamicの違い
  • SSR：HTMLを作るレンダリングの場所がサーバーってこと
  • Dynamic：コンテンツの性質。中身が毎回変わるもの
• Dynamic OgImage generationとは
  • 動的な内容をリクエスト時に生成し、多くの場合SSRで実装
• SSRの記述って？
  • リクエストしている記述がある
  • runtimeを指定してる
  • og-image.tsxでGET関数を書いていて、その中でImageResponseをreturnさせている

Next.js的にはSSRとはPageの扱いのことで、画像生成はImage Generation Route(Edge Function)のことで別扱いしている。

ざっくり言うならPageもImageもSSRだが、厳密には違う。

ここら辺、いつも弱い。弱いの分かっているから書き残しておく。
いつかは理解できるようになるはず。。。。。多分。

…コード部分の配色、調整しないとだめそうなことに今更気づいた…(´ε｀；)ｳｰﾝ…