Tsubuyaki つぶや記

ひとこと

主に落書きを載せたり創作の設定について語ったりするページです
たまに絵とか3DCGとかの進捗を載せたりもします

2023年の投稿［108件］（10ページ目）

今日の進捗#SSG導入日記
自動でOGPに使う画像を設定させるのはあきらめて、今までのイラストと落書きのページは検索と置換を駆使して「ページ内で一番最初に出てくる画像」を設定しておきました
とりあえず材料はできたので次はtwitterとかにリンクを貼ったときに使われるOGPを設定…の前に、コードをいい感じに整形して表示できるプラグインがあるのを発見したので入れてみました　今のところ使い道はないけど面白そうだったので…実際にテストでコードを表示してみたのがこちらの画像です　なかみはサムネイル画像を生成するために書いた実際のコードの一部

ひとりごと2023/02/06(月)

SSG導入についてのつぶやきが増えてきたのでハッシュタグを作りました→#SSG導入日記
無事に導入に成功して改装できた暁には作業中につぶやいたこととかつぶやいてないこととかまとめた記録的なもの作って公開してみようかな～(他人のそういうの読むの好きなので)と思わなくもないんですがそうするとこのサイトが何のサイトなのか分からなくなる可能性が
ちなみに使っているのはEleventyというSSGです　今まで作ってきたページのhtmlが割とそのまま流用できそうだったのが導入のきっかけ

ひとりごと2023/02/05(日)

今日できたこと：画像の自動生成の仕組み＆リンクカード関連#SSG導入日記

変換したい画像リストを別ファイルに切り離してそこから読み込む
静的サイトジェネレータ(SSG)の機能でページごとに設定されているOGP画像のパスをリストにまとめて出力
↑のリストから小さい画像を生成
リンクカードの画像を挿入するところに生成された画像 or 画像が設定されていないときはデフォルトの画像を表示
SSGでページを生成→画像を生成　の順でプログラムが動くようにコマンドラインのコマンドを設定→SSGの設定で「ページ生成後にプログラムを動かす」ことができるのを発見したのでそっちに組み込み

これで画像付きのリンクカードがショートコード1個で作れる＆サイトに必要なhtml,css,javascriptと画像の生成がコマンド1個でできる仕組みができました
そういえば小さい画像を作るのに使っているモジュール(sharp)に、画像を切り取るときにいい感じのところを真ん中に持ってきてくれる設定(よくわからないけど多分そう)があるのを発見しました　おおむねいい感じに切り取ってくれている気がするけど、デカい文字があるとそこを切り取っちゃうぽいのでやっぱり手動で設定する何らかも欲しいかもしれない
あとは…今はページごとにOGP画像を手入力で設定するしかできないので、イラストとか落書きまとめのページは中身から自動で設定できるようにもしたい　でもどうしたらいいか皆目見当もつかないなあ～

ひとりごと2023/02/05(日)

今日は画像の自動生成…元画像のパスを入力したら出力先を勝手に決めてくれるように＆変換してほしい画像をリストで与えたら全部処理してくれるようにできました#SSG導入日記
あとは変換してほしい画像リストを自動で作れるようになればサムネイル自動生成機能は大体完成って感じです　出来れば画像の切り取りたい位置も指定できるようにしたいかも…と縦長画像を横長サムネイル生成のテストに使ってて思いました
↓テストで生成したサムネイル

ひとりごと2023/02/05(日)

今日は昨日の続き…ページのパスからタイトルとかの情報を取ってくる仕組みを作りました #SSG導入日記
昨日見つけたデータ構造を見る方法(オブジェクトのキーと値を全部列挙する)も合わせて一つ一つ見ていったら結構あっさり作れました　昨日の試行錯誤は何だったんだってぐらいサクッと出来て拍子抜けなんですが、昨日のあれも必要な試行錯誤だったと思いたい…find()メソッドとバッククォート(テンプレートリテラルというらしい)の使い方がなんとなく分かった気がするけど使わないとすぐ忘れるんだなあ
あとはカードのサムネイルとかに使う小さい画像を自動生成する方法をちょっと試してみました　今は元画像のパスと出力先を手入力で設定して縮小画像をいっこ作るのができた　最終的には必要な画像のパスを自動で取ってきて出力先も勝手に作ってくれるようにしたいです

ひとりごと2023/02/01(水)

今日はカード型リンクを簡単に作るために、ページのパスからタイトルとか日付とかの情報を取ってこられる仕組みを作りたかった…けど全然ダメでした　でもいまいちよく分かってないジェネレータ内でのデータ構造を見る方法の手掛かりが掴めそうなのでまた明日やってみよう #SSG導入日記

ひとりごと2023/02/01(水)

今日できたこと #SSG導入日記