サイトを全面的に作り直しました
最近のwebをちゃんと勉強してサイトを改装するぜ!と去年の春に思い立ってから1年以上経ってしまいましたが、ついに終わったぞ改装!
手打ちで細々とやってきたこのサイトも、Astro製の多少なり今っぽいやつになりました。最近のwebをちゃんと勉強できたかは大いに甚だ疑問ですが……。まあとりあえず動くものができたんだからいいのではないでしょうか。べつに動的コンテンツなんぞひとつもない個人サイトなんでなにか間違ってても問題はないし…。
参考:今まではこんなかんじでした
見た目は気に入ってたんだけど中身がな…。
失踪していた1年間ずっと勉強していたわけではもちろんなくて、実際のところ去年の年末にはおおむね改装終わってたんですが、そこで割と満足してしまって実運用に持ってく手前で放置し続けていたという…。
そうこうしている間にAstroもTailwindもメジャーバージョンアップが入っていて、ひーこら言いながらやっともろもろそれなりに直せたんでもうこれでいいだろうという気持ちでこれにて改装完了です。です!
本当はてがろぐのスキンもお揃いで作りたかったんだけど、これ以上いっぺんにいろいろやろうとすると永遠に終わらないやつになるので…またそのうち…。
ブログ、というか見出しを立てて長文書ける形式にずっと憧れがあって、このブログはマークダウンで書けるようにしたんですが、実際これは長続きするんだろうか。
てがろぐの手軽さにすっかり慣れ切っているのですでに不安ですが…。まあ…せっかく目次とかも作ったから頑張ってほしい…!
お世話になった先人の技術
せっかくなので今回お世話になったもろもろを列挙しておきます。
めいもくを支える技術!(これを言ってみたかった)(支えるどころかこっちがおんぶにだっこされてる側なんだけど)
Astro
静的サイトジェネレータ。
(というよりはWebフレームワーク…って言ったほうが正しいのかな?動的なサイトも作れるので)
静的サイトジェネレータってなんだよ!なんかHugoとかGatsbyとかいう海外の…なんか難しいやつなんでしょ!というレベルの理解だった自分でもほとんど困らずスイスイ使えたすごいやつ。
html書ければAstroコンポーネント書けるよ!って公式Docに書いてあるし本当にそうだった。チュートリアルの通りにやればブログが出来上がるのであとはノリでどうにかなります。すごい。
まずAstroに辿り着くまでにだいぶ時間がかかったのですが、Astroのおかげでぜんぶなんとかなりました。ありがとう…。
というか最初は、いざ勉強しようと思っても最近のフロントエンドにどこから入ればいいかすらまったくわからなくて、Javascriptの動画講座を眺めて首をかしげたりReactのチュートリアルでToDoアプリを作らされていやただ普通のサイトを作りたいのにどうしてこんなものを…って途方に暮れたりNext.jsのチュートリアルを眺めてるだけで気が遠くなったりなんだりで……。
そもそも、メモ帳でホームページをつくろう!みたいな時代に得た知識をベースにつぎはぎで生きてきたので、現代ではなにががどうなっているのか本当に右も左もわからず…。
今思えば「最近のフロントエンド技術を学びたい」ではなく「今やってる手打ちサイトを今どきの方法で無理なく作り直すには」ってChatGPTくんに聞けばよかったんだろうなーと。なにがわからないのかもなにがわかればいいのかもわからないレベルだったのでしょうがないんですが…。
それにしてもhtmlとcssとjsの基礎の次にだいたいReactを勧められる雰囲気なのおかしくない!?
フロントエンドを学ぶ=プロとして仕事にしたいだと思われているのか…。昔はそれこそメモ帳でサイトつくるような趣味の素人向けの講座がいっぱいあったのに…!そりゃ個人サイトつくるのハードル高いとか言われるよなあ…と身をもって実感しました。
静的サイトなら実際だいぶ適当でも問題ないんだからみんなもっと適当にサイト作っていいと思うんだけど…。そういう見た目のサイトを小馬鹿にする風潮も根強いしなんだかなー…と迷走を終えてけっこうおもいました。
でもReactを通っておいたおかげでAstroのコンポーネントとかPropsまわりにすんなりなじめたというのもあるので、迷走も多少は必要だったのかもしれない…。
Tailwind
CSSをその場にパパっと書けるやつ。
あっという間にこれがないと何も書きたくない人間になり果ててしまった。堕落……人間は楽なほうに流れる……!
Tailwindなど不要!な人の意見は至極もっともだと思う反面、クラス名考えなくていいしクラス名をどうつけてたか覚えておかなくていいし、htmlとcss見比べなくていいし(これが自分にはいちばん大きい)、適当に書いたcssがわけのわからないところに作用してわけのわからないことになることもほぼなくなったし、reset.cssは結局どれを使えばいいんだよ…とか悩む必要もないし、本当に…本当に助かる…。
ありがとう…きみはメモ帳(に類似するエディタ)には今までいなかった存在だ…。今回開発環境を変えていちばんありがたみを感じているのが間違いなくTailwindです。クラス名がどれだけズラズラ長くなってもいい、そこにその場で書けるのならば…!そこしか見なくて済むのならば…!
daisyUI
そしてdaisyUIにも感謝。
Tailwindを入れてこれを入れるとなんか簡単にいいかんじのボタンとかが作れるんだ!すごいぜ!(このくらいの理解で使っています)
まあ用意されたコンポーネントをそのまま使えばいいところを好きなようになんやかやいじっててあんまり意味がないような気も薄々しているんですけど…。
どうしてセンスがないのがわかっているのに自分で色やデザインを決めたがるんですか?だ、だってここわたしのサイトだからわたしがぜんぶ決めたいじゃん…!?
とは言えダークモードがそんなに難しくなく実装できたのはdaisyUIのおかげです!いやほんと言うと変なところで結構つっかかったけど…結局仕様への理解が足りなかっただけだったので…。
git
お恥ずかしながら、今までgitというやつを触っては投げ出しまた調べては投げ出しし続けており、なにが便利なのかもピンと来ず、まともに活用したことがありませんでした。
今回Dropbox的なクラウドも繋がってない別のPCでも作業したいな~と思ったことでようやく「データのやりとりがめんどくさすぎる」という動機が発生して、ぬるっと使い始めることに成功しました。めちゃくちゃ便利じゃねーかこれ!!
一応githubを使ってはいるんですが、まだ難しいことはなにひとつしてなくてgitそれ自体の能力に感動している最中です。
ぶっちゃけなんもわかってないけどVScodeの拡張機能入れて~、なんか変えたらその説明書いてコミットして~、変更の同期ってボタンを押せばそれで同期される!すごーい!とっても便利!
石器時代から昨日転生してきたんですか?
履歴が残ってると一体なんだって言うんだ…とずっと思っていたんですが、実際変えたとこ見比べてパッと戻せるのめっちゃ便利じゃん…。全然知らんかった…。
コミットするときにコメント書かないといけないのも、なにがしたくていじったのか意識させられるので良いですね。
いっぺんに説明できないことは分けてコミットするようになるので、タスクの細分化みたいなのを無意識に考えさせられるというか。まずこれだけやってコミットして、そのあとで次のことやろうとか無意識にできるようになってきた。気が散らなくて良い……。
そのほか
こちらのブログにはだいぶ助けていただきました。ありがとうございます!
どこかからリンクされる予定もないのに、無駄にOGP画像が記事ごとに生成されるようにしてしまった。やったらできるもんだから楽しくなっちゃってつい…。
なんならサイトのバナーもsatoriで作っています。画像いじるの苦手なのでもうこのほうがいい…。
でもsatoriでTailwind使おうとするとVScode上ではエラー扱いになってインテリセンスも効かず、結局styleで書くしかなくてつらかったです。まだExperimentalだからなんだろうけども。
あとgridレイアウトばっか使ってたところにsatoriではflexしか使えませんって言われてうわ~なにもわからん!ってなった(gridも特にわかっているわけではない)(基本なにもわからない)
デプロイ先?
ここはさくらインターネットのレンタルサーバーです(察してほしい)
いやほんとはなんかしらのデプロイサービスも試してみたかったんですけど…。SSGでビルドしたやつをふつうにFTPでアップロードしています。はい。
別のサイトで長いことさくらのサブドメ使ってるのでさくらの契約は切れないし、このサイトにはzipとかゲーム本体とかも置いときたいので…。まあこれ以上いっぺんに新しいことをするのも大変だから、ひとまずはこれでいいかな~と思っている。
アップロードを差分だけにして自動化する方法はこれから考える予定です。このブログを気軽に更新できるようにするためにも…。
ゲ製はどうした
サイトまわりがもうちょい落ち着いたらそのうちやります(大の字)
ここ1年くらいweb上になにかを発信する気力自体がほぼなくなっていたので、とりあえずリハビリ兼ねて面白かったゲームの感想とか書いとくか~くらいのところから始めようかと…。
リハビリというのは自分以外の人間がいつかどこかで読むかもしれない文章を書くためのリハビリである。自分しか読まないもの(日記とか作業メモとか)は毎日書いてるんですけどね。やっぱりそれは大して脳みそを使わないで書いてるから、自分の記憶としてはもうあんまり残らないので…。
自分以外のだれかが読むかもしれない文章として書いておけば、あとから自分が読んでもなんか外部記憶的に作用して内部のもちゃんと蘇るんだよなあ。どういう仕組みなのかよくわかんないけど…。
というわけでここはブログと銘打ってはありますが実際ただの雑記の類いです。長文が書ける見出し付きのてがろぐくらいの気持ちです。よろしくお願いします。
自サイトは良いぞ
やっぱりこういうだらだらしたやくたいもないことを抵抗なくつらつら書けるのは自分のサイトだけなんだよなあ!
しずかなインターネットでも全然無理だったしほんとちゃんと自分の欲しいサイト作り直せてよかった~!わーい!いえーい!快適!!