onakasuita.city

/icons/github.icon ygkn/onakasuita.city

おなかがすいたことを表明するサイト

https://gyazo.com/04bb99ee944b0bdbc73e58589dd068f1

動機

クソドメイン (https://kuso.domains/ ) を取ってみたかった

https://minagi.city/ で、.city ドメイン！　そういうのもあるのかってなった

ドメインをどこで買うか

バリュードメインで取ってみた

初年度安かったので

バリュードメインは 700円

Google Domains は 2,300円

2年度以降は Google Domains のほうがやすかった

バリュードメインは 3,498 円

Google Domains は変わらず

Google Domains に移管した

技術選定をどうするか

クソドメインらしく生 HTML/CSS/JS でいこう

ついでなら OGP とか PWA とか生でやったれ

素材を作る

アイコン類はいつもの Figma で作った

ブラクラした

@ygkn35034: Figma で 192x192 と 512x512 でエクスポートしようとしたら 192倍と 512倍でエクスポートしてしまってブラウザ落ちた

favicon は絵文字にした

絵文字をファビコンとして表示する簡単な方法

公開する

Vercel にデプロイした

Next.js だけでなく生 HTML でもスムーズ。カスタムドメインも秒

PWA 対応

Twitter の manifest.json 見て manifest 設定

ツイートするショートカットつけたれ！

https://gyazo.com/f374c0ddc758159a3ad5cc1dca08f2e5

オフライン対応

Servise Worker で offline page 表示は Create an offline fallback page を参考に

index.html を offline で表示していいのか……？

scope でハマった

ショートカットのツイート機能

ショートカットのツイート遷移は location.href に代入

window.open だと警告が出るので

地図の埋め込み

Google マップの検索結果の共有ボタン押して出てきた iframe コピペするだけでできた

https://gyazo.com/a4a69c23b8538a54b1a1a8c866616f0d

楽

loading="lazy" だし width/height も設定されてて（CLSが起こらなくて）いいね

Lighthouse のスコア下がらんかった

axe の VS Code 拡張機能に title 付けろって言われた

付けた

スマホで viewport からはみ出した

max-width: 100% を追加

みんなもクソドメイン取ろうな！！！