つぶやき Web拍手を送る

Tsubuyaki つぶや記

ひとこと

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

ギャラリー

タグ「SSG導入日記」を含む投稿［17件］

ファイルを保存したら勝手にブラウザを再読み込みしてくれるやつとxamppで建てたサーバーの連携が取れたのでこれで改装がますますはかどりますねえ　#SSG導入日記

ひとりごと2023/03/23(木)

やりたかったこと(11tyでサイト作るのと一緒にCGIも動作確認したい)、もう少しでできそうな感じがしたんだけどダメだったのでCGIを動かすのはxamppに任せることにしました　結局ボツにしたけど色々コードの中身を覗いたり触ったりするの面白かったのでヨシ！
あとはファイルを保存した時にブラウザを勝手に再読み込みしてくれる機能とxamppで建てたサーバーが連携できれば完璧
…ということをここ数日ずっとやってたのでそろそろサイトの改装に戻りたいよ～　#SSG導入日記

ひとりごと2023/03/21(火)

今日はOGPの複雑なところ(おもに画像)を埋めて完成させました#SSG導入日記
前回言ってたパスの変換も別の関数に切り離せたのでこれから使いまわせるぞ～
これで自動で生成してほしいものは大体生成できるようになったので、サイトのデザインを整えつつ欲しい機能を発見したら実装していく感じでやっていきたい

ひとりごと2023/02/14(火)

今日はOGPのタグを持ってきて、今までのコードからコピペで持ってこれるところだけ変数に置き換えておきました　もっと複雑なことはまた次ね#SSG導入日記
作業は少しだけどいっこ気付いた
OGP兼サイト内リンクカード用の画像、ページで設定してるのは縮小前の画像パスなので表示するには縮小後の画像のパスに変換しないといけない…今はリンクカード作成用の関数の中にパスを変換する操作が入ってるので、これを別に切り離した方がいいのでは？　という発見をしました
あとはSSG導入のついでにサイトデザインもちょっと変えようかな～と思って配色ジェネレータとかwebフォントとか見てまわってました　が、結局面倒になってデザインはそのままな未来がチョットミエル

ひとりごと2023/02/09(木)

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

ひとりごと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導入日記
あとは変換してほしい画像リストを自動で作れるようになればサムネイル自動生成機能は大体完成って感じです　出来れば画像の切り取りたい位置も指定できるようにしたいかも…と縦長画像を横長サムネイル生成のテストに使ってて思いました
↓テストで生成したサムネイル
20230205020456-yo46ra.webp

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

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

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

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

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

次の10件→

1 2

つぶや記トップに戻る

Log

Search

  • 投稿年月：
  • カテゴリ：
  • ＃タグ：

Calendar

2023年3月
SUNMONTUEWEDTHUFRISAT
1234
567891011
12131415161718
19202122232425
262728293031

つぶや記トップに戻る

Powered by てがろぐ Ver 4.2.0