pMAGI-2024-02-06
https://gyazo.com/4e29cf4b399feaa5ed1dc752ad9b2d07
nishio 何をやりたいのかわかる人にはわかる(デザインスキルは追いついていない) https://pbs.twimg.com/media/GFoI-2Fb0AApTgq?format=jpg&name=medium#.png
https://pbs.twimg.com/card_img/1754725137633710080/MmjOjjBQ?format=jpg&name=medium#.png
nishio 作ってから並べると細部の食い違いに気づく... https://pbs.twimg.com/media/GFoKU7ZaIAADD4f?format=jpg&name=medium#.png
nishio まあ、最終的にはCanvas実装にするので今のところはこのくらいに... https://pbs.twimg.com/media/GFoK7RyaQAAwQDg?format=jpg&name=medium#.png
nishio 「OGPイメージの生成をしたいんだけど？」って聞いたら手順を答えてくれて「じゃあ手順1のサンプルを作って」って言ったらサンプルコードができて、実行したら問題なく動いた。GPT4すごい https://pbs.twimg.com/media/GFpMc8Ta4AA3lo5?format=png&name=medium#.png
https://pbs.twimg.com/media/GFpeCi-bcAATTlO?format=jpg&name=medium#.png
https://pbs.twimg.com/media/GFpydqra4AANjys?format=jpg&name=medium#.png
https://pbs.twimg.com/media/GFp0JzWakAAulMC?format=jpg&name=medium#.png
nishio 僕の独力のデザインと比較してみる、やっぱ今のの方がいいな https://gyazo.com/4e29cf4b399feaa5ed1dc752ad9b2d07https://gyazo.com/d27479df3ed09ad17fe6a7b850e2d874
https://pbs.twimg.com/media/GFqDfUObQAA6w8l?format=jpg&name=medium#.png
nishio SVG to PNGはできたがforeignObjectでレイアウトしたテキストは表示されないのか https://pbs.twimg.com/media/GFqJjxzWMAE7yLV?format=jpg&name=medium#.png
nishio 大変なことになってきたぞ。Adobe XDからエクスポートしたSVGをReactにJSXとして貼り付けてデータの流し込みが可能なようにしたがワードラップが自動で行われないのでforeignObjectでdivを使った。しかしサーバサイドでSharpでそれをレンダリングしてもテキストは表示されない。続く nishio そこでforeignObjectを捨ててtspanに刻もうと、何かいいライブラリあるかGPT4に聞いたら「ない、この関数を使え」とか言ってくるのでとりあえずそれを使おうとしたものの、document.createElementはサーバサイドで動かないよね、となってる。解決法はjsdom。マジか？おかしな方向に走ってない？ nishio AIがガンガン加速してくれるから気にせずに進んできたけど、流石にこれ人間が進むべき道ではなくない？ほんとにあってる？ここまでにSVGかCanvasかの分かれ道と、SharpかPupettierかの分かれ道があったんじゃないかと思うけど、自信満々で解決策を出してくるから信じて進んできたけど、本当にこの道？ https://pbs.twimg.com/media/GFsXP6OboAAi346?format=jpg&name=medium#.png
https://pbs.twimg.com/media/GFsZAMIboAAQzxp?format=jpg&name=medium#.png
nishio まてよ、そもそも今回のビューにおいてはテキストを等幅フォントにして単語の区切りやハイフネーションを考慮せず改行してしまう外見で十分な気がするな…だったら幅の取得は必要ないのか。 結局どの技術選択がよいは「どのような見栄えを期待しているか」という言語化されてない要求仕様に依存してる
nishio 5分前までは「幅が取得できないんだから自前で改行するのは無理がある、Sharpの選択が間違いでPuppeteer一択」と考えてた /villagepump/nishio.icon
もしかするとAIアシストに盛大にミスリードされてるかもしれない
サーバサイドでSVGをレンダリングするのは茨の道説
画像にされるとコピペできないなー/villagepump/inajob.icon
画像が決め打ちサイズっぽいので、自分なら画像にオーバーレイするようにposition:absoluteとかでdivを重ねるかな/villagepump/inajob.icon
いや、今作ってるのはSNS用のOGP Imageなので画像にするのは大前提/villagepump/nishio.icon
SVG自体にforeignObjectでdivを埋め込めるんだけど、それをサーバサイドでレンダリングしようとしたら表示されなくて、これじゃダメかーとなってるところ
あー、OGPか/villagepump/inajob.icon
自分もOGP生成用に画像にテキストを入れ込むツールを自作したな・・
みんなどうしているのだろう
何も考えずSVGからPNGとかが生成できると嬉しい
それができそうなことをAIがいうので信じたらハマったw/villagepump/nishio.icon
/villagepump/yuta0801.iconさんがrustでsvg をpngにするコードを書いてた
GPT4と話してるとこのテーマに関する多種多様な勘違いが明確化されて面白い
人間の認知の面白さの話としてひと段落してから整理したい