Astro
nilferumは激怒した。必ず、かの邪智暴虐のHTMLを除かなければならぬと決意した。
｢HTMLは、人を殺します。｣
｢なぜ殺すのだ。｣
｢OGPが必要だというのですが、誰もそんな、OGPを書きたくはありませぬ。｣
｢たくさんの繰り返しをさせたのか。｣
｢はい、はじめはtitleを。それから、descriptionを。それから、navを。｣
<title>タイトル</title>
<meta property="og:title" content="タイトル">
<meta name="twitter:title" content="タイトル"><meta name="description" content="サイトの説明">
<meta property="og:description" content="サイトの説明">
<meta name="twitter:description" content="サイトの説明"><header>
<nav class="navigation-drawer">
<ul>
<li><a href="/about">about</a></li>
<li><a href="/menu">menu</a></li>
<li><a href="/map">map</a></li>
<li><a href="/contact">contact</a></li>
</ul>
</nav>
</header>
<footer>
<nav class="footer-nav">
<ul>
<li><a href="/about">about</a></li>
<li><a href="/menu">menu</a></li>
<li><a href="/map">map</a></li>
<li><a href="/contact">contact</a></li>
</ul>
</nav>
</footer><div class="grid-container">
<div class="grid-item">
<h3 class="grid-item__heading">チョコミント</h3>
<p class="grid-item__description"></p>
<span class="grid-item__price"></span>
</div>
<div class="grid-item">
<h3 class="grid-item__heading">ストロベリーフレーバー</h3>
<p class="grid-item__description"></p>
<span class="grid-item__price"></span>
</div>
<div class="grid-item">
<h3 class="grid-item__heading">クッキーアンドクリーム</h3>
<p class="grid-item__description"></p>
<span class="grid-item__price"></span>
</div>
</div>｢おどろいた。全部おんなじやんけ。｣
閑話休題
書いていてつまらないなと思ったのでやめましょう。
人間は怠惰なもので｢繰り返しを避けよう、ついでに変更に強い設計にしたろ！｣という方に悪知恵が働くもので、たまたまNode.jsが手元にあったのでAstroを導入してしまいました。
だって一行だしコピペするほどの文字数もないですしね、うんうん仕方ない。
npm create astro@latestたった一行。
人間を堕落させるにはあまりにも短い。
そしてそのままy/nとEnterを押すだけで始まっちゃいました。
拍子抜けするくらい簡単に始まったAstroライフ。
何が良かった？
そこそこ凝ったブログが作れる、しかも簡単でメンテナンスフリー。
CLIを触るいい機会。
極めて乱暴、かつ個人的な感想に落とし込むとこんな感じです。
ただこんな雑な感想を言っても毒にも薬にもならないので、もう少し掘り下げて行きましょう。
ここからオタク特有の早口が始まります。
｢ブログが作れる、｣の部分
爆速です。フォントサブセット化してセルフホスティング、CSSのカスタマイズやコーディングを含めて完成まで5時間も掛かりませんでした。
というのも、AstroはブログテンプレートなどもMITライセンスで公開してくださってる方が多いので、ある程度完成像に近いイメージのものを見つければ、そこから多少手直しや自分好みのカスタマイズを詰めていくだけでサイト自体は完成するんですよね。
古き良きレンタルブログサービスやTumblr、WordPressの時代を思い出しました。やめろ俺の名前でググるんじゃない
｢そこそこ凝った｣の部分
前セクションと重なる内容ですが、スタイリングや構造部分について触れていきましょう。
このサイト自体もSelf Esteemというテンプレートを元に細かい箇所を詰めていった形です。
見比べたら結構わかりやすいと思うんですが、カラーやWebフォント自体は完全に差し替えており、CSSグリッド自体もテンプレートから編集を加えています。
当然それにともなってfont-sizeやfont-weight、line-heightも調整を加えているんですが、目の前に叩き台として使えるテンプレートがあるからこそ、より自分好みにカスタマイズしたデザインをイメージしやすく、数字で扱えるから作業が滞ることなくある程度のクオリティのものは作りやすかったです。
｢しかも簡単｣の部分
導入がめちゃくちゃ簡単です。
英語は読めないと困るんですが、逆に言うとそれだけ……と言いたいところですが、正直ちょっと盛りました。人によってはハードルが少し上がるかもしれません。
まずCLIを触る機会があります。
さっき「CLIを触るいい機会」とポジティブに書きましたが、裏を返すとCLIを触る必要があります。黒い画面にコマンドを打つアレに「うっ」となる人は、最初の一歩を踏み出すのに気合がいるらしいです。
ただ自分はややギークな嗜好を持ったゲーマーです、平たく言えばオタク。
Call of Duty: Black OpsでPS3のコントローラーからぽちぽちlsだのdirだの打ち込んではゲーム内の暗号をdecodeしたり、FFXIVのmanaサーバーのIPアドレスを探してPingを打って数字の変動にニヤニヤしたり、シンボリックリンクを設定してキャラクターコンフィグを同期させたり、この辺の忌避感は薄かった人間です。多少はそういうバイアスがあるかもしれません。
ただ、逆に言えばその程度――ほんの初歩の初歩――の知識で触れられます。
付け加えると、こういう記事ページは.mdで書いてます。Discordで太字にするやつ。
書く時にHTMLタグだの属性だの細かいところを気にせず書ける、WordPressやTumblrの良いところを(部分的ながら)セルフホスティングのブログで取り入れることが出来るので、書きたいことに集中してキーボードを叩けばいい。これがめちゃくちゃ快適。
むしろブログをブラウザ経由で長時間書いてると1万年に1回くらいブラウザがフリーズして記事をイチから書き直しになるんで発狂しちゃいますよね。しません？
｢メンテナンスフリー。｣の部分
なんと、headを自動で挿入してくれます。神。
ちょっと嘘つきました。
正確にはheadに渡す情報の中身(タイトル、説明文)自体は書かなければいけないのですし、それに必要な型(componentファイル)も必要ですが、逆にそれを一度書いてしまえば解決。
こういうのを｢型｣として管理出来ると、何か一箇所の変更を加えたら、対応する一箇所のみを変更すればいいという｢対応関係｣が整理されていくので、メンテナンスの手間を最小限にできます。
とは言えこの辺は実際に運用を続けないと見えない箇所でもあるので、あくまで｢想定上ではメンテナンスが簡単｣という弱めの主張になってしまいますが。
ブログという性質上、結局｢やりたいこと｣というものの大部分が｢記事の執筆｣を占めるわけで、個別ページのOGPとかスタイリングだとかはただの作業になってしまいがち。
言い換えればmetaタグの中身やフッター・ヘッダーのnavの中身なんかは関心の外側に移りがちなので、タイポやコピペしてそのままにしがち、ミスを生みやすい諸悪の根源、邪智暴虐の王なんですよね。
あと、多分やろうと思えばAPI経由で多少TypeScript書くだけで、｢Notionで書いたらそのままブログに記事がアップロード｣みたいなことも出来ると思います。この辺がっつりやる気があれば試してみたいです。
｢CLIを触るいい機会｣の部分
wingetがとても便利でした(小並感)
これに関しては書くとめちゃくちゃ脱線しまくったり長くなりそうなのでまた改めて書きたいです。
ということでサイトを立ち上げたのでテスト記事です。
なまじ感動が大きかったため、今後のやりたいこと、面白かったことは沢山あるのですが、それを手短に説明することができなかったためあえて次回の記事の種として温存しつつ、今後の記事で掘り下げていきたいと思います。