Tags:

サイトを少し変えました

Wavebox で絵文字くださった方ありがとうございます!
サイトを Astro で作りなおし、少しレイアウトも変えました。
ブログ以外のコンテンツは全部移植しました。ブログは移植が面倒だったので少し残してばっさり消しました!

ついでに今までメニュー名を「雑記」にしてたのを「ブログ」にしてみました。
なんか「雑記」という名前のものに「雑記」というタグつけてるの謎じゃね??? と急に思ってしまって……。全部雑記じゃん、みたいな……。

今回は概ね以前と同じように作ったのですが、RSS の中身がちょっと変わってしまった他、以前は存在していたセクションごとの RSS が消えました。(ブログだけの RSS などが実は存在しました)
もし消えてしまった RSS をご利用の方がいらっしゃったらすみません!

レイアウト変わったところで特に見ていただきたいところ

噓つきな魔術師は恋をしない

設定ページに作っていただいたロゴを配置しました!
ダークモードかどうかでロゴの配色を切り替えています!

あとページングをすっきりさせました!

Before
before
After
after

これまでは最初のページを「««」、最後のページを「»»」としていましたが、それぞれ「1」と最後のページのページ番号で表記するようにしました。
その上で同一ページ番号が 2 つ出ないようにしました。
たぶん動くと思うんですけどロジックが間違ってて変なページに飛んで行ったりしたら教えてください!!!!

Astro で作ってみた所感

URL を変更しないため結構頑張りました。
Hugo ではブログなどのページング可能な URL は

  • トップページ(1ページ目): /blog/
  • 2 ページ目以降: /blog/page/ページ番号
  • 記事単体: /blog/記事のID

になるんですけれども、Astro では公式のガイドに沿って作ると

  • トップページ: /blog/
  • 2 ページ目以降: /blog/ページ番号
  • 記事単体: /blog/記事のID

となってしまいます。Astro の形式だと、記事 ID に数字のみの文字列を使うとページ番号と被るので駄目です。
しかし私は既に小説や絵・漫画ページで記事 ID に数字を使ってしまっているので、これでは困ります……。
うまいこと Hugo と同じ形式にする方法が Astro にはまだなく、今回は地道にトップページと 2 ページ目以降を分けて作っています。

* * *

また Hugo では記事の冒頭をサマリーとして切り出してくれる機能があるのですが、Astro にはありません。
私が記事を単純な Markdown 形式で書いているのなら Markdown パーサーを使って記事の中身をプレーンテキストに変換して冒頭を切り取ればいいのですが、私は今回 MDX という Markdown の拡張を使っているのでうまくいきません。

その結果、ただ記事の冒頭の文章を取得したいだけなのに結構面倒な実装となってしまい、やはりシンプルなブログを作るなら Hugo のほうがいいな……と思いました。

* * *

Astro を使って良かったところは画像形式を自動変換できるようになったところです。
今まで絵をアップロードするときはサムネイル用 webp, 通常閲覧用 webp, 通常閲覧フォールバック用 jpg/png の 3 つの画像を用意していたのですが、サムネイル用 jpg/png と通常閲覧用 jpg/png の 2 つで済むようになりました。
サイトをビルドすれば他の画像形式に変換してくれる! 便利!!

ただし私は画像変換時の品質をコントロールしたかったのと、フォールバック用の画像を含めて <picture> タグで記述したかったので、少し泥臭い実装をしています。
それが原因で前述の通り MDX という拡張を使って記事を書かざるを得ず、面倒くささが連鎖していっていますが、赤色系統の絵は劣化が目立つからしょうがない……。
(一応、何ら特別な実装をしなくても変換はしてくれるので、ブログに埋め込んでいる画像など品質にこだわっていない画像は標準の変換に任せている)

画像形式は今まで webp を使っていましたが、ギャラリー系のコンテンツでは新たに avif にも対応することにしました。
手元で試した結果、サムネイルサイズの小さい画像だと webp のほうが軽量になることが多かったのでサムネイルは webp, 通常閲覧用は対応ブラウザでは avif になります。

たとえば丁寧に仕上げてしまった逆光練習らくがきの絵、webp だと 111 KB ですが avif は驚異の 24 KB!!!!
すごい! 軽い!!

Astro の標準の変換では webp となるのですが、Edge なども avif 対応したらその内 avif になるのかもしれませんね。

近況

iPadお絵描き民になりました。今までありがとう raytrektab。
raytrektab(8インチ)はメモリ不足感がすごくて、ブラウザ開いて資料探すことすら厳しかったので乗り換えることにしました。(あとしょっちゅう指での操作が全くきかないけど、これは再起動で直る。)

iPad の機種はアナデンやるために買った iPad Air 第 5 世代です。
Apple Pencil 第 2 世代に対応してる中で当時新しかったのを買いました。
画面でかすぎてアナデンはやりづらいんですが、お絵描きには使いやすそうです。

ソフトはとりあえずアイビスペイントを入れてみました。最新のらくがきはアイビスペイントで描いてクリスタでグラデーションマップかけてます。
現状ではアイビスペイントで画面を二本指でタップすると「戻る」の操作になるの便利~と思ってます。
プロクリエイトもそうらしいとどこかで見たんですが、iPadのお絵描きアプリではデファクトスタンダードな動作なんですかね? Apple 製品はそういう動作が使いやすくていいですよね。Mac のトラックパッドも最強ですしね。

* * *

先週から『Pokémon Sleep』にはまっています!

特に意味もなく午前二時まで夜更かしし、フルリモートワークの職場が午前十時始業なのをいいことに朝食を食べてから二度寝するという破滅的な朝を送っていた私ですが、Pokémon Sleep を始めてからは午前一時前に寝ています。
私は一週間ごとに 15 分ずつ就寝時間を早め、最終的には日付が変わる前に寝るようにして、朝に二度寝するのはやめてみせる……!

今のところチルットっていう可愛い鳥ポケモンがお気に入りです。進化しても可愛いらしいですね。可愛いポケモンは良い。

以上です!