ブログを作った
こんにちは、Irihiです。
ブログを作りました。YouTubeを見ながらダラダラとこの記事を書いています。
割と長いこと作ろうと思っていたのを今やっと作ったわけです（やっぱりSpotifyで音楽を聞くことにしました）。
開発中のテスト的な意味も込めてこの記事の前に2つ記事を投稿しています。
- ほげほげ
- Hello World
何なんですかね。
...まぁテストだから良いんですが、いや、Hello Worldはいいんです。
きちんと画像が設定されてて、記事の中身もブログで使えそうないろんな要素（表とか）をちゃんとテストしています。
ほげほげって何
いや、どうでも良いですよね。でもいらないじゃないですか。テストなんてHello Worldでほぼ終わっているので。
中も大した内容書いてないし...
こんな感じで更新します。
いろんなことをやってみたいね。
うん。ほんとにどうでも良い。何なんですかね。後で消そうかな。
技術構成
（曲が変わりました）
簡単に技術構成でも説明しようと思います。
使った技術を並べてるとこんな感じ。
- Newt
- Next.js
- Cloudflare Pages
- Tailwind CSS
- CSS Modules
- TypeScript
Jamstackという感じですね。
ソースコードはirhdevel/portfolio: My Portfolio Websiteにおいてあります。
うーん。Newt、Markdownでの執筆時にSpotifyの埋め込みがチカチカしますね。
プレビューを消して書くことにします。
Newt - ヘッドレスCMS
構成によって結構色々と体験がやっぱり変わってくると思うので一部だけでも説明しておきますね。
まずはNewtから。
これはヘッドレスCMSと言って...という説明はここを読んでいる方ならわかるのかもしれないですが。
簡単に言うと見た目には作用せず、ただ記事の文章の構造を最小限に表現したHTMLとか、またはJSONとか、ブログの画面を作るときに必要な情報のみを配信することのできるCMSで、CMSっていうのはWordみたいにGUIで簡単に記事の執筆＆管理をできる場所です。
執筆終わって公開したら情報のみ取得できるようになるわけですね。そしたらフロントエンドの技術でいい感じに情報をまとめて、画面にきれいにまとめて表示する。そう言うためのCMSです。WordpressなんかはたいていWordpressだけ入れれば情報だけじゃなくて普通にサイトとして見れますよね。そうは行かないやつです。
なんでNewt？
日本では多分ヘッドレスCMSで有名なもので言うと、microCMSとかがあって、まぁ海外にも色々魅力的なものはあるんですが、今回なぜNewtを選んだかって言うと、パット見のUIの綺麗さが大きいです。
ホームページを見てもらうと若干UIの雰囲気はわかると思います。
多分ダークモードに対応してないのでそこは残念ですが、Notionのようなきれいな雰囲気はありますし、要素ホバー時の効果とか色の使い方とかアニメーションとか、MicroCMSとはまた違ったUIの綺麗さがあると思ったのでなんとなくでNewtにした感じです。
余白の使い方も余裕ある感じですよね。Newt。多分Notionの良いところはとても取り入れたようなデザインだと思うんですが、Newtだけにある良い改良というか、きれいな部分があると思います。
あまりNewtのレビューがきちんとできるほど使い込んでいるわけでもないので詳しくはかけないのですが、記事一覧の見た目（表示形式）を自由に選べるのはとてもNotion感ありますよね。いい感じの適当な表示形式に設定しておくと見やすいし、とても良いです。
「メディアライブラリ」もいいですね。Wordpressにもこんな機能があったと思います。Misskeyにも。以前にアップロードした画像などをAlt情報やタイトルまで一緒に保存して管理できます。画像の使い回ししたい場合とかがたまにあるので、便利です。
画像だけで管理したいときとか、Alt情報をバンバン追加していきたいときにも役に立ちそうだと思います。
...とは言ってもやっぱりヘッドレスCMSってだいたい殆どは同じようにきちんと記事もかけて、フロントエンド向けに配信もちゃんとできるはずなので、たしかにMicroCMSでもHacoCMSでもkurocoでもContentful、Prismicでもなんでも（他にも色々あるよ！）、どれを選んでもいいと思います。
これは良いことですよね。なので選ぶときは料金と、そして追加機能にUIの綺麗さ、UXなどで選ぶ感じになりますね。あとは信頼性...？
料金には気をつけてくださいね...従量課金とか怖いので......
Next.js - Reactのフレームワーク
とても有名なReact.jsのフレームワークです。
今回はJamstack構成のためにSSG機能を使っています。
選定理由は、これまでに使ったことがあること、そしてJSXを書きたかった、そして知名度の高さとかそのあたりですね。
Astroをちょっと考えたんですが、選ばなかった理由は私がすごいSPA派だったからです。（ここでのSPAはSPA≠CSRで、MPAの対義語ですよ）
ウェブ特有のページ遷移時の挙動が好きではないのと、私がフロントエンドに興味を持ってJSXやVueを書こうと思った理由はSPAを使ったかっこいい動画クリエイターのポートフォリオサイトだから、どうしてもそれに憧れがあるんですよね。
とはいえNextjsには不満は全然あって、これは私が全然技術力が無いからなのかはわからないんですが、App RouterとServer Componentsを激推ししているのはちょっとよくわからないです。
そこまでの速さは求めてないし、React Hooksを使って色々管理したいのに、コイツラはずっとそれを制限しようとしてきて、クライアントサイドで動くJSに魅力を感じてるのに何なんだよってずっと思っています。
私がやっぱり技術無いせいでここに引っかかるんですかね？もう諦めてapp/layout.tsxから"use client"なRLayout.tsxをインポートして（app/layout.tsxで"use client"するとMetadataオブジェクトの扱いでかなりだるくなるというかできん）一番基礎の部分からClient Componentsにしてしまいました。これじゃNext v13の恩恵があんまり受けられてませんね。
今後はSvelte&Sveltekitとか評判良さそうで気になってます。
Cloudflare Pages - 公開するためのサーバ的なもの
これは料金がただなのに凄い色々できて（リクエスト無制限）感動しています。
しかも確か商用利用も無料。日本にサーバもあるし、CDNもあるので速い、簡単にアナリティクスをつけられる（Cloudflare Web Analytics | Cloudflare）し、本当に便利です。
ドメインはこのサービスで無料で割りあえてもらえるpages.devのサブドメインを使っていますが、独自ドメインがほしいですね。
Tailwind CSS - CSSを楽に書くため
楽にCSSを書くことができます。基本的にやることはCSSと同じです。作りたいものを想像して、CSSを書くのと同じで、別に作りたいもの（ボタンなど）のスタイルが事前に用意されてるとかじゃ全然ないです。
なので自由が効きますし、私自身CSSは好きでやってきているので、とても便利に使っています。
CSSのクラス名を考えないで済むようになりますし、ファイルを分ける必要もなく、とても楽に書けるようになるので、Next.jsを使うときは一緒に使っています。
CSSのプロパティ名はこれを使ってもそこまで忘れませんね。
CSS Modules
Tailwindだと物足りないときはCSS Modulesを使うことで普通にCSSを書くのとほとんど同じようにCSSを書くこともできます。
しかもクラス名はかぶらないように自動で作られるので、別のコンポーネントに当てたCSSと被る心配は無いです。
ただ自動生成のCSSもTailwindもやっぱり、UserStylesを使う人には厳しいですよね...
TypeScript - 型のついたJavascript
Javascriptを使っていたフロントエンドでも、Nodeを使うバックエンドでも、最近はTypescriptがよく使われていると聞きます。
実際に型がどれくらい安全でないコードを防いでくれるとか、そういうことはあまり実感もないしあまりこのブログを作るときには意識してないです（型を自動生成するとか確かそういう機能とかあったと思いますがそういうのほんとにわからない）が、開発体験はとてもいいです。
型がつくと、エディタによる補完がかなり強力に手助けしてくれるようになる印象です。偶にめんどくさくなってanyで済ませることもあったんですが（多分だめ）、それがあってもTypescriptは便利でした。いい時代ですね。
今後の展望＆考えてること
記事を書きながら音楽を聞いています。今はこれが流れてる。
ここまでダラダラと技術構成とかその話をしてきましたが、ブログを作ったのは良い、何を書くのかは重要なはず。
今後の進化とか記事とか、そういう話は大事ですよね。ちょっとだけその話も...
記事はそこまで上がらないはず。
残念なのかはわからないですが、記事はそこまで上がらないでしょう。
これは私のYouTubeチャンネル(動画等は非公開にしました。偽物などに注意してください。)を見ればわかる通り、定期的に更新したりするの凄い苦手なので、かなりの不定期かつゆっくり更新となるはずです。
YouTubeの動画も定期的にクオリティの高い、見たくなるような動画を上げられれば成長するのだろうなと思うのですが、やはりそれをするのは全然！簡単じゃないと思います。定期更新をしているみなさんはほんとに凄いと思います。
内容は気分
これは大体のブログで共通していると思いますが、私も内容はいろんなことをその時の気分で色々と書いていきたいと思っています。
もしかしたら何か食べた報告があるかもしれないし、旅行したことを書くかもしれないし、いつもTwitter(アカウントは削除しました。偽物などに注意してください。)(Twitterですよ。いや、Twitterですから。え？)やFediverse(アカウント削除済み)で呟いてるようなLinuxのこと、デザインに動画のこととかそういうことをまとめて書くこともあるでしょう。
あんまり面白い記事とか、読んでて楽しい記事とかはかけないような気はするし、書くことも全然上手くないと思うので、温かい目で見てほしいと思います。お願いしますね。
ブログのデザイン/パフォーマンス向上＆新機能
色々とニュースメディアやブログは見てきましたし、UI/UXにはいろいろ思うことがあるので、やっぱりこのブログは快適に読めるように作りたい。
何も気にせず楽にダラダラと読んでほしい。そういう意味で、いろんな読みやすさを考えたデザインや新機能をどんどん追加して、より良い感じのサイトにしたいなと思っています。
せっかくヘッドレスCMS使っててフロントエンド自分で書けますからね。
広告＆アナリティクス
広告はブログを書く上でモチベーションにもつながるのかなとか思いながら検討していましたが、貼るつもりは無いです。
これは私が個人的に今のインターネット上のバナー広告が好きではないことが一番大きくて、正確に検証したわけではないものの一つでも貼るとサイトにパフォーマンス上の問題が生じるのではないか心配があるからです。
広告をクリックしたことは私はほぼ無いですし、不快な広告も多い中で、そんなものが自分のサイトを汚すのは気分がよくありません。
アナリティクスは導入しました。
今はCloudflare Web Analyticsを使用しています。Google Analyticsなども考えましたが、現状はしばらくこれで行こうと思います。
そんなに大規模でも無いただの個人サイトですし、プライバシー的なこともあるので、これくらいで丁度いいのかなと思っています。Cloudflare Web Analytics、BOT除外の機能あるようなので、割とちゃんとページビューとか見れそうですよね。
Google Analyticsを勉強するのもなんか違う気がしますし。
超圧縮して動画とか貼りたい
せっかくだから動画とかも貼ってみたいなと考え中です。SVT-AV1を使ってAV1に変換した自分の動画が低速な回線でもある程度見れるのがわかって、個人の動画とかはAV1に変換してくれないYouTubeのかわりに貼ってみてもいいかなとか思っています。
そんなの需要ないだろというのはそうだと思うんですが、せっかく個人サイトなんだから、需要気にせず、好き勝手使っていきたいですね。
このブログのデザインは色んなところから学んで使ってるよ
例えばMSNニュースの記事ページとか、Wantedlyの記事ページとか、「読みやすいデザインってなんだろうな〜」と考えて作ってみたブログなんです。
肝心の記事がたくさんあって魅力的じゃないとこんなの意味はなくなるとは確かに思うんですが、サイトづくりは楽しいですね。そんなこと考えずにどんどん作っちゃいますね。
多分私のこの文章も下手だろうし、どれくらいの人が面白いとこんな記事を読んでくれるのかもわからないんですけど、そんな方がいるなら、その人にはきれいに読みやすく見せたい。
見づらいとかがあれば、ぜひTwitter(アカウント削除済み。偽物などに注意してください。)などでフィードバックを送ったりしてみてください。大歓迎です。
n-bunaさんの曲は良い。
ダラダラと思ってることを書いてみたこの記事もそろそろ書くことも尽きてきた気がします。
ラジオみたいな終わらせ方しようとしていますが、、そう！今記事書きながらn-bunaさんの曲が流れてたんですよ。良いですよね。とても好きな雰囲気です。ぜひ聞いてみてね。
最近はデカビタとかをよく飲んでいます。美味しいです。
...書くこと、もう無いか......
こんな記事でも最後まで読んでくれる方はいるんですかね。いたならありがとう。これでおしまいです。ありがとう。
...あ、ここで終わりです。そうそう。このサイトフッターがないんだ。作らなきゃな。
