祝Astro化
JavaScriptの教本を3割ほどやったところで、これは実践してかないとみにならないな・・気付き、Astroのチュートリアルを触り始め、Astro歴2週間ほどでブログサイトのリニューアルができた。やった〜
備忘録的にできたことや詰まったことなどをメモ。
✅ MDで記事更新
Astro化に伴いマークダウンで執筆→GitHubにコミット（でVercelが連動してデプロイ）で、めちゃくちゃ快適に執筆できるようになった！
✅ 流体タイポグラフィ(Fluid Typography)導入
FullHDなど大きい画面向けに流体タイポグラフィを導入した。今後の仕事にも使えそうな良い知見になった。
✅ 簡単なJS導入
mdからタイトル取得してTOPに降順indexを作ることができた。
今後indexはjsの勉強がてらカスタムしていきたい。
（色々仕掛けを考えてみたが、実現に時間かかりそうなので一旦シンプルなリストに。。）
🤔 Webフォント（Realtype）の利用
なんだかんだ一番詰まった箇所。そして未解決。。GoogleFontsは問題なく使えたが、リアルタイプのAPIがうまく動作しない。chatGPTに相談しつつ幾つか対策を講じたけれど、多分CSSが読み込まれる前にAPIが発火してうまく動いていない、的なことらしい。
🤔 画像ライブラリ深掘り
ここ1、2年のプロジェクトで画像・動画圧縮の知見が充実し、最近はcwebpを使ってクオリティ調整しつつ一括変換している。そのためAstroの動的な変換でどこまで細かくチューニングできるのかが気になっていた。
AstoroにはWebpの変換などにsharpが使われていて、sharpの中身はlibvipsというライブラリらしい、、ということがわかり、ライブラリ直接触ってみようとするも、うまいことさわれず。。ひとまず、MDで生成した記事では動的にwebp生成とかはできないみたいなので、一旦深掘りを止めた。
🏋️♂️今後の課題
以下をやりつつ、ntk*Radio web（もといプレイリストサイト）を作る予定
- JSガシガシ使って覚える
- GSAP取り入れる
- キメラバリアブルnoto精製
- 3Dモーション作って入れたいのでcanvas周りも学び始めたい
🏁ゴール（忘れてはいけないのでメモしておく）
オンスクリーンの技術でビジュアル表現にアプローチする
🦀 作業中の副産物たち
数百行以上出ていたけど見て見ぬふりをしていたnpmエラーをチクチクと潰して、nodeの理解度がほんのちょっと深まった。
作業メモで使うNotionやFigjamでの作業を最適化するMacのオートメーションをいくつか作ってめっちゃ便利になった。改めて記事にしたい。